LayoutTests/fast/regions/no-split-line-box.html

   1 <!--
   2   Each of the two regions should only display two line boxes in this test.
   3   The buggy behavior splits the third line box between the first and second region.
   4   -->
   5 <script type="text/javascript" charset="utf-8" src="resources/helper.js"></script>
   6
   7 <style type="text/css">
   8   .article{
   9     -webkit-flow-into: thread;
  10     line-height:14px;
  11   }
  12   .region{
  13     -webkit-flow-from: thread;
  14     width:4em;
  15     height:35px;  /*2.5x line height*/
  16     background-color:lightgray;
  17   }
  18   .divider{
  19     width:4em;
  20     height:10px;
  21   }
  22   .description{
  23     color:blue;
  24   }
  25 </style>
  26
  27 <div id="test">
  28   <div class="region"></div>
  29   <div class="divider"></div>
  30   <div id="secondRegion" class="region"></div>
  31   <div class="article">
  32     mnopqr mnopqr <span id="testSpan">m</span>nopqr mnopqr
  33   </div>
  34   <p class="description">The two regions on either side of the divider should each have two text lines.</p>
  35   <p class="description">There should be no text line split between the regions.</p>
  36   <p class="description">The top left corner of the third text line should be in the top left corner of the second region.</p>
  37 </div>
  38 <div id="result"></div>
  39
  40 <script>
  41   if (window.layoutTestController)
  42     layoutTestController.dumpAsText();
  43
  44   var testElement = document.getElementById("testSpan")
  45   var testRect = testElement.getBoundingClientRect();
  46   var regionElement = document.getElementById("secondRegion")
  47   var regionRect = regionElement.getBoundingClientRect();
  48   var resultString = assertTopLeftMatch (regionRect, testRect);
  49
  50   if (window.layoutTestController)
  51         document.getElementById("test").innerText="";
  52   var resultDiv = document.getElementById("result");
  53   resultDiv.innerText = resultString;
  54 </script>