blob: 28d8449645c434f6aa3c13e7c729f7535d42d926 [file] [log] [blame]
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../../resources/js-test.js"></script>
</head>
<body>
<div id="flexbox">
<div id="flexitem"></div>
</div>
<script>
description('Tests being able to set the display to flex and inline-flex.');
var flexbox = document.getElementById("flexbox");
flexbox.style.display = 'flex';
shouldBeEqualToString('flexbox.style.display', 'flex');
flexbox.style.display = 'inline';
shouldBeEqualToString('flexbox.style.display', 'inline');
flexbox.style.display = 'inline-flex';
shouldBeEqualToString('flexbox.style.display', 'inline-flex');
flexbox.style.display = 'junk';
shouldBeEqualToString('flexbox.style.display', 'inline-flex');
flexbox.style.display = 'block';
shouldBeEqualToString('flexbox.style.display', 'block');
flexbox.style.display = 'flex';
var flexitem = document.getElementById("flexitem");
shouldBeEqualToString('flexitem.style.order', '');
flexitem.style.order = 2;
shouldBeEqualToString('flexitem.style.order', '2');
flexitem.style.order = -1;
shouldBeEqualToString('flexitem.style.order', '-1');
flexitem.style.order = 0;
shouldBeEqualToString('flexitem.style.order', '0');
// order must be an integer.
flexitem.style.order = 1.5;
shouldBeEqualToString('flexitem.style.order', '0');
flexitem.style.order = "test";
shouldBeEqualToString('flexitem.style.order', '0');
flexitem.style.order = '';
shouldBeEqualToString('flexitem.style.order', '');
shouldBeEqualToString('flexbox.style.justifyContent', '');
// The initial value is 'normal'.
shouldBeEqualToString('window.getComputedStyle(flexbox, null).justifyContent', 'normal');
flexbox.style.justifyContent = 'foo';
shouldBeEqualToString('flexbox.style.justifyContent', '');
flexbox.style.justifyContent = 'flex-start';
shouldBeEqualToString('flexbox.style.justifyContent', 'flex-start');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).justifyContent', 'flex-start');
flexbox.style.justifyContent = 'flex-end';
shouldBeEqualToString('flexbox.style.justifyContent', 'flex-end');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).justifyContent', 'flex-end');
flexbox.style.justifyContent = 'center';
shouldBeEqualToString('flexbox.style.justifyContent', 'center');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).justifyContent', 'center');
flexbox.style.justifyContent = 'space-between';
shouldBeEqualToString('flexbox.style.justifyContent', 'space-between');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).justifyContent', 'space-between');
flexbox.style.justifyContent = 'space-evenly';
shouldBeEqualToString('flexbox.style.justifyContent', 'space-evenly');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).justifyContent', 'space-evenly');
flexbox.style.justifyContent = '';
shouldBeEqualToString('flexbox.style.justifyContent', '');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).justifyContent', 'normal');
shouldBeEqualToString('flexbox.style.alignSelf', '');
// The initial value is 'auto'.
shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'auto');
shouldBeEqualToString('window.getComputedStyle(document.documentElement, null).alignSelf', 'auto');
flexbox.style.alignSelf = 'foo';
shouldBeEqualToString('flexbox.style.alignSelf', '');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'auto');
flexbox.style.alignSelf = 'auto';
shouldBeEqualToString('flexbox.style.alignSelf', 'auto');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'auto');
flexbox.style.alignSelf = 'flex-start';
shouldBeEqualToString('flexbox.style.alignSelf', 'flex-start');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'flex-start');
flexbox.style.alignSelf = 'flex-end';
shouldBeEqualToString('flexbox.style.alignSelf', 'flex-end');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'flex-end');
flexbox.style.alignSelf = 'center';
shouldBeEqualToString('flexbox.style.alignSelf', 'center');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'center');
flexbox.style.alignSelf = 'stretch';
shouldBeEqualToString('flexbox.style.alignSelf', 'stretch');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'stretch');
flexbox.style.alignSelf = 'baseline';
shouldBeEqualToString('flexbox.style.alignSelf', 'baseline');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'baseline');
flexbox.style.alignSelf = '';
shouldBeEqualToString('flexbox.style.alignSelf', '');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignSelf', 'auto');
shouldBeEqualToString('flexbox.style.alignItems', '');
shouldBeEqualToString('flexitem.style.alignSelf', '');
// The initial value is 'auto'.
shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'normal');
shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'auto');
flexbox.style.alignItems = 'foo';
shouldBeEqualToString('flexbox.style.alignItems', '');
shouldBeEqualToString('flexitem.style.alignSelf', '');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'normal');
shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'auto');
// The 'auto' value is not valid for the align-items property.
flexbox.style.alignItems = 'auto';
shouldBeEqualToString('flexbox.style.alignItems', '');
shouldBeEqualToString('flexitem.style.alignSelf', '');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'normal');
shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'auto');
flexbox.style.alignItems = 'flex-start';
shouldBeEqualToString('flexbox.style.alignItems', 'flex-start');
shouldBeEqualToString('flexitem.style.alignSelf', '');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'flex-start');
shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'auto');
flexbox.style.alignItems = 'flex-end';
shouldBeEqualToString('flexbox.style.alignItems', 'flex-end');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'flex-end');
shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'auto');
flexbox.style.alignItems = 'center';
shouldBeEqualToString('flexbox.style.alignItems', 'center');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'center');
shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'auto');
flexbox.style.alignItems = 'stretch';
shouldBeEqualToString('flexbox.style.alignItems', 'stretch');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'stretch');
shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'auto');
flexbox.style.alignItems = 'baseline';
shouldBeEqualToString('flexbox.style.alignItems', 'baseline');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'baseline');
shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'auto');
flexbox.style.alignItems = '';
shouldBeEqualToString('flexbox.style.alignItems', '');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'normal');
shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'auto');
flexbox.style.display = 'none';
shouldBeEqualToString('flexbox.style.alignItems', '');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignItems', 'normal');
shouldBeEqualToString('window.getComputedStyle(flexitem, null).alignSelf', 'auto');
flexbox.style.display = 'flex';
// FIXME: This should probably return stretch. See https://bugs.webkit.org/show_bug.cgi?id=14563.
var detachedFlexbox = document.createElement('div');
var detachedFlexItem = document.createElement('div');
detachedFlexbox.appendChild(detachedFlexItem);
shouldBeEqualToString('window.getComputedStyle(detachedFlexbox, null).alignSelf', '');
shouldBeEqualToString('window.getComputedStyle(detachedFlexItem, null).alignSelf', '');
shouldBeEqualToString('flexbox.style.flexDirection', '');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexDirection', 'row');
flexbox.style.flexDirection = 'foo';
shouldBeEqualToString('flexbox.style.flexDirection', '');
flexbox.style.flexDirection = 'row';
shouldBeEqualToString('flexbox.style.flexDirection', 'row');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexDirection', 'row');
flexbox.style.flexDirection = 'row-reverse';
shouldBeEqualToString('flexbox.style.flexDirection', 'row-reverse');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexDirection', 'row-reverse');
flexbox.style.flexDirection = 'column';
shouldBeEqualToString('flexbox.style.flexDirection', 'column');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexDirection', 'column');
flexbox.style.flexDirection = 'column-reverse';
shouldBeEqualToString('flexbox.style.flexDirection', 'column-reverse');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexDirection', 'column-reverse');
shouldBeEqualToString('flexbox.style.flexWrap', '');
// The initial value is 'nowrap'.
shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexWrap', 'nowrap');
flexbox.style.flexWrap = 'foo';
shouldBeEqualToString('flexbox.style.flexWrap', '');
flexbox.style.flexWrap = 'nowrap';
shouldBeEqualToString('flexbox.style.flexWrap', 'nowrap');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexWrap', 'nowrap');
flexbox.style.flexWrap = 'wrap';
shouldBeEqualToString('flexbox.style.flexWrap', 'wrap');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexWrap', 'wrap');
flexbox.style.flexWrap = 'wrap-reverse';
shouldBeEqualToString('flexbox.style.flexWrap', 'wrap-reverse');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexWrap', 'wrap-reverse');
flexbox.style.flexFlow = '';
shouldBeEqualToString('flexbox.style.flexFlow', '');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexFlow', 'row nowrap');
flexbox.style.flexFlow = 'foo';
shouldBeEqualToString('flexbox.style.flexFlow', '');
function testFlexFlowValue(value, expected, expectedComputed)
{
flexbox.style.flexFlow = value;
shouldBeEqualToString('flexbox.style.flexFlow', expected.replace(/^ /, '').replace(/ $/, ''));
shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexFlow', expectedComputed);
}
var directions = ['', 'row', 'row-reverse', 'column', 'column-reverse'];
var wraps = ['', 'nowrap', 'wrap', 'wrap-reverse'];
directions.forEach(function(direction) {
wraps.forEach(function(wrap) {
var expectedComputed = (direction || 'row') + ' ' + (wrap || 'nowrap');
var expected = direction + ' ' + wrap;
testFlexFlowValue(direction + ' ' + wrap, expected, expectedComputed);
testFlexFlowValue(wrap + ' ' + direction, expected, expectedComputed);
});
});
flexbox.style.flexFlow = '';
shouldBeEqualToString('flexbox.style.flexFlow', '');
flexbox.style.flexFlow = 'wrap wrap-reverse';
shouldBeEqualToString('flexbox.style.flexFlow', '');
flexbox.style.flexFlow = 'column row';
shouldBeEqualToString('flexbox.style.flexFlow', '');
flexbox.style.flexFlow = '';
shouldBeEqualToString('flexbox.style.flexFlow', '');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexFlow', 'row nowrap');
flexbox.style.flexDirection = 'column';
flexbox.style.flexWrap = 'initial';
shouldBeEqualToString('flexbox.style.flexFlow', 'column');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexFlow', 'column nowrap');
flexbox.style.flexWrap = 'wrap';
shouldBeEqualToString('flexbox.style.flexFlow', 'column wrap');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexFlow', 'column wrap');
flexbox.style.flexFlow = 'row-reverse wrap-reverse';
shouldBeEqualToString('flexbox.style.flexFlow', 'row-reverse wrap-reverse');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).flexFlow', 'row-reverse wrap-reverse');
// flex-flow is a shorthand, so it shouldn't show up as a computed property.
var computedStyle = getComputedStyle(flexbox);
var foundFlexFlow = false;
for (var i = 0; i < computedStyle.length; ++i) {
if (computedStyle[i] == 'flexFlow')
foundFlexFlow = true;
}
shouldBeFalse('foundFlexFlow');
// The initial value is 'normal'.
shouldBeEqualToString('flexbox.style.alignContent', '');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignContent', 'normal');
flexbox.style.alignContent = 'flex-start';
shouldBeEqualToString('flexbox.style.alignContent', 'flex-start');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignContent', 'flex-start');
flexbox.style.alignContent = 'flex-end';
shouldBeEqualToString('flexbox.style.alignContent', 'flex-end');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignContent', 'flex-end');
flexbox.style.alignContent = 'center';
shouldBeEqualToString('flexbox.style.alignContent', 'center');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignContent', 'center');
flexbox.style.alignContent = 'space-between';
shouldBeEqualToString('flexbox.style.alignContent', 'space-between');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignContent', 'space-between');
flexbox.style.alignContent = 'space-around';
shouldBeEqualToString('flexbox.style.alignContent', 'space-around');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignContent', 'space-around');
flexbox.style.alignContent = 'space-evenly';
shouldBeEqualToString('flexbox.style.alignContent', 'space-evenly');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignContent', 'space-evenly');
flexbox.style.alignContent = 'stretch';
shouldBeEqualToString('flexbox.style.alignContent', 'stretch');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignContent', 'stretch');
flexbox.style.alignContent = '';
shouldBeEqualToString('flexbox.style.alignContent', '');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignContent', 'normal');
flexbox.style.alignContent = 'foo';
shouldBeEqualToString('flexbox.style.alignContent', '');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).alignContent', 'normal');
</script>
</body>
</html>