link-rel-attribute.html (1739B)
1 <!DOCTYPE html> 2 <script src = "/resources/testharness.js"></script> 3 <script src = "/resources/testharnessreport.js"></script> 4 5 <link id="light-link" rel="stylesheet" href="resources/link-rel-attribute.css"> 6 <div id="light-div" class="green">I"m green when light DOM link is on</div> 7 8 <div id="host"> 9 I"m green when Shadow DOM link is on 10 <template id="shadow-dom"> 11 <link id="shadow-link" rel="stylesheet" href="resources/link-rel-attribute.css"> 12 <div id="shadow-div" class="green"> 13 <slot></slot> 14 </div> 15 </template> 16 </div> 17 18 <script> 19 20 function testLinkRelModification(testDiv, testLink) { 21 assert_equals(getComputedStyle(testDiv).color, "rgb(0, 128, 0)"); 22 testLink.setAttribute("rel", "no-stylesheet"); 23 assert_equals(getComputedStyle(testDiv).color, "rgb(0, 0, 0)"); 24 testLink.setAttribute("rel", "stylesheet"); 25 assert_equals(getComputedStyle(testDiv).color, "rgb(0, 128, 0)"); 26 testLink.removeAttribute("rel"); 27 assert_equals(getComputedStyle(testDiv).color, "rgb(0, 0, 0)"); 28 } 29 30 test (() => { 31 testLinkRelModification(document.querySelector("#light-div"), 32 document.querySelector("#light-link")); 33 }, "Removing stylesheet from link rel attribute should remove the stylesheet for light DOM"); 34 35 test (() => { 36 var host = document.querySelector("#host"); 37 var shadow = host.attachShadow({ mode: "open" }); 38 var tmpl = document.querySelector("template#shadow-dom"); 39 var clone = document.importNode(tmpl.content, true); 40 shadow.appendChild(clone); 41 testLinkRelModification(shadow.querySelector("#shadow-div"), 42 shadow.querySelector("#shadow-link")); 43 }, "Removing stylesheet from link rel attribute should remove the stylesheet for shadow DOM"); 44 </script>