68 lines
2.5 KiB
HTML
68 lines
2.5 KiB
HTML
<!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>
|