<!DOCTYPE html>
<style>
div>div{background:lime;width:100px;height:20px;border:1px solid green}
</style>
<script src="../../resources/js-test.js"></script>
<body style="width:700px;margin:0px">
<!-- Boxes inside the left-aligned LTR block should be left-aligned -->
<div>
<div dir="rtl" id="rtl_in_ltr"></div>
<div dir="ltr" id="ltr_in_ltr"></div>
</div>
<!-- Boxes inside the right-aligned RTL block should be right-aligned -->
<div dir="rtl">
<div dir="rtl" id="rtl_in_rtl"></div>
<div dir="ltr" id="ltr_in_rtl"></div>
</div>
<!-- Boxes inside the right-aligned LTR block should be right-aligned -->
<div align="right">
<div dir="rtl" id="rtl_in_ltr_r"></div>
<div dir="ltr" id="ltr_in_ltr_r"></div>
</div>
<!-- Boxes inside the left-aligned RTL block should be left-aligned -->
<div dir="rtl" align="left">
<div dir="rtl" id="rtl_in_rtl_l"></div>
<div dir="ltr" id="ltr_in_rtl_l"></div>
</div>
<script>
rtl_in_ltr = document.getElementById("rtl_in_ltr");
ltr_in_ltr = document.getElementById("ltr_in_ltr");
shouldBe("rtl_in_ltr.getBoundingClientRect().left","0");
shouldBe("ltr_in_ltr.getBoundingClientRect().left","0");
rtl_in_rtl = document.getElementById("rtl_in_rtl");
ltr_in_rtl = document.getElementById("ltr_in_rtl");
shouldBe("rtl_in_rtl.getBoundingClientRect().right","700");
shouldBe("ltr_in_rtl.getBoundingClientRect().right","700");
rtl_in_ltr_r = document.getElementById("rtl_in_ltr_r");
ltr_in_ltr_r = document.getElementById("ltr_in_ltr_r");
shouldBe("rtl_in_ltr_r.getBoundingClientRect().right","700");
shouldBe("ltr_in_ltr_r.getBoundingClientRect().right","700");
rtl_in_rtl_l = document.getElementById("rtl_in_rtl_l");
ltr_in_rtl_l = document.getElementById("ltr_in_rtl_l");
shouldBe("rtl_in_rtl_l.getBoundingClientRect().left","0");
shouldBe("ltr_in_rtl_l.getBoundingClientRect().left","0");
</script>
</body>
Codebase Browser
chromium