<!DOCTYPE html>
<title>Tests logical `anchor` function for `writing-mode`/`direction`s</title>
<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#anchor-pos">
<link rel="author" href="mailto:[email protected]">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
.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; }
.relpos {
position: relative;
outline: blue 1px solid;
}
.spacer {
width: 10px;
height: 10px;
background: yellow;
}
.anchor {
anchor-name: --a1;
margin: 5px;
width: 30px;
height: 30px;
background: orange;
}
.target {
position: absolute;
outline: 5px solid lime;
}
</style>
<body>
<template id="template">
<div class="relpos">
<div class="spacer"></div>
<div class="anchor"></div>
</div>
</template>
<script>
// Generate tests for all combinations.
// The first two entries are the side `start` and `end` should match in x-axis.
// The next two entries are the side `start` and `end` should match in y-axis.
const writingDirs = {
'htb-ltr':['l', 'r', 't', 'b'],
'htb-rtl':['r', 'l', 't', 'b'],
'vrl-ltr':['r', 'l', 't', 'b'],
'vrl-rtl':['r', 'l', 'b', 't'],
'vlr-ltr':['l', 'r', 't', 'b'],
'vlr-rtl':['l', 'r', 'b', 't'],
};
const container = document.body;
const cb_template = template.content.firstElementChild;
for (const [writingDir, matches] of Object.entries(writingDirs)) {
const cb = cb_template.cloneNode(true);
cb.classList.add(writingDir);
createTarget(null, 'left: anchor(--a1 start)', matches[0], cb);
createTarget(null, 'left: anchor(--a1 end)', matches[1], cb);
createTarget(null, 'top: anchor(--a1 start)', matches[2], cb);
createTarget(null, 'top: anchor(--a1 end)', matches[3], cb);
createTarget(writingDir, 'left: anchor(--a1 self-start)', matches[0], cb);
createTarget(writingDir, 'left: anchor(--a1 self-end)', matches[1], cb);
createTarget(writingDir, 'top: anchor(--a1 self-start)', matches[2], cb);
createTarget(writingDir, 'top: anchor(--a1 self-end)', matches[3], cb);
container.appendChild(cb);
}
function createTarget(className, style, match, cb) {
const target = document.createElement('div');
target.classList.add('target');
if (className)
target.classList.add(className);
target.style = style;
target.dataset.name = style;
target.dataset.match = match;
cb.appendChild(target);
}
// Test all `.target`s.
for (const target of document.querySelectorAll('.target')) {
const cb = target.parentElement;
const anchor = cb.querySelector('.anchor');
test(() => {
switch (target.dataset.match) {
case 'l':
assert_equals(anchor.offsetLeft, target.offsetLeft);
break;
case 'r':
assert_equals(anchor.offsetLeft + anchor.offsetWidth, target.offsetLeft);
break;
case 't':
assert_equals(anchor.offsetTop, target.offsetTop);
break;
case 'b':
assert_equals(anchor.offsetTop + anchor.offsetHeight, target.offsetTop);
break;
}
}, `${cb.classList}/${target.classList}/${target.dataset.name}`);
}
</script>
</body>
Codebase Browser
chromium