| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>CSS Color Level 4: Parsing and serialization of colors using valid Lab notation</title> |
| <link rel="help" href="https://drafts.csswg.org/css-color-4/#lab-colors"> |
| <link rel="help" href="https://drafts.csswg.org/css-color-4/#resolving-lab-lch-values"> |
| <link rel="help" href="https://drafts.csswg.org/css-color-4/#resolving-oklab-oklch-values"> |
| <link rel="help" href="https://drafts.csswg.org/css-color-4/#serializing-lab-lch"> |
| <link rel="help" href="https://drafts.csswg.org/css-color-4/#serializing-oklab-oklch"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/css/support/parsing-testcommon.js"></script> |
| </head> |
| <body> |
| <script> |
| |
| // lab() |
| test_valid_value("color", "lab(0 0 0)", "lab(0 0 0)"); |
| test_valid_value("color", "lab(0 0 0 / 1)", "lab(0 0 0)"); |
| test_valid_value("color", "lab(0 0 0 / 0.5)", "lab(0 0 0 / 0.5)"); |
| test_valid_value("color", "lab(20 0 10/0.5)", "lab(20 0 10 / 0.5)"); |
| test_valid_value("color", "lab(20 0 10/50%)", "lab(20 0 10 / 0.5)"); |
| test_valid_value("color", "lab(400 0 10/50%)", "lab(400 0 10 / 0.5)"); |
| test_valid_value("color", "lab(50 -160 160)", "lab(50 -160 160)"); |
| test_valid_value("color", "lab(50 -200 200)", "lab(50 -200 200)"); |
| test_valid_value("color", "lab(0 0 0 / -10%)", "lab(0 0 0 / 0)"); |
| test_valid_value("color", "lab(0 0 0 / 110%)", "lab(0 0 0)"); |
| test_valid_value("color", "lab(0 0 0 / 300%)", "lab(0 0 0)"); |
| test_valid_value("color", "lab(-40 0 0)", "lab(0 0 0)"); |
| test_valid_value("color", "lab(50 -20 0)", "lab(50 -20 0)"); |
| test_valid_value("color", "lab(50 0 -20)", "lab(50 0 -20)"); |
| test_valid_value("color", "lab(calc(50 * 3) calc(0.5 - 1) calc(1.5) / calc(-0.5 + 1))", "lab(150 -0.5 1.5 / 0.5)"); |
| test_valid_value("color", "lab(calc(-50 * 3) calc(0.5 + 1) calc(-1.5) / calc(-0.5 * 2))", "lab(0 1.5 -1.5 / 0)"); |
| |
| test_valid_value("color", "lab(none none none / none)", "lab(none none none / none)"); |
| test_valid_value("color", "lab(none none none)", "lab(none none none)"); |
| test_valid_value("color", "lab(20 none none / none)", "lab(20 none none / none)"); |
| test_valid_value("color", "lab(none none none / 0.5)", "lab(none none none / 0.5)"); |
| test_valid_value("color", "lab(0 0 0 / none)", "lab(0 0 0 / none)"); |
| |
| // oklab() |
| test_valid_value("color", "oklab(0 0 0)", "oklab(0 0 0)"); |
| test_valid_value("color", "oklab(0 0 0 / 1)", "oklab(0 0 0)"); |
| test_valid_value("color", "oklab(0 0 0 / 0.5)", "oklab(0 0 0 / 0.5)"); |
| test_valid_value("color", "oklab(20 0 10/0.5)", "oklab(20 0 10 / 0.5)"); |
| test_valid_value("color", "oklab(20 0 10/50%)", "oklab(20 0 10 / 0.5)"); |
| test_valid_value("color", "oklab(400 0 10/50%)", "oklab(400 0 10 / 0.5)"); |
| test_valid_value("color", "oklab(50 -160 160)", "oklab(50 -160 160)"); |
| test_valid_value("color", "oklab(50 -200 200)", "oklab(50 -200 200)"); |
| test_valid_value("color", "oklab(0 0 0 / -10%)", "oklab(0 0 0 / 0)"); |
| test_valid_value("color", "oklab(0 0 0 / 110%)", "oklab(0 0 0)"); |
| test_valid_value("color", "oklab(0 0 0 / 300%)", "oklab(0 0 0)"); |
| test_valid_value("color", "oklab(-40 0 0)", "oklab(0 0 0)"); |
| test_valid_value("color", "oklab(50 -20 0)", "oklab(50 -20 0)"); |
| test_valid_value("color", "oklab(50 0 -20)", "oklab(50 0 -20)"); |
| test_valid_value("color", "oklab(calc(50 * 3) calc(0.5 - 1) calc(1.5) / calc(-0.5 + 1))", "oklab(150 -0.5 1.5 / 0.5)"); |
| test_valid_value("color", "oklab(calc(-50 * 3) calc(0.5 + 1) calc(-1.5) / calc(-0.5 * 2))", "oklab(0 1.5 -1.5 / 0)"); |
| |
| test_valid_value("color", "oklab(none none none / none)", "oklab(none none none / none)"); |
| test_valid_value("color", "oklab(none none none)", "oklab(none none none)"); |
| test_valid_value("color", "oklab(20 none none / none)", "oklab(20 none none / none)"); |
| test_valid_value("color", "oklab(none none none / 0.5)", "oklab(none none none / 0.5)"); |
| test_valid_value("color", "oklab(0 0 0 / none)", "oklab(0 0 0 / none)"); |
| |
| // lch() |
| test_valid_value("color", "lch(0 0 0deg)", "lch(0 0 0)"); |
| test_valid_value("color", "lch(0 0 0deg / 1)", "lch(0 0 0)"); |
| test_valid_value("color", "lch(0 0 0deg / 0.5)", "lch(0 0 0 / 0.5)"); |
| test_valid_value("color", "lch(100 230 0deg / 0.5)", "lch(100 230 0 / 0.5)"); |
| test_valid_value("color", "lch(20 50 20deg/0.5)", "lch(20 50 20 / 0.5)"); |
| test_valid_value("color", "lch(20 50 20deg/50%)", "lch(20 50 20 / 0.5)"); |
| test_valid_value("color", "lch(10 20 20deg / -10%)", "lch(10 20 20 / 0)"); |
| test_valid_value("color", "lch(10 20 20deg / 110%)", "lch(10 20 20)"); |
| test_valid_value("color", "lch(10 20 1.28rad)", "lch(10 20 73.3386)"); |
| test_valid_value("color", "lch(10 20 380deg)", "lch(10 20 20)"); |
| test_valid_value("color", "lch(10 20 -340deg)", "lch(10 20 20)"); |
| test_valid_value("color", "lch(10 20 740deg)", "lch(10 20 20)"); |
| test_valid_value("color", "lch(10 20 -700deg)", "lch(10 20 20)"); |
| test_valid_value("color", "lch(-40 0 0)", "lch(0 0 0)"); |
| test_valid_value("color", "lch(20 -20 0)", "lch(20 0 0)"); |
| test_valid_value("color", "lch(0 0 0 / 0.5)", "lch(0 0 0 / 0.5)"); |
| test_valid_value("color", "lch(10 20 20 / 110%)", "lch(10 20 20)"); |
| test_valid_value("color", "lch(10 20 -700)", "lch(10 20 20)"); |
| test_valid_value("color", "lch(calc(50 * 3) calc(0.5 - 1) calc(20deg * 2) / calc(-0.5 + 1))", "lch(150 0 40 / 0.5)"); |
| test_valid_value("color", "lch(calc(-50 * 3) calc(0.5 + 1) calc(-20deg * 2) / calc(-0.5 * 2))", "lch(0 1.5 320 / 0)"); |
| |
| test_valid_value("color", "lch(none none none / none)", "lch(none none none / none)"); |
| test_valid_value("color", "lch(none none none)", "lch(none none none)"); |
| test_valid_value("color", "lch(20 none none / none)", "lch(20 none none / none)"); |
| test_valid_value("color", "lch(none none none / 0.5)", "lch(none none none / 0.5)"); |
| test_valid_value("color", "lch(0 0 0 / none)", "lch(0 0 0 / none)"); |
| |
| // oklch() |
| test_valid_value("color", "oklch(0 0 0deg)", "oklch(0 0 0)"); |
| test_valid_value("color", "oklch(0 0 0deg / 1)", "oklch(0 0 0)"); |
| test_valid_value("color", "oklch(0 0 0deg / 0.5)", "oklch(0 0 0 / 0.5)"); |
| test_valid_value("color", "oklch(100 230 0deg / 0.5)", "oklch(100 230 0 / 0.5)"); |
| test_valid_value("color", "oklch(20 50 20deg/0.5)", "oklch(20 50 20 / 0.5)"); |
| test_valid_value("color", "oklch(20 50 20deg/50%)", "oklch(20 50 20 / 0.5)"); |
| test_valid_value("color", "oklch(10 20 20deg / -10%)", "oklch(10 20 20 / 0)"); |
| test_valid_value("color", "oklch(10 20 20deg / 110%)", "oklch(10 20 20)"); |
| test_valid_value("color", "oklch(10 20 1.28rad)", "oklch(10 20 73.3386)"); |
| test_valid_value("color", "oklch(10 20 380deg)", "oklch(10 20 20)"); |
| test_valid_value("color", "oklch(10 20 -340deg)", "oklch(10 20 20)"); |
| test_valid_value("color", "oklch(10 20 740deg)", "oklch(10 20 20)"); |
| test_valid_value("color", "oklch(10 20 -700deg)", "oklch(10 20 20)"); |
| test_valid_value("color", "oklch(-40 0 0)", "oklch(0 0 0)"); |
| test_valid_value("color", "oklch(20 -20 0)", "oklch(20 0 0)"); |
| test_valid_value("color", "oklch(0 0 0 / 0.5)", "oklch(0 0 0 / 0.5)"); |
| test_valid_value("color", "oklch(10 20 20 / 110%)", "oklch(10 20 20)"); |
| test_valid_value("color", "oklch(10 20 -700)", "oklch(10 20 20)"); |
| test_valid_value("color", "oklch(calc(50 * 3) calc(0.5 - 1) calc(20deg * 2) / calc(-0.5 + 1))", "oklch(150 0 40 / 0.5)"); |
| test_valid_value("color", "oklch(calc(-50 * 3) calc(0.5 + 1) calc(-20deg * 2) / calc(-0.5 * 2))", "oklch(0 1.5 320 / 0)"); |
| |
| test_valid_value("color", "oklch(none none none / none)", "oklch(none none none / none)"); |
| test_valid_value("color", "oklch(none none none)", "oklch(none none none)"); |
| test_valid_value("color", "oklch(20 none none / none)", "oklch(20 none none / none)"); |
| test_valid_value("color", "oklch(none none none / 0.5)", "oklch(none none none / 0.5)"); |
| test_valid_value("color", "oklch(0 0 0 / none)", "oklch(0 0 0 / none)"); |
| </script> |
| </body> |
| </html> |
