<!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>