src/third_party/WebKit/LayoutTests/fast/multicol/float-truncation.html

   1 <html>
   2 <head>
   3 <style>
   4     div.columns {
   5         width: 200px;
   6         -webkit-columns: 2;
   7         -webkit-column-gap: 0;
   8         columns: 2;
   9         column-gap: 0;
  10         column-fill: auto;
  11         outline: 1px solid blue;
  12         font-family: Ahem;
  13         font-size: 10px;
  14         margin: 5px;
  15         overflow: hidden;
  16     }
  17
  18     div.float {
  19         float: left;
  20         width: 51px;
  21         margin-top: 5px;
  22         color: silver;
  23     }
  24 </style>
  25 </head>
  26 <body>
  27 <div id="tests">
  28     <div class="columns" style="height: 80px;">
  29         one line two lines three lines
  30         <div class="float" id="f1">
  31             three line float
  32         </div>
  33         text runs here next to the float
  34     </div>
  35     <!-- In this case, the float fits, but then the main content causes the break
  36          to occur earlier and the float gets split. -->
  37     <div class="columns" style="height: 75px;">
  38         one line two lines three lines
  39         <div class="float" id="f2">
  40             three line float
  41         </div>
  42         text runs here next to the float
  43     </div>
  44     <!-- In this case, the float paginates after its second line. -->
  45     <div class="columns" style="height: 70px;">
  46         one line two lines three lines
  47         <div class="float" id="f3">
  48             three line float
  49         </div>
  50         text runs here next to the float
  51     </div>
  52     <!-- In this case, the float paginates after its first line. -->
  53     <div class="columns" style="height: 70px;">
  54         one line two lines three lines and some more
  55         <div class="float" id="f4">
  56             three line float
  57         </div>
  58         text runs here next to the float
  59     </div>
  60     <!-- In this case, the float paginates after its third line. -->
  61     <div class="columns" style="height: 45px;">
  62         one line
  63         <div class="float" id="f5">
  64             and one five line float
  65         </div>
  66         text runs here next to the float
  67     </div>
  68 </div>
  69 <pre id="result"></pre>
  70 <script>
  71     function floatOffset(float)
  72     {
  73         var range = document.createRange();
  74         range.setStart(float, 0);
  75         range.setEnd(float, 0);
  76         range.expand("word");
  77         var rect = range.getBoundingClientRect();
  78         var parentRect = float.parentNode.getBoundingClientRect();
  79         return { width: rect.left - parentRect.left, height: rect.top - parentRect.top  };
  80     }
  81
  82     var tests = [
  83         ["f1", 0, 45],
  84         ["f2", 0, 45],
  85         ["f3", 0, 45],
  86         ["f4", 0, 55],
  87         ["f5", 0, 15]
  88     ];
  89
  90     var test;
  91     var failures = 0;
  92     while (test = tests.shift()) {
  93         var float = document.getElementById(test[0]);
  94         var result = floatOffset(float);
  95         var passed = result.width === test[1] && result.height === test[2]
  96         float.style.color = passed ? "green" : "red";
  97         if (!passed)
  98             failures++
  99     }
 100
 101     if (window.testRunner) {
 102         testRunner.dumpAsText();
 103         document.getElementById("tests").style.display = "none";
 104     }
 105
 106     document.getElementById("result").innerText = failures ? "FAIL: " + failures + " cases failed" : "PASS";
 107 </script>