OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <script src="../../resources/js-test.js"></script> | 4 <script src="../../resources/js-test.js"></script> |
5 </head> | 5 </head> |
6 <body> | 6 <body> |
7 <div id="flexbox"> | 7 <div id="flexbox"> |
8 <div id="flexitem"></div> | 8 <div id="flexitem"></div> |
9 </div> | 9 </div> |
10 <script> | 10 <script> |
11 description('Tests the interaction between the -webkit-flex shorthand propery an
d the -webkit-flex-grow, -webkit-flex-shrink, and -webkit-flex-basis longhand pr
operties.'); | 11 description('Tests the interaction between the flex shorthand propery and the fl
ex-grow, flex-shrink, and flex-basis longhand properties.'); |
12 | 12 |
13 var flexitem = document.getElementById("flexitem"); | 13 var flexitem = document.getElementById("flexitem"); |
14 | 14 |
15 // Test default value. | 15 // Test default value. |
16 shouldBeEqualToString('flexitem.style.webkitFlex', ''); | 16 shouldBeEqualToString('flexitem.style.flex', ''); |
17 shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 1 auto'); | 17 shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 1 auto'); |
18 | 18 |
19 flexitem.style.webkitFlexGrow = 2; | 19 flexitem.style.flexGrow = 2; |
20 shouldBeEqualToString('flexitem.style.webkitFlexGrow', '2'); | 20 shouldBeEqualToString('flexitem.style.flexGrow', '2'); |
21 shouldBeEqualToString('getComputedStyle(flexitem).webkitFlexGrow', '2'); | 21 shouldBeEqualToString('getComputedStyle(flexitem).flexGrow', '2'); |
22 shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '2 1 auto'); | 22 shouldBeEqualToString('getComputedStyle(flexitem).flex', '2 1 auto'); |
23 | 23 |
24 flexitem.style.webkitFlexShrink = 3; | 24 flexitem.style.flexShrink = 3; |
25 shouldBeEqualToString('flexitem.style.webkitFlexShrink', '3'); | 25 shouldBeEqualToString('flexitem.style.flexShrink', '3'); |
26 shouldBeEqualToString('getComputedStyle(flexitem).webkitFlexShrink', '3'); | 26 shouldBeEqualToString('getComputedStyle(flexitem).flexShrink', '3'); |
27 shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '2 3 auto'); | 27 shouldBeEqualToString('getComputedStyle(flexitem).flex', '2 3 auto'); |
28 | 28 |
29 flexitem.style.webkitFlexBasis = 0; | 29 flexitem.style.flexBasis = 0; |
30 shouldBeEqualToString('flexitem.style.webkitFlexBasis', '0px'); | 30 shouldBeEqualToString('flexitem.style.flexBasis', '0px'); |
31 shouldBeEqualToString('getComputedStyle(flexitem).webkitFlexBasis', '0px'); | 31 shouldBeEqualToString('getComputedStyle(flexitem).flexBasis', '0px'); |
32 shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '2 3 0px'); | 32 shouldBeEqualToString('getComputedStyle(flexitem).flex', '2 3 0px'); |
33 | 33 |
34 flexitem.style.webkitFlexShrink = 0; | 34 flexitem.style.flexShrink = 0; |
35 shouldBeEqualToString('flexitem.style.webkitFlexShrink', '0'); | 35 shouldBeEqualToString('flexitem.style.flexShrink', '0'); |
36 shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '2 0 0px'); | 36 shouldBeEqualToString('getComputedStyle(flexitem).flex', '2 0 0px'); |
37 | 37 |
38 flexitem.style.webkitFlexBasis = '50%'; | 38 flexitem.style.flexBasis = '50%'; |
39 shouldBeEqualToString('flexitem.style.webkitFlexBasis', '50%'); | 39 shouldBeEqualToString('flexitem.style.flexBasis', '50%'); |
40 shouldBeEqualToString('getComputedStyle(flexitem).webkitFlexBasis', '50%'); | 40 shouldBeEqualToString('getComputedStyle(flexitem).flexBasis', '50%'); |
41 shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '2 0 50%'); | 41 shouldBeEqualToString('getComputedStyle(flexitem).flex', '2 0 50%'); |
42 | 42 |
43 flexitem.style.webkitFlexBasis = 'auto'; | 43 flexitem.style.flexBasis = 'auto'; |
44 shouldBeEqualToString('flexitem.style.webkitFlexBasis', 'auto'); | 44 shouldBeEqualToString('flexitem.style.flexBasis', 'auto'); |
45 shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '2 0 auto'); | 45 shouldBeEqualToString('getComputedStyle(flexitem).flex', '2 0 auto'); |
46 | 46 |
47 flexitem.style.webkitFlex = 'none'; | 47 flexitem.style.flex = 'none'; |
48 shouldBeEqualToString('flexitem.style.webkitFlex', '0 0 auto'); | 48 shouldBeEqualToString('flexitem.style.flex', '0 0 auto'); |
49 shouldBeEqualToString('flexitem.style.webkitFlexGrow', '0'); | 49 shouldBeEqualToString('flexitem.style.flexGrow', '0'); |
50 shouldBeEqualToString('flexitem.style.webkitFlexShrink', '0'); | 50 shouldBeEqualToString('flexitem.style.flexShrink', '0'); |
51 shouldBeEqualToString('flexitem.style.webkitFlexBasis', 'auto'); | 51 shouldBeEqualToString('flexitem.style.flexBasis', 'auto'); |
52 shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 0 auto'); | 52 shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto'); |
53 | 53 |
54 flexitem.style.webkitFlexGrow = 1.5; | 54 flexitem.style.flexGrow = 1.5; |
55 shouldBeEqualToString('flexitem.style.webkitFlex', '1.5 0 auto'); | 55 shouldBeEqualToString('flexitem.style.flex', '1.5 0 auto'); |
56 shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '1.5 0 auto'); | 56 shouldBeEqualToString('getComputedStyle(flexitem).flex', '1.5 0 auto'); |
57 | 57 |
58 flexitem.style.webkitFlex = 3; | 58 flexitem.style.flex = 3; |
59 shouldBeEqualToString('flexitem.style.webkitFlex', '3 1 0%'); | 59 shouldBeEqualToString('flexitem.style.flex', '3 1 0%'); |
60 shouldBeEqualToString('flexitem.style.webkitFlexGrow', '3'); | 60 shouldBeEqualToString('flexitem.style.flexGrow', '3'); |
61 shouldBeEqualToString('flexitem.style.webkitFlexShrink', '1'); | 61 shouldBeEqualToString('flexitem.style.flexShrink', '1'); |
62 shouldBeEqualToString('flexitem.style.webkitFlexBasis', '0%'); | 62 shouldBeEqualToString('flexitem.style.flexBasis', '0%'); |
63 shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '3 1 0%'); | 63 shouldBeEqualToString('getComputedStyle(flexitem).flex', '3 1 0%'); |
64 | 64 |
65 </script> | 65 </script> |
66 </body> | 66 </body> |
67 </html> | 67 </html> |
OLD | NEW |