176 lines
7.6 KiB
HTML
176 lines
7.6 KiB
HTML
<!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>
|