Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 3 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-anchor-position/anchor-scope-dynamic.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>CSS Anchor Positioning: anchor-scope appearing/disappearing dynamically</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
.scope-all { anchor-scope: all; }
.scope-a { anchor-scope: --a; }
.scope-b { anchor-scope: --b; }
.scope-ab { anchor-scope: --a, --b; }
.anchor-a { anchor-name: --a; }
.anchor-b { anchor-name: --b; }
.anchor-a, .anchor-b {
background: skyblue;
height: 10px;
}
.anchored-a { position-anchor: --a; }
.anchored-b { position-anchor: --b; }
.anchored-a, .anchored-b {
position: absolute;
top: anchor(bottom);
left: anchor(left);
width: 5px;
height: 5px;
background: coral;
}
/* Containing block */
main {
position: relative;
width: 100px;
height: 100px;
border: 1px solid black;
}
</style>
<script>
function inflate(t, template_element) {
if (!template_element.hasAttribute('debug')) {
t.add_cleanup(() => main.replaceChildren());
}
main.append(template_element.content.cloneNode(true));
}
</script>
<main id=main>
</main>
<template id=test_scope_all_dynamic>
<div class=anchor-a></div>
<div class=anchor-a></div><!--A (after change)-->
<div id=dynamic>
<div class=anchor-a></div>
<div class=anchor-a></div><!--A (initially)-->
</div>
<div class=anchored-a></div>
</template>
<script>
test((t) => {
inflate(t, test_scope_all_dynamic);
assert_equals(getComputedStyle(main.querySelector('.anchored-a')).top, '40px');
dynamic.style.anchorScope = 'all';
assert_equals(getComputedStyle(main.querySelector('.anchored-a')).top, '20px');
dynamic.style.anchorScope = '';
assert_equals(getComputedStyle(main.querySelector('.anchored-a')).top, '40px');
}, 'anchor-scope:all appearing dynamically');
</script>
<template id=test_scope_named_dynamic>
<div class=anchor-a></div>
<div class=anchor-a></div><!--A (after change)-->
<div id=dynamic>
<div class=anchor-a></div>
<div class=anchor-a></div><!--A (initially)-->
</div>
<div class=anchored-a></div>
</template>
<script>
test((t) => {
inflate(t, test_scope_named_dynamic);
assert_equals(getComputedStyle(main.querySelector('.anchored-a')).top, '40px');
dynamic.style.anchorScope = '--a';
assert_equals(getComputedStyle(main.querySelector('.anchored-a')).top, '20px');
dynamic.style.anchorScope = '';
assert_equals(getComputedStyle(main.querySelector('.anchored-a')).top, '40px');
}, 'anchor-scope:--a appearing dynamically');
</script>
<template id=test_scope_named_unrelated_dynamic>
<div class=anchor-a></div>
<div class=anchor-a></div><!--A (after change)-->
<div id=dynamic>
<div class=anchor-a></div>
<div class=anchor-a></div><!--A (initially)-->
</div>
<div class=anchored-a></div>
</template>
<script>
test((t) => {
inflate(t, test_scope_named_unrelated_dynamic);
assert_equals(getComputedStyle(main.querySelector('.anchored-a')).top, '40px');
dynamic.style.anchorScope = '--b';
assert_equals(getComputedStyle(main.querySelector('.anchored-a')).top, '40px');
dynamic.style.anchorScope = '';
assert_equals(getComputedStyle(main.querySelector('.anchored-a')).top, '40px');
}, 'anchor-scope:--b appearing dynamically (--b never referenced)');
</script>
<template id=test_scope_a_dynamic>
<div class=anchor-b></div>
<div class=anchor-a></div><!--A (after change)-->
<div id=dynamic>
<div class=anchor-b></div><!--B-->
<div class=anchor-a></div><!--A (initially)-->
</div>
<div class=anchored-a></div>
<div class=anchored-b></div>
</template>
<script>
test((t) => {
inflate(t, test_scope_a_dynamic);
assert_equals(getComputedStyle(main.querySelector('.anchored-a')).top, '40px');
assert_equals(getComputedStyle(main.querySelector('.anchored-b')).top, '30px');
dynamic.style.anchorScope = '--a';
assert_equals(getComputedStyle(main.querySelector('.anchored-a')).top, '20px');
assert_equals(getComputedStyle(main.querySelector('.anchored-b')).top, '30px');
dynamic.style.anchorScope = '';
assert_equals(getComputedStyle(main.querySelector('.anchored-a')).top, '40px');
assert_equals(getComputedStyle(main.querySelector('.anchored-b')).top, '30px');
}, 'anchor-scope:--a appearing dynamically scopes only --a');
</script>