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