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