| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../resources/js-test-pre.js"></script> |
| </head> |
| <body> |
| <div id="flexbox"> |
| <div id="flexitem"></div> |
| </div> |
| <script> |
| description('Tests the interaction between the -webkit-flex shorthand propery and the -webkit-flex-grow, -webkit-flex-shrink, and -webkit-flex-basis longhand properties.'); |
| |
| var flexitem = document.getElementById("flexitem"); |
| |
| // Test default value. |
| shouldBeEqualToString('flexitem.style.webkitFlex', ''); |
| shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 1 auto'); |
| |
| flexitem.style.webkitFlexGrow = 2; |
| shouldBeEqualToString('flexitem.style.webkitFlexGrow', '2'); |
| shouldBeEqualToString('getComputedStyle(flexitem).webkitFlexGrow', '2'); |
| shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '2 1 auto'); |
| |
| flexitem.style.webkitFlexShrink = 3; |
| shouldBeEqualToString('flexitem.style.webkitFlexShrink', '3'); |
| shouldBeEqualToString('getComputedStyle(flexitem).webkitFlexShrink', '3'); |
| shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '2 3 auto'); |
| |
| flexitem.style.webkitFlexBasis = 0; |
| shouldBeEqualToString('flexitem.style.webkitFlexBasis', '0px'); |
| shouldBeEqualToString('getComputedStyle(flexitem).webkitFlexBasis', '0px'); |
| shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '2 3 0px'); |
| |
| flexitem.style.webkitFlexShrink = 0; |
| shouldBeEqualToString('flexitem.style.webkitFlexShrink', '0'); |
| shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '2 0 0px'); |
| |
| flexitem.style.webkitFlexBasis = '50%'; |
| shouldBeEqualToString('flexitem.style.webkitFlexBasis', '50%'); |
| shouldBeEqualToString('getComputedStyle(flexitem).webkitFlexBasis', '50%'); |
| shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '2 0 50%'); |
| |
| flexitem.style.webkitFlexBasis = 'auto'; |
| shouldBeEqualToString('flexitem.style.webkitFlexBasis', 'auto'); |
| shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '2 0 auto'); |
| |
| flexitem.style.webkitFlex = 'none'; |
| shouldBeEqualToString('flexitem.style.webkitFlex', '0 0 auto'); |
| shouldBeEqualToString('flexitem.style.webkitFlexGrow', '0'); |
| shouldBeEqualToString('flexitem.style.webkitFlexShrink', '0'); |
| shouldBeEqualToString('flexitem.style.webkitFlexBasis', 'auto'); |
| shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '0 0 auto'); |
| |
| flexitem.style.webkitFlexGrow = 1.5; |
| shouldBeEqualToString('flexitem.style.webkitFlex', '1.5 0 auto'); |
| shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '1.5 0 auto'); |
| |
| flexitem.style.webkitFlex = 3; |
| shouldBeEqualToString('flexitem.style.webkitFlex', '3 1 0px'); |
| shouldBeEqualToString('flexitem.style.webkitFlexGrow', '3'); |
| shouldBeEqualToString('flexitem.style.webkitFlexShrink', '1'); |
| shouldBeEqualToString('flexitem.style.webkitFlexBasis', '0px'); |
| shouldBeEqualToString('getComputedStyle(flexitem).webkitFlex', '3 1 0px'); |
| |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
