OLD | NEW |
| (Empty) |
1 <style> | |
2 div { | |
3 border: 1px solid black; | |
4 -webkit-column-rule: 1px solid black; | |
5 } | |
6 </style> | |
7 | |
8 <div style="-webkit-columns: initial;" id="columns-test"> | |
9 Vestibulum a sapien. Phasellus ante lacus, vehicula non, cursus a, tempor ut, ma
gna. Suspendisse potenti. Fusce aliquet, odio viverra vulputate dictum, enim odi
o luctus purus, ut scelerisque quam nulla non est. Donec eros lacus, egestas vit
ae, lacinia quis, tempor quis, pede. Morbi orci erat, iaculis id, ornare ac, ele
mentum at, sem. Nunc ornare sodales nisi. Morbi interdum commodo nisl. Fusce ege
t eros non nisi ornare facilisis. Sed placerat, est non posuere posuere, purus s
em dignissim libero, a viverra tellus dolor vel lorem. Cras augue. Etiam ultrici
es consequat odio. Mauris ac libero. Etiam posuere, libero vitae euismod gravida
, urna elit imperdiet magna, vel cursus elit felis non mauris. Donec orci erat,
porta id, dignissim ut, posuere dictum, leo. Suspendisse scelerisque egestas nul
la. | |
10 </div> | |
11 | |
12 <div style="-webkit-column-count: initial;" id="count-test"> | |
13 Vestibulum a sapien. Phasellus ante lacus, vehicula non, cursus a, tempor ut, ma
gna. Suspendisse potenti. Fusce aliquet, odio viverra vulputate dictum, enim odi
o luctus purus, ut scelerisque quam nulla non est. Donec eros lacus, egestas vit
ae, lacinia quis, tempor quis, pede. Morbi orci erat, iaculis id, ornare ac, ele
mentum at, sem. Nunc ornare sodales nisi. Morbi interdum commodo nisl. Fusce ege
t eros non nisi ornare facilisis. Sed placerat, est non posuere posuere, purus s
em dignissim libero, a viverra tellus dolor vel lorem. Cras augue. Etiam ultrici
es consequat odio. Mauris ac libero. Etiam posuere, libero vitae euismod gravida
, urna elit imperdiet magna, vel cursus elit felis non mauris. Donec orci erat,
porta id, dignissim ut, posuere dictum, leo. Suspendisse scelerisque egestas nul
la. | |
14 </div> | |
15 | |
16 <div style="-webkit-column-gap: initial;" id="gap-test"> | |
17 Vestibulum a sapien. Phasellus ante lacus, vehicula non, cursus a, tempor ut, ma
gna. Suspendisse potenti. Fusce aliquet, odio viverra vulputate dictum, enim odi
o luctus purus, ut scelerisque quam nulla non est. Donec eros lacus, egestas vit
ae, lacinia quis, tempor quis, pede. Morbi orci erat, iaculis id, ornare ac, ele
mentum at, sem. Nunc ornare sodales nisi. Morbi interdum commodo nisl. Fusce ege
t eros non nisi ornare facilisis. Sed placerat, est non posuere posuere, purus s
em dignissim libero, a viverra tellus dolor vel lorem. Cras augue. Etiam ultrici
es consequat odio. Mauris ac libero. Etiam posuere, libero vitae euismod gravida
, urna elit imperdiet magna, vel cursus elit felis non mauris. Donec orci erat,
porta id, dignissim ut, posuere dictum, leo. Suspendisse scelerisque egestas nul
la. | |
18 </div> | |
19 | |
20 <div style="-webkit-column-width: initial;" id="width-test"> | |
21 Vestibulum a sapien. Phasellus ante lacus, vehicula non, cursus a, tempor ut, ma
gna. Suspendisse potenti. Fusce aliquet, odio viverra vulputate dictum, enim odi
o luctus purus, ut scelerisque quam nulla non est. Donec eros lacus, egestas vit
ae, lacinia quis, tempor quis, pede. Morbi orci erat, iaculis id, ornare ac, ele
mentum at, sem. Nunc ornare sodales nisi. Morbi interdum commodo nisl. Fusce ege
t eros non nisi ornare facilisis. Sed placerat, est non posuere posuere, purus s
em dignissim libero, a viverra tellus dolor vel lorem. Cras augue. Etiam ultrici
es consequat odio. Mauris ac libero. Etiam posuere, libero vitae euismod gravida
, urna elit imperdiet magna, vel cursus elit felis non mauris. Donec orci erat,
porta id, dignissim ut, posuere dictum, leo. Suspendisse scelerisque egestas nul
la. | |
22 </div> | |
23 | |
24 <pre id="result"/> | |
25 | |
26 <script> | |
27 var output = ""; | |
28 | |
29 function test(id, property, value) | |
30 { | |
31 var element = document.getElementById(id); | |
32 var result = window.getComputedStyle(element, null).getPropertyValue(pro
perty); | |
33 output += (result == value) ? "Pass: " : "Fail: "; | |
34 output += id + " " + property + " = " + result; | |
35 output += (result == value) ? "\n" : (" expected " + value + "\n"); | |
36 } | |
37 | |
38 if (window.testRunner) { | |
39 testRunner.dumpAsText(); | |
40 document.getElementById("columns-test").style.display = "none"; | |
41 document.getElementById("count-test").style.display = "none"; | |
42 document.getElementById("gap-test").style.display = "none"; | |
43 document.getElementById("width-test").style.display = "none"; | |
44 } | |
45 | |
46 test("columns-test", "-webkit-column-count", "auto"); | |
47 test("columns-test", "-webkit-column-width", "auto"); | |
48 test("count-test", "-webkit-column-count", "auto"); | |
49 test("gap-test", "-webkit-column-gap", "normal"); | |
50 test("width-test", "-webkit-column-width", "auto"); | |
51 | |
52 document.getElementById("result").innerText = output; | |
53 </script> | |
OLD | NEW |