CSSStyleSheet-constructable-concat.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/cssom/CSSStyleSheet-constructable-concat.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<html class="reftest-wait">

<meta charset="utf-8">

<title>Adoptedstylesheets.concat should work when starting empty</title>

<link rel="author" href="mailto:masonf@chromium.org">

<link rel="help" href="https://drafts.csswg.org/cssom/#extensions-to-the-document-or-shadow-root-interface">

<link rel="match" href="CSSStyleSheet-constructable-concat-ref.html">

<span>This should be green</span>

<div id=host></div>

<pre id=tests>Tests:

</pre>

<script>

function assert_equals(val1,val2) {

  const t = val1 === val2 ? 'PASS' : `FAIL! ${val1} !== ${val2}`;

  tests.appendChild(document.createTextNode(`${t}\n`));

window.onload = () => {

  const sheet = new CSSStyleSheet();

  sheet.replaceSync('span {background-color:green;}');

  assert_equals(document.adoptedStyleSheets.length,0);

  document.adoptedStyleSheets = document.adoptedStyleSheets.concat([sheet]);

  assert_equals(document.adoptedStyleSheets.length,1);

  const host = document.getElementById('host');

  const shadow = host.attachShadow({mode: 'open'});

  shadow.innerHTML = '<span>This should be green</span>';

  assert_equals(shadow.adoptedStyleSheets.length,0);

  shadow.adoptedStyleSheets = shadow.adoptedStyleSheets.concat([sheet]);

  assert_equals(shadow.adoptedStyleSheets.length,1);

  document.documentElement.classList.remove("reftest-wait");

};

</script>