| <!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 with margin-left:auto inside the left-aligned LTR block should be right-aligned --> |
| <div dir="ltr"> |
| <div dir="rtl" id="rtl_ml_in_ltr" style="margin-left:auto"></div> |
| <div dir="ltr" id="ltr_ml_in_ltr" style="margin-left:auto"></div> |
| </div> |
| |
| <!-- Boxes with margin-right:auto inside the left-aligned LTR block should be left-aligned --> |
| <div dir="ltr"> |
| <div dir="rtl" id="rtl_mr_in_ltr" style="margin-right:auto"></div> |
| <div dir="ltr" id="ltr_mr_in_ltr" style="margin-right:auto"></div> |
| </div> |
| |
| <!-- Boxes with margin-left:auto inside the right-aligned RTL block should be right-aligned --> |
| <div dir="rtl"> |
| <div dir="rtl" id="rtl_ml_in_rtl" style="margin-left:auto"></div> |
| <div dir="ltr" id="ltr_ml_in_rtl" style="margin-left:auto"></div> |
| </div> |
| |
| <!-- Boxes with margin-right:auto inside the right-aligned RTL block should be left-aligned --> |
| <div dir="rtl"> |
| <div dir="rtl" id="rtl_mr_in_rtl" style="margin-right:auto"></div> |
| <div dir="ltr" id="ltr_mr_in_rtl" style="margin-right:auto"></div> |
| </div> |
| |
| |
| <!-- Boxes with margin-left:auto inside the right-aligned LTR block should be right-aligned --> |
| <div dir="ltr" align="right"> |
| <div dir="rtl" id="rtl_ml_in_ltr_r" style="margin-left:auto"></div> |
| <div dir="ltr" id="ltr_ml_in_ltr_r" style="margin-left:auto"></div> |
| </div> |
| |
| <!-- Boxes with margin-right:auto inside the right-aligned LTR block should be left-aligned --> |
| <div dir="ltr" align="right"> |
| <div dir="rtl" id="rtl_mr_in_ltr_r" style="margin-right:auto"></div> |
| <div dir="ltr" id="ltr_mr_in_ltr_r" style="margin-right:auto"></div> |
| </div> |
| |
| <!-- Boxes with margin-left:auto inside the left-aligned RTL block should be right-aligned --> |
| <div dir="rtl" align="left"> |
| <div dir="rtl" id="rtl_ml_in_rtl_l" style="margin-left:auto"></div> |
| <div dir="ltr" id="ltr_ml_in_rtl_l" style="margin-left:auto"></div> |
| </div> |
| |
| <!-- Boxes with margin-right:auto inside the left-aligned RTL block should be left-aligned --> |
| <div dir="rtl" align="left"> |
| <div dir="rtl" id="rtl_mr_in_rtl_l" style="margin-right:auto"></div> |
| <div dir="ltr" id="ltr_mr_in_rtl_l" style="margin-right:auto"></div> |
| </div> |
| |
| <script> |
| rtl_ml_in_ltr = document.getElementById("rtl_ml_in_ltr"); |
| ltr_ml_in_ltr = document.getElementById("ltr_ml_in_ltr"); |
| shouldBe("rtl_ml_in_ltr.getBoundingClientRect().right","700"); |
| shouldBe("ltr_ml_in_ltr.getBoundingClientRect().right","700"); |
| |
| rtl_mr_in_ltr = document.getElementById("rtl_mr_in_ltr"); |
| ltr_mr_in_ltr = document.getElementById("ltr_mr_in_ltr"); |
| shouldBe("rtl_mr_in_ltr.getBoundingClientRect().left","0"); |
| shouldBe("ltr_mr_in_ltr.getBoundingClientRect().left","0"); |
| |
| rtl_ml_in_rtl = document.getElementById("rtl_ml_in_rtl"); |
| ltr_ml_in_rtl = document.getElementById("ltr_ml_in_rtl"); |
| shouldBe("rtl_ml_in_rtl.getBoundingClientRect().right","700"); |
| shouldBe("ltr_ml_in_rtl.getBoundingClientRect().right","700"); |
| |
| rtl_mr_in_rtl = document.getElementById("rtl_mr_in_rtl"); |
| ltr_mr_in_rtl = document.getElementById("ltr_mr_in_rtl"); |
| shouldBe("rtl_mr_in_rtl.getBoundingClientRect().left","0"); |
| shouldBe("ltr_mr_in_rtl.getBoundingClientRect().left","0"); |
| |
| rtl_ml_in_ltr_r = document.getElementById("rtl_ml_in_ltr_r"); |
| ltr_ml_in_ltr_r = document.getElementById("ltr_ml_in_ltr_r"); |
| shouldBe("rtl_ml_in_ltr_r.getBoundingClientRect().right","700"); |
| shouldBe("ltr_ml_in_ltr_r.getBoundingClientRect().right","700"); |
| |
| rtl_mr_in_ltr_r = document.getElementById("rtl_mr_in_ltr_r"); |
| ltr_mr_in_ltr_r = document.getElementById("ltr_mr_in_ltr_r"); |
| shouldBe("rtl_mr_in_ltr_r.getBoundingClientRect().left","0"); |
| shouldBe("ltr_mr_in_ltr_r.getBoundingClientRect().left","0"); |
| |
| rtl_ml_in_rtl_l = document.getElementById("rtl_ml_in_rtl_l"); |
| ltr_ml_in_rtl_l = document.getElementById("ltr_ml_in_rtl_l"); |
| shouldBe("rtl_ml_in_rtl_l.getBoundingClientRect().right","700"); |
| shouldBe("ltr_ml_in_rtl_l.getBoundingClientRect().right","700"); |
| |
| rtl_mr_in_rtl_l = document.getElementById("rtl_mr_in_rtl_l"); |
| ltr_mr_in_rtl_l = document.getElementById("ltr_mr_in_rtl_l"); |
| shouldBe("rtl_mr_in_rtl_l.getBoundingClientRect().left","0"); |
| shouldBe("ltr_mr_in_rtl_l.getBoundingClientRect().left","0"); |
| </script> |
| |
| </body> |
