css3/flexbox/css-properties.html

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../../fast/js/resources/js-test-pre.js"></script>
</head>
<body>
<div id="flexbox">
    <div id="flexitem"></div>
</div>
<script>
description('Tests being able to set the display to -webkit-flex and -webkit-inline-flex.');

var flexbox = document.getElementById("flexbox");

flexbox.style.display = '-webkit-flex';
shouldBeEqualToString('flexbox.style.display', '-webkit-flex');

flexbox.style.display = 'inline';
shouldBeEqualToString('flexbox.style.display', 'inline');

flexbox.style.display = '-webkit-inline-flex';
shouldBeEqualToString('flexbox.style.display', '-webkit-inline-flex');

flexbox.style.display = 'junk';
shouldBeEqualToString('flexbox.style.display', '-webkit-inline-flex');

flexbox.style.display = 'block';
shouldBeEqualToString('flexbox.style.display', 'block');


var flexitem = document.getElementById("flexitem");
shouldBeEqualToString('flexitem.style.webkitOrder', '');

flexitem.style.webkitOrder = 2;
shouldBeEqualToString('flexitem.style.webkitOrder', '2');

flexitem.style.webkitOrder = -1;
shouldBeEqualToString('flexitem.style.webkitOrder', '-1');

flexitem.style.webkitOrder = 0;
shouldBeEqualToString('flexitem.style.webkitOrder', '0');

// -webkit-order must be an integer.
flexitem.style.webkitOrder = 1.5;
shouldBeEqualToString('flexitem.style.webkitOrder', '0');

flexitem.style.webkitOrder = "test";
shouldBeEqualToString('flexitem.style.webkitOrder', '0');

flexitem.style.webkitOrder = '';
shouldBeEqualToString('flexitem.style.webkitOrder', '');


shouldBeEqualToString('flexbox.style.webkitJustifyContent', '');
// The initial value is 'flex-start'.
shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyContent', 'flex-start');

flexbox.style.webkitJustifyContent = 'foo';
shouldBeEqualToString('flexbox.style.webkitJustifyContent', '');

flexbox.style.webkitJustifyContent = 'flex-start';
shouldBeEqualToString('flexbox.style.webkitJustifyContent', 'flex-start');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyContent', 'flex-start');

flexbox.style.webkitJustifyContent = 'flex-end';
shouldBeEqualToString('flexbox.style.webkitJustifyContent', 'flex-end');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyContent', 'flex-end');

flexbox.style.webkitJustifyContent = 'center';
shouldBeEqualToString('flexbox.style.webkitJustifyContent', 'center');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyContent', 'center');

flexbox.style.webkitJustifyContent = 'space-between';
shouldBeEqualToString('flexbox.style.webkitJustifyContent', 'space-between');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyContent', 'space-between');

flexbox.style.webkitJustifyContent = '';
shouldBeEqualToString('flexbox.style.webkitJustifyContent', '');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitJustifyContent', 'flex-start');


shouldBeEqualToString('flexbox.style.webkitAlignSelf', '');
// The initial value is 'stretch'.
shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'stretch');
shouldBeEqualToString('window.getComputedStyle(document.documentElement, null).webkitAlignSelf', 'stretch');

flexbox.style.webkitAlignSelf = 'foo';
shouldBeEqualToString('flexbox.style.webkitAlignSelf', '');

flexbox.style.webkitAlignSelf = 'auto';
shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'auto');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'stretch');

flexbox.style.webkitAlignSelf = 'flex-start';
shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'flex-start');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'flex-start');

flexbox.style.webkitAlignSelf = 'flex-end';
shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'flex-end');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'flex-end');

flexbox.style.webkitAlignSelf = 'center';
shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'center');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'center');

flexbox.style.webkitAlignSelf = 'stretch';
shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'stretch');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'stretch');

flexbox.style.webkitAlignSelf = 'baseline';
shouldBeEqualToString('flexbox.style.webkitAlignSelf', 'baseline');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'baseline');

flexbox.style.webkitAlignSelf = '';
shouldBeEqualToString('flexbox.style.webkitAlignSelf', '');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignSelf', 'stretch');

shouldBeEqualToString('flexbox.style.webkitAlignItems', '');
// The initial value is 'stretch'.
shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'stretch');
shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'stretch');

flexbox.style.webkitAlignItems = 'foo';
shouldBeEqualToString('flexbox.style.webkitAlignItems', '');

flexbox.style.webkitAlignItems = 'auto';
shouldBeEqualToString('flexbox.style.webkitAlignItems', '');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'stretch');
shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'stretch');

flexbox.style.webkitAlignItems = 'flex-start';
shouldBeEqualToString('flexbox.style.webkitAlignItems', 'flex-start');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'flex-start');
shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'flex-start');

flexbox.style.webkitAlignItems = 'flex-end';
shouldBeEqualToString('flexbox.style.webkitAlignItems', 'flex-end');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'flex-end');
shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'flex-end');

flexbox.style.webkitAlignItems = 'center';
shouldBeEqualToString('flexbox.style.webkitAlignItems', 'center');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'center');
shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'center');

flexbox.style.webkitAlignItems = 'stretch';
shouldBeEqualToString('flexbox.style.webkitAlignItems', 'stretch');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'stretch');
shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'stretch');

flexbox.style.webkitAlignItems = 'baseline';
shouldBeEqualToString('flexbox.style.webkitAlignItems', 'baseline');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'baseline');
shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'baseline');

flexbox.style.webkitAlignItems = '';
shouldBeEqualToString('flexbox.style.webkitAlignItems', '');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'stretch');
shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'stretch');

flexbox.style.display = 'none';
shouldBeEqualToString('flexbox.style.webkitAlignItems', '');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignItems', 'stretch');
shouldBeEqualToString('window.getComputedStyle(flexitem, null).webkitAlignSelf', 'stretch');
flexbox.style.display = '';


// 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).webkitAlignSelf', '');
shouldBeEqualToString('window.getComputedStyle(detachedFlexItem, null).webkitAlignSelf', '');


shouldBeEqualToString('flexbox.style.webkitFlexDirection', '');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexDirection', 'row');

flexbox.style.webkitFlexDirection = 'foo';
shouldBeEqualToString('flexbox.style.webkitFlexDirection', '');

flexbox.style.webkitFlexDirection = 'row';
shouldBeEqualToString('flexbox.style.webkitFlexDirection', 'row');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexDirection', 'row');

flexbox.style.webkitFlexDirection = 'row-reverse';
shouldBeEqualToString('flexbox.style.webkitFlexDirection', 'row-reverse');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexDirection', 'row-reverse');

flexbox.style.webkitFlexDirection = 'column';
shouldBeEqualToString('flexbox.style.webkitFlexDirection', 'column');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexDirection', 'column');

flexbox.style.webkitFlexDirection = 'column-reverse';
shouldBeEqualToString('flexbox.style.webkitFlexDirection', 'column-reverse');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexDirection', 'column-reverse');

shouldBeEqualToString('flexbox.style.webkitFlexWrap', '');
// The initial value is 'none'.
shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexWrap', 'none');

flexbox.style.webkitFlexWrap = 'foo';
shouldBeEqualToString('flexbox.style.webkitFlexWrap', '');

flexbox.style.webkitFlexWrap = 'none';
shouldBeEqualToString('flexbox.style.webkitFlexWrap', 'none');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexWrap', 'none');

flexbox.style.webkitFlexWrap = 'wrap';
shouldBeEqualToString('flexbox.style.webkitFlexWrap', 'wrap');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexWrap', 'wrap');

flexbox.style.webkitFlexWrap = 'wrap-reverse';
shouldBeEqualToString('flexbox.style.webkitFlexWrap', 'wrap-reverse');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexWrap', 'wrap-reverse');

flexbox.style.webkitFlexFlow = '';
shouldBeEqualToString('flexbox.style.webkitFlexFlow', '');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', 'row none');

