summaryrefslogtreecommitdiffstats
path: root/layout/style/test/test_align_justify_computed_values.html
diff options
context:
space:
mode:
authorMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
committerMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
commit5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree10027f336435511475e392454359edea8e25895d /layout/style/test/test_align_justify_computed_values.html
parent49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
downloadUXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip
Add m-esr52 at 52.6.0
Diffstat (limited to 'layout/style/test/test_align_justify_computed_values.html')
-rw-r--r--layout/style/test/test_align_justify_computed_values.html529
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>
generated by cgit v1.2.3 (git 2.25.1) at 2024-12-23 08:29:57 +0000