test_flexbox_child_display_values.xhtml (6570B)
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 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"> 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 * @param 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 * @param aSpecifiedDisplay 46 * The specified value of "display" that we should test. 47 * 48 * @param 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 * @param 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 ]; 143 144 dispValsThatComputeToBlockInAFlexContainer.forEach( 145 function(aSpecifiedDisplay) { 146 testDisplayValue(aSpecifiedDisplay, "block"); 147 }); 148 149 // Table-parts are special. When they're a child of a flex container, 150 // they normally don't get blockified -- instead, they trigger table-fixup 151 // and get wrapped in a table. So, their expected display as the child of 152 // a flex container is the same as their specified display. BUT, if 153 // we apply out-of-flow styling, then *that* blockifies them before 154 // we get to the table-fixup stage -- so then, their computed display 155 // is "block". 156 let tablePartsDispVals = [ 157 "table-row-group", 158 "table-column", 159 "table-column-group", 160 "table-header-group", 161 "table-footer-group", 162 "table-row", 163 "table-cell", 164 "table-caption" 165 ]; 166 167 tablePartsDispVals.forEach( 168 function(aSpecifiedDisplay) { 169 testDisplayValue(aSpecifiedDisplay, "block", "block"); 170 }); 171 } 172 173 main(); 174 ]]> 175 </script> 176 </pre> 177 </body> 178 </html>