layout/style/test/test_flexbox_align_self_auto.html@deefc01c0e14
layout/style/test/test_flexbox_align_self_auto.html
Thu, 15 Jan 2015 21:03:48 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Thu, 15 Jan 2015 21:03:48 +0100
- branch
- TOR_BUG_9701
- changeset 11
- deefc01c0e14
- permissions
- -rw-r--r--
Integrate friendly tips from Tor colleagues to make (or not) 4.5 alpha 3;
This includes removal of overloaded (but unused) methods, and addition of
a overlooked call to DataStruct::SetData(nsISupports, uint32_t, bool.)
1 <!DOCTYPE HTML>
2 <html>
3 <!--
4 https://bugzilla.mozilla.org/show_bug.cgi?id=696253
5 -->
6 <head>
7 <meta charset="utf-8">
8 <title>Test behavior of 'align-self:auto' (Bug 696253)</title>
9 <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
10 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
11 </head>
12 <body>
13 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=696253">Mozilla Bug 696253</a>
14 <div id="display">
15 <div id="myDiv"></div>
16 </div>
17 <pre id="test">
18 <script type="application/javascript">
19 "use strict";
21 /**
22 * Test behavior of 'align-self:auto' (Bug 696253)
23 * ===============================================
24 *
25 * The value "align-self: auto" is special. It's the initial value for
26 * "align-self", and it's supposed to compute to the parent's "align-items" value.
27 *
28 * However, to allow its style-struct to be shared by default, we internally
29 * make it compute to a special "auto" enumerated value, and then we resolve that
30 * to the correct value by examining the parent's style struct whenever we actually
31 * need to use it.
32 *
33 * This test makes sure that optimization isn't detectable to content.
34 *
35 * One special case of this is inheritance -- e.g.:
36 *
37 * <html style="align-items: baseline">
38 * <body style="align-self: auto; align-items: center">
39 * <div style="align-self: inherit">
40 *
41 * In that example, the child div's "inherit" should get the _computed_ value
42 * of "align-self" on the body. That, in turn, is "auto", so it should compute to
43 * its parent's "align-items" value, which is "baseline". So we need to end up
44 * with a computed "align-self" value of "baseline" on the child.
45 *
46 * (NOTE: if we instead allowed the child div to directly inherit the value "auto"
47 * from its parent, then we'd get different & incorrect behavior. The div would
48 * resolve that inherited "auto" value to its own parent's "align-items" value,
49 * which is "center" -- not "baseline".)
50 *
51 * This mochitest tests that situation and a few other similar tricky situations.
52 */
54 /*
55 * Utility function for getting computed style of "align-self":
56 */
57 function getComputedAlignSelf(elem) {
58 return window.getComputedStyle(elem, "").alignSelf;
59 }
61 /*
62 * Tests that are useful regardless of whether we have a parent node:
63 */
64 function testGeneralNode(elem) {
65 // Test initial computed style
66 // (Initial value should be 'auto', which should compute to 'stretch')
67 is(getComputedAlignSelf(elem), "stretch",
68 "initial computed value of 'align-self' should be 'stretch', " +
69 "if we haven't explicitly set any style on the parent");
71 // Test value after setting align-self explicitly to "auto"
72 elem.style.alignSelf = "auto";
73 is(getComputedAlignSelf(elem), "stretch",
74 "computed value of 'align-self: auto' should be 'stretch', " +
75 "if we haven't explicitly set any style on the parent");
76 elem.style.alignSelf = ""; // clean up
78 // Test value after setting align-self explicitly to "inherit"
79 elem.style.alignSelf = "inherit";
80 is(getComputedAlignSelf(elem), "stretch",
81 "computed value of 'align-self: inherit' should be 'stretch', " +
82 "if we haven't explicitly set any style on the parent");
83 elem.style.alignSelf = ""; // clean up
84 }
86 /*
87 * Tests that depend on us having a parent node:
88 */
89 function testNodeThatHasParent(elem) {
90 // Sanity-check that we actually do have a styleable parent:
91 ok(elem.parentNode && elem.parentNode.style,
92 "bug in test -- expecting caller to pass us a node with a parent");
94 // Test initial computed style when "align-items" has been set on our parent.
95 // (elem's initial "align-self" value should be "auto", which should compute
96 // to its parent's "align-items" value, which in this case is "center".)
97 elem.parentNode.style.alignItems = "center";
98 is(getComputedAlignSelf(elem), "center",
99 "initial computed value of 'align-self' should match parent's " +
100 "specified 'align-items' value");
102 // ...and now test computed style after setting "align-self" explicitly to
103 // "auto" (with parent "align-items" still at "center")
104 elem.style.alignSelf = "auto";
105 is(getComputedAlignSelf(elem), "center",
106 "computed value of 'align-self: auto' should match parent's " +
107 "specified 'align-items' value");
109 elem.style.alignSelf = ""; // clean up
110 elem.parentNode.style.alignItems = ""; // clean up
112 // Finally: test computed style after setting "align-self" to "inherit"
113 // and leaving parent at its initial value (which should be "auto", which
114 // should compute to "stretch")
115 elem.style.alignSelf = "inherit";
116 is(getComputedAlignSelf(elem), "stretch",
117 "computed value of 'align-self: inherit' should take parent's " +
118 "computed 'align-self' value (which should be 'stretch', " +
119 "if we haven't explicitly set any other style");
120 elem.style.alignSelf = ""; // clean up
121 }
123 /*
124 * Tests that depend on us having a grandparent node:
125 */
126 function testNodeThatHasGrandparent(elem) {
127 // Sanity-check that we actually do have a styleable grandparent:
128 ok(elem.parentNode && elem.parentNode.parentNode &&
129 elem.parentNode.parentNode.style,
130 "bug in test -- should be getting a node with a grandparent");
132 // Test computed "align-self" after we set "align-self" to "inherit" on our elem
133 // and to "auto" on its parent, and "align-items" to "baseline" on its
134 // grandparent. The parent's "auto" value should resolve to "baseline", and
135 // that's what our elem should inherit.
137 elem.style.alignSelf = "inherit";
138 elem.parentNode.style.alignSelf = "auto";
139 elem.parentNode.parentNode.style.alignItems = "baseline";
141 is(getComputedAlignSelf(elem), "baseline",
142 "computed value of 'align-self:inherit' on node when parent has " +
143 "'align-self:auto' and grandparent has 'align-items:baseline'")
145 // clean up:
146 elem.style.alignSelf = "";
147 elem.parentNode.style.alignSelf = "";
148 elem.parentNode.parentNode.style.alignItems = "";
150 // Test computed "align-self" after we set it to "auto" on our node, set
151 // "align-items" to "inherit" on its parent, and "align-items" to "baseline"
152 // on its grandparent. The parent's "inherit" should compute to "baseline",
153 // and our elem's "auto" value should resolve to that.
154 elem.style.alignSelf = "auto";
155 elem.parentNode.style.alignItems = "inherit";
156 elem.parentNode.parentNode.style.alignItems = "baseline";
157 is(getComputedAlignSelf(elem), "baseline",
158 "computed value of 'align-self:auto on node when parent has " +
159 "'align-items:inherit' and grandparent has 'align-items:baseline'")
161 // clean up:
162 elem.style.alignSelf = "";
163 elem.parentNode.style.alignItems = "";
164 elem.parentNode.parentNode.style.alignItems = "";
165 }
167 /*
168 * Main test function
169 */
170 function main() {
171 // Test the root node
172 // ==================
173 // (It's special because it has no parent style context.)
175 var rootNode = document.documentElement;
177 // Sanity-check that we actually have the root node, as far as CSS is concerned.
178 // (Note: rootNode.parentNode is a HTMLDocument object -- not an element that
179 // we inherit style from.)
180 ok(!rootNode.parentNode.style,
181 "expecting root node to have no node to inherit style from");
183 testGeneralNode(rootNode);
185 // Test the body node
186 // ==================
187 // (It's special because it has no grandparent style context.)
189 var body = document.getElementsByTagName("body")[0];
190 is(body.parentNode, document.documentElement,
191 "expecting body element's parent to be the root node");
193 testGeneralNode(body);
194 testNodeThatHasParent(body);
196 // Test the <div id="display"> node
197 // ================================
198 // (It has both a parent and a grandparent style context.)
200 var displayNode = document.getElementById("display");
201 is(displayNode.parentNode.parentNode, document.documentElement,
202 "expecting 'display' node's grandparent to be the root node");
204 testGeneralNode(displayNode);
205 testNodeThatHasParent(displayNode);
206 testNodeThatHasGrandparent(displayNode);
207 }
209 main();
211 </script>
212 </pre>
213 </body>
214 </html>
