| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>CSS Color Module Level 3: parsing color with invalid values</title> |
| <link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> |
| <link rel="help" href="https://www.w3.org/TR/css-color-3/#color0"> |
| <meta name="assert" content="color supports only the grammar '<color>'."> |
| <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", "auto"); |
| test_invalid_value("color", "123"); |
| test_invalid_value("color", "#12"); |
| test_invalid_value("color", "#123456789"); |
| test_invalid_value("color", "rgb"); |
| test_invalid_value("color", "rgb(1)"); |
| test_invalid_value("color", "rgb(1,2,3,4,5)"); |
| test_invalid_value("color", "hsla(1,2,3,4,5)"); |
| test_invalid_value("color", "rgb(10%, 20, 30%)"); |
| test_invalid_value("color", "rgba(-2, 300, 400%, -0.5)"); |
| test_invalid_value("color", "rgb(none, none, none)"); |
| test_invalid_value("color", "rgba(none, none, none, none)"); |
| test_invalid_value("color", "rgb(128, 0, none)"); |
| test_invalid_value("color", "rgb(255, 255, 255, none)"); |
| test_invalid_value("color", "hsl(none, none, none)"); |
| test_invalid_value("color", "hsla(none, none, none, none)"); |
| test_invalid_value("color", "hsl(none, 100%, 50%)"); |
| test_invalid_value("color", "hsla(120, 100%, 50%, none)"); |
| test_invalid_value("color", "hwba(120 30% 50%)"); |
| test_invalid_value("color", "hwba(120 30% 50% / 0.5)"); |
| |
| for (const colorSpace of [ "srgb", "srgb-linear", "a98-rgb", "rec2020", "prophoto-rgb" ]) { |
| test_invalid_value("color", `color(${colorSpace} 0 0 0 0)`); |
| test_invalid_value("color", `color(${colorSpace} 0deg 0% 0)`); |
| test_invalid_value("color", `color(${colorSpace} 0% 0 0 1)`); |
| test_invalid_value("color", `color(${colorSpace} 0% 0 0 10%)`); |
| test_invalid_value("color", `color(${colorSpace} 0% 0 0deg)`); |
| test_invalid_value("color", `color(${colorSpace} 0% 0% 0deg)`); |
| test_invalid_value("color", `color(${colorSpace} 40% 0 0deg)`); |
| } |
| |
| for (const colorSpace of [ "xyz", "xyz-d50", "xyz-d65" ]) { |
| test_invalid_value("color", `color(${colorSpace} 0 0 0 0)`); |
| test_invalid_value("color", `color(${colorSpace} 0deg 0% 0)`); |
| test_invalid_value("color", `color(${colorSpace} 0% 0 0)`); |
| test_invalid_value("color", `color(${colorSpace} 0% 0 0 1)`); |
| test_invalid_value("color", `color(${colorSpace} 0% 0 0 10%)`); |
| test_invalid_value("color", `color(${colorSpace} 0% 0 0deg)`); |
| test_invalid_value("color", `color(${colorSpace} 0% 0% 0deg)`); |
| test_invalid_value("color", `color(${colorSpace} 40% 0 0deg)`); |
| } |
| |
| for (const colorSpace of [ "lab", "oklab" ]) { |
| test_invalid_value("color", `${colorSpace}(0% 0 0 1)`); |
| test_invalid_value("color", `${colorSpace}(0% 0 0 10%)`); |
| test_invalid_value("color", `${colorSpace}(0% 0 0deg)`); |
| test_invalid_value("color", `${colorSpace}(0% 0% 0deg)`); |
| test_invalid_value("color", `${colorSpace}(40% 0 0deg)`); |
| test_invalid_value("color", `color(${colorSpace} 20% 0 10 / 50%)`); |
| } |
| |
| for (const colorSpace of [ "lch", "oklch" ]) { |
| test_invalid_value("color", `${colorSpace}(20% 10 10deg 10)`); |
| test_invalid_value("color", `${colorSpace}(20% 10 10deg 10 / 0.5)`); |
| test_invalid_value("color", `color(${colorSpace} 20% 0 10 / 50%)`); |
| } |
| </script> |
| </body> |
| </html> |