flexbox.style.webkitFlexFlow = 'foo';
shouldBeEqualToString('flexbox.style.webkitFlexFlow', '');

function testFlexFlowValue(value, expected, expectedComputed)
{
    flexbox.style.webkitFlexFlow = value;
    shouldBeEqualToString('flexbox.style.webkitFlexFlow', expected.replace(/^ /, '').replace(/ $/, ''));
    shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', expectedComputed);
}

var directions = ['', 'row', 'row-reverse', 'column', 'column-reverse'];
var wraps = ['', 'none', 'wrap', 'wrap-reverse'];
directions.forEach(function(direction) {
    wraps.forEach(function(wrap) {
        var expectedComputed = (direction || 'row') + ' ' + (wrap || 'none');
        var expected = direction + ' ' + wrap;
        testFlexFlowValue(direction + ' ' + wrap, expected, expectedComputed);
        testFlexFlowValue(wrap + ' ' + direction, expected, expectedComputed);
    });
});

flexbox.style.webkitFlexFlow = '';
shouldBeEqualToString('flexbox.style.webkitFlexFlow', '');
flexbox.style.webkitFlexFlow = 'wrap wrap-reverse';
shouldBeEqualToString('flexbox.style.webkitFlexFlow', '');
flexbox.style.webkitFlexFlow = 'column row';
shouldBeEqualToString('flexbox.style.webkitFlexFlow', '');

flexbox.style.webkitFlexFlow = '';
shouldBeEqualToString('flexbox.style.webkitFlexFlow', '');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', 'row none');
flexbox.style.webkitFlexDirection = 'column';
flexbox.style.webkitFlexWrap = 'initial';
shouldBeEqualToString('flexbox.style.webkitFlexFlow', 'column');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', 'column none');
flexbox.style.webkitFlexWrap = 'wrap';
shouldBeEqualToString('flexbox.style.webkitFlexFlow', 'column wrap');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', 'column wrap');
flexbox.style.webkitFlexFlow = 'row-reverse wrap-reverse';
shouldBeEqualToString('flexbox.style.webkitFlexFlow', 'row-reverse wrap-reverse');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitFlexFlow', 'row-reverse wrap-reverse');

// -webkit-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] == 'webkitFlexFlow')
        foundFlexFlow = true;
}
shouldBeFalse('foundFlexFlow');

// The initial value is 'stretch'.
shouldBeEqualToString('flexbox.style.webkitAlignContent', '');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent', 'stretch');

flexbox.style.webkitAlignContent = 'flex-start';
shouldBeEqualToString('flexbox.style.webkitAlignContent', 'flex-start');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent', 'flex-start');

flexbox.style.webkitAlignContent = 'flex-end';
shouldBeEqualToString('flexbox.style.webkitAlignContent', 'flex-end');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent', 'flex-end');

flexbox.style.webkitAlignContent = 'center';
shouldBeEqualToString('flexbox.style.webkitAlignContent', 'center');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent', 'center');

flexbox.style.webkitAlignContent = 'space-between';
shouldBeEqualToString('flexbox.style.webkitAlignContent', 'space-between');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent', 'space-between');

flexbox.style.webkitAlignContent = 'space-around';
shouldBeEqualToString('flexbox.style.webkitAlignContent', 'space-around');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent', 'space-around');

flexbox.style.webkitAlignContent = 'stretch';
shouldBeEqualToString('flexbox.style.webkitAlignContent', 'stretch');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent', 'stretch');

flexbox.style.webkitAlignContent = '';
shouldBeEqualToString('flexbox.style.webkitAlignContent', '');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent', 'stretch');

flexbox.style.webkitAlignContent = 'foo';
shouldBeEqualToString('flexbox.style.webkitAlignContent', '');
shouldBeEqualToString('window.getComputedStyle(flexbox, null).webkitAlignContent', 'stretch');
</script>
<script src="../../fast/js/resources/js-test-post.js"></script>
</body>
</html>