Chromium Code Reviews| Index: LayoutTests/fast/dom/margin-for-inverted-direction.html |
| diff --git a/LayoutTests/fast/dom/margin-for-inverted-direction.html b/LayoutTests/fast/dom/margin-for-inverted-direction.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..a2ab24a8607b70aebc4cbe4b7dbf9d9de1e98920 |
| --- /dev/null |
| +++ b/LayoutTests/fast/dom/margin-for-inverted-direction.html |
| @@ -0,0 +1,222 @@ |
| +<!DOCTYPE html> |
| + |
| +<style> |
| +div>div{background:lime;width:100px;height:20px} |
| +div>table{width:50px;height:20px} |
| +</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 align="left"> |
| + <table dir="rtl" border="1" id="rtl_table_in_ltr"><tr><td></td><td></td></tr></table> |
| + <div dir="rtl" id="rtl_div_in_ltr"></div> |
| + <table dir="ltr" border="1" id="ltr_table_in_ltr"><tr><td></td><td></td></tr></table> |
| + <div dir="ltr" id="ltr_div_in_ltr"></div> |
| +</div> |
| + |
| +<!-- Boxes inside the right-aligned RTL block should be right-aligned --> |
| +<div dir="rtl" align="right"> |
| + <table dir="rtl" border="1" id="rtl_table_in_rtl"><tr><td></td><td></td></tr></table> |
| + <div dir="rtl" id="rtl_div_in_rtl"></div> |
| + <table dir="ltr" border="1" id="ltr_table_in_rtl"><tr><td></td><td></td></tr></table> |
| + <div dir="ltr" id="ltr_div_in_rtl"></div> |
| +</div> |
| + |
| +<!-- Boxes inside the right-aligned LTR block should be right-aligned --> |
|
mstensho (USE GERRIT)
2014/12/09 09:54:41
This file is getting big. I suggest splitting it.
Kyungtae Kim
2014/12/09 11:36:32
I split the auto margin cases to new file.
|
| +<div align="right"> |
| + <table dir="rtl" border="1" id="rtl_table_in_ltr_r"><tr><td></td><td></td></tr></table> |
| + <div dir="rtl" id="rtl_div_in_ltr_r"></div> |
| + <table dir="ltr" border="1" id="ltr_table_in_ltr_r"><tr><td></td><td></td></tr></table> |
| + <div dir="ltr" id="ltr_div_in_ltr_r"></div> |
| +</div> |
| + |
| +<!-- Boxes inside the left-aligned RTL block should be left-aligned --> |
| +<div dir="rtl" align="left"> |
| + <table dir="rtl" border="1" id="rtl_table_in_rtl_l"><tr><td></td><td></td></tr></table> |
| + <div dir="rtl" id="rtl_div_in_rtl_l"></div> |
| + <table dir="ltr" border="1" id="ltr_table_in_rtl_l"><tr><td></td><td></td></tr></table> |
| + <div dir="ltr" id="ltr_div_in_rtl_l"></div> |
| +</div> |
| + |
| +<!-- Boxes with margin-left:auto inside the left-aligned LTR block should be right-aligned --> |
| +<div dir="ltr" align="left"> |
| + <table dir="rtl" border="1" id="rtl_ml_table_in_ltr" style="margin-left:auto"><tr><td></td><td></td></tr></table> |
| + <div dir="rtl" id="rtl_ml_div_in_ltr" style="margin-left:auto"></div> |
| + <table dir="ltr" border="1" id="ltr_ml_table_in_ltr" style="margin-left:auto"><tr><td></td><td></td></tr></table> |
| + <div dir="ltr" id="ltr_ml_div_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" align="left"> |
| + <table dir="rtl" border="1" id="rtl_mr_table_in_ltr" style="margin-right:auto"><tr><td></td><td></td></tr></table> |
| + <div dir="rtl" id="rtl_mr_div_in_ltr" style="margin-right:auto"></div> |
| + <table dir="ltr" border="1" id="ltr_mr_table_in_ltr" style="margin-right:auto"><tr><td></td><td></td></tr></table> |
| + <div dir="ltr" id="ltr_mr_div_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" align="right"> |
| + <table dir="rtl" border="1" id="rtl_ml_table_in_rtl" style="margin-left:auto"><tr><td></td><td></td></tr></table> |
| + <div dir="rtl" id="rtl_ml_div_in_rtl" style="margin-left:auto"></div> |
| + <table dir="ltr" border="1" id="ltr_ml_table_in_rtl" style="margin-left:auto"><tr><td></td><td></td></tr></table> |
| + <div dir="ltr" id="ltr_ml_div_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" align="right"> |
| + <table dir="rtl" border="1" id="rtl_mr_table_in_rtl" style="margin-right:auto"><tr><td></td><td></td></tr></table> |
| + <div dir="rtl" id="rtl_mr_div_in_rtl" style="margin-right:auto"></div> |
| + <table dir="ltr" border="1" id="ltr_mr_table_in_rtl" style="margin-right:auto"><tr><td></td><td></td></tr></table> |
| + <div dir="ltr" id="ltr_mr_div_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="left"> |
| + <table dir="rtl" border="1" id="rtl_ml_table_in_ltr_r" style="margin-right:auto"><tr><td></td><td></td></tr></table> |
| + <div dir="rtl" id="rtl_ml_div_in_ltr_r" style="margin-right:auto"></div> |
| + <table dir="ltr" border="1" id="ltr_ml_table_in_ltr_r" style="margin-right:auto"><tr><td></td><td></td></tr></table> |
| + <div dir="ltr" id="ltr_ml_div_in_ltr_r" style="margin-right:auto"></div> |
| +</div> |
| + |
| +<!-- Boxes with margin-right:auto inside the right-aligned LTR block should be right-aligned --> |
| +<div dir="ltr" align="left"> |
| + <table dir="rtl" border="1" id="rtl_mr_table_in_ltr_r" style="margin-right:auto"><tr><td></td><td></td></tr></table> |
| + <div dir="rtl" id="rtl_mr_div_in_ltr_r" style="margin-right:auto"></div> |
| + <table dir="ltr" border="1" id="ltr_mr_table_in_ltr_r" style="margin-right:auto"><tr><td></td><td></td></tr></table> |
| + <div dir="ltr" id="ltr_mr_div_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="right"> |
| + <table dir="rtl" border="1" id="rtl_ml_table_in_rtl_l" style="margin-left:auto"><tr><td></td><td></td></tr></table> |
| + <div dir="rtl" id="rtl_ml_div_in_rtl_l" style="margin-left:auto"></div> |
| + <table dir="ltr" border="1" id="ltr_ml_table_in_rtl_l" style="margin-left:auto"><tr><td></td><td></td></tr></table> |
| + <div dir="ltr" id="ltr_ml_div_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="right"> |
| + <table dir="rtl" border="1" id="rtl_mr_table_in_rtl_l" style="margin-right:auto"><tr><td></td><td></td></tr></table> |
| + <div dir="rtl" id="rtl_mr_div_in_rtl_l" style="margin-right:auto"></div> |
| + <table dir="ltr" border="1" id="ltr_mr_table_in_rtl_l" style="margin-right:auto"><tr><td></td><td></td></tr></table> |
| + <div dir="ltr" id="ltr_mr_div_in_rtl_l" style="margin-right:auto"></div> |
| +</div> |
| + |
| +<script> |
| + rtl_table_in_ltr = document.getElementById("rtl_table_in_ltr"); |
| + rtl_div_in_ltr = document.getElementById("rtl_div_in_ltr"); |
| + ltr_table_in_ltr = document.getElementById("ltr_table_in_ltr"); |
| + ltr_div_in_ltr = document.getElementById("ltr_div_in_ltr"); |
| + shouldBe("rtl_table_in_ltr.getBoundingClientRect().left","0"); |
| + shouldBe("rtl_div_in_ltr.getBoundingClientRect().left","0"); |
| + shouldBe("ltr_table_in_ltr.getBoundingClientRect().left","0"); |
| + shouldBe("ltr_div_in_ltr.getBoundingClientRect().left","0"); |
| + |
| + rtl_table_in_rtl = document.getElementById("rtl_table_in_rtl"); |
| + rtl_div_in_rtl = document.getElementById("rtl_div_in_rtl"); |
| + ltr_table_in_rtl = document.getElementById("ltr_table_in_rtl"); |
| + ltr_div_in_rtl = document.getElementById("ltr_div_in_rtl"); |
| + shouldBe("rtl_table_in_rtl.getBoundingClientRect().right","700"); |
| + shouldBe("rtl_div_in_rtl.getBoundingClientRect().right","700"); |
| + shouldBe("ltr_table_in_rtl.getBoundingClientRect().right","700"); |
| + shouldBe("ltr_div_in_rtl.getBoundingClientRect().right","700"); |
| + |
| + |
| + rtl_table_in_ltr_r = document.getElementById("rtl_table_in_ltr_r"); |
| + rtl_div_in_ltr_r = document.getElementById("rtl_div_in_ltr_r"); |
| + ltr_table_in_ltr_r = document.getElementById("ltr_table_in_ltr_r"); |
| + ltr_div_in_ltr_r = document.getElementById("ltr_div_in_ltr_r"); |
| + shouldBe("rtl_table_in_ltr_r.getBoundingClientRect().right","700"); |
| + shouldBe("rtl_div_in_ltr_r.getBoundingClientRect().right","700"); |
| + shouldBe("ltr_table_in_ltr_r.getBoundingClientRect().right","700"); |
| + shouldBe("ltr_div_in_ltr_r.getBoundingClientRect().right","700"); |
| + |
| + rtl_table_in_rtl_l = document.getElementById("rtl_table_in_rtl_l"); |
| + rtl_div_in_rtl_l = document.getElementById("rtl_div_in_rtl_l"); |
| + ltr_table_in_rtl_l = document.getElementById("ltr_table_in_rtl_l"); |
| + ltr_div_in_rtl_l = document.getElementById("ltr_div_in_rtl_l"); |
| + shouldBe("rtl_table_in_rtl_l.getBoundingClientRect().left","0"); |
| + shouldBe("rtl_div_in_rtl_l.getBoundingClientRect().left","0"); |
| + shouldBe("ltr_table_in_rtl_l.getBoundingClientRect().left","0"); |
| + shouldBe("ltr_div_in_rtl_l.getBoundingClientRect().left","0"); |
| + |
| + rtl_ml_table_in_ltr = document.getElementById("rtl_ml_table_in_ltr"); |
| + rtl_ml_div_in_ltr = document.getElementById("rtl_ml_div_in_ltr"); |
| + ltr_ml_table_in_ltr = document.getElementById("ltr_ml_table_in_ltr"); |
| + ltr_ml_div_in_ltr = document.getElementById("ltr_ml_div_in_ltr"); |
| + shouldBe("rtl_ml_table_in_ltr.getBoundingClientRect().right","700"); |
| + shouldBe("rtl_ml_div_in_ltr.getBoundingClientRect().right","700"); |
| + shouldBe("ltr_ml_table_in_ltr.getBoundingClientRect().right","700"); |
| + shouldBe("ltr_ml_div_in_ltr.getBoundingClientRect().right","700"); |
| + |
| + rtl_mr_table_in_ltr = document.getElementById("rtl_mr_table_in_ltr"); |
| + rtl_mr_div_in_ltr = document.getElementById("rtl_mr_div_in_ltr"); |
| + ltr_mr_table_in_ltr = document.getElementById("ltr_mr_table_in_ltr"); |
| + ltr_mr_div_in_ltr = document.getElementById("ltr_mr_div_in_ltr"); |
| + shouldBe("rtl_mr_table_in_ltr.getBoundingClientRect().left","0"); |
| + shouldBe("rtl_mr_div_in_ltr.getBoundingClientRect().left","0"); |
| + shouldBe("ltr_mr_table_in_ltr.getBoundingClientRect().left","0"); |
| + shouldBe("ltr_mr_div_in_ltr.getBoundingClientRect().left","0"); |
| + |
| + rtl_ml_table_in_rtl = document.getElementById("rtl_ml_table_in_rtl"); |
| + rtl_ml_div_in_rtl = document.getElementById("rtl_ml_div_in_rtl"); |
| + ltr_ml_table_in_rtl = document.getElementById("ltr_ml_table_in_rtl"); |
| + ltr_ml_div_in_rtl = document.getElementById("ltr_ml_div_in_rtl"); |
| + shouldBe("rtl_ml_table_in_rtl.getBoundingClientRect().right","700"); |
| + shouldBe("rtl_ml_div_in_rtl.getBoundingClientRect().right","700"); |
| + shouldBe("ltr_ml_table_in_rtl.getBoundingClientRect().right","700"); |
| + shouldBe("ltr_ml_div_in_rtl.getBoundingClientRect().right","700"); |
| + |
| + rtl_mr_table_in_rtl = document.getElementById("rtl_mr_table_in_rtl"); |
| + rtl_mr_div_in_rtl = document.getElementById("rtl_mr_div_in_rtl"); |
| + ltr_mr_table_in_rtl = document.getElementById("ltr_mr_table_in_rtl"); |
| + ltr_mr_div_in_rtl = document.getElementById("ltr_mr_div_in_rtl"); |
| + shouldBe("rtl_mr_table_in_rtl.getBoundingClientRect().left","0"); |
| + shouldBe("rtl_mr_div_in_rtl.getBoundingClientRect().left","0"); |
| + shouldBe("ltr_mr_table_in_rtl.getBoundingClientRect().left","0"); |
| + shouldBe("ltr_mr_div_in_rtl.getBoundingClientRect().left","0"); |
| + |
| + |
| + rtl_ml_table_in_ltr_r = document.getElementById("rtl_ml_table_in_ltr_r"); |
| + rtl_ml_div_in_ltr_r = document.getElementById("rtl_ml_div_in_ltr_r"); |
| + ltr_ml_table_in_ltr_r = document.getElementById("ltr_ml_table_in_ltr_r"); |
| + ltr_ml_div_in_ltr_r = document.getElementById("ltr_ml_div_in_ltr_r"); |
| + shouldBe("rtl_ml_table_in_ltr_r.getBoundingClientRect().left","0"); |
| + shouldBe("rtl_ml_div_in_ltr_r.getBoundingClientRect().left","0"); |
| + shouldBe("ltr_ml_table_in_ltr_r.getBoundingClientRect().left","0"); |
| + shouldBe("ltr_ml_div_in_ltr_r.getBoundingClientRect().left","0"); |
| + |
| + rtl_mr_table_in_ltr_r = document.getElementById("rtl_mr_table_in_ltr_r"); |
| + rtl_mr_div_in_ltr_r = document.getElementById("rtl_mr_div_in_ltr_r"); |
| + ltr_mr_table_in_ltr_r = document.getElementById("ltr_mr_table_in_ltr_r"); |
| + ltr_mr_div_in_ltr_r = document.getElementById("ltr_mr_div_in_ltr_r"); |
| + shouldBe("rtl_mr_table_in_ltr_r.getBoundingClientRect().left","0"); |
| + shouldBe("rtl_mr_div_in_ltr_r.getBoundingClientRect().left","0"); |
| + shouldBe("ltr_mr_table_in_ltr_r.getBoundingClientRect().left","0"); |
| + shouldBe("ltr_mr_div_in_ltr_r.getBoundingClientRect().left","0"); |
| + |
| + rtl_ml_table_in_rtl_l = document.getElementById("rtl_ml_table_in_rtl_l"); |
| + rtl_ml_div_in_rtl_l = document.getElementById("rtl_ml_div_in_rtl_l"); |
| + ltr_ml_table_in_rtl_l = document.getElementById("ltr_ml_table_in_rtl_l"); |
| + ltr_ml_div_in_rtl_l = document.getElementById("ltr_ml_div_in_rtl_l"); |
| + shouldBe("rtl_ml_table_in_rtl_l.getBoundingClientRect().right","700"); |
| + shouldBe("rtl_ml_div_in_rtl_l.getBoundingClientRect().right","700"); |
| + shouldBe("ltr_ml_table_in_rtl_l.getBoundingClientRect().right","700"); |
| + shouldBe("ltr_ml_div_in_rtl_l.getBoundingClientRect().right","700"); |
| + |
| + rtl_mr_table_in_rtl_l = document.getElementById("rtl_mr_table_in_rtl_l"); |
| + rtl_mr_div_in_rtl_l = document.getElementById("rtl_mr_div_in_rtl_l"); |
| + ltr_mr_table_in_rtl_l = document.getElementById("ltr_mr_table_in_rtl_l"); |
| + ltr_mr_div_in_rtl_l = document.getElementById("ltr_mr_div_in_rtl_l"); |
| + shouldBe("rtl_mr_table_in_rtl_l.getBoundingClientRect().left","0"); |
| + shouldBe("rtl_mr_div_in_rtl_l.getBoundingClientRect().left","0"); |
| + shouldBe("ltr_mr_table_in_rtl_l.getBoundingClientRect().left","0"); |
| + shouldBe("ltr_mr_div_in_rtl_l.getBoundingClientRect().left","0"); |
| +</script> |
| + |
| +</body> |