third_party/WebKit/LayoutTests/fast/block/align-bigger-child.html

   1 <!DOCTYPE html>
   2
   3 <style>
   4 body{margin:0px}
   5 .narrow_block{width:100px}
   6 .narrow_block>div{background:lime;width:200px;height:20px;border:1px solid black}
   7 </style>
   8
   9 <script src="../../resources/js-test.js"></script>
  10
  11 <!-- Wider blocks inside the LTR block should be left-aligned regardless of align attribute -->
  12 <div align="left" class="narrow_block">
  13   <div dir="rtl" id="rtl_in_ltr_left"></div>
  14   <div dir="ltr" id="ltr_in_ltr_left"></div>
  15 </div>
  16
  17 <div align="right" class="narrow_block">
  18   <div dir="rtl" id="rtl_in_ltr_right"></div>
  19   <div dir="ltr" id="ltr_in_ltr_right"></div>
  20 </div>
  21
  22 <div align="center" class="narrow_block">
  23   <div dir="rtl" id="rtl_in_ltr_center"></div>
  24   <div dir="ltr" id="ltr_in_ltr_center"></div>
  25 </div>
  26
  27 <!-- Wider blocks inside the RTL block should be right-aligned regardless of align attribute -->
  28 <div dir="rtl" align="right" class="narrow_block">
  29   <div dir="rtl" id="rtl_in_rtl_right"></div>
  30   <div dir="ltr" id="ltr_in_rtl_right"></div>
  31 </div>
  32
  33 <div dir="rtl" align="left" class="narrow_block">
  34   <div dir="rtl" id="rtl_in_rtl_left"></div>
  35   <div dir="ltr" id="ltr_in_rtl_left"></div>
  36 </div>
  37
  38 <div dir="rtl" align="center" class="narrow_block">
  39   <div dir="rtl" id="rtl_in_rtl_center"></div>
  40   <div dir="ltr" id="ltr_in_rtl_center"></div>
  41 </div>
  42
  43 <script>
  44   rtl_in_ltr_left = document.getElementById("rtl_in_ltr_left");
  45   ltr_in_ltr_left = document.getElementById("ltr_in_ltr_left");
  46   shouldBe("rtl_in_ltr_left.getBoundingClientRect().left","0");
  47   shouldBe("ltr_in_ltr_left.getBoundingClientRect().left","0");
  48
  49   rtl_in_ltr_right = document.getElementById("rtl_in_ltr_right");
  50   ltr_in_ltr_right = document.getElementById("ltr_in_ltr_right");
  51   shouldBe("rtl_in_ltr_right.getBoundingClientRect().left","0");
  52   shouldBe("ltr_in_ltr_right.getBoundingClientRect().left","0");
  53
  54   rtl_in_ltr_center = document.getElementById("rtl_in_ltr_center");
  55   ltr_in_ltr_center = document.getElementById("ltr_in_ltr_center");
  56   shouldBe("rtl_in_ltr_center.getBoundingClientRect().left","0");
  57   shouldBe("ltr_in_ltr_center.getBoundingClientRect().left","0");
  58
  59   rtl_in_rtl_right = document.getElementById("rtl_in_rtl_right");
  60   ltr_in_rtl_right = document.getElementById("ltr_in_rtl_right");
  61   shouldBe("rtl_in_rtl_right.getBoundingClientRect().right","100");
  62   shouldBe("ltr_in_rtl_right.getBoundingClientRect().right","100");
  63
  64   rtl_in_rtl_left = document.getElementById("rtl_in_rtl_left");
  65   ltr_in_rtl_left = document.getElementById("ltr_in_rtl_left");
  66   shouldBe("rtl_in_rtl_left.getBoundingClientRect().right","100");
  67   shouldBe("ltr_in_rtl_left.getBoundingClientRect().right","100");
  68
  69   rtl_in_rtl_center = document.getElementById("rtl_in_rtl_center");
  70   ltr_in_rtl_center = document.getElementById("ltr_in_rtl_center");
  71   shouldBe("rtl_in_rtl_center.getBoundingClientRect().right","100");
  72   shouldBe("ltr_in_rtl_center.getBoundingClientRect().right","100");
  73 </script>