| <!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> |
