OLD | NEW |
1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> | 1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <style> | 4 <link href="resources/flexbox.css" rel="stylesheet"> |
5 .flexbox { display: -webkit-flex; } | |
6 .flexboxInline { display: -webkit-inline-flex; } | |
7 </style> | |
8 <script src="../../fast/js/resources/js-test-pre.js"></script> | 5 <script src="../../fast/js/resources/js-test-pre.js"></script> |
9 </head> | 6 </head> |
10 <body> | 7 <body> |
11 <div class="flexbox" id="flexbox"></div> | 8 <div class="flexbox" id="flexbox"></div> |
12 <div class="flexboxInline" id="flexboxInline"></div> | 9 <div class="inline-flexbox" id="flexboxInline"></div> |
13 <script> | 10 <script> |
14 description('Test that setting and getting display: -webkit-flex and -webkit-inl
ine-flex works as expected'); | 11 description('Test that setting and getting display: flex and inline-flex works a
s expected'); |
15 | 12 |
16 debug("Test getting |display| set through CSS"); | 13 debug("Test getting |display| set through CSS"); |
17 var flexboxElement = document.getElementById("flexbox"); | 14 var flexboxElement = document.getElementById("flexbox"); |
18 shouldBe("getComputedStyle(flexboxElement, '').getPropertyValue('display')", "'-
webkit-flex'"); | 15 shouldBe("getComputedStyle(flexboxElement, '').getPropertyValue('display')", "'f
lex'"); |
19 var inlineFlexboxElement = document.getElementById("flexboxInline"); | 16 var inlineFlexboxElement = document.getElementById("flexboxInline"); |
20 shouldBe("getComputedStyle(inlineFlexboxElement, '').getPropertyValue('display')
", "'-webkit-inline-flex'"); | 17 shouldBe("getComputedStyle(inlineFlexboxElement, '').getPropertyValue('display')
", "'inline-flex'"); |
21 | 18 |
22 debug(""); | 19 debug(""); |
23 debug("Test getting and setting display through JS"); | 20 debug("Test getting and setting display through JS"); |
24 var element = document.createElement("div"); | 21 var element = document.createElement("div"); |
25 document.body.appendChild(element); | 22 document.body.appendChild(element); |
26 shouldBe("getComputedStyle(element, '').getPropertyValue('display')", "'block'")
; | 23 shouldBe("getComputedStyle(element, '').getPropertyValue('display')", "'block'")
; |
27 element.style.display = "-webkit-flex"; | 24 element.style.display = "flex"; |
28 shouldBe("getComputedStyle(element, '').getPropertyValue('display')", "'-webkit-
flex'"); | 25 shouldBe("getComputedStyle(element, '').getPropertyValue('display')", "'flex'"); |
29 | 26 |
30 element = document.createElement("div"); | 27 element = document.createElement("div"); |
31 document.body.appendChild(element); | 28 document.body.appendChild(element); |
32 shouldBe("getComputedStyle(element, '').getPropertyValue('display')", "'block'")
; | 29 shouldBe("getComputedStyle(element, '').getPropertyValue('display')", "'block'")
; |
| 30 element.style.display = "inline-flex"; |
| 31 shouldBe("getComputedStyle(element, '').getPropertyValue('display')", "'inline-f
lex'"); |
| 32 element.style.display = "-webkit-flex"; |
| 33 shouldBe("getComputedStyle(element, '').getPropertyValue('display')", "'flex'"); |
33 element.style.display = "-webkit-inline-flex"; | 34 element.style.display = "-webkit-inline-flex"; |
34 shouldBe("getComputedStyle(element, '').getPropertyValue('display')", "'-webkit-
inline-flex'"); | 35 shouldBe("getComputedStyle(element, '').getPropertyValue('display')", "'inline-f
lex'"); |
35 </script> | 36 </script> |
36 <script src="../../fast/js/resources/js-test-post.js"></script> | 37 <script src="../../fast/js/resources/js-test-post.js"></script> |
37 </body> | 38 </body> |
38 </html> | 39 </html> |
OLD | NEW |