diff options
Diffstat (limited to 'layout/style/test/test_align_justify_computed_values.html')
| -rw-r--r-- | layout/style/test/test_align_justify_computed_values.html | 529 |
1 files changed, 529 insertions, 0 deletions
diff --git a/layout/style/test/test_align_justify_computed_values.html b/layout/style/test/test_align_justify_computed_values.html new file mode 100644 index 000000000..3cd4b8b0e --- /dev/null +++ b/layout/style/test/test_align_justify_computed_values.html @@ -0,0 +1,529 @@ +<!DOCTYPE HTML> +<html> +<!-- +https://bugzilla.mozilla.org/show_bug.cgi?id=696253 +--> +<head> + <meta charset="utf-8"> + <title>Test align/justify-items/self/content computed values</title> + <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script> + <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> +</head> +<body style="position:relative"> +<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=696253">Mozilla Bug 696253</a> +<style> +#flexContainer, #flexContainerGrid { display: flex; position:relative; } +#gridContainer, #gridContainerFlex { display: grid; position:relative; } +#display b, #absChild { position:absolute; } +</style> +<div id="display"> + <div id="myDiv"></div> + <div id="flexContainer"><a></a><b></b></div> + <div id="gridContainer"><a></a><b></b></div> + <div id="flexContainerGrid"><a style="diplay:grid"></a><b style="diplay:grid"></b></div> + <div id="gridContainerFlex"><a style="diplay:flex"></a><b style="diplay:flex"></b></div> +</div> +<div id="absChild"></div> +<pre id="test"> +<script type="application/javascript"> +"use strict"; + +/* + * Utility function for getting computed style of "align-self": + */ +function getComputedAlignSelf(elem) { + return window.getComputedStyle(elem, "").alignSelf; +} +function getComputedAlignItems(elem) { + return window.getComputedStyle(elem, "").alignItems; +} +function getComputedAlignContent(elem) { + return window.getComputedStyle(elem, "").alignContent; +} +function getComputedJustifySelf(elem) { + return window.getComputedStyle(elem, "").justifySelf; +} +function getComputedJustifyItems(elem) { + return window.getComputedStyle(elem, "").justifyItems; +} +function getComputedJustifyContent(elem) { + return window.getComputedStyle(elem, "").justifyContent; +} + +/** + * Test behavior of 'align-self:auto' (Bug 696253 and Bug 1304012) + * =============================================== + * + * In a previous revision of the CSS Alignment spec, align-self:auto + * was required to actually *compute* to the parent's align-items value -- + * but now, the spec says it simply computes to itself, and it should + * only get converted into the parent's align-items value when it's used + * in layout. This test verifies that we do indeed have it compute to + * itself, regardless of the parent's align-items value. + */ + +/* + * Tests for a block node with a parent node: + */ +function testGeneralNode(elem) { + // Test initial computed style + // (Initial value should be 'auto', which should compute to itself) + is(getComputedAlignSelf(elem), "auto", elem.tagName + ": " + + "initial computed value of 'align-self' should be 'auto'"); + + // Test value after setting align-self explicitly to "auto" + elem.style.alignSelf = "auto"; + is(getComputedAlignSelf(elem), "auto", elem.tagName + ": " + + "computed value of 'align-self: auto' should be 'auto'"); + elem.style.alignSelf = ""; // clean up + + // Test value after setting align-self explicitly to "inherit" + elem.style.alignSelf = "inherit"; + if (elem.parentNode && elem.parentNode.style) { + is(getComputedAlignSelf(elem), getComputedAlignSelf(elem.parentNode), + elem.tagName + ": computed value of 'align-self: inherit' " + + "should match the value on the parent"); + } else { + is(getComputedAlignSelf(elem), "auto", elem.tagName + ": " + + "computed value of 'align-self: inherit' should be 'auto', " + + "when there is no parent"); + } + elem.style.alignSelf = ""; // clean up +} + +/* + * Tests that depend on us having a parent node: + */ +function testNodeThatHasParent(elem) { + // Sanity-check that we actually do have a styleable parent: + ok(elem.parentNode && elem.parentNode.style, elem.tagName + ": " + + "bug in test -- expecting caller to pass us a node with a parent"); + + // Test initial computed style when "align-items" has been set on our parent. + // (elem's initial "align-self" value should be "auto", which should compute + // to its parent's "align-items" value, which in this case is "center".) + elem.parentNode.style.alignItems = "center"; + is(getComputedAlignSelf(elem), "auto", elem.tagName + ": " + + "initial computed value of 'align-self' should be 'auto', even " + + "after changing parent's 'align-items' value"); + + // ...and now test computed style after setting "align-self" explicitly to + // "auto" (with parent "align-items" still at "center") + elem.style.alignSelf = "auto"; + is(getComputedAlignSelf(elem), "auto", elem.tagName + ": " + + "computed value of 'align-self: auto' should remain 'auto', after " + + "being explicitly set"); + + elem.style.alignSelf = ""; // clean up + elem.parentNode.style.alignItems = ""; // clean up + + // Finally: test computed style after setting "align-self" to "inherit" + // and leaving parent at its initial value which should be "auto". + elem.style.alignSelf = "inherit"; + is(getComputedAlignSelf(elem), "auto", elem.tagName + ": " + + "computed value of 'align-self: inherit' should take parent's " + + "computed 'align-self' value (which should be 'auto', " + + "if we haven't explicitly set any other style"); + elem.style.alignSelf = ""; // clean up + } + +/* + * Main test function + */ +function main() { + // Test the root node + // ================== + // (It's special because it has no parent style context.) + + var rootNode = document.documentElement; + + // Sanity-check that we actually have the root node, as far as CSS is concerned. + // (Note: rootNode.parentNode is a HTMLDocument object -- not an element that + // we inherit style from.) + ok(!rootNode.parentNode.style, + "expecting root node to have no node to inherit style from"); + + testGeneralNode(rootNode); + + // Test the body node + // ================== + // (It's special because it has no grandparent style context.) + + var body = document.getElementsByTagName("body")[0]; + is(body.parentNode, document.documentElement, + "expecting body element's parent to be the root node"); + + testGeneralNode(body); + testNodeThatHasParent(body); + + // + // align-items/self tests: + // + //// Block tests + var elem = document.body; + var child = document.getElementById("display"); + var abs = document.getElementById("absChild"); + is(getComputedAlignItems(elem), 'normal', "default align-items value for block container"); + is(getComputedAlignSelf(child), 'auto', "default align-self value for block child"); + is(getComputedAlignSelf(abs), 'auto', "default align-self value for block container abs.pos. child"); + elem.style.alignItems = "end"; + is(getComputedAlignSelf(child), 'auto', "align-self:auto value persists for block child"); + is(getComputedAlignSelf(abs), 'auto', "align-self:auto value persists for block container abs.pos. child"); + elem.style.alignItems = "left"; + is(getComputedAlignItems(elem), 'left', "align-items:left computes to itself for a block"); + is(getComputedAlignSelf(child), 'auto', "align-self:auto persists for block child"); + is(getComputedAlignSelf(abs), 'auto', "align-self:auto value persists for block container abs.pos. child"); + elem.style.alignItems = "right"; + is(getComputedAlignSelf(child), 'auto', "align-self:auto value persists for block child"); + is(getComputedAlignSelf(abs), 'auto', "align-self:auto value persists for block container abs.pos. child"); + elem.style.alignItems = "right safe"; + is(getComputedAlignSelf(child), 'auto', "align-self:auto value persists for block child"); + elem.style.alignItems = ""; + child.style.alignSelf = "left"; + is(getComputedAlignSelf(child), 'left', "align-self:left computes to left for block child"); + child.style.alignSelf = "right"; + is(getComputedAlignSelf(child), 'right', "align-self:right computes to right for block child"); + child.style.alignSelf = ""; + abs.style.alignSelf = "right"; + is(getComputedAlignSelf(abs), 'right', "align-self:right computes to right for block container abs.pos. child"); + + //// Flexbox tests + function testFlexAlignItemsSelf(elem) { + var item = elem.firstChild; + var abs = elem.children[1]; + is(getComputedAlignItems(elem), 'normal', "default align-items value for flex container"); + is(getComputedAlignSelf(item), 'auto', "default align-self value for flex item"); + is(getComputedAlignSelf(abs), 'auto', "default align-self value for flex container abs.pos. child"); + elem.style.alignItems = "flex-end"; + is(getComputedAlignSelf(item), 'auto', "align-self:auto value persists for flex container child"); + is(getComputedAlignSelf(abs), 'auto', "align-self:auto value persists for flex container abs.pos. child"); + elem.style.alignItems = "left"; + is(getComputedAlignItems(elem), 'left', "align-items:left computes to itself for flex container"); + // XXX TODO: add left/right tests (bug 1221565) + elem.style.alignItems = ""; + } + testFlexAlignItemsSelf(document.getElementById("flexContainer")); + testFlexAlignItemsSelf(document.getElementById("flexContainerGrid")); + + //// Grid tests + function testGridAlignItemsSelf(elem) { + var item = elem.firstChild; + var abs = elem.children[1]; + is(getComputedAlignItems(elem), 'normal', "default align-items value for grid container"); + is(getComputedAlignSelf(item), 'auto', "default align-self value for grid item"); + is(getComputedAlignSelf(abs), 'auto', "default align-self value for grid container abs.pos. child"); + elem.style.alignItems = "end"; + is(getComputedAlignSelf(item), 'auto', "align-self:auto value persists for grid container child"); + is(getComputedAlignSelf(abs), 'auto', "align-self:auto value persists for grid container abs.pos. child"); + elem.style.alignItems = "left"; + is(getComputedAlignItems(elem), 'left', "align-items:left computes to itself for grid container"); + is(getComputedAlignSelf(item), 'auto', "align-self:auto value persists for grid container child"); + is(getComputedAlignSelf(abs), 'auto', "align-self:auto value persists for grid container abs.pos. child"); + elem.style.alignItems = "right"; + is(getComputedAlignSelf(item), 'auto', "align-self:auto value persists for grid container child"); + is(getComputedAlignSelf(abs), 'auto', "align-self:auto value persists for grid container abs.pos. child"); + elem.style.alignItems = "right safe"; + is(getComputedAlignSelf(item), 'auto', "align-self:auto value persists for grid container child"); + item.style.alignSelf = "left"; + is(getComputedAlignSelf(item), 'left', "align-self:left computes to left on grid item"); + item.style.alignSelf = "right"; + is(getComputedAlignSelf(item), 'right', "align-self:right computes to right on grid item"); + item.style.alignSelf = "right safe"; + is(getComputedAlignSelf(item), 'right safe', "align-self:'right safe' computes to 'right safe' on grid item"); + item.style.alignSelf = ""; + abs.style.alignSelf = "right"; + is(getComputedAlignSelf(abs), 'right', "align-self:right computes to right on grid container abs.pos. child"); + abs.style.alignSelf = ""; + elem.style.alignItems = ""; + item.style.alignSelf = ""; + } + testGridAlignItemsSelf(document.getElementById("gridContainer")); + testGridAlignItemsSelf(document.getElementById("gridContainerFlex")); + + // + // justify-items/self tests: + // + //// Block tests + var elem = document.body; + var child = document.getElementById("display"); + var abs = document.getElementById("absChild"); + is(getComputedJustifyItems(elem), 'normal', "default justify-items value for block container"); + is(getComputedJustifySelf(child), 'auto', "default justify-self value for block container child"); + is(getComputedJustifySelf(abs), 'auto', "default justify-self value for block container abs.pos. child"); + elem.style.justifyItems = "end"; + is(getComputedJustifySelf(child), 'auto', "justify-self:auto value persists for block child"); + is(getComputedJustifySelf(abs), 'auto', "justify-self:auto value persists for block container abs.pos. child"); + elem.style.justifyItems = "left"; + is(getComputedJustifyItems(elem), 'left', "justify-items:left computes to itself on a block"); + is(getComputedJustifySelf(child), 'auto', "justify-self:auto value persists for block child"); + is(getComputedJustifySelf(abs), 'auto', "justify-self:auto value persists for block container abs.pos. child"); + elem.style.justifyItems = "right"; + is(getComputedJustifySelf(child), 'auto', "justify-self:auto value persists for block child"); + is(getComputedJustifySelf(abs), 'auto', "justify-self:auto value persists for block container abs.pos. child"); + elem.style.justifyItems = "right safe"; + is(getComputedJustifySelf(child), 'auto', "justify-self:auto value persists for block child"); + elem.style.justifyItems = ""; + child.style.justifySelf = "left"; + is(getComputedJustifySelf(child), 'left', "justify-self:left computes to left on block child"); + child.style.justifySelf = "right"; + is(getComputedJustifySelf(child), 'right', "justify-self:right computes to right on block child"); + child.style.justifySelf = ""; + abs.style.justifySelf = "right"; + is(getComputedJustifySelf(abs), 'right', "justify-self:right computes to right on block container abs.pos. child"); + + //// Flexbox tests + function testFlexJustifyItemsSelf(elem) { + var item = elem.firstChild; + var abs = elem.children[1]; + is(getComputedJustifyItems(elem), 'normal', "default justify-items value for flex container"); + is(getComputedJustifySelf(item), 'auto', "default justify-self value for flex item"); + is(getComputedJustifySelf(abs), 'auto', "default justify-self value for flex container abs.pos. child"); + elem.style.justifyItems = "flex-end"; + is(getComputedJustifySelf(item), 'auto', "justify-self:auto value persists for flex container child"); + is(getComputedJustifySelf(abs), 'auto', "justify-self:auto value persists for flex container abs.pos. child"); + elem.style.justifyItems = "left"; + is(getComputedJustifyItems(elem), 'left', "justify-items:left computes to itself for flex container"); + elem.style.justifyItems = "right safe"; + is(getComputedJustifySelf(item), 'auto', "justify-self:auto value persists for flex container child"); + // XXX TODO: add left/right tests (bug 1221565) + elem.style.justifyItems = ""; + } + testFlexJustifyItemsSelf(document.getElementById("flexContainer")); + testFlexJustifyItemsSelf(document.getElementById("flexContainerGrid")); + + //// Grid tests + function testGridJustifyItemsSelf(elem) { + var item = elem.firstChild; + var abs = elem.children[1]; + is(getComputedJustifyItems(elem), 'normal', "default justify-items value for grid container"); + is(getComputedJustifySelf(item), 'auto', "default justify-self value for grid item"); + is(getComputedJustifySelf(abs), 'auto', "default justify-self value for grid container abs.pos. child"); + elem.style.justifyItems = "end"; + is(getComputedJustifySelf(item), 'auto', "justify-self:auto value persists for grid container child"); + is(getComputedJustifySelf(abs), 'auto', "justify-self:auto value persists for grid container abs.pos. child"); + elem.style.justifyItems = "left"; + is(getComputedJustifyItems(elem), 'left', "justify-items:left computes to itself for grid container"); + is(getComputedJustifySelf(item), 'auto', "justify-self:auto value persists for grid container child"); + is(getComputedJustifySelf(abs), 'auto', "justify-self:auto value persists for grid container abs.pos. child"); + elem.style.justifyItems = "legacy left"; + is(getComputedJustifySelf(item), 'auto', "justify-self:auto value persists for grid container child"); + is(getComputedJustifySelf(abs), 'auto', "justify-self:auto value persists for grid container abs.pos. child"); + elem.style.justifyItems = "right"; + is(getComputedJustifySelf(item), 'auto', "justify-self:auto value persists for grid container child"); + is(getComputedJustifySelf(abs), 'auto', "justify-self:auto value persists for grid container abs.pos. child"); + elem.style.justifyItems = "right safe"; + is(getComputedJustifySelf(item), 'auto', "justify-self:auto value persists for grid container child"); + elem.style.justifyItems = "legacy right"; + is(getComputedJustifySelf(item), 'auto', "justify-self:auto value persists for grid container child"); + is(getComputedJustifySelf(abs), 'auto', "justify-self:auto value persists for grid container abs.pos. child"); + elem.style.justifyItems = "legacy center"; + item.style.justifyItems = "inherit"; + abs.style.justifyItems = "inherit"; + is(getComputedJustifySelf(item), 'auto', "justify-self:auto value persists for grid container child"); + is(getComputedJustifySelf(abs), 'auto', "justify-self:auto value persists for grid container abs.pos. child"); + is(getComputedJustifyItems(elem), 'legacy center', "justify-items computes to itself grid container"); + is(getComputedJustifyItems(item), 'legacy center', "justify-items inherits including legacy keyword to grid item"); + is(getComputedJustifyItems(abs), 'legacy center', "justify-items inherits including legacy keyword to grid container abs.pos. child"); + elem.style.justifyItems = ""; + item.style.justifySelf = "left"; + is(getComputedJustifySelf(item), 'left', "justify-self:left computes to left on grid item"); + item.style.justifySelf = "right"; + is(getComputedJustifySelf(item), 'right', "justify-self:right computes to right on grid item"); + item.style.justifySelf = "right safe"; + is(getComputedJustifySelf(item), 'right safe', "justify-self:'right safe' computes to 'right safe' on grid item"); + item.style.justifySelf = ""; + abs.style.justifySelf = "right"; + is(getComputedJustifySelf(abs), 'right', "justify-self:right computes to right on grid container abs.pos. child"); + abs.style.justifySelf = ""; + elem.style.justifyItems = ""; + item.style.justifySelf = ""; + } + testGridJustifyItemsSelf(document.getElementById("gridContainer")); + testGridJustifyItemsSelf(document.getElementById("gridContainerFlex")); + + // + // align-content tests: + // + //// Block tests + var elem = document.body; + var child = document.getElementById("display"); + var abs = document.getElementById("absChild"); + is(getComputedAlignContent(elem), 'normal', "default align-content value for block container"); + is(getComputedAlignContent(child), 'normal', "default align-content value for block child"); + is(getComputedAlignContent(abs), 'normal', "default align-content value for block container abs.pos. child"); + elem.style.alignContent = "end"; + is(getComputedAlignContent(child), 'normal', "default align-content isn't affected by parent align-content value for in-flow child"); + is(getComputedAlignContent(abs), 'normal', "default align-content isn't affected by parent align-content value for block container abs.pos. child"); + elem.style.alignContent = "left"; + is(getComputedAlignContent(elem), 'left', "align-content:left computes to left on block child"); + is(getComputedAlignContent(abs), 'normal', "default align-content isn't affected by parent align-content value for block container abs.pos. child"); + elem.style.alignContent = "right"; + is(getComputedAlignContent(elem), 'right', "align-content:right computes to right on block child"); + is(getComputedAlignContent(abs), 'normal', "default align-content isn't affected by parent align-content value for block container abs.pos. child"); + elem.style.alignContent = "right safe"; + is(getComputedAlignContent(elem), 'right safe', "align-content:'right safe' computes to 'align-content:right safe'"); + elem.style.alignContent = ""; + child.style.alignContent = "left"; + is(getComputedAlignContent(child), 'left', "align-content:left computes to left on block child"); + child.style.alignContent = "right"; + is(getComputedAlignContent(child), 'right', "align-content:right computes to right on block child"); + child.style.alignContent = "left safe"; + is(getComputedAlignContent(child), 'left safe', "align-content:left computes to 'left safe' on block child"); + child.style.alignContent = ""; + abs.style.alignContent = "right"; + is(getComputedAlignContent(abs), 'right', "align-content:right computes to right on block container abs.pos. child"); + abs.style.alignContent = ""; + + //// Flexbox tests + function testFlexAlignContent(elem) { + var item = elem.firstChild; + var abs = elem.children[1]; + is(getComputedAlignContent(elem), 'normal', "default align-content value for flex container"); + is(getComputedAlignContent(item), 'normal', "default align-content value for flex item"); + is(getComputedAlignContent(abs), 'normal', "default align-content value for flex container abs.pos. child"); + elem.style.alignContent = "flex-end safe"; + is(getComputedAlignContent(elem), 'flex-end safe', "align-content:'flex-end safe' computes to itself for flex container"); + is(getComputedAlignContent(item), 'normal', "default align-content isn't affected by parent align-content value for flex item"); + is(getComputedAlignContent(abs), 'normal', "default align-content isn't affected by parent align-content value for flex container abs.pos. child"); + // XXX TODO: add left/right tests (bug 1221565) + elem.style.alignContent = ""; + } + testFlexAlignContent(document.getElementById("flexContainer")); + testFlexAlignContent(document.getElementById("flexContainerGrid")); + + //// Grid tests + function testGridAlignContent(elem) { + var item = elem.firstChild; + var abs = elem.children[1]; + is(getComputedAlignContent(elem), 'normal', "default align-content value for grid container"); + is(getComputedAlignContent(item), 'normal', "default align-content value for grid item"); + is(getComputedAlignContent(abs), 'normal', "default align-content value for grid container abs.pos. child"); + elem.style.alignContent = "end safe"; + is(getComputedAlignContent(elem), 'end safe', "align-content:'end safe' computes to itself on grid container"); + is(getComputedAlignContent(item), 'normal', "default align-content isn't affected by parent align-content value for grid item"); + is(getComputedAlignContent(abs), 'normal', "default align-content isn't affected by parent align-content value for grid container abs.pos. child"); + elem.style.alignContent = "left"; + is(getComputedAlignContent(elem), 'left', "align-content:left computes to left on grid container"); + is(getComputedAlignContent(abs), 'normal', "default align-content isn't affected by parent align-content value for grid container abs.pos. child"); + elem.style.alignContent = "right"; + is(getComputedAlignContent(elem), 'right', "align-content:right computes to right on grid container"); + is(getComputedAlignContent(abs), 'normal', "default align-content isn't affected by parent align-content value for grid container abs.pos. child"); + elem.style.alignContent = "right safe"; + item.style.alignContent = "inherit"; + abs.style.alignContent = "inherit"; + is(getComputedAlignContent(elem), 'right safe', "align-content:'right safe' computes to 'align-content:right safe' on grid container"); + is(getComputedAlignContent(item), 'right safe', "align-content:'right safe' inherits as 'align-content:right safe' to grid item"); + is(getComputedAlignContent(abs), 'right safe', "align-content:'right safe' inherits as 'align-content:right safe' to grid container abs.pos. child"); + item.style.alignContent = "left"; + is(getComputedAlignContent(item), 'left', "align-content:left computes to left on grid item"); + item.style.alignContent = "right"; + is(getComputedAlignContent(item), 'right', "align-content:right computes to right on grid item"); + item.style.alignContent = "right safe"; + is(getComputedAlignContent(item), 'right safe', "align-content:'right safe' computes to 'right safe' on grid item"); + item.style.alignContent = ""; + abs.style.alignContent = "right"; + is(getComputedAlignContent(abs), 'right', "align-content:right computes to right on grid container abs.pos. child"); + abs.style.alignContent = ""; + elem.style.alignContent = ""; + item.style.alignContent = ""; + } + testGridAlignContent(document.getElementById("gridContainer")); + testGridAlignContent(document.getElementById("gridContainerFlex")); + + + // + // justify-content tests: + // + //// Block tests + var elem = document.body; + var child = document.getElementById("display"); + var abs = document.getElementById("absChild"); + is(getComputedJustifyContent(elem), 'normal', "default justify-content value for block container"); + is(getComputedJustifyContent(child), 'normal', "default justify-content value for block child"); + is(getComputedJustifyContent(abs), 'normal', "default justify-content value for block container abs.pos. child"); + elem.style.justifyContent = "end"; + is(getComputedJustifyContent(child), 'normal', "default justify-content isn't affected by parent justify-content value for in-flow child"); + is(getComputedJustifyContent(abs), 'normal', "default justify-content isn't affected by parent justify-content value for block container abs.pos. child"); + elem.style.justifyContent = "left"; + is(getComputedJustifyContent(elem), 'left', "justify-content:left computes to left on block child"); + is(getComputedJustifyContent(abs), 'normal', "default justify-content isn't affected by parent justify-content value for block container abs.pos. child"); + elem.style.justifyContent = "right"; + is(getComputedJustifyContent(elem), 'right', "justify-content:right computes to right on block child"); + is(getComputedJustifyContent(abs), 'normal', "default justify-content isn't affected by parent justify-content value for block container abs.pos. child"); + elem.style.justifyContent = "right safe"; + is(getComputedJustifyContent(elem), 'right safe', "justify-content:'right safe' computes to 'justify-content:right safe'"); + elem.style.justifyContent = ""; + child.style.justifyContent = "left"; + is(getComputedJustifyContent(child), 'left', "justify-content:left computes to left on block child"); + child.style.justifyContent = "right"; + is(getComputedJustifyContent(child), 'right', "justify-content:right computes to right on block child"); + child.style.justifyContent = "left safe"; + is(getComputedJustifyContent(child), 'left safe', "justify-content:left computes to 'left safe' on block child"); + child.style.justifyContent = ""; + abs.style.justifyContent = "right"; + is(getComputedJustifyContent(abs), 'right', "justify-content:right computes to right on block container abs.pos. child"); + abs.style.justifyContent = ""; + + //// Flexbox tests + function testFlexJustifyContent(elem) { + var item = elem.firstChild; + var abs = elem.children[1]; + is(getComputedJustifyContent(elem), 'normal', "default justify-content value for flex container"); + is(getComputedJustifyContent(item), 'normal', "default justify-content value for flex item"); + is(getComputedJustifyContent(abs), 'normal', "default justify-content value for flex container abs.pos. child"); + elem.style.justifyContent = "flex-end safe"; + is(getComputedJustifyContent(elem), 'flex-end safe', "justify-content:'flex-end safe' computes to itself for flex container"); + is(getComputedJustifyContent(item), 'normal', "default justify-content isn't affected by parent justify-content value for flex item"); + is(getComputedJustifyContent(abs), 'normal', "default justify-content isn't affected by parent justify-content value for flex container abs.pos. child"); + // XXX TODO: add left/right tests (bug 1221565) + elem.style.justifyContent = ""; + } + testFlexJustifyContent(document.getElementById("flexContainer")); + testFlexJustifyContent(document.getElementById("flexContainerGrid")); + + //// Grid tests + function testGridJustifyContent(elem) { + var item = elem.firstChild; + var abs = elem.children[1]; + is(getComputedJustifyContent(elem), 'normal', "default justify-content value for grid container"); + is(getComputedJustifyContent(item), 'normal', "default justify-content value for grid item"); + is(getComputedJustifyContent(abs), 'normal', "default justify-content value for grid container abs.pos. child"); + elem.style.justifyContent = "end safe"; + is(getComputedJustifyContent(elem), 'end safe', "justify-content:'end safe' computes to itself on grid container"); + is(getComputedJustifyContent(item), 'normal', "default justify-content isn't affected by parent justify-content value for grid item"); + is(getComputedJustifyContent(abs), 'normal', "default justify-content isn't affected by parent justify-content value for grid container abs.pos. child"); + elem.style.justifyContent = "left"; + is(getComputedJustifyContent(elem), 'left', "justify-content:left computes to left on grid container"); + is(getComputedJustifyContent(abs), 'normal', "default justify-content isn't affected by parent justify-content value for grid container abs.pos. child"); + elem.style.justifyContent = "right"; + is(getComputedJustifyContent(elem), 'right', "justify-content:right computes to right on grid container"); + is(getComputedJustifyContent(abs), 'normal', "default justify-content isn't affected by parent justify-content value for grid container abs.pos. child"); + elem.style.justifyContent = "right safe"; + item.style.justifyContent = "inherit"; + abs.style.justifyContent = "inherit"; + is(getComputedJustifyContent(elem), 'right safe', "justify-content:'right safe' computes to 'justify-content:right safe' on grid container"); + is(getComputedJustifyContent(item), 'right safe', "justify-content:'right safe' inherits as 'justify-content:right safe' to grid item"); + is(getComputedJustifyContent(abs), 'right safe', "justify-content:'right safe' inherits as 'justify-content:right safe' to grid container abs.pos. child"); + item.style.justifyContent = "left"; + is(getComputedJustifyContent(item), 'left', "justify-content:left computes to left on grid item"); + item.style.justifyContent = "right"; + is(getComputedJustifyContent(item), 'right', "justify-content:right computes to right on grid item"); + item.style.justifyContent = "right safe"; + is(getComputedJustifyContent(item), 'right safe', "justify-content:'right safe' computes to 'right safe' on grid item"); + item.style.justifyContent = ""; + abs.style.justifyContent = "right"; + is(getComputedJustifyContent(abs), 'right', "justify-content:right computes to right on grid container abs.pos. child"); + abs.style.justifyContent = ""; + elem.style.justifyContent = ""; + item.style.justifyContent = ""; + } + testGridJustifyContent(document.getElementById("gridContainer")); + testGridJustifyContent(document.getElementById("gridContainerFlex")); +} + +main(); + +</script> +</pre> +</body> +</html> |