set-selector-text.html (1824B)
1 <!DOCTYPE html> 2 <title>CSS Nesting: Mutating selectorText of outer rule</title> 3 <link rel="help" href="https://drafts.csswg.org/css-nesting/"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style id=style> 7 </style> 8 <main style="container-type:size;width:50px;height:50px"> 9 <div class=a> 10 <div class=x></div> 11 </div> 12 <div class=b> 13 <div class=x></div> 14 </div> 15 </main> 16 <script> 17 let cases = [ 18 ['style', '.a { & .x { z-index: 1; } }'], 19 ['@media', '.a { @media (width) { & .x { z-index: 1; } } }'], 20 ['@supports', '.a { @supports (width:1px) { & .x { z-index: 1; } } }'], 21 ['@layer', '.a { @layer foo { & .x { z-index: 1; } } }'], 22 ['@container', '.a { @container (width) { & .x { z-index: 1; } } }'], 23 ['@scope', '.a { @scope (&) { & .x { z-index: 1; } } }'], 24 ['nested decl.', '.a { & .x { .y { } z-index: 1; } } '], 25 ]; 26 27 for (let [test_name, style_text] of cases) { 28 test((t) => { 29 t.add_cleanup(() => { style.textContent = ''; }); 30 style.textContent = style_text; 31 let ax = document.querySelector('.a > .x'); 32 let bx = document.querySelector('.b > .x'); 33 assert_equals(getComputedStyle(ax).zIndex, '1', 34 'z-index of "ax" element before selectorText mutation'); 35 assert_equals(getComputedStyle(bx).zIndex, 'auto', 36 'z-index of "bx" element before selectorText mutation'); 37 style.sheet.cssRules[0].selectorText = '.b'; 38 assert_equals(getComputedStyle(ax).zIndex, 'auto', 39 'z-index of "ax" element after selectorText mutation'); 40 assert_equals(getComputedStyle(bx).zIndex, '1', 41 'z-index of "bx" element after selectorText mutation'); 42 }, `Outer selectorText text mutation with inner ${test_name} rule`); 43 } 44 </script>