link-rel-attribute.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /html/semantics/document-metadata/the-link-element/link-rel-attribute.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<script src = "/resources/testharness.js"></script>

<script src = "/resources/testharnessreport.js"></script>

<link id="light-link" rel="stylesheet" href="resources/link-rel-attribute.css">

<div id="light-div" class="green">I"m green when light DOM link is on</div>

<div id="host">

  I"m green when Shadow DOM link is on

  <template id="shadow-dom">

    <link id="shadow-link" rel="stylesheet" href="resources/link-rel-attribute.css">

    <div id="shadow-div" class="green">

      <slot></slot>

    </div>

  </template>

</div>

<script>

function testLinkRelModification(testDiv, testLink) {

  assert_equals(getComputedStyle(testDiv).color, "rgb(0, 128, 0)");

  testLink.setAttribute("rel", "no-stylesheet");

  assert_equals(getComputedStyle(testDiv).color, "rgb(0, 0, 0)");

  testLink.setAttribute("rel", "stylesheet");

  assert_equals(getComputedStyle(testDiv).color, "rgb(0, 128, 0)");

  testLink.removeAttribute("rel");

  assert_equals(getComputedStyle(testDiv).color, "rgb(0, 0, 0)");

test (() => {

  testLinkRelModification(document.querySelector("#light-div"),

                          document.querySelector("#light-link"));

}, "Removing stylesheet from link rel attribute should remove the stylesheet for light DOM");

test (() => {

  var host = document.querySelector("#host");

  var shadow = host.attachShadow({ mode: "open" });

  var tmpl = document.querySelector("template#shadow-dom");

  var clone = document.importNode(tmpl.content, true);

  shadow.appendChild(clone);

  testLinkRelModification(shadow.querySelector("#shadow-div"),

                          shadow.querySelector("#shadow-link"));

}, "Removing stylesheet from link rel attribute should remove the stylesheet for shadow DOM");

</script>