| OLD | NEW |
|---|
| (Empty) |
| 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: 50px; | |
| 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 brea
k | |
| 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 - parentRe
ct.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> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 299373006:
Move old multicol tests to a separate directory. (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master