Blitz - WPT: CSSStyleSheet-constructable-concat.html

wpt / css / cssom / CSSStyleSheet-constructable-concat.html

/css/cssom/CSSStyleSheet-constructable-concat.html

<!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>

/css/cssom/CSSStyleSheet-constructable-concat-ref.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>Adoptedstylesheets.concat should work when starting empty</title>
<link rel="author" href="mailto:masonf@chromium.org">

<span>This should be green</span><br>
<span>This should be green</span>
<pre>Tests:
PASS
PASS
PASS
PASS
</pre>

<style>
  span {
    background-color:green;
  }
</style>