<!DOCTYPE html>
<title>CSS Anchor Positioning: position-area 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>
<!-- The grid:
100 150 150
+--------+--------+--------+
| | | |
150 | | | |
| | | |
+--------+--------+--------+
| | | |
75 | | | |
| | | |
+--------+--------+--------+
| | | |
175 | | | |
| | | |
+--------+--------+--------+
-->
<style>
#container {
position: absolute;
width: 400px;
height: 400px;
}
#anchored {
position: absolute;
align-self: stretch;
justify-self: stretch;
position-anchor: --anchor;
}
#anchor {
margin-top: 150px;
margin-bottom: 175px;
margin-left: 100px;
margin-right: 150px;
width: 150px;
height: 75px;
anchor-name: --anchor;
}
</style>
<div id="container">
<div id="anchored"></div>
<div id="anchor"></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:0, top:0, width:100, height:150};
const top_right = {left:250, top:0, width:150, height:150};
const bottom_left = {left:0, top:225, width:100, height:175};
const bottom_right = {left:250, top:225, width:150, height:175};
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);
test_position_area(writing_direction, "inline-start block-end", bottom_right);
test_position_area(writing_direction, "self-inline-start self-block-end", bottom_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);
test_position_area(writing_direction, "inline-start block-end", top_right);
test_position_area(writing_direction, "self-inline-start self-block-end", bottom_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