diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
| commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
| tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/cssom/adoptedstylesheets-observablearray.html | |
| parent | Initial commit. (diff) | |
| download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip | |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/cssom/adoptedstylesheets-observablearray.html')
| -rw-r--r-- | testing/web-platform/tests/css/cssom/adoptedstylesheets-observablearray.html | 92 |
1 files changed, 92 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/cssom/adoptedstylesheets-observablearray.html b/testing/web-platform/tests/css/cssom/adoptedstylesheets-observablearray.html new file mode 100644 index 0000000000..783a054163 --- /dev/null +++ b/testing/web-platform/tests/css/cssom/adoptedstylesheets-observablearray.html @@ -0,0 +1,92 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Adoptedstylesheets as ObservableArray</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"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<span id=target>Test Span</span> +<div id="divNonConstructed" class="nonConstructed"></div> +<style> + #target {background-color: red;} +</style> + +<script> + +const shadowRootNonConstructed = divNonConstructed.attachShadow({mode:'open'}) +nonConstructedStyle = document.createElement("style"); +shadowRootNonConstructed.appendChild(nonConstructedStyle); +nonConstructedStyle.sheet.insertRule(".nonConstructed { color: red; }", 0); +const nonConstructedStyleSheet = nonConstructedStyle.sheet; + +function assert_is(targetStyle, color) { + assert_equals(targetStyle.getPropertyValue('background-color'), color); +} + +function testRoot(d, targetStyle) { + const red = 'rgb(255, 0, 0)'; + const green = 'rgb(0, 255, 0)'; + const blue = 'rgb(0, 0, 255)'; + + const sheet1 = new CSSStyleSheet(); + sheet1.replaceSync('#target {background-color:lime !important;}'); + const sheet2 = new CSSStyleSheet(); + sheet2.replaceSync('#target {background-color:blue !important;}'); + assert_equals(d.adoptedStyleSheets.length, 0); + assert_is(targetStyle, red); + + d.adoptedStyleSheets = [sheet1]; + assert_equals(d.adoptedStyleSheets.length, 1); + assert_is(targetStyle, green); + + d.adoptedStyleSheets.push(sheet2); + assert_equals(d.adoptedStyleSheets.length, 2); + assert_is(targetStyle, blue); + + d.adoptedStyleSheets.pop(); + assert_equals(d.adoptedStyleSheets.length, 1); + assert_is(targetStyle, green); + + d.adoptedStyleSheets.push(sheet2); + d.adoptedStyleSheets.reverse(); + assert_equals(d.adoptedStyleSheets.length, 2); + assert_is(targetStyle, green); + + d.adoptedStyleSheets.splice(1, 1); + assert_equals(d.adoptedStyleSheets.length, 1); + assert_is(targetStyle, blue); + d.adoptedStyleSheets.splice(0, 1, sheet1); + assert_equals(d.adoptedStyleSheets.length, 1); + assert_is(targetStyle, green); + + // Adding non-constructed stylesheet to AdoptedStyleSheets is not allowed. + assert_throws_dom('NotAllowedError', () => { document.adoptedStyleSheets.push(nonConstructedStyleSheet); }); + + assert_throws_js(TypeError, () => { document.adoptedStyleSheets.push("foo"); }); +} + +test(function() { + const target = document.querySelector('#target'); + const targetStyle = window.getComputedStyle(target); + testRoot(document, targetStyle); +}, "document.adoptedStyleSheets should allow mutation in-place"); + +test(function() { + const host = document.createElement('div'); + document.body.appendChild(host); + const shadow = host.attachShadow({mode: 'open'}); + shadow.innerHTML = '<span id=target>Test Shadow Span</span><style>#target{background-color: red;}</style>'; + const target = shadow.querySelector('#target'); + const targetStyle = window.getComputedStyle(target); + testRoot(shadow, targetStyle); +}, "shadowRoot.adoptedStyleSheets should allow mutation in-place"); + +test(function() { + assert_true(Array.isArray(document.adoptedStyleSheets)); + const host = document.createElement('div'); + document.body.appendChild(host); + const shadow = host.attachShadow({mode: 'open'}); + assert_true(Array.isArray(shadow.adoptedStyleSheets)); +}, "adoptedStyleSheets should return true for isArray()"); +</script> |