getComputedStyle-shadow-inherit.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/cssom/getComputedStyle-shadow-inherit.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<meta charset="utf-8">

<title>getComputedStyle() inherits visibility across shadow boundaries</title>

<link rel="help" href="https://drafts.csswg.org/cssom/#dom-window-getcomputedstyle">

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

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

<!-- regression test for https://github.com/jsdom/jsdom/issues/3941 -->

<div id="shadow-root" style="visibility:visible;"></div>

<script>

"use strict";

const shadowRoot =

  document.querySelector("#shadow-root").attachShadow({ mode: "open" });

test(() => {

  shadowRoot.innerHTML = `

    <div class="container">

      <span class="shadow-element-with-inline-style" style="visibility:inherit;"></span>

    </div>

`;

  const innerEl = document.querySelector("#shadow-root").shadowRoot

    .querySelector(".shadow-element-with-inline-style");

  assert_equals(window.getComputedStyle(innerEl).visibility, "visible", "initial value");

  shadowRoot.innerHTML = `

    <div class="container" style="visibility:hidden;">

      <span class="shadow-element-with-inline-style" style="visibility:inherit;"></span>

    </div>

`;

  const innerEl2 = document.querySelector("#shadow-root").shadowRoot

    .querySelector(".shadow-element-with-inline-style");

  assert_equals(window.getComputedStyle(innerEl2).visibility, "hidden", "updated value");

}, "Sanity check");

test(() => {

  shadowRoot.innerHTML = `

    <div class="container">

      <span class="shadow-element-with-inline-style" style="visibility:inherit;"></span>

    </div>

`;

  const innerEl = document.querySelector("#shadow-root").shadowRoot

    .querySelector(".shadow-element-with-inline-style");

  assert_equals(window.getComputedStyle(innerEl).visibility, "visible", "initial value");

  shadowRoot.host.style.visibility = "hidden";

  assert_equals(window.getComputedStyle(innerEl).visibility, "hidden", "updated value");

}, "toggle shadowRoot.host visibility");

</script>