OLD | NEW |
| (Empty) |
1 <html style="-webkit-writing-mode:horizontal-tb;"> | |
2 <head> | |
3 <style> | |
4 div.columns { | |
5 height: 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 height: 50px; | |
21 -webkit-margin-before: 5px; | |
22 color: silver; | |
23 } | |
24 </style> | |
25 </head> | |
26 <body style="-webkit-writing-mode:vertical-rl; width:800px"> | |
27 <div id="tests"> | |
28 <div class="columns" style="width: 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="width: 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="width: 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="width: 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="width: 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", 25, 0], | |
84 ["f2", 20, 0], | |
85 ["f3", 15, 0], | |
86 ["f4", 5, 0], | |
87 ["f5", 20, 0] | |
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 alert(result.width + " " + result.height); | |
100 } | |
101 } | |
102 | |
103 if (window.testRunner) { | |
104 testRunner.dumpAsText(); | |
105 document.getElementById("tests").style.display = "none"; | |
106 } | |
107 | |
108 document.getElementById("result").innerText = failures ? "FAIL: " + failures
+ " cases failed" : "PASS"; | |
109 </script> | |
OLD | NEW |