| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../resources/js-test.js"></script> |
| </head> |
| <body> |
| <div id="flexbox"> |
| <div id="flexitem"></div> |
| </div> |
| <script> |
| description('Tests setting the flex propery.'); |
| |
| var flexbox = document.getElementById("flexbox"); |
| var flexitem = document.getElementById("flexitem"); |
| |
| // Test default value. |
| shouldBeEqualToString('flexitem.style.flex', ''); |
| shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 1 auto'); |
| |
| // Should not inherit. |
| flexbox.style.flex = '1 2 3px'; |
| shouldBeEqualToString('flexitem.style.flex', ''); |
| shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 1 auto'); |
| |
| // Invalid value. |
| flexitem.style.flex = 'junk'; |
| shouldBeEqualToString('flexitem.style.flex', ''); |
| shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 1 auto'); |
| |
| flexitem.style.flex = '2'; |
| shouldBeEqualToString('flexitem.style.flex', '2 1 0%'); |
| shouldBeEqualToString('getComputedStyle(flexitem).flex', '2 1 0%'); |
| |
| flexitem.style.flex = '0'; |
| shouldBeEqualToString('flexitem.style.flex', '0 1 0%'); |
| shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 1 0%'); |
| |
| flexitem.style.flex = '1.5'; |
| shouldBeEqualToString('flexitem.style.flex', '1.5 1 0%'); |
| shouldBeEqualToString('getComputedStyle(flexitem).flex', '1.5 1 0%'); |
| |
| flexitem.style.flex = 'auto'; |
| shouldBeEqualToString('flexitem.style.flex', '1 1 auto'); |
| shouldBeEqualToString('getComputedStyle(flexitem).flex', '1 1 auto'); |
| |
| flexitem.style.flex = '1px'; |
| shouldBeEqualToString('flexitem.style.flex', '1 1 1px'); |
| shouldBeEqualToString('getComputedStyle(flexitem).flex', '1 1 1px'); |
| |
| flexitem.style.flex = '2em'; |
| shouldBeEqualToString('flexitem.style.flex', '1 1 2em'); |
| shouldBeEqualToString('getComputedStyle(flexitem).flex', '1 1 32px'); |
| |
| flexitem.style.flex = '0px'; |
| shouldBeEqualToString('flexitem.style.flex', '1 1 0px'); |
| shouldBeEqualToString('getComputedStyle(flexitem).flex', '1 1 0px'); |
| |
| flexitem.style.flex = 'none'; |
| flexitem.style.flex = '-2'; // Invalid, return previous value. |
| shouldBeEqualToString('flexitem.style.flex', '0 0 auto'); |
| shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto'); |
| |
| flexitem.style.flex = '0 0'; |
| shouldBeEqualToString('flexitem.style.flex', '0 0 0%'); |
| shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 0%'); |
| |
| flexitem.style.flex = '0 1'; |
| shouldBeEqualToString('flexitem.style.flex', '0 1 0%'); |
| shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 1 0%'); |
| |
| flexitem.style.flex = '1 0'; |
| shouldBeEqualToString('flexitem.style.flex', '1 0 0%'); |
| shouldBeEqualToString('getComputedStyle(flexitem).flex', '1 0 0%'); |
| |
| flexitem.style.flex = '2 auto'; |
| shouldBeEqualToString('flexitem.style.flex', '2 1 auto'); |
| shouldBeEqualToString('getComputedStyle(flexitem).flex', '2 1 auto'); |
| |
| flexitem.style.flex = '3 4px'; |
| shouldBeEqualToString('flexitem.style.flex', '3 1 4px'); |
| shouldBeEqualToString('getComputedStyle(flexitem).flex', '3 1 4px'); |
| |
| flexitem.style.flex = 'auto 5.25'; |
| shouldBeEqualToString('flexitem.style.flex', '5.25 1 auto'); |
| shouldBeEqualToString('getComputedStyle(flexitem).flex', '5.25 1 auto'); |
| |
| flexitem.style.flex = '6em 4'; |
| shouldBeEqualToString('flexitem.style.flex', '4 1 6em'); |
| shouldBeEqualToString('getComputedStyle(flexitem).flex', '4 1 96px'); |
| |
| flexitem.style.flex = '4 0px'; |
| shouldBeEqualToString('flexitem.style.flex', '4 1 0px'); |
| shouldBeEqualToString('getComputedStyle(flexitem).flex', '4 1 0px'); |
| |
| flexitem.style.flex = '0 0px'; |
| shouldBeEqualToString('flexitem.style.flex', '0 1 0px'); |
| shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 1 0px'); |
| |
| flexitem.style.flex = 'none'; |
| flexitem.style.flex = '-1 5'; // Invalid, return previous value. |
| shouldBeEqualToString('flexitem.style.flex', '0 0 auto'); |
| shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto'); |
| |
| flexitem.style.flex = '1 -1'; // Invalid, return previous value. |
| shouldBeEqualToString('flexitem.style.flex', '0 0 auto'); |
| shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto'); |
| |
| flexitem.style.flex = '-1 -1'; // Invalid, return previous value. |
| shouldBeEqualToString('flexitem.style.flex', '0 0 auto'); |
| shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto'); |
| |
| flexitem.style.flex = 'auto 2em'; // Invalid, return previous value. |
| shouldBeEqualToString('flexitem.style.flex', '0 0 auto'); |
| shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto'); |
| |
| flexitem.style.flex = '2px 4px'; // Invalid, return previous value. |
| shouldBeEqualToString('flexitem.style.flex', '0 0 auto'); |
| shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto'); |
| |
| flexitem.style.flex = '0px 0px'; // Invalid, return previous value. |
| shouldBeEqualToString('flexitem.style.flex', '0 0 auto'); |
| shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto'); |
| |
| flexitem.style.flex = '1 2 0'; |
| shouldBeEqualToString('flexitem.style.flex', '1 2 0px'); |
| shouldBeEqualToString('getComputedStyle(flexitem).flex', '1 2 0px'); |
| |
| flexitem.style.flex = '0 0 0'; |
| shouldBeEqualToString('flexitem.style.flex', '0 0 0px'); |
| shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 0px'); |
| |
| flexitem.style.flex = '1 2 auto'; |
| shouldBeEqualToString('flexitem.style.flex', '1 2 auto'); |
| shouldBeEqualToString('getComputedStyle(flexitem).flex', '1 2 auto'); |
| |
| flexitem.style.flex = '1.75 2 3px'; |
| shouldBeEqualToString('flexitem.style.flex', '1.75 2 3px'); |
| shouldBeEqualToString('getComputedStyle(flexitem).flex', '1.75 2 3px'); |
| |
| flexitem.style.flex = '1 3px 2'; // Invalid, return previous value. |
| shouldBeEqualToString('flexitem.style.flex', '1.75 2 3px'); |
| shouldBeEqualToString('getComputedStyle(flexitem).flex', '1.75 2 3px'); |
| |
| flexitem.style.flex = '1 auto 1'; // Invalid, return previous value. |
| shouldBeEqualToString('flexitem.style.flex', '1.75 2 3px'); |
| shouldBeEqualToString('getComputedStyle(flexitem).flex', '1.75 2 3px'); |
| |
| flexitem.style.flex = '3px 1 2'; |
| shouldBeEqualToString('flexitem.style.flex', '1 2 3px'); |
| shouldBeEqualToString('getComputedStyle(flexitem).flex', '1 2 3px'); |
| |
| flexitem.style.flex = 'calc(20px + 40%) 4 3'; |
| shouldBeEqualToString('flexitem.style.flex', '4 3 calc(40% + 20px)'); |
| shouldBeEqualToString('getComputedStyle(flexitem).flex', '4 3 calc(40% + 20px)'); |
| |
| flexitem.style.flex = '1 2 calc(10px + 50%)'; |
| shouldBeEqualToString('flexitem.style.flex', '1 2 calc(50% + 10px)'); |
| shouldBeEqualToString('getComputedStyle(flexitem).flex', '1 2 calc(50% + 10px)'); |
| |
| flexitem.style.flex = 'auto 0 0'; |
| shouldBeEqualToString('flexitem.style.flex', '0 0 auto'); |
| shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto'); |
| |
| flexitem.style.flex = 'auto 0'; |
| shouldBeEqualToString('flexitem.style.flex', '0 1 auto'); |
| shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 1 auto'); |
| |
| flexitem.style.flex = 'auto 3'; |
| shouldBeEqualToString('flexitem.style.flex', '3 1 auto'); |
| shouldBeEqualToString('getComputedStyle(flexitem).flex', '3 1 auto'); |
| |
| flexitem.style.flex = '0px 0'; |
| shouldBeEqualToString('flexitem.style.flex', '0 1 0px'); |
| shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 1 0px'); |
| |
| flexitem.style.flex = '0 0px 0'; // Invalid, return previous value. |
| shouldBeEqualToString('flexitem.style.flex', '0 1 0px'); |
| shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 1 0px'); |
| |
| flexitem.style.flex = 'none'; |
| flexitem.style.flex = '1 2 3'; // Invalid, return previous value. |
| shouldBeEqualToString('flexitem.style.flex', '0 0 auto'); |
| shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto'); |
| |
| flexitem.style.flex = '0 2 3'; // Invalid, return previous value. |
| shouldBeEqualToString('flexitem.style.flex', '0 0 auto'); |
| shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto'); |
| |
| flexitem.style.flex = '1 0 3'; // Invalid, return previous value. |
| shouldBeEqualToString('flexitem.style.flex', '0 0 auto'); |
| shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto'); |
| |
| flexitem.style.flex = '0 0 1'; // Invalid, return previous value. |
| shouldBeEqualToString('flexitem.style.flex', '0 0 auto'); |
| shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto'); |
| |
| flexitem.style.flex = '1 -2 3px'; // Invalid, return previous value. |
| shouldBeEqualToString('flexitem.style.flex', '0 0 auto'); |
| shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto'); |
| |
| flexitem.style.flex = '1 2px 3px'; // Invalid, return previous value. |
| shouldBeEqualToString('flexitem.style.flex', '0 0 auto'); |
| shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto'); |
| |
| flexitem.style.flex = '1 2px auto'; // Invalid, return previous value. |
| shouldBeEqualToString('flexitem.style.flex', '0 0 auto'); |
| shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto'); |
| |
| flexitem.style.flex = '0px 0px 0'; // Invalid, return previous value. |
| shouldBeEqualToString('flexitem.style.flex', '0 0 auto'); |
| shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto'); |
| |
| flexitem.style.flex = '0 0 0 0'; // Invalid, return previous value. |
| shouldBeEqualToString('flexitem.style.flex', '0 0 auto'); |
| shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto'); |
| |
| flexitem.style.flex = '0 0 0px 0'; // Invalid, return previous value. |
| shouldBeEqualToString('flexitem.style.flex', '0 0 auto'); |
| shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto'); |
| |
| flexitem.style.flex = '0 0 0px 0px'; // Invalid, return previous value. |
| shouldBeEqualToString('flexitem.style.flex', '0 0 auto'); |
| shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto'); |
| |
| flexitem.style.flex = '0 0 0px 0'; // Invalid, return previous value. |
| shouldBeEqualToString('flexitem.style.flex', '0 0 auto'); |
| shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto'); |
| |
| flexitem.style.flex = '1, 2, 3px'; // Invalid, return previous value. |
| shouldBeEqualToString('flexitem.style.flex', '0 0 auto'); |
| shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto'); |
| |
| flexitem.style.flex = '1,'; // Invalid, return previous value. |
| shouldBeEqualToString('flexitem.style.flex', '0 0 auto'); |
| shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto'); |
| |
| flexitem.style.flex = 'initial'; |
| shouldBeEqualToString('flexitem.style.flex', 'initial'); |
| shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 1 auto'); |
| |
| flexitem.style.flex = 'none'; |
| // FIXME: This test case is failing. https://bugs.webkit.org/show_bug.cgi?id=90020 |
| shouldBeEqualToString('flexitem.style.flex', '0 0 auto'); |
| shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto'); |
| </script> |
| </body> |
| </html> |
