at-scope-relative-syntax.html (2299B)
1 <!doctype html> 2 <title>@scope and Nesting: Parsing inner style rules with relative selector syntax</title> 3 <link rel="help" href="https://drafts.csswg.org/css-cascade-6/#scoped-rules"> 4 <link rel="help" href="https://drafts.csswg.org/css-nesting/#nesting"> 5 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/10196"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <main id=main></main> 9 <script> 10 function create_rule_string(prelude, inner) { 11 if (prelude.length === 0) { 12 return `${inner} {}`; 13 } 14 let outermost = prelude[0]; 15 let rest = create_rule_string(prelude.slice(1), inner); 16 return `${outermost} { ${rest} }`; 17 } 18 19 function create_rule_by_string(style, prelude, inner) { 20 style.textContent = create_rule_string(prelude, inner); 21 } 22 23 function create_rule_by_insertion(style, prelude, inner) { 24 let current = style.sheet; 25 for (const p of prelude) { 26 let idx = current.insertRule(`${p} {}`); 27 current = current.cssRules[idx]; 28 } 29 current.insertRule(`${inner} {}`); 30 } 31 32 function innermost_selector(depth, rules) { 33 let r = rules; 34 let d = depth + 1; 35 while (d != 0) { 36 assert_equals(r.cssRules.length, 1); 37 r = r.cssRules[0]; 38 d--; 39 } 40 return r.selectorText; 41 } 42 43 const create_method = { 44 "string": create_rule_by_string, 45 "insertRule": create_rule_by_insertion, 46 }; 47 48 function test_inner(prelude, method, actual, expected) { 49 if (expected === undefined) { 50 expected = actual; 51 } 52 test(t => { 53 t.add_cleanup(() => main.replaceChildren()); 54 const style = document.createElement('style'); 55 main.append(style); 56 create_method[method](style, prelude, actual); 57 const innerSelector = innermost_selector(prelude.length, style.sheet); 58 assert_equals(innerSelector, expected); 59 }, `${actual} in ${prelude} created by ${method} valid`); 60 } 61 62 for (const method of Object.keys(create_method)) { 63 test_inner(['@scope' , '.nest'], method, '> .foo', '& > .foo'); 64 test_inner(['.nest', '@scope'], method, '> .foo'); 65 66 test_inner(['@scope' , '.nest', '@media screen'], method, '> .foo', '& > .foo'); 67 test_inner(['.nest', '@scope', '@media screen'], method, '> .foo'); 68 } 69 </script>