palette-mix-computed.html (3141B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Serializing of palette-mix() function</title> 6 <link rel="help" href="https://www.w3.org/TR/css-fonts-4/#propdef-font-palette"> 7 <meta name="assert" content="Check serialization of palette-mix() value in computed style"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/css/support/computed-testcommon.js"></script> 11 </head> 12 <body> 13 <style> 14 :root { 15 font-size: 16px; 16 } 17 </style> 18 <div id="target"></div> 19 <script> 20 test_computed_value(`font-palette`, `palette-mix(in oklab, light 30%, dark)`); 21 test_computed_value(`font-palette`, `palette-mix(in oklab, light 30%, light)`, `light`); 22 test_computed_value(`font-palette`, `palette-mix(in oklab, light 30%, normal)`); 23 test_computed_value(`font-palette`, `palette-mix(in oklab, --custom-palette 30%, normal)`); 24 25 // Percentage value serialization 26 test_computed_value(`font-palette`, `palette-mix(in oklab, light 50%, dark 50%)`, `palette-mix(in oklab, light, dark)`); 27 test_computed_value(`font-palette`, `palette-mix(in oklab, light, dark 50%)`, `palette-mix(in oklab, light, dark)`); 28 test_computed_value(`font-palette`, `palette-mix(in oklab, light 50%, dark)`, `palette-mix(in oklab, light, dark)`); 29 test_computed_value(`font-palette`, `palette-mix(in oklab, light, dark)`, `palette-mix(in oklab, light, dark)`); 30 test_computed_value(`font-palette`, `palette-mix(in oklab, light 50%, dark 70%)`, `palette-mix(in oklab, light 50%, dark 70%)`); 31 test_computed_value(`font-palette`, `palette-mix(in oklab, light 70%, dark 70%)`, `palette-mix(in oklab, light 70%, dark 70%)`); 32 test_computed_value(`font-palette`, `palette-mix(in oklab, light, dark 70%)`, `palette-mix(in oklab, light 30%, dark)`); 33 test_computed_value(`font-palette`, `palette-mix(in oklab, light 30%, dark 70%)`, `palette-mix(in oklab, light 30%, dark)`); 34 test_computed_value(`font-palette`, `palette-mix(in oklab, light 60%, dark)`, `palette-mix(in oklab, light 60%, dark)`); 35 test_computed_value(`font-palette`, `palette-mix(in oklab, light 10%, dark 40%)`, `palette-mix(in oklab, light 10%, dark 40%)`); 36 37 // With sign() function 38 test_computed_value(`font-palette`, `palette-mix(in oklab, light calc(sign(1rem - 1px) * 10%), dark calc(sign(1rem - 1px) * 40%))`, `palette-mix(in oklab, light 10%, dark 40%)`); 39 40 41 // Color spaces parsing 42 for (const colorSpace of [ "hsl", "hwb", "lch", "oklch", "lab", "oklab", "srgb", "srgb-linear", "xyz", "xyz-d50", "xyz-d65" ]) { 43 const resultColorSpace = colorSpace == "xyz" ? "xyz-d65" : colorSpace; 44 test_computed_value(`font-palette`, `palette-mix(in ${colorSpace}, light 10%, dark)`, `palette-mix(in ${resultColorSpace}, light 10%, dark)`); 45 } 46 47 // Nested palette-mix() 48 test_computed_value(`font-palette`, `palette-mix(in oklab, palette-mix(in srgb, light 30%, normal) 20%, dark)`); 49 test_computed_value(`font-palette`, `palette-mix(in oklab, palette-mix(in srgb, light 30%, normal) 30%, palette-mix(in srgb, --custom-palette 30%, dark))`); 50 </script> 51 </body> 52 </html>