flex-property-parsing.html | Explore in Territory

<!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>
chromium/third_party/blink/web_tests/css3/flexbox/flex-property-parsing.html
