91 lines
3.1 KiB
HTML
91 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<script src="../../resources/js-test-pre.js"></script>
|
|
<style>
|
|
body {
|
|
margin: 0px;
|
|
}
|
|
.narrow_block {
|
|
width: 100px;
|
|
}
|
|
.narrow_block > div {
|
|
background: yellow;
|
|
width: 200px;
|
|
height: 20px;
|
|
border: 1px solid black;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<script>
|
|
description("This tests that HTML alignment behaves as expected when the child overflows its containing block.");
|
|
</script>
|
|
|
|
<!-- Wider blocks inside the LTR block should be left-aligned regardless of align attribute -->
|
|
<div dir="ltr" align="left" class="narrow_block">
|
|
<div dir="rtl" id="rtl_in_ltr_left"></div>
|
|
<div dir="ltr" id="ltr_in_ltr_left"></div>
|
|
</div>
|
|
|
|
<div dir="ltr" align="right" class="narrow_block">
|
|
<div dir="rtl" id="rtl_in_ltr_right"></div>
|
|
<div dir="ltr" id="ltr_in_ltr_right"></div>
|
|
</div>
|
|
|
|
<div dir="ltr" align="center" class="narrow_block">
|
|
<div dir="rtl" id="rtl_in_ltr_center"></div>
|
|
<div dir="ltr" id="ltr_in_ltr_center"></div>
|
|
</div>
|
|
|
|
<!-- Wider blocks inside the RTL block should be right-aligned regardless of align attribute -->
|
|
<div dir="rtl" align="right" class="narrow_block">
|
|
<div dir="rtl" id="rtl_in_rtl_right"></div>
|
|
<div dir="ltr" id="ltr_in_rtl_right"></div>
|
|
</div>
|
|
|
|
<div dir="rtl" align="left" class="narrow_block">
|
|
<div dir="rtl" id="rtl_in_rtl_left"></div>
|
|
<div dir="ltr" id="ltr_in_rtl_left"></div>
|
|
</div>
|
|
|
|
<div dir="rtl" align="center" class="narrow_block">
|
|
<div dir="rtl" id="rtl_in_rtl_center"></div>
|
|
<div dir="ltr" id="ltr_in_rtl_center"></div>
|
|
</div>
|
|
|
|
<script>
|
|
rtl_in_ltr_left = document.getElementById("rtl_in_ltr_left");
|
|
ltr_in_ltr_left = document.getElementById("ltr_in_ltr_left");
|
|
shouldBe("rtl_in_ltr_left.getBoundingClientRect().left", "0");
|
|
shouldBe("ltr_in_ltr_left.getBoundingClientRect().left", "0");
|
|
|
|
rtl_in_ltr_right = document.getElementById("rtl_in_ltr_right");
|
|
ltr_in_ltr_right = document.getElementById("ltr_in_ltr_right");
|
|
shouldBe("rtl_in_ltr_right.getBoundingClientRect().left", "0");
|
|
shouldBe("ltr_in_ltr_right.getBoundingClientRect().left", "0");
|
|
|
|
rtl_in_ltr_center = document.getElementById("rtl_in_ltr_center");
|
|
ltr_in_ltr_center = document.getElementById("ltr_in_ltr_center");
|
|
shouldBe("rtl_in_ltr_center.getBoundingClientRect().left", "0");
|
|
shouldBe("ltr_in_ltr_center.getBoundingClientRect().left", "0");
|
|
|
|
rtl_in_rtl_right = document.getElementById("rtl_in_rtl_right");
|
|
ltr_in_rtl_right = document.getElementById("ltr_in_rtl_right");
|
|
shouldBe("rtl_in_rtl_right.getBoundingClientRect().right", "100");
|
|
shouldBe("ltr_in_rtl_right.getBoundingClientRect().right", "100");
|
|
|
|
rtl_in_rtl_left = document.getElementById("rtl_in_rtl_left");
|
|
ltr_in_rtl_left = document.getElementById("ltr_in_rtl_left");
|
|
shouldBe("rtl_in_rtl_left.getBoundingClientRect().right","100");
|
|
shouldBe("ltr_in_rtl_left.getBoundingClientRect().right","100");
|
|
|
|
rtl_in_rtl_center = document.getElementById("rtl_in_rtl_center");
|
|
ltr_in_rtl_center = document.getElementById("ltr_in_rtl_center");
|
|
shouldBe("rtl_in_rtl_center.getBoundingClientRect().right", "100");
|
|
shouldBe("ltr_in_rtl_center.getBoundingClientRect().right", "100");
|
|
</script>
|
|
<script src="../../resources/js-test-post.js"></script>
|
|
</body>
|
|
</html>
|