CSS color-mix() Web Platform Tests

This file contains comprehensive tests for CSS color-mix() implementation.

0. WPT Dynamic Test Cases

These tests dynamically generate color-mix() cases as in the official WPT color-mix-basic-001.html.

1. Basic Syntax Tests

Basic color mixing

Mixes red and blue in sRGB color space with equal weights

Explicit percentage mixing

Mixes red and blue with explicit 50% weights each

Partial percentage mixing

Mixes red (default 100%) with blue (25%)

Three color mixing

Mixes three colors with specified percentages

2. Color Space Tests

sRGB color space mixing

Mixes colors in sRGB color space (default)

HSL color space mixing

Mixes colors in HSL color space

HSL with alpha mixing

Mixes red with transparent in HSL space

3. Percentage and Weight Tests

30/70 weight split

Mixes red (30%) and blue (70%)

0/100 weight split

Mixes red (0%) and blue (100%)

Default weight mixing

Mixes red (default 100%) with blue (0%)

Uneven weight distribution

Mixes three colors with uneven weights

4. Alpha Channel Tests

Alpha channel mixing

Mixes semi-transparent red and blue

Color with transparent

Mixes red with transparent

Mixed alpha values

Mixes semi-transparent red with blue

Fully transparent mixing

Mixes transparent with transparent

5. Error Handling Tests

Invalid color space

Uses invalid color space 'invalid'

Too many colors

Attempts to mix more than 3 colors

Invalid percentage (over 100%)

Uses percentage over 100%

Negative percentage

Uses negative percentage

Missing color space

Missing 'in' keyword and color space

6. Computed Value Tests

Basic computed value test

Computed value will appear here
Tests computed value of color-mix

HSL computed value test

Computed value will appear here
Tests computed value of HSL color-mix

Alpha computed value test

Computed value will appear here
Tests computed value with alpha channels

7. Edge Cases and Advanced Tests

Same color mixing

Mixes red with red

Color with itself at different weights

Mixes red with red at different weights

Hex color mixing

Mixes hex colors

Named color mixing

Mixes named colors

Mixed color formats

Mixes named color with hex color

8. Nested color-mix() Tests

Nested color-mix() basic

Mixes the result of color-mix(red, blue) with green

Nested color-mix() with percentages

Mixes a weighted purple with green at 50%

9. Missing Components Tests

Mixing with missing alpha

Mixes opaque red with semi-transparent blue

Mixing with both missing alpha

Mixes two opaque colors (no alpha)

10. Edge Percentage Cases

0% and 100% weights

Red 0%, blue 100%

100% and 0% weights

Red 100%, blue 0%

Negative percentage

Red -10%, blue 110%

Percentages over 100%

Red 150%, blue 150%

11. Privacy and :visited Tests (currentColor)

Visited Link

color-mix() with :visited and currentColor

Mixes currentColor (from :visited link) with red

getComputedStyle privacy check

Checks computed style for privacy

12. currentColor in color-mix() (Inheritance and Mixing)

currentColor inherited in color-mix()

Parent color is green, mixes with red

currentColor direct use

Parent color is blue, mixes with yellow

currentColor with alpha

Parent color is semi-transparent red, mixes with blue

currentColor in nested color-mix()

currentColor is orange, nested mix with blue then red