<!DOCTYPE html>
<title>Tests `anchor` function for `writing-mode`/`direction`s</title>
<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#propdef-anchor-name">
<link rel="author" href="mailto:[email protected]">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script><style>
:root, body {
margin: 0;
}
#container {
position: relative;
width: 600px;
height: 400px;
}
#a1 {
anchor-name: --a1;
background: orange;
margin-left: 100px;
margin-top: 100px;
width: 100px;
height: 100px;
}
.htb-rtl #a1 { margin-right: 400px; }
.vlr-rtl #a1 { margin-bottom: 200px; }
.vrl-ltr #a1 { margin-right: 400px; }
.vrl-rtl #a1 { margin-right: 400px; margin-bottom: 200px; }
#a2 {
anchor-name: --a2;
background: purple;
margin-left: 500px;
margin-top: 100px;
width: 100px;
height: 100px;
}
.vlr-ltr #a2 { margin-left: 300px; margin-top: 300px; }
.vlr-rtl #a2 { margin-left: 300px; margin-top: 300px; }
.vrl-ltr #a2 { margin-right: -600px; margin-top: 300px; }
.vrl-rtl #a2 { margin-right: -600px; margin-top: 300px; }
#target {
background: green;
position: absolute;
left: anchor(--a1 right);
top: anchor(--a1 bottom);
right: anchor(--a2 left);
bottom: anchor(--a2 top);
}
.htb-ltr { writing-mode: horizontal-tb; direction: ltr; }
.htb-rtl { writing-mode: horizontal-tb; direction: rtl; }
.vlr-ltr { writing-mode: vertical-lr; direction: ltr; }
.vlr-rtl { writing-mode: vertical-lr; direction: rtl; }
.vrl-ltr { writing-mode: vertical-rl; direction: ltr; }
.vrl-rtl { writing-mode: vertical-rl; direction: rtl; }
</style>
<body>
<div id="container">
<div id="a1"></div>
<div id="a2"></div>
<div id="target"></div>
</div>
<script>
const classes = [
'htb-ltr', 'htb-rtl',
'vlr-ltr', 'vlr-rtl',
'vrl-ltr', 'vrl-rtl'];
const combinations = [];
for (const container_class of classes) {
for (const a1_class of classes) {
for (const a2_class of classes) {
for (const target_class of classes) {
combinations.push([container_class, a1_class, a2_class, target_class]);
}
}
}
}
for (let i = 0; i < combinations.length; ++i)
run_test_index(i);
function run_test_index(i) {
const combination = combinations[i];
run_test(i, ...combination);
}
function run_test(i, container_class, a1_class, a2_class, target_class) {
container.classList.add(container_class);
a1.classList.add(a1_class);
a2.classList.add(a2_class);
target.classList.add(target_class);
test(() => {
const bounds = target.getBoundingClientRect();
assert_array_equals(
[bounds.left, bounds.top, bounds.right, bounds.bottom],
[200, 200, 500, 300]);
}, `${i}: ${container_class}/${a1_class}/${a2_class}/${target_class}`);
container.classList.remove(container_class);
a1.classList.remove(a1_class);
a2.classList.remove(a2_class);
target.classList.remove(target_class);
}
</script>
</body>
Codebase Browser
chromium