Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add tests for CSS Color 5 color-contrast()
- Loading branch information
Showing
3 changed files
with
116 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Color 5: Computed value of color-contrast()</title> | ||
| <link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-color-5/#colorcontrast"> | ||
| <meta name="assert" content="computed value of color-contrast() matches expected values"> | ||
| <script src="/resources/testharness.js"></script> | ||
| <script src="/resources/testharnessreport.js"></script> | ||
| <script src="/css/support/computed-testcommon.js"></script> | ||
| </head> | ||
| <body> | ||
| <div id="target"></div> | ||
| <script> | ||
| // Test with no specified target contrast | ||
| test_computed_value(`color`, `color-contrast(white vs red, blue)`, `rgb(0, 0, 255)`); | ||
| test_computed_value(`color`, `color-contrast(white vs blue, red)`, `rgb(0, 0, 255)`); | ||
| test_computed_value(`color`, `color-contrast(white vs red, blue, green)`, `rgb(0, 0, 255)`); | ||
| test_computed_value(`color`, `color-contrast(white vs white, white)`, `rgb(255, 255, 255)`); | ||
| test_computed_value(`color`, `color-contrast(blue vs red, white)`, `rgb(255, 255, 255)`); | ||
| test_computed_value(`color`, `color-contrast(red vs blue, white, red)`, `rgb(255, 255, 255)`); | ||
| test_computed_value(`color`, `color-contrast(black vs red, blue)`, `rgb(255, 0, 0)`); | ||
| test_computed_value(`color`, `color-contrast(black vs blue, red)`, `rgb(255, 0, 0)`); | ||
| test_computed_value(`color`, `color-contrast(black vs white, white)`, `rgb(255, 255, 255)`); | ||
| test_computed_value(`color`, `color-contrast(red vs blue, rgb(255, 255, 255, .5))`, `rgba(255, 255, 255, 0.5)`); | ||
|
|
||
| // Test with specified target contrast. | ||
| test_computed_value(`color`, `color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to AA)`, `rgb(0, 100, 0)`); // darkgreen | ||
| test_computed_value(`color`, `color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to AA-large)`, `rgb(128, 128, 0)`); // olive | ||
| test_computed_value(`color`, `color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to AAA)`, `rgb(128, 0, 0)`); // maroon | ||
| test_computed_value(`color`, `color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to AAA-large)`, `rgb(0, 100, 0)`); // darkgreen | ||
| test_computed_value(`color`, `color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to 5.8)`, `rgb(128, 0, 0)`); // maroon | ||
|
|
||
| // Test with specified target contrast that none meet. | ||
| test_computed_value(`color`, `color-contrast(wheat vs bisque, darkgoldenrod, olive to 100)`, `rgb(0, 0, 0)`); // black | ||
| test_computed_value(`color`, `color-contrast(green vs bisque, darkgoldenrod, olive to 100)`, `rgb(255, 255, 255)`); // white | ||
|
|
||
| // Test non-sRGB colors. | ||
| test_computed_value(`color`, `color-contrast(green vs color(display-p3 0 1 0), color(display-p3 0 0 1))`, `color(display-p3 0 1 0)`); | ||
| test_computed_value(`color`, `color-contrast(color(display-p3 1 1 0) vs color(display-p3 0 1 0), color(display-p3 0 0 1))`, `color(display-p3 0 0 1)`); | ||
| test_computed_value(`color`, `color-contrast(green vs lab(50% -160 160), lch(20% 50 20deg))`, `lch(20% 50 20)`); | ||
| test_computed_value(`color`, `color-contrast(lab(50% -160 160) vs green, lch(20% 50 20deg))`, `lch(20% 50 20)`); | ||
| </script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Color 5: Invalid color-contrast() values</title> | ||
| <link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-color-5/#colorcontrast"> | ||
| <meta name="assert" content="invalid color-contrast() values fail to parse"> | ||
| <script src="/resources/testharness.js"></script> | ||
| <script src="/resources/testharnessreport.js"></script> | ||
| <script src="/css/support/parsing-testcommon.js"></script> | ||
| </head> | ||
| <body> | ||
| <script> | ||
| test_invalid_value(`color-contrast(white vs red)`); | ||
| test_invalid_value(`color-contrast(white vs red,)`); | ||
| test_invalid_value(`color-contrast(white vs )`); | ||
| test_invalid_value(`color-contrast(white)`); | ||
| test_invalid_value(`color-contrast(white vs red green)`); | ||
| test_invalid_value(`color-contrast(white vs red, green to)`); | ||
| test_invalid_value(`color-contrast(white vs red, green to invalid)`); | ||
| test_invalid_value(`color-contrast(white vs red to AA)`); | ||
| </script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>CSS Color 5: Parsing and serialization of color-contrast()</title> | ||
| <link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> | ||
| <link rel="help" href="https://drafts.csswg.org/css-color-5/#colorcontrast"> | ||
| <meta name="assert" content="color-contrast() parses and serializes"> | ||
| <script src="/resources/testharness.js"></script> | ||
| <script src="/resources/testharnessreport.js"></script> | ||
| <script src="/css/support/parsing-testcommon.js"></script> | ||
| </head> | ||
| <body> | ||
| <script> | ||
| // Test with no specified target contrast | ||
| test_valid_value(`color`, `color-contrast(white vs red, blue)`, `rgb(0, 0, 255)`); | ||
| test_valid_value(`color`, `color-contrast(white vs blue, red)`, `rgb(0, 0, 255)`); | ||
| test_valid_value(`color`, `color-contrast(white vs red, blue, green)`, `rgb(0, 0, 255)`); | ||
| test_valid_value(`color`, `color-contrast(white vs white, white)`, `rgb(255, 255, 255)`); | ||
| test_valid_value(`color`, `color-contrast(blue vs red, white)`, `rgb(255, 255, 255)`); | ||
| test_valid_value(`color`, `color-contrast(red vs blue, white, red)`, `rgb(255, 255, 255)`); | ||
| test_valid_value(`color`, `color-contrast(black vs red, blue)`, `rgb(255, 0, 0)`); | ||
| test_valid_value(`color`, `color-contrast(black vs blue, red)`, `rgb(255, 0, 0)`); | ||
| test_valid_value(`color`, `color-contrast(black vs white, white)`, `rgb(255, 255, 255)`); | ||
| test_valid_value(`color`, `color-contrast(red vs blue, rgb(255, 255, 255, .5))`, `rgba(255, 255, 255, 0.5)`); | ||
|
|
||
| // Test with specified target contrast. | ||
| test_valid_value(`color`, `color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to AA)`, `rgb(0, 100, 0)`); // darkgreen | ||
| test_valid_value(`color`, `color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to AA-large)`, `rgb(128, 128, 0)`); // olive | ||
| test_valid_value(`color`, `color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to AAA)`, `rgb(128, 0, 0)`); // maroon | ||
| test_valid_value(`color`, `color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to AAA-large)`, `rgb(0, 100, 0)`); // darkgreen | ||
| test_valid_value(`color`, `color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to 5.8)`, `rgb(128, 0, 0)`); // maroon | ||
|
|
||
| // Test with specified target contrast that none meet. | ||
| test_valid_value(`color`, `color-contrast(wheat vs bisque, darkgoldenrod, olive to 100)`, `rgb(0, 0, 0)`); // black | ||
| test_valid_value(`color`, `color-contrast(green vs bisque, darkgoldenrod, olive to 100)`, `rgb(255, 255, 255)`); // white | ||
|
|
||
| // Test non-sRGB colors. | ||
| test_valid_value(`color`, `color-contrast(green vs color(display-p3 0 1 0), color(display-p3 0 0 1))`, `color(display-p3 0 1 0)`); | ||
| test_valid_value(`color`, `color-contrast(color(display-p3 1 1 0) vs color(display-p3 0 1 0), color(display-p3 0 0 1))`, `color(display-p3 0 0 1)`); | ||
| test_valid_value(`color`, `color-contrast(green vs lab(50% -160 160), lch(20% 50 20deg))`, `lch(20% 50 20)`); | ||
| test_valid_value(`color`, `color-contrast(lab(50% -160 160) vs green, lch(20% 50 20deg))`, `lch(20% 50 20)`); | ||
| </script> | ||
| </body> | ||
| </html> |