test_CSSStyleRule_querySelectorAll_scope.html (1130B)
1 <!DOCTYPE html> 2 <!-- 3 https://bugzilla.mozilla.org/show_bug.cgi?id=1980210 4 --> 5 <title>Test for CSSStyleRule::QuerySelectorAll with @scope</title> 6 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 7 <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"/> 8 9 <main id=main></main> 10 11 <template id=test_simple> 12 <style id=s> 13 @scope (.a) { 14 .b { 15 background: green; 16 } 17 } 18 </style> 19 <div class=a> 20 <div id=matched class=b> 21 </div> 22 </div> 23 <div id=notMatched class=b> 24 </div> 25 </template> 26 <script> 27 add_task(async () => { 28 SimpleTest.registerCurrentTaskCleanupFunction(async () => main.replaceChildren()); 29 main.append(test_simple.content.cloneNode(true)); 30 31 const scopeRule = s.sheet.cssRules[0]; 32 const scopedStyleRule = scopeRule.cssRules[0]; 33 34 const result = scopedStyleRule.querySelectorAll(document); 35 is(result.length, 1, `1 element matches "${scopedStyleRule.selectorText}"`); 36 is( 37 result[0].id, 38 "matched", 39 `Got expected id for only element matching "${scopedStyleRule.selectorText}"` 40 ); 41 }); 42 </script>