at-container-style-serialization.html (1603B)
1 <!doctype html> 2 <title>CSS Container Queries: style() conditionText serialization</title> 3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-queries"> 4 <link rel="help" href="https://drafts.csswg.org/cssom/#serialize-a-css-rule"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="support/cq-testcommon.js"></script> 8 <style id="testSheet"> 9 @container style( --foo:bar) { } 10 @container STyle(--foo: ) { } 11 @container STyle(--foo:) { } 12 @container STyle(--foo) { } 13 @container style( ( --FOO: BAR) OR ( prop: val ) ) { } 14 @container style (--foo: bar) { } 15 @container style(--foo: bar baz) { } 16 @container style(--foo:2.100 ) { } 17 </style> 18 <script> 19 setup(() => { 20 assert_implements_style_container_queries(); 21 assert_equals(testSheet.sheet.cssRules.length, 8); 22 }); 23 24 const tests = [ 25 ["style(--foo: bar)", "Normalize spaces"], 26 ["style(--foo: )", "Empty declaration value - spaces"], 27 ["style(--foo: )", "Empty declaration value"], 28 ["style(--foo)", "No declaration value"], 29 ["style((--FOO: BAR) or ( prop: val ))", "Unknown CSS property after 'or'"], 30 ["style (--foo: bar)", "Not a style function with space before '('"], 31 ["style(--foo: bar baz)", "Spaces preserved in custom property value"], 32 ["style(--foo: 2.100)", "Original string number in custom property value"] 33 ].map((e, i) => [testSheet.sheet.cssRules[i], ...e]); 34 35 tests.forEach((t) => { 36 test(() => assert_equals(t[0].conditionText, t[1]), t[2]); 37 }); 38 </script>