third_party/WebKit/LayoutTests/fast/block/margin-left-margin-right-auto.html

   1 <!DOCTYPE html>
   2
   3 <style>
   4 div>div{background:lime;width:100px;height:20px;border:1px solid green}
   5 </style>
   6
   7 <script src="../../resources/js-test.js"></script>
   8
   9 <body style="width:700px;margin:0px">
  10
  11 <!-- Boxes with margin-left:auto inside the left-aligned LTR block should be right-aligned -->
  12 <div dir="ltr">
  13   <div dir="rtl" id="rtl_ml_in_ltr" style="margin-left:auto"></div>
  14   <div dir="ltr" id="ltr_ml_in_ltr" style="margin-left:auto"></div>
  15 </div>
  16
  17 <!--  Boxes with margin-right:auto inside the left-aligned LTR block should be left-aligned -->
  18 <div dir="ltr">
  19   <div dir="rtl" id="rtl_mr_in_ltr" style="margin-right:auto"></div>
  20   <div dir="ltr" id="ltr_mr_in_ltr" style="margin-right:auto"></div>
  21 </div>
  22
  23 <!-- Boxes with margin-left:auto inside the right-aligned RTL block should be right-aligned -->
  24 <div dir="rtl">
  25   <div dir="rtl" id="rtl_ml_in_rtl" style="margin-left:auto"></div>
  26   <div dir="ltr" id="ltr_ml_in_rtl" style="margin-left:auto"></div>
  27 </div>
  28
  29 <!-- Boxes with margin-right:auto inside the right-aligned RTL block should be left-aligned -->
  30 <div dir="rtl">
  31   <div dir="rtl" id="rtl_mr_in_rtl" style="margin-right:auto"></div>
  32   <div dir="ltr" id="ltr_mr_in_rtl" style="margin-right:auto"></div>
  33 </div>
  34
  35
  36 <!-- Boxes with margin-left:auto inside the right-aligned LTR block should be right-aligned -->
  37 <div dir="ltr" align="right">
  38   <div dir="rtl" id="rtl_ml_in_ltr_r" style="margin-left:auto"></div>
  39   <div dir="ltr" id="ltr_ml_in_ltr_r" style="margin-left:auto"></div>
  40 </div>
  41
  42 <!-- Boxes with margin-right:auto inside the right-aligned LTR block should be left-aligned -->
  43 <div dir="ltr" align="right">
  44   <div dir="rtl" id="rtl_mr_in_ltr_r" style="margin-right:auto"></div>
  45   <div dir="ltr" id="ltr_mr_in_ltr_r" style="margin-right:auto"></div>
  46 </div>
  47
  48 <!-- Boxes with margin-left:auto inside the left-aligned RTL block should be right-aligned -->
  49 <div dir="rtl" align="left">
  50   <div dir="rtl" id="rtl_ml_in_rtl_l" style="margin-left:auto"></div>
  51   <div dir="ltr" id="ltr_ml_in_rtl_l" style="margin-left:auto"></div>
  52 </div>
  53
  54 <!-- Boxes with margin-right:auto inside the left-aligned RTL block should be left-aligned -->
  55 <div dir="rtl" align="left">
  56   <div dir="rtl" id="rtl_mr_in_rtl_l" style="margin-right:auto"></div>
  57   <div dir="ltr" id="ltr_mr_in_rtl_l" style="margin-right:auto"></div>
  58 </div>
  59
  60 <script>
  61   rtl_ml_in_ltr = document.getElementById("rtl_ml_in_ltr");
  62   ltr_ml_in_ltr = document.getElementById("ltr_ml_in_ltr");
  63   shouldBe("rtl_ml_in_ltr.getBoundingClientRect().right","700");
  64   shouldBe("ltr_ml_in_ltr.getBoundingClientRect().right","700");
  65
  66   rtl_mr_in_ltr = document.getElementById("rtl_mr_in_ltr");
  67   ltr_mr_in_ltr = document.getElementById("ltr_mr_in_ltr");
  68   shouldBe("rtl_mr_in_ltr.getBoundingClientRect().left","0");
  69   shouldBe("ltr_mr_in_ltr.getBoundingClientRect().left","0");
  70
  71   rtl_ml_in_rtl = document.getElementById("rtl_ml_in_rtl");
  72   ltr_ml_in_rtl = document.getElementById("ltr_ml_in_rtl");
  73   shouldBe("rtl_ml_in_rtl.getBoundingClientRect().right","700");
  74   shouldBe("ltr_ml_in_rtl.getBoundingClientRect().right","700");
  75
  76   rtl_mr_in_rtl = document.getElementById("rtl_mr_in_rtl");
  77   ltr_mr_in_rtl = document.getElementById("ltr_mr_in_rtl");
  78   shouldBe("rtl_mr_in_rtl.getBoundingClientRect().left","0");
  79   shouldBe("ltr_mr_in_rtl.getBoundingClientRect().left","0");
  80
  81   rtl_ml_in_ltr_r = document.getElementById("rtl_ml_in_ltr_r");
  82   ltr_ml_in_ltr_r = document.getElementById("ltr_ml_in_ltr_r");
  83   shouldBe("rtl_ml_in_ltr_r.getBoundingClientRect().right","700");
  84   shouldBe("ltr_ml_in_ltr_r.getBoundingClientRect().right","700");
  85
  86   rtl_mr_in_ltr_r = document.getElementById("rtl_mr_in_ltr_r");
  87   ltr_mr_in_ltr_r = document.getElementById("ltr_mr_in_ltr_r");
  88   shouldBe("rtl_mr_in_ltr_r.getBoundingClientRect().left","0");
  89   shouldBe("ltr_mr_in_ltr_r.getBoundingClientRect().left","0");
  90
  91   rtl_ml_in_rtl_l = document.getElementById("rtl_ml_in_rtl_l");
  92   ltr_ml_in_rtl_l = document.getElementById("ltr_ml_in_rtl_l");
  93   shouldBe("rtl_ml_in_rtl_l.getBoundingClientRect().right","700");
  94   shouldBe("ltr_ml_in_rtl_l.getBoundingClientRect().right","700");
  95
  96   rtl_mr_in_rtl_l = document.getElementById("rtl_mr_in_rtl_l");
  97   ltr_mr_in_rtl_l = document.getElementById("ltr_mr_in_rtl_l");
  98   shouldBe("rtl_mr_in_rtl_l.getBoundingClientRect().left","0");
  99   shouldBe("ltr_mr_in_rtl_l.getBoundingClientRect().left","0");
 100 </script>
 101
 102 </body>