diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-anchor-position/at-position-try-invalidation.html')
-rw-r--r-- | testing/web-platform/tests/css/css-anchor-position/at-position-try-invalidation.html | 61 |
1 files changed, 61 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-anchor-position/at-position-try-invalidation.html b/testing/web-platform/tests/css/css-anchor-position/at-position-try-invalidation.html new file mode 100644 index 0000000000..3f7c5062f2 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/at-position-try-invalidation.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning Test: Dynamically change @position-try rules</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#fallback-rule"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + body { margin: 0; } + + #anchor { + anchor-name: --a; + margin-left: 100px; + width: 100px; + height: 100px; + } + + #anchored { + position: absolute; + width: 100px; + height: 100px; + position-try-options: --pf; + left: 999999px; /* force fallback */ + } +</style> + +<style id="to-enable" media="print"> + @position-try --pf { + left: anchor(--a left); + } +</style> + +<div> + <div id="anchor">anchor</div> + <div id="anchored">anchored</div> +</div> + +<script> + test(() => { + assert_equals(anchored.offsetLeft, 999999); + }, "position-try-options initially not matching any rules"); + + test(() => { + document.getElementById("to-enable").media = ""; + assert_equals(anchored.offsetLeft, 100); + }, "Enable @position-try rule stylesheet"); + + const sheet = document.getElementById("to-enable").sheet; + + test(() => { + sheet.insertRule( + `@position-try --pf { + left: anchor(--a right); + }`, 1); + assert_equals(anchored.offsetLeft, 200); + }, "Insert overriding @position-try rule"); + + test(() => { + sheet.disabled = "true"; + assert_equals(anchored.offsetLeft, 999999); + }, "Disable the @position-try rules"); + +</script> |