Back to Repositories

Testing Custom CSS Implementation and Theme Switching in Gradio

This test suite validates custom CSS functionality in the Gradio application, focusing on style application, media queries, and dark mode theming. The tests ensure proper rendering of CSS styles, animations, and responsive design elements across different viewport sizes and color schemes.

Test Coverage Overview

The test suite provides comprehensive coverage of custom CSS implementations in Gradio.

Key areas tested include:

Element rendering and count verification
CSS animation and keyframe rules
Media query responsiveness
Custom font family application
Dark mode style transitions
Imported resource handling

Implementation Analysis

The testing approach utilizes Playwright’s page object model for DOM interaction and style verification. Tests implement viewport manipulation and color scheme emulation to validate responsive design and theme switching. Specific CSS property assertions verify computed styles, animations, and font applications.

Technical patterns include:

Computed style evaluation
Viewport size manipulation
Color scheme emulation
CSS property assertions

Technical Details

Testing tools and configuration:

Test Framework: Custom framework with Playwright integration
Viewport Testing: Dynamic size adjustment (500×720, 1280×720)
Style Verification: getComputedStyle and toHaveCSS assertions
Color Scheme Testing: Media emulation for dark/light modes
Selector Methods: TestId, Role, and CSS selectors

Best Practices Demonstrated

The test suite exemplifies high-quality testing practices through systematic validation of CSS implementations.

Notable practices include:

Isolated test cases for specific CSS features
Comprehensive viewport and media query testing
Explicit style assertions with RGB value verification
Systematic theme switching validation
Accessibility-aware selector usage

gradio-app/gradio

js/spa/test/custom_css.spec.ts

            
import { test, expect } from "@self/tootils";

test("renders the correct elements", async ({ page }) => {
	await expect(page.getByTestId("markdown")).toHaveCount(2);
});

test("applies the custom CSS styles", async ({ page }) => {
	// Test for CSSKeyframesRule
	const animationName = await page
		.locator(".cool-col")
		.evaluate((node) => getComputedStyle(node).animationName);
	expect(animationName).toBe("animation");

	// Test for CSSMediaRule and CSSStyleRule
	await page.setViewportSize({ width: 500, height: 720 });
	await expect(page.locator(".markdown").nth(1)).toHaveCSS(
		"background-color",
		"rgb(0, 0, 255)"
	);
	await expect(page.locator(".markdown p")).toHaveCSS(
		"color",
		"rgb(173, 216, 230)"
	);

	await page.setViewportSize({ width: 1280, height: 720 });
	await expect(page.locator(".markdown").nth(1)).toHaveCSS(
		"background-color",
		"rgb(173, 216, 230)"
	);
	await expect(page.locator(".markdown p")).toHaveCSS(
		"color",
		"rgb(65, 105, 225)"
	);
});

test("applies the custom font family", async ({ page }) => {
	await expect(
		page.getByRole("heading", { name: "Gradio Demo with Custom CSS" })
	).toHaveCSS("font-family", "test-font");
});

test("applies resources from the @import rule", async ({ page }) => {
	await expect(page.getByText("Resize the browser window to")).toHaveCSS(
		"font-family",
		'"Protest Riot", sans-serif'
	);
});

test(".dark styles are applied corrently", async ({ page }) => {
	await page.emulateMedia({ colorScheme: "dark" });

	await expect(page.locator(".markdown").nth(1)).toHaveCSS(
		"background-color",
		"rgb(255, 192, 203)"
	);
	await expect(page.locator(".darktest h3")).toHaveCSS(
		"color",
		"rgb(255, 255, 0)"
	);

	await page.emulateMedia({ colorScheme: "light" });

	await expect(page.locator(".markdown").nth(1)).toHaveCSS(
		"background-color",
		"rgb(173, 216, 230)"
	);
	await expect(page.locator(".darktest h3")).toHaveCSS(
		"color",
		"rgb(39, 39, 42)"
	);
});