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