DOMParser-parseFromString-stylesheets.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /domparsing/DOMParser-parseFromString-stylesheets.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<meta charset="utf-8">

<title>DOMParser: parseFromString() with stylesheets</title>

<link rel="help" href="https://html.spec.whatwg.org/multipage/dynamic-markup-insertion.html#dom-domparser-parsefromstring">

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

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

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

<script>

"use strict";

test(() => {

  const parser = new DOMParser();

  const doc = parser.parseFromString("<style>div { color: green; }</style>", "text/html");

  assert_equals(doc.styleSheets.length, 1, "Document should have one stylesheet");

}, "DOMParser-created document should have accessible styleSheets collection with one style element");

test(() => {

  const parser = new DOMParser();

  const doc = parser.parseFromString("<style>div { color: green; }</style>", "text/html");

  assert_equals(doc.styleSheets.length, 1, "Document should have one stylesheet");

  const sheet = doc.styleSheets[0];

  assert_true(sheet instanceof CSSStyleSheet, "styleSheets[0] should be a CSSStyleSheet");

}, "DOMParser-created document styleSheets should contain CSSStyleSheet objects");

test(() => {

  const parser = new DOMParser();

  const doc = parser.parseFromString("<style>div { color: green; } p { color: red; }</style>", "text/html");

  assert_equals(doc.styleSheets.length, 1, "Document should have one stylesheet");

  const sheet = doc.styleSheets[0];

  assert_equals(sheet.cssRules.length, 2, "Stylesheet should have two CSS rules");

}, "DOMParser-created document styleSheets should have accessible cssRules");

test(() => {

  const parser = new DOMParser();

  const doc = parser.parseFromString(

    "<style>div { color: green; }</style><style>p { color: red; }</style>",

    "text/html"

);

  assert_equals(doc.styleSheets.length, 2, "Document should have two stylesheets");

}, "DOMParser-created document should expose multiple style elements in styleSheets");

test(() => {

  const parser = new DOMParser();

  const html = `

    <!DOCTYPE html>

    <html>

      <head>

        <style>

          .test { color: blue; }

        </style>

      </head>

      <body>

        <div class="test">Hello</div>

      </body>

    </html>

`;

  const doc = parser.parseFromString(html, "text/html");

  assert_equals(doc.styleSheets.length, 1, "Document should have one stylesheet");

  const sheet = doc.styleSheets[0];

  assert_equals(sheet.cssRules.length, 1, "Stylesheet should have one CSS rule");

  assert_equals(sheet.cssRules[0].selectorText, ".test", "CSS rule should have correct selector");

}, "DOMParser-created document with full HTML structure should have accessible styleSheets");

test(() => {

  const parser = new DOMParser();

  const doc = parser.parseFromString("<div>No styles</div>", "text/html");

  assert_equals(doc.styleSheets.length, 0, "Document without style elements should have empty styleSheets");

}, "DOMParser-created document without style elements should have empty styleSheets collection");

</script>