<!DOCTYPE html>
<title>CSS Anchor Positioning: position-area positioning - alignment with writing-mode and direction</title>
<link rel="help" href="https://drafts.csswg.org/css-anchor-position/#position-area">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
/* A 300x300 container with a 100x100 centered anchor */
#container {
position: relative;
width: 300px;
height: 300px;
}
#anchor {
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
anchor-name: --anchor;
}
#anchored {
position: absolute;
width: 10px;
height: 10px;
inset: 10px;
position-anchor: --anchor;
}
</style>
<div id="container">
<div id="anchor"></div>
<div id="anchored"></div>
</div>
<script>
function test_position_area(writing_direction, position_area, expected_offsets) {
anchored.style.positionArea = position_area;
test(() => {
assert_equals(anchored.offsetLeft, expected_offsets.left, "Checking offsetLeft");
assert_equals(anchored.offsetTop, expected_offsets.top, "Checking offsetTop");
assert_equals(anchored.offsetWidth, expected_offsets.width, "Checking offsetWidth");
assert_equals(anchored.offsetHeight, expected_offsets.height, "Checking offsetHeight");
}, "Offsets for: " + position_area + " with writing-mode / direction: " + writing_direction);
}
const top_left = {left:80, top:80, width:10, height:10};
const top_right = {left:210, top:80, width:10, height:10};
const bottom_left = {left:80, top:210, width:10, height:10};
const bottom_right = {left:210, top:210, width:10, height:10};
anchored.style.writingMode = "horizontal-tb";
anchored.style.direction = "ltr";
// Writing-mode and direction on container
let writing_direction = "containing-block: horizontal-tb / rtl";
container.style.writingMode = "horizontal-tb";
container.style.direction = "rtl";
test_position_area(writing_direction, "start start", top_right);
test_position_area(writing_direction, "self-start self-start", top_left);
test_position_area(writing_direction, "x-start y-start", top_right);
test_position_area(writing_direction, "x-self-start y-self-start", top_left);
// containing-block: vertical-lr / ltr
// self: horizontal-tb / ltr
writing_direction = "containing-block: vertical-lr / ltr";
container.style.writingMode = "vertical-lr";
container.style.direction = "ltr";
test_position_area(writing_direction, "start start", top_left);
test_position_area(writing_direction, "self-start self-start", top_left);
test_position_area(writing_direction, "x-start y-start", top_left);
test_position_area(writing_direction, "x-self-start y-self-start", top_left);
// containing-block: vertical-lr / rtl
// self: horizontal-tb / ltr
writing_direction = "containing-block: vertical-lr / rtl";
container.style.writingMode = "vertical-lr";
container.style.direction = "rtl";
test_position_area(writing_direction, "start start", bottom_left);
test_position_area(writing_direction, "self-start self-start", top_left);
test_position_area(writing_direction, "x-start y-start", bottom_left);
test_position_area(writing_direction, "x-self-start y-self-start", top_left);
// containing-block: vertical-rl / ltr
// self: horizontal-tb / ltr
writing_direction = "containing-block: vertical-rl / ltr";
container.style.writingMode = "vertical-rl";
container.style.direction = "ltr";
test_position_area(writing_direction, "start start", top_right);
test_position_area(writing_direction, "self-start self-start", top_left);
test_position_area(writing_direction, "x-start y-start", top_right);
test_position_area(writing_direction, "x-self-start y-self-start", top_left);
// containing-block: vertical-rl / rtl
// self: horizontal-tb / ltr
writing_direction = "containing-block: vertical-rl / rtl";
container.style.writingMode = "vertical-rl";
container.style.direction = "rtl";
test_position_area(writing_direction, "start start", bottom_right);
test_position_area(writing_direction, "self-start self-start", top_left);
test_position_area(writing_direction, "x-start y-start", bottom_right);
test_position_area(writing_direction, "x-self-start y-self-start", top_left);
// Writing-mode and direction on self
container.style.writingMode = "horizontal-tb";
container.style.direction = "ltr";
// containing-block: horizontal-tb / ltr
// self: horizontal-tb / rtl
writing_direction = "self: horizontal-tb / rtl";
anchored.style.writingMode = "horizontal-tb";
anchored.style.direction = "rtl";
test_position_area(writing_direction, "start start", top_left);
test_position_area(writing_direction, "self-start self-start", top_right);
test_position_area(writing_direction, "x-start y-start", top_left);
test_position_area(writing_direction, "x-self-start y-self-start", top_right);
// containing-block: horizontal-tb / ltr
// self: vertical-lr / ltr
writing_direction = "self: vertical-lr / ltr";
anchored.style.writingMode = "vertical-lr";
anchored.style.direction = "ltr";
test_position_area(writing_direction, "start start", top_left);
test_position_area(writing_direction, "self-start self-start", top_left);
test_position_area(writing_direction, "x-start y-start", top_left);
test_position_area(writing_direction, "x-self-start y-self-start", top_left);
// containing-block: horizontal-tb / ltr
// self: vertical-lr / rtl
writing_direction = "self: vertical-lr / rtl";
anchored.style.writingMode = "vertical-lr";
anchored.style.direction = "rtl";
test_position_area(writing_direction, "start start", top_left);
test_position_area(writing_direction, "self-start self-start", bottom_left);
test_position_area(writing_direction, "x-start y-start", top_left);
test_position_area(writing_direction, "x-self-start y-self-start", bottom_left);
// containing-block: horizontal-tb / ltr
// self: vertical-rl / ltr
writing_direction = "self: vertical-rl / ltr";
anchored.style.writingMode = "vertical-rl";
anchored.style.direction = "ltr";
test_position_area(writing_direction, "start start", top_left);
test_position_area(writing_direction, "self-start self-start", top_right);
test_position_area(writing_direction, "x-start y-start", top_left);
test_position_area(writing_direction, "x-self-start y-self-start", top_right);
// containing-block: horizontal-tb / ltr
// self: vertical-rl / rtl
writing_direction = "self: vertical-rl / rtl";
anchored.style.writingMode = "vertical-rl";
anchored.style.direction = "rtl";
test_position_area(writing_direction, "start start", top_left);
test_position_area(writing_direction, "self-start self-start", bottom_right);
test_position_area(writing_direction, "x-start y-start", top_left);
test_position_area(writing_direction, "x-self-start y-self-start", bottom_right);
</script>
Codebase Browser
chromium