diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-anchor-position/at-position-try-cssom.html')
-rw-r--r-- | testing/web-platform/tests/css/css-anchor-position/at-position-try-cssom.html | 61 |
1 files changed, 61 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-anchor-position/at-position-try-cssom.html b/testing/web-platform/tests/css/css-anchor-position/at-position-try-cssom.html new file mode 100644 index 0000000000..d4a1f4fa24 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/at-position-try-cssom.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<title>Tests the CSSOM interfaces of @position-try rules</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#interfaces"> +<link rel="author" href="mailto:xiaochengh@chromium.org"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<div id="anchor"></div> +<div id="not-anchor"></div> +<div id="target"></div> + +<script> +function createStyle(t, text) { + const style = document.createElement('style'); + style.textContent = text; + t.add_cleanup(() => style.remove()); + document.head.appendChild(style); + return style; +} + +test(t => { + const style = createStyle( + t, '@position-try --pf { left: anchor(right); }'); + const positionTryRule = style.sheet.cssRules[0]; + assert_true(positionTryRule instanceof CSSPositionTryRule); + assert_equals(positionTryRule.name, '--pf'); + assert_true(positionTryRule.style instanceof CSSStyleDeclaration); + assert_equals(positionTryRule.style.length, 1); + assert_equals(positionTryRule.style.left, 'anchor(right)'); +}, 'CSSPositionTryRule attribute values'); + +test(t => { + const style = createStyle(t, ` + @position-try --pf { top: anchor(top); left: 0; } + #anchor, #not-anchor, #target { + position: absolute; width: 100px; height: 100px; + } + #anchor { top: 100px; left: 0; anchor-name: --a; } + #not-anchor { top: 200px; left: 0; anchor-name: --b; } + #target { position-try-options: --pf; anchor-default: --a; left: 999999px; } + `); + const positionTryRule = style.sheet.cssRules[0]; + + // Check the initial position fallback result + assert_equals(target.getBoundingClientRect().left, 0); + assert_equals(target.getBoundingClientRect().top, 100); + + // `left` is an allowed property in `@position-try` and should affect position fallback. + positionTryRule.style.setProperty('left', 'anchor(right)'); + assert_equals(target.getBoundingClientRect().left, 100); + assert_equals(target.getBoundingClientRect().top, 100); + + // These properties are disallowed in `@position-try` rule, and hence should not affect + // position fallback. + positionTryRule.style.setProperty('anchor-default', '--b'); + positionTryRule.style.setProperty('position', 'static'); + assert_equals(target.getBoundingClientRect().left, 100); + assert_equals(target.getBoundingClientRect().top, 100); +}, 'CSSPositionTryRule.style.setProperty setting allowed and disallowed properties'); + +</script> |