test_getMatchingCSSRules_slotted.html (1750B)
1 <!DOCTYPE html> 2 <title>Test getMatchingCSSRules for pseudo elements</title> 3 <script src="/tests/SimpleTest/SimpleTest.js"></script> 4 <link rel="stylesheet" href="/tests/SimpleTest/test.css"> 5 6 <div id="host"> 7 <test-element id="test1" slot="slot1">test1</test-element> 8 <test-element id="test2" slot="slot2">test2</test-element> 9 </div> 10 11 <script> 12 const host = document.getElementById("host"); 13 const shadow = host.attachShadow({ mode: "open" }); 14 shadow.innerHTML = ` 15 <style> 16 #outer ::slotted(test-element) { 17 color: red; 18 } 19 </style> 20 <div id="outer"> 21 <slot name="slot1"></slot> 22 </div> 23 <div id="nested"> 24 <slot name="slot2"></slot> 25 </div> 26 `; 27 28 const nested = shadow.querySelector("#nested").attachShadow({ mode: "open" }); 29 nested.innerHTML = ` 30 <style> 31 #inner ::slotted(test-element) { 32 font-weight: bold; 33 } 34 </style> 35 <div id="inner"> 36 <slot></slot> 37 </div> 38 `; 39 40 const InspectorUtils = SpecialPowers.InspectorUtils; 41 42 function checkElementRules(id, text, property) { 43 const element = document.getElementById(id); 44 let slottedRules = InspectorUtils.getMatchingCSSRules(element); 45 is(slottedRules.length, 1, "Slotted element has expected number of rules."); 46 47 let slottedText = slottedRules[0].cssText; 48 ok(slottedText.includes(text), "Slotted node has expected style content."); 49 ok(slottedText.includes(property), "Has expected property."); 50 } 51 52 info("Check that slotted rules are retrieved"); 53 checkElementRules("test1", "#outer ::slotted(test-element)", "color"); 54 55 info("Check that slotted rules are also retrieved for nested slots"); 56 checkElementRules("test2", "#inner ::slotted(test-element)", "font-weight"); 57 </script>