custom-property-rule-ambiguity.html (2723B)
1 <!DOCTYPE html> 2 <title>CSS Syntax: Rules that look like custom properties</title> 3 <link rel="help" href="https://drafts.csswg.org/css-syntax/#consume-qualified-rule"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 7 <style id=stylesheet1> 8 .a { } 9 --x:hover { } /* Ambiguous "rule" */ 10 .b { } 11 </style> 12 <script> 13 test(() => { 14 let rules = stylesheet1.sheet.rules; 15 assert_equals(rules.length, 2); 16 assert_equals(rules[0].selectorText, '.a'); 17 assert_equals(rules[1].selectorText, '.b'); 18 }, 'Rule that looks like a custom property declaration is ignored'); 19 </script> 20 21 <!-- https://github.com/w3c/csswg-drafts/issues/9336 --> 22 <style id=stylesheet2> 23 .a { } 24 --x:hover { ] } /* Ambiguous "rule" */ 25 .b { } 26 </style> 27 <script> 28 test(() => { 29 let rules = stylesheet2.sheet.rules; 30 assert_equals(rules.length, 2); 31 assert_equals(rules[0].selectorText, '.a'); 32 assert_equals(rules[1].selectorText, '.b'); 33 }, 'Rule that looks like an invalid custom property declaration is ignored'); 34 </script> 35 36 <style id=stylesheet3> 37 div { 38 .a { } 39 --x:hover { } 40 .b { } 41 } 42 </style> 43 <script> 44 test(() => { 45 let rules = stylesheet3.sheet.rules; 46 assert_equals(rules.length, 1); 47 assert_equals(rules[0].selectorText, 'div'); 48 let div = rules[0]; 49 let childRules = div.cssRules; 50 assert_equals(childRules.length, 2); 51 assert_equals(childRules[0].selectorText, '& .a'); 52 assert_true(childRules[1] instanceof CSSNestedDeclarations) 53 let x = childRules[1].style.getPropertyValue('--x'); 54 assert_equals(x.trim(), 'hover { }\n .b { }'); 55 }, 'Nested rule that looks like a custom property declaration'); 56 </script> 57 58 <!-- https://github.com/w3c/csswg-drafts/issues/9336 --> 59 60 <style id=stylesheet4> 61 div { 62 .a { } 63 --x:hover { ] } 64 .b { } 65 } 66 </style> 67 <script> 68 test(() => { 69 let rules = stylesheet4.sheet.rules; 70 assert_equals(rules.length, 1); 71 assert_equals(rules[0].selectorText, 'div'); 72 let div = rules[0]; 73 // There is no valid --x declaration, because mismatched ] is not allowed 74 // in custom properties. 75 let x = div.style.getPropertyValue('--x'); 76 assert_equals(x, ''); 77 // We should also not have restarted parsing as a nested style rule, 78 // and instead we should have "consumed the remnants of a bad declaration", 79 // which skips to the next semicolon (or end-of-block). 80 // So in other words, there should be no nested '.b.' child rule here. 81 let childRules = div.cssRules; 82 assert_equals(childRules.length, 1); 83 assert_equals(childRules[0].selectorText, '& .a'); 84 }, 'Nested rule that looks like an invalid custom property declaration'); 85 </script>