gecko/layout/style/test/file_flexbox_align_self_auto.html

214 lines
7.7 KiB
HTML

<!DOCTYPE HTML>
<html>
<body>
<div id="display">
<div id="myDiv"></div>
</div>
<pre id="test">
<script type="application/javascript">
"use strict";
/**
* Test behavior of 'align-self:auto' (Bug 696253)
* ===============================================
*
* The value "align-self: auto" is special. It's the initial value for
* "align-self", and it's supposed to compute to the parent's "align-items" value.
*
* However, to allow its style-struct to be shared by default, we internally
* make it compute to a special "auto" enumerated value, and then we resolve that
* to the correct value by examining the parent's style struct whenever we actually
* need to use it.
*
* This test makes sure that optimization isn't detectable to content.
*
* One special case of this is inheritance -- e.g.:
*
* <html style="align-items: baseline">
* <body style="align-self: auto; align-items: center">
* <div style="align-self: inherit">
*
* In that example, the child div's "inherit" should get the _computed_ value
* of "align-self" on the body. That, in turn, is "auto", so it should compute to
* its parent's "align-items" value, which is "baseline". So we need to end up
* with a computed "align-self" value of "baseline" on the child.
*
* (NOTE: if we instead allowed the child div to directly inherit the value "auto"
* from its parent, then we'd get different & incorrect behavior. The div would
* resolve that inherited "auto" value to its own parent's "align-items" value,
* which is "center" -- not "baseline".)
*
* This mochitest tests that situation and a few other similar tricky situations.
*/
// Use "is()" and "ok()" from parent document.
var is = parent.is;
var ok = parent.ok;
/*
* Utility function for getting computed style of "align-self":
*/
function getComputedAlignSelf(elem) {
return window.getComputedStyle(elem, "").alignSelf;
}
/*
* Tests that are useful regardless of whether we have a parent node:
*/
function testGeneralNode(elem) {
// Test initial computed style
// (Initial value should be 'auto', which should compute to 'stretch')
is(getComputedAlignSelf(elem), "stretch",
"initial computed value of 'align-self' should be 'stretch', " +
"if we haven't explicitly set any style on the parent");
// Test value after setting align-self explicitly to "auto"
elem.style.alignSelf = "auto";
is(getComputedAlignSelf(elem), "stretch",
"computed value of 'align-self: auto' should be 'stretch', " +
"if we haven't explicitly set any style on the parent");
elem.style.alignSelf = ""; // clean up
// Test value after setting align-self explicitly to "inherit"
elem.style.alignSelf = "inherit";
is(getComputedAlignSelf(elem), "stretch",
"computed value of 'align-self: inherit' should be 'stretch', " +
"if we haven't explicitly set any style on the 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,
"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), "center",
"initial computed value of 'align-self' should match parent's " +
"specified '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), "center",
"computed value of 'align-self: auto' should match parent's " +
"specified 'align-items' value");
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", which
// should compute to "stretch")
elem.style.alignSelf = "inherit";
is(getComputedAlignSelf(elem), "stretch",
"computed value of 'align-self: inherit' should take parent's " +
"computed 'align-self' value (which should be 'stretch', " +
"if we haven't explicitly set any other style");
elem.style.alignSelf = ""; // clean up
}
/*
* Tests that depend on us having a grandparent node:
*/
function testNodeThatHasGrandparent(elem) {
// Sanity-check that we actually do have a styleable grandparent:
ok(elem.parentNode && elem.parentNode.parentNode &&
elem.parentNode.parentNode.style,
"bug in test -- should be getting a node with a grandparent");
// Test computed "align-self" after we set "align-self" to "inherit" on our elem
// and to "auto" on its parent, and "align-items" to "baseline" on its
// grandparent. The parent's "auto" value should resolve to "baseline", and
// that's what our elem should inherit.
elem.style.alignSelf = "inherit";
elem.parentNode.style.alignSelf = "auto";
elem.parentNode.parentNode.style.alignItems = "baseline";
is(getComputedAlignSelf(elem), "baseline",
"computed value of 'align-self:inherit' on node when parent has " +
"'align-self:auto' and grandparent has 'align-items:baseline'")
// clean up:
elem.style.alignSelf = "";
elem.parentNode.style.alignSelf = "";
elem.parentNode.parentNode.style.alignItems = "";
// Test computed "align-self" after we set it to "auto" on our node, set
// "align-items" to "inherit" on its parent, and "align-items" to "baseline"
// on its grandparent. The parent's "inherit" should compute to "baseline",
// and our elem's "auto" value should resolve to that.
elem.style.alignSelf = "auto";
elem.parentNode.style.alignItems = "inherit";
elem.parentNode.parentNode.style.alignItems = "baseline";
is(getComputedAlignSelf(elem), "baseline",
"computed value of 'align-self:auto on node when parent has " +
"'align-items:inherit' and grandparent has 'align-items:baseline'")
// clean up:
elem.style.alignSelf = "";
elem.parentNode.style.alignItems = "";
elem.parentNode.parentNode.style.alignItems = "";
}
/*
* Main test function
*/
function main() {
ok(SpecialPowers.getBoolPref("layout.css.flexbox.enabled"),
"expecting to be run with flexbox support enabled");
// 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);
// Test the <div id="display"> node
// ================================
// (It has both a parent and a grandparent style context.)
var displayNode = document.getElementById("display");
is(displayNode.parentNode.parentNode, document.documentElement,
"expecting 'display' node's grandparent to be the root node");
testGeneralNode(displayNode);
testNodeThatHasParent(displayNode);
testNodeThatHasGrandparent(displayNode);
parent.finish();
}
main();
</script>
</pre>
</body>
</html>