OLD | NEW |
---|---|
(Empty) | |
1 <!DOCTYPE html> | |
2 <html> | |
3 <head> | |
4 <title>'columns' property with 'auto' and something else</title> | |
5 <script src="../js/resources/js-test-pre.js"></script> | |
6 <script> | |
7 description("Test intrinsic width calculation for multicol. See http://dev .w3.org/csswg/css-sizing/#multicol-intrinsic"); | |
8 if (window.testRunner) | |
9 testRunner.dumpAsText(); | |
10 </script> | |
11 <style> | |
12 .gap15 { -webkit-column-gap:15px; column-gap:15px; } | |
13 .mc3 { -webkit-columns:3; columns:3; } | |
14 .mc3w50 { -webkit-columns:3 50px; columns:3 50px; } | |
15 .mc3w150 { -webkit-columns:3 150px; columns:3 150px; } | |
16 .mcw50 { -webkit-columns:50px; columns:50px; } | |
17 .mcw150 { -webkit-columns:150px; columns:150px; } | |
18 .intrinsic { width:intrinsic; } | |
19 </style> | |
20 </head> | |
21 <body> | |
22 <div style="visibility:hidden;"> <!-- hide garbage produced from ​ ch aracters --> | |
23 <!-- min intrinsic width, non-auto column-count --> | |
24 <div style="width:1px;"> | |
25 <div id="elm01" class="intrinsic mc3 gap15"> | |
26 <div style="width:100px; height:10px;"></div> | |
27 </div> | |
28 </div> | |
29 <!-- max intrinsic width, non-auto column-count --> | |
30 <div style="width:1000px;"> | |
31 <div id="elm02" class="intrinsic mc3 gap15"> | |
32 <div style="width:100px; height:10px;"></div> | |
33 </div> | |
34 </div> | |
35 <!-- min intrinsic width, non-auto column-count, breakable lines --> | |
36 <div style="width:1px;"> | |
37 <div id="elm03" class="intrinsic mc3 gap15"> | |
38 <div style="display:inline-block; width:100px; height:10px;"></div>&#x 200b;<div style="display:inline-block; width:100px; height:10px;"></div> | |
39 </div> | |
40 </div> | |
41 <!-- max intrinsic width, non-auto column-count, breakable lines --> | |
42 <div style="width:1000px;"> | |
43 <div id="elm04" class="intrinsic mc3 gap15"> | |
44 <div style="display:inline-block; width:100px; height:10px;"></div>&#x 200b;<div style="display:inline-block; width:100px; height:10px;"></div> | |
45 </div> | |
46 </div> | |
47 | |
48 <!-- min intrinsic width, non-auto column-count and small column-width --> | |
49 <div style="width:1px;"> | |
50 <div id="elm05" class="intrinsic mc3w50 gap15"> | |
51 <div style="width:100px; height:10px;"></div> | |
52 </div> | |
53 </div> | |
54 <!-- max intrinsic width, non-auto column-count and small column-width --> | |
55 <div style="width:1000px;"> | |
56 <div id="elm06" class="intrinsic mc3w50 gap15"> | |
57 <div style="width:100px; height:10px;"></div> | |
58 </div> | |
59 </div> | |
60 <!-- min intrinsic width, non-auto column-count and small column-width, br eakable lines --> | |
61 <div style="width:1px;"> | |
62 <div id="elm07" class="intrinsic mc3w50 gap15"> | |
63 <div style="display:inline-block; width:100px; height:10px;"></div>&#x 200b;<div style="display:inline-block; width:100px; height:10px;"></div> | |
64 </div> | |
65 </div> | |
66 <!-- max intrinsic width, non-auto column-count and small column-width, br eakable lines --> | |
67 <div style="width:1000px;"> | |
68 <div id="elm08" class="intrinsic mc3w50 gap15"> | |
69 <div style="display:inline-block; width:100px; height:10px;"></div>&#x 200b;<div style="display:inline-block; width:100px; height:10px;"></div> | |
70 </div> | |
71 </div> | |
72 | |
73 <!-- min intrinsic width, non-auto column-count and large column-width --> | |
74 <div style="width:1px;"> | |
75 <div id="elm09" class="intrinsic mc3w150 gap15"> | |
76 <div style="width:100px; height:10px;"></div> | |
77 </div> | |
78 </div> | |
79 <!-- max intrinsic width, non-auto column-count and large column-width --> | |
80 <div style="width:1000px;"> | |
81 <div id="elm10" class="intrinsic mc3w150 gap15"> | |
82 <div style="width:100px; height:10px;"></div> | |
83 </div> | |
84 </div> | |
85 <!-- min intrinsic width, non-auto column-count and large column-width, br eakable lines --> | |
86 <div style="width:1px;"> | |
87 <div id="elm11" class="intrinsic mc3w150 gap15"> | |
88 <div style="display:inline-block; width:100px; height:10px;"></div>&#x 200b;<div style="display:inline-block; width:100px; height:10px;"></div> | |
89 </div> | |
90 </div> | |
91 <!-- max intrinsic width, non-auto column-count and large column-width, br eakable lines --> | |
92 <div style="width:1000px;"> | |
93 <div id="elm12" class="intrinsic mc3w150 gap15"> | |
94 <div style="display:inline-block; width:100px; height:10px;"></div>&#x 200b;<div style="display:inline-block; width:100px; height:10px;"></div> | |
95 </div> | |
96 </div> | |
97 | |
98 <!-- min intrinsic width, auto column-count and small column-width --> | |
99 <div style="width:1px;"> | |
100 <div id="elm13" class="intrinsic mcw50 gap15"> | |
101 <div style="width:100px; height:10px;"></div> | |
102 </div> | |
103 </div> | |
104 <!-- max intrinsic width, auto column-count and small column-width --> | |
105 <div style="width:1000px;"> | |
106 <div id="elm14" class="intrinsic mcw50 gap15"> | |
107 <div style="width:100px; height:10px;"></div> | |
108 </div> | |
109 </div> | |
110 <!-- min intrinsic width, auto column-count and small column-width, breaka ble lines --> | |
111 <div style="width:1px;"> | |
112 <div id="elm15" class="intrinsic mcw50 gap15"> | |
113 <div style="display:inline-block; width:100px; height:10px;"></div>&#x 200b;<div style="display:inline-block; width:100px; height:10px;"></div> | |
114 </div> | |
115 </div> | |
116 <!-- max intrinsic width, auto column-count and small column-width, breaka ble lines --> | |
117 <div style="width:1000px;"> | |
118 <div id="elm16" class="intrinsic mcw50 gap15"> | |
119 <div style="display:inline-block; width:100px; height:10px;"></div>&#x 200b;<div style="display:inline-block; width:100px; height:10px;"></div> | |
120 </div> | |
121 </div> | |
122 | |
123 <!-- min intrinsic width, auto column-count and large column-width --> | |
124 <div style="width:1px;"> | |
125 <div id="elm17" class="intrinsic mcw150 gap15"> | |
126 <div style="width:100px; height:10px;"></div> | |
127 </div> | |
128 </div> | |
129 <!-- max intrinsic width, auto column-count and large column-width --> | |
130 <div style="width:1000px;"> | |
131 <div id="elm18" class="intrinsic mcw150 gap15"> | |
132 <div style="width:100px; height:10px;"></div> | |
133 </div> | |
134 </div> | |
135 <!-- min intrinsic width, auto column-count and large column-width, breaka ble lines --> | |
136 <div style="width:1px;"> | |
137 <div id="elm19" class="intrinsic mcw150 gap15"> | |
138 <div style="display:inline-block; width:100px; height:10px;"></div>&#x 200b;<div style="display:inline-block; width:100px; height:10px;"></div> | |
139 </div> | |
140 </div> | |
141 <!-- max intrinsic width, auto column-count and large column-width, breaka ble lines --> | |
142 <div style="width:1000px;"> | |
143 <div id="elm20" class="intrinsic mcw150 gap15"> | |
144 <div style="display:inline-block; width:100px; height:10px;"></div>&#x 200b;<div style="display:inline-block; width:100px; height:10px;"></div> | |
145 </div> | |
146 </div> | |
147 </div> | |
148 | |
149 <script> | |
150 // non-auto column-count | |
ojan
2013/08/30 17:50:09
This test would be more clear as a check-layout.js
mstensho (USE GERRIT)
2013/08/30 18:42:17
Done.
| |
151 shouldBe("elm01.offsetWidth", "330"); | |
152 shouldBe("elm02.offsetWidth", "330"); | |
153 shouldBe("elm03.offsetWidth", "330"); | |
154 shouldBe("elm04.offsetWidth", "630"); | |
155 | |
156 // non-auto column-count and small column-width | |
157 shouldBe("elm05.offsetWidth", "50"); | |
158 shouldBe("elm06.offsetWidth", "330"); | |
159 shouldBe("elm07.offsetWidth", "50"); | |
160 shouldBe("elm08.offsetWidth", "630"); | |
161 | |
162 // non-auto column-count and large column-width | |
163 shouldBe("elm09.offsetWidth", "100"); | |
164 shouldBe("elm10.offsetWidth", "480"); | |
165 shouldBe("elm11.offsetWidth", "100"); | |
166 shouldBe("elm12.offsetWidth", "630"); | |
167 | |
168 // auto column-count and small column-width | |
169 shouldBe("elm13.offsetWidth", "50"); | |
170 shouldBe("elm14.offsetWidth", "100"); | |
171 shouldBe("elm15.offsetWidth", "50"); | |
172 shouldBe("elm16.offsetWidth", "200"); | |
173 | |
174 // auto column-count and large column-width | |
175 shouldBe("elm17.offsetWidth", "100"); | |
176 shouldBe("elm18.offsetWidth", "150"); | |
177 shouldBe("elm19.offsetWidth", "100"); | |
178 shouldBe("elm20.offsetWidth", "200"); | |
179 </script> | |
180 <script src="../js/resources/js-test-post.js"></script> | |
181 </body> | |
182 </html> | |
OLD | NEW |