| 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 |