third_party/WebKit/LayoutTests/fast/writing-mode/block-formatting-context.html

   1 <html>
   2 <head>
   3 <style>
   4 .lr { -webkit-writing-mode: vertical-lr; background-color:green; margin:10px; width:100px; height:100px; }
   5 .float { width:100px; height:100px; background-color:blue; float:left}
   6 body { margin: 0 }
   7 </style>
   8 </head>
   9 <body>
  10 The green LR block should avoid the blue float.
  11 <div class="float"></div>
  12 <div class="lr" id="test"></div>
  13 <div id="console"></div>
  14 <script>
  15 if (window.testRunner)
  16     window.testRunner.dumpAsText();
  17 test = document.getElementById("test");
  18 rect = test.getBoundingClientRect();
  19 if (rect.left != 100) {
  20   document.getElementById('console').innerHTML = "FAIL: The floating block should be at an x-offset of 100.";
  21   test.style.backgroundColor = 'red';
  22 } else
  23   document.getElementById('console').innerHTML = "PASS: The floating block is in the correct position.";
  24 </script>
  25
  26 </body>
  27