The Tor Browser / file comparison
comparison: layout/style/test/test_flexbox_child_display_values.xhtml
layout/style/test/test_flexbox_child_display_values.xhtml
- branch
- TOR_BUG_9701
- changeset 3
- 141e0f1194b1
equal
deleted
inserted
replaced
| -1:000000000000 | 0:8be4652e02f2 |
|---|---|
| 1 <html xmlns="http://www.w3.org/1999/xhtml"> | |
| 2 <!-- | |
| 3 https://bugzilla.mozilla.org/show_bug.cgi?id=783415 | |
| 4 --> | |
| 5 <head> | |
| 6 <meta charset="utf-8"/> | |
| 7 <title>Test "display" values of content in a flex container (Bug 783415)</title> | |
| 8 <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script> | |
| 9 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> | |
| 10 </head> | |
| 11 <body> | |
| 12 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=783415">Mozilla Bug 783415</a> | |
| 13 <div id="display"> | |
| 14 <div id="wrapper"></div> | |
| 15 </div> | |
| 16 <pre id="test"> | |
| 17 <script type="application/javascript;version=1.7"> | |
| 18 <![CDATA[ | |
| 19 "use strict"; | |
| 20 | |
| 21 /** | |
| 22 * Test "display" values of content in a flex container (Bug 783415) | |
| 23 * ================================================================ | |
| 24 * | |
| 25 * This test creates content with a variety of specified "display" values | |
| 26 * and checks what the computed "display" is when we put that content | |
| 27 * in a flex container. (Generally, it'll be the "blockified" form of the | |
| 28 * specified display-value.) | |
| 29 */ | |
| 30 | |
| 31 /* | |
| 32 * Utility function for getting computed style of "display". | |
| 33 * | |
| 34 * @arg aElem The element to query for its computed "display" value. | |
| 35 * @return The computed display value | |
| 36 */ | |
| 37 function getComputedDisplay(aElem) { | |
| 38 return window.getComputedStyle(aElem, "").display; | |
| 39 } | |
| 40 | |
| 41 /* | |
| 42 * Function used for testing a given specified "display" value and checking | |
| 43 * its computed value against expectations. | |
| 44 * | |
| 45 * @arg aSpecifiedDisplay | |
| 46 * The specified value of "display" that we should test. | |
| 47 * | |
| 48 * @arg aExpectedDisplayAsFlexContainerChild | |
| 49 * (optional) The expected computed "display" when an element with | |
| 50 * aSpecifiedDisplay is a child of a flex container. If omitted, | |
| 51 * this argument defaults to aSpecifiedDisplay. | |
| 52 * | |
| 53 * @arg aExpectedDisplayAsOutOfFlowFlexContainerChild | |
| 54 * (optional) The expected computed "display" when an element with | |
| 55 * aSpecifiedDisplay is a child of a flex container *and* has | |
| 56 * position:[fixed|absolute] or float: [left|right] set. If omitted, | |
| 57 * this argument defaults to aExpectedDisplayAsFlexContainerChild. | |
| 58 */ | |
| 59 function testDisplayValue(aSpecifiedDisplay, | |
| 60 aExpectedDisplayAsFlexContainerChild, | |
| 61 aExpectedDisplayAsOutOfFlowFlexContainerChild) { | |
| 62 // DEFAULT-ARGUMENT-VALUES MAGIC: Make 2nd and 3rd args each default to | |
| 63 // the preceding arg, if they're unspecified. | |
| 64 if (typeof aExpectedDisplayAsFlexContainerChild == "undefined") { | |
| 65 aExpectedDisplayAsFlexContainerChild = aSpecifiedDisplay; | |
| 66 } | |
| 67 if (typeof aExpectedDisplayAsOutOfFlowFlexContainerChild == "undefined") { | |
| 68 aExpectedDisplayAsOutOfFlowFlexContainerChild = | |
| 69 aExpectedDisplayAsFlexContainerChild; | |
| 70 } | |
| 71 | |
| 72 // FIRST: Create a node with display:aSpecifiedDisplay, and make sure that | |
| 73 // this original display-type is honored in a non-flex-container context. | |
| 74 let wrapper = document.getElementById("wrapper"); | |
| 75 let node = document.createElement("div"); | |
| 76 wrapper.appendChild(node); | |
| 77 | |
| 78 node.style.display = aSpecifiedDisplay; | |
| 79 is(getComputedDisplay(node), aSpecifiedDisplay, | |
| 80 "checking computed value of 'display: " + aSpecifiedDisplay + "' " + | |
| 81 "should be the same as specified value, when parent is a block"); | |
| 82 | |
| 83 | |
| 84 // SECOND: We make our node's parent into a flex container, and make sure | |
| 85 // that this produces the correct computed "display" value. | |
| 86 wrapper.style.display = "flex"; | |
| 87 is(getComputedDisplay(node), aExpectedDisplayAsFlexContainerChild, | |
| 88 "checking computed value of 'display: " + aSpecifiedDisplay + "' " + | |
| 89 "when parent is a flex container"); | |
| 90 | |
| 91 | |
| 92 // THIRD: We set "float" and "position" on our node (still inside of a | |
| 93 // flex container), and make sure that this produces the correct computed | |
| 94 // "display" value. | |
| 95 node.style.cssFloat = "left"; | |
| 96 is(getComputedDisplay(node), aExpectedDisplayAsOutOfFlowFlexContainerChild, | |
| 97 "checking computed value of 'display: " + aSpecifiedDisplay + "' " + | |
| 98 "when parent is a flex container and we're floated left"); | |
| 99 node.style.cssFloat = ""; | |
| 100 | |
| 101 node.style.cssFloat = "right"; | |
| 102 is(getComputedDisplay(node), aExpectedDisplayAsOutOfFlowFlexContainerChild, | |
| 103 "checking computed value of 'display: " + aSpecifiedDisplay + "' " + | |
| 104 "when parent is a flex container and we're floated right"); | |
| 105 node.style.cssFloat = ""; | |
| 106 | |
| 107 node.style.position = "absolute"; | |
| 108 is(getComputedDisplay(node), aExpectedDisplayAsOutOfFlowFlexContainerChild, | |
| 109 "checking computed value of 'display: " + aSpecifiedDisplay + "' " + | |
| 110 "when parent is a flex container and we're abs-pos"); | |
| 111 node.style.position = ""; | |
| 112 | |
| 113 node.style.position = "fixed"; | |
| 114 is(getComputedDisplay(node), aExpectedDisplayAsOutOfFlowFlexContainerChild, | |
| 115 "checking computed value of 'display: " + aSpecifiedDisplay + "' " + | |
| 116 "when parent is a flex container and we're fixed-pos"); | |
| 117 node.style.position = ""; | |
| 118 | |
| 119 // FINALLY: Clean up -- remove the node we created, and turn the wrapper | |
| 120 // back into its original display type (a block). | |
| 121 wrapper.removeChild(node); | |
| 122 wrapper.style.display = ""; | |
| 123 } | |
| 124 | |
| 125 /* | |
| 126 * Main test function | |
| 127 */ | |
| 128 function main() { | |
| 129 testDisplayValue("none"); | |
| 130 testDisplayValue("block"); | |
| 131 testDisplayValue("flex"); | |
| 132 testDisplayValue("inline-flex", "flex"); | |
| 133 testDisplayValue("list-item"); | |
| 134 testDisplayValue("table"); | |
| 135 testDisplayValue("inline-table", "table"); | |
| 136 | |
| 137 // These values all compute to "block" in a flex container. Do them in a | |
| 138 // loop, so that I don't have to type "block" a zillion times. | |
| 139 var dispValsThatComputeToBlockInAFlexContainer = [ | |
| 140 "inline", | |
| 141 "inline-block", | |
| 142 "-moz-box", | |
| 143 "-moz-inline-box", | |
| 144 "-moz-grid", | |
| 145 "-moz-inline-grid", | |
| 146 "-moz-grid-group", | |
| 147 "-moz-grid-line", | |
| 148 "-moz-stack", | |
| 149 "-moz-inline-stack", | |
| 150 "-moz-deck", | |
| 151 "-moz-popup", | |
| 152 "-moz-groupbox", | |
| 153 ]; | |
| 154 | |
| 155 dispValsThatComputeToBlockInAFlexContainer.forEach( | |
| 156 function(aSpecifiedDisplay) { | |
| 157 testDisplayValue(aSpecifiedDisplay, "block"); | |
| 158 }); | |
| 159 | |
| 160 // Table-parts are special. When they're a child of a flex container, | |
| 161 // they normally don't get blockified -- instead, they trigger table-fixup | |
| 162 // and get wrapped in a table. So, their expected display as the child of | |
| 163 // a flex container is the same as their specified display. BUT, if | |
| 164 // we apply out-of-flow styling, then *that* blockifies them before | |
| 165 // we get to the table-fixup stage -- so then, their computed display | |
| 166 // is "block". | |
| 167 let tablePartsDispVals = [ | |
| 168 "table-row-group", | |
| 169 "table-column", | |
| 170 "table-column-group", | |
| 171 "table-header-group", | |
| 172 "table-footer-group", | |
| 173 "table-row", | |
| 174 "table-cell", | |
| 175 "table-caption" | |
| 176 ]; | |
| 177 | |
| 178 tablePartsDispVals.forEach( | |
| 179 function(aSpecifiedDisplay) { | |
| 180 testDisplayValue(aSpecifiedDisplay, aSpecifiedDisplay, "block"); | |
| 181 }); | |
| 182 } | |
| 183 | |
| 184 main(); | |
| 185 ]]> | |
| 186 </script> | |
| 187 </pre> | |
| 188 </body> | |
| 189 </html> |
