tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

DOMParser-parseFromString-stylesheets.html (3052B)

      1 <!DOCTYPE html>
      2 <meta charset="utf-8">
      3 <title>DOMParser: parseFromString() with stylesheets</title>
      4 <link rel="help" href="https://html.spec.whatwg.org/multipage/dynamic-markup-insertion.html#dom-domparser-parsefromstring">
      5 <link rel="help" href="https://drafts.csswg.org/cssom/#dom-document-stylesheets">
      6 <script src="/resources/testharness.js"></script>
      7 <script src="/resources/testharnessreport.js"></script>
      8 <script>
      9 "use strict";
     10 
     11 test(() => {
     12  const parser = new DOMParser();
     13  const doc = parser.parseFromString("<style>div { color: green; }</style>", "text/html");
     14 
     15  assert_equals(doc.styleSheets.length, 1, "Document should have one stylesheet");
     16 }, "DOMParser-created document should have accessible styleSheets collection with one style element");
     17 
     18 test(() => {
     19  const parser = new DOMParser();
     20  const doc = parser.parseFromString("<style>div { color: green; }</style>", "text/html");
     21 
     22  assert_equals(doc.styleSheets.length, 1, "Document should have one stylesheet");
     23  const sheet = doc.styleSheets[0];
     24  assert_true(sheet instanceof CSSStyleSheet, "styleSheets[0] should be a CSSStyleSheet");
     25 }, "DOMParser-created document styleSheets should contain CSSStyleSheet objects");
     26 
     27 test(() => {
     28  const parser = new DOMParser();
     29  const doc = parser.parseFromString("<style>div { color: green; } p { color: red; }</style>", "text/html");
     30 
     31  assert_equals(doc.styleSheets.length, 1, "Document should have one stylesheet");
     32  const sheet = doc.styleSheets[0];
     33  assert_equals(sheet.cssRules.length, 2, "Stylesheet should have two CSS rules");
     34 }, "DOMParser-created document styleSheets should have accessible cssRules");
     35 
     36 test(() => {
     37  const parser = new DOMParser();
     38  const doc = parser.parseFromString(
     39    "<style>div { color: green; }</style><style>p { color: red; }</style>",
     40    "text/html"
     41  );
     42 
     43  assert_equals(doc.styleSheets.length, 2, "Document should have two stylesheets");
     44 }, "DOMParser-created document should expose multiple style elements in styleSheets");
     45 
     46 test(() => {
     47  const parser = new DOMParser();
     48  const html = `
     49    <!DOCTYPE html>
     50    <html>
     51      <head>
     52        <style>
     53          .test { color: blue; }
     54        </style>
     55      </head>
     56      <body>
     57        <div class="test">Hello</div>
     58      </body>
     59    </html>
     60  `;
     61  const doc = parser.parseFromString(html, "text/html");
     62 
     63  assert_equals(doc.styleSheets.length, 1, "Document should have one stylesheet");
     64  const sheet = doc.styleSheets[0];
     65  assert_equals(sheet.cssRules.length, 1, "Stylesheet should have one CSS rule");
     66  assert_equals(sheet.cssRules[0].selectorText, ".test", "CSS rule should have correct selector");
     67 }, "DOMParser-created document with full HTML structure should have accessible styleSheets");
     68 
     69 test(() => {
     70  const parser = new DOMParser();
     71  const doc = parser.parseFromString("<div>No styles</div>", "text/html");
     72 
     73  assert_equals(doc.styleSheets.length, 0, "Document without style elements should have empty styleSheets");
     74 }, "DOMParser-created document without style elements should have empty styleSheets collection");
     75 
     76 </script>