2012-04-03 00:24:28 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
2017-02-28 16:23:15 +00:00
|
|
|
<script src="../../resources/js-test.js"></script>
|
2012-04-03 00:24:28 +00:00
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="flexbox">
|
|
|
|
|
<div id="flexitem"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<script>
|
2017-02-28 16:23:15 +00:00
|
|
|
description('Tests setting the flex propery.');
|
2012-04-03 00:24:28 +00:00
|
|
|
|
|
|
|
|
var flexbox = document.getElementById("flexbox");
|
|
|
|
|
var flexitem = document.getElementById("flexitem");
|
|
|
|
|
|
|
|
|
|
// Test default value.
|
2017-02-28 16:23:15 +00:00
|
|
|
shouldBeEqualToString('flexitem.style.flex', '');
|
|
|
|
|
shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 1 auto');
|
2012-04-03 00:24:28 +00:00
|
|
|
|
|
|
|
|
// Should not inherit.
|
2017-02-28 16:23:15 +00:00
|
|
|
flexbox.style.flex = '1 2 3px';
|
|
|
|
|
shouldBeEqualToString('flexitem.style.flex', '');
|
|
|
|
|
shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 1 auto');
|
2012-04-03 00:24:28 +00:00
|
|
|
|
|
|
|
|
// Invalid value.
|
2017-02-28 16:23:15 +00:00
|
|
|
flexitem.style.flex = 'junk';
|
|
|
|
|
shouldBeEqualToString('flexitem.style.flex', '');
|
|
|
|
|
shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 1 auto');
|
|
|
|
|
|
|
|
|
|
flexitem.style.flex = '2';
|
2017-03-02 22:38:07 +00:00
|
|
|
shouldBeEqualToString('flexitem.style.flex', '2 1 0%');
|
|
|
|
|
shouldBeEqualToString('getComputedStyle(flexitem).flex', '2 1 0%');
|
2017-02-28 16:23:15 +00:00
|
|
|
|
|
|
|
|
flexitem.style.flex = '0';
|
2017-03-02 22:38:07 +00:00
|
|
|
shouldBeEqualToString('flexitem.style.flex', '0 1 0%');
|
|
|
|
|
shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 1 0%');
|
2017-02-28 16:23:15 +00:00
|
|
|
|
|
|
|
|
flexitem.style.flex = '1.5';
|
2017-03-02 22:38:07 +00:00
|
|
|
shouldBeEqualToString('flexitem.style.flex', '1.5 1 0%');
|
|
|
|
|
shouldBeEqualToString('getComputedStyle(flexitem).flex', '1.5 1 0%');
|
2017-02-28 16:23:15 +00:00
|
|
|
|
|
|
|
|
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';
|
2017-03-02 22:38:07 +00:00
|
|
|
shouldBeEqualToString('flexitem.style.flex', '0 0 0%');
|
|
|
|
|
shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 0%');
|
2017-02-28 16:23:15 +00:00
|
|
|
|
|
|
|
|
flexitem.style.flex = '0 1';
|
2017-03-02 22:38:07 +00:00
|
|
|
shouldBeEqualToString('flexitem.style.flex', '0 1 0%');
|
|
|
|
|
shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 1 0%');
|
2017-02-28 16:23:15 +00:00
|
|
|
|
|
|
|
|
flexitem.style.flex = '1 0';
|
2017-03-02 22:38:07 +00:00
|
|
|
shouldBeEqualToString('flexitem.style.flex', '1 0 0%');
|
|
|
|
|
shouldBeEqualToString('getComputedStyle(flexitem).flex', '1 0 0%');
|
2017-02-28 16:23:15 +00:00
|
|
|
|
|
|
|
|
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');
|
2012-04-03 00:24:28 +00:00
|
|
|
|
2017-02-28 16:23:15 +00:00
|
|
|
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');
|
2012-04-03 00:24:28 +00:00
|
|
|
|
2017-02-28 16:23:15 +00:00
|
|
|
flexitem.style.flex = '3px 1 2';
|
|
|
|
|
shouldBeEqualToString('flexitem.style.flex', '1 2 3px');
|
|
|
|
|
shouldBeEqualToString('getComputedStyle(flexitem).flex', '1 2 3px');
|
2012-04-03 00:24:28 +00:00
|
|
|
|
2017-02-28 16:23:15 +00:00
|
|
|
flexitem.style.flex = 'calc(20px + 40%) 4 3';
|
2019-12-04 02:22:35 +00:00
|
|
|
shouldBeEqualToString('flexitem.style.flex', '4 3 calc(40% + 20px)');
|
|
|
|
|
shouldBeEqualToString('getComputedStyle(flexitem).flex', '4 3 calc(40% + 20px)');
|
2012-04-03 00:24:28 +00:00
|
|
|
|
2017-02-28 16:23:15 +00:00
|
|
|
flexitem.style.flex = '1 2 calc(10px + 50%)';
|
2019-12-04 02:22:35 +00:00
|
|
|
shouldBeEqualToString('flexitem.style.flex', '1 2 calc(50% + 10px)');
|
|
|
|
|
shouldBeEqualToString('getComputedStyle(flexitem).flex', '1 2 calc(50% + 10px)');
|
2012-04-03 00:24:28 +00:00
|
|
|
|
2017-02-28 16:23:15 +00:00
|
|
|
flexitem.style.flex = 'auto 0 0';
|
|
|
|
|
shouldBeEqualToString('flexitem.style.flex', '0 0 auto');
|
|
|
|
|
shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');
|
2012-04-03 00:24:28 +00:00
|
|
|
|
2017-02-28 16:23:15 +00:00
|
|
|
flexitem.style.flex = 'auto 0';
|
|
|
|
|
shouldBeEqualToString('flexitem.style.flex', '0 1 auto');
|
|
|
|
|
shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 1 auto');
|
2012-06-01 03:32:47 +00:00
|
|
|
|
2017-02-28 16:23:15 +00:00
|
|
|
flexitem.style.flex = 'auto 3';
|
|
|
|
|
shouldBeEqualToString('flexitem.style.flex', '3 1 auto');
|
|
|
|
|
shouldBeEqualToString('getComputedStyle(flexitem).flex', '3 1 auto');
|
2012-06-01 03:32:47 +00:00
|
|
|
|
2017-02-28 16:23:15 +00:00
|
|
|
flexitem.style.flex = '0px 0';
|
|
|
|
|
shouldBeEqualToString('flexitem.style.flex', '0 1 0px');
|
|
|
|
|
shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 1 0px');
|
2012-06-01 03:32:47 +00:00
|
|
|
|
2017-02-28 16:23:15 +00:00
|
|
|
flexitem.style.flex = '0 0px 0'; // Invalid, return previous value.
|
|
|
|
|
shouldBeEqualToString('flexitem.style.flex', '0 1 0px');
|
|
|
|
|
shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 1 0px');
|
2012-04-03 00:24:28 +00:00
|
|
|
|
2017-02-28 16:23:15 +00:00
|
|
|
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');
|
2012-04-03 00:24:28 +00:00
|
|
|
|
2017-02-28 16:23:15 +00:00
|
|
|
flexitem.style.flex = '0 2 3'; // Invalid, return previous value.
|
|
|
|
|
shouldBeEqualToString('flexitem.style.flex', '0 0 auto');
|
|
|
|
|
shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');
|
2012-04-03 00:24:28 +00:00
|
|
|
|
2017-02-28 16:23:15 +00:00
|
|
|
flexitem.style.flex = '1 0 3'; // Invalid, return previous value.
|
|
|
|
|
shouldBeEqualToString('flexitem.style.flex', '0 0 auto');
|
|
|
|
|
shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');
|
2012-04-03 00:24:28 +00:00
|
|
|
|
2017-02-28 16:23:15 +00:00
|
|
|
flexitem.style.flex = '0 0 1'; // Invalid, return previous value.
|
|
|
|
|
shouldBeEqualToString('flexitem.style.flex', '0 0 auto');
|
|
|
|
|
shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');
|
2012-04-03 00:24:28 +00:00
|
|
|
|
2017-02-28 16:23:15 +00:00
|
|
|
flexitem.style.flex = '1 -2 3px'; // Invalid, return previous value.
|
|
|
|
|
shouldBeEqualToString('flexitem.style.flex', '0 0 auto');
|
|
|
|
|
shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');
|
2012-04-03 00:24:28 +00:00
|
|
|
|
2017-02-28 16:23:15 +00:00
|
|
|
flexitem.style.flex = '1 2px 3px'; // Invalid, return previous value.
|
|
|
|
|
shouldBeEqualToString('flexitem.style.flex', '0 0 auto');
|
|
|
|
|
shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');
|
2012-04-03 00:24:28 +00:00
|
|
|
|
2017-02-28 16:23:15 +00:00
|
|
|
flexitem.style.flex = '1 2px auto'; // Invalid, return previous value.
|
|
|
|
|
shouldBeEqualToString('flexitem.style.flex', '0 0 auto');
|
|
|
|
|
shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');
|
2012-04-03 00:24:28 +00:00
|
|
|
|
2017-02-28 16:23:15 +00:00
|
|
|
flexitem.style.flex = '0px 0px 0'; // Invalid, return previous value.
|
|
|
|
|
shouldBeEqualToString('flexitem.style.flex', '0 0 auto');
|
|
|
|
|
shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');
|
2012-04-03 00:24:28 +00:00
|
|
|
|
2017-02-28 16:23:15 +00:00
|
|
|
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');
|
2012-04-03 00:24:28 +00:00
|
|
|
|
2017-02-28 16:23:15 +00:00
|
|
|
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');
|
2012-04-03 00:24:28 +00:00
|
|
|
|
2017-02-28 16:23:15 +00:00
|
|
|
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');
|
2012-04-03 00:24:28 +00:00
|
|
|
|
2017-02-28 16:23:15 +00:00
|
|
|
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');
|
2012-04-03 00:24:28 +00:00
|
|
|
|
2017-02-28 16:23:15 +00:00
|
|
|
flexitem.style.flex = '1, 2, 3px'; // Invalid, return previous value.
|
|
|
|
|
shouldBeEqualToString('flexitem.style.flex', '0 0 auto');
|
|
|
|
|
shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');
|
2012-04-03 00:24:28 +00:00
|
|
|
|
2017-02-28 16:23:15 +00:00
|
|
|
flexitem.style.flex = '1,'; // Invalid, return previous value.
|
|
|
|
|
shouldBeEqualToString('flexitem.style.flex', '0 0 auto');
|
|
|
|
|
shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');
|
2012-04-03 00:24:28 +00:00
|
|
|
|
2017-02-28 16:23:15 +00:00
|
|
|
flexitem.style.flex = 'initial';
|
|
|
|
|
shouldBeEqualToString('flexitem.style.flex', 'initial');
|
|
|
|
|
shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 1 auto');
|
|
|
|
|
|
|
|
|
|
flexitem.style.flex = 'none';
|
2012-06-28 18:06:09 +00:00
|
|
|
// FIXME: This test case is failing. https://bugs.webkit.org/show_bug.cgi?id=90020
|
2017-02-28 16:23:15 +00:00
|
|
|
shouldBeEqualToString('flexitem.style.flex', '0 0 auto');
|
|
|
|
|
shouldBeEqualToString('getComputedStyle(flexitem).flex', '0 0 auto');
|
2012-04-03 00:24:28 +00:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
