test_flex_parent.html (3494B)
1 <!doctype html> 2 <html id="nonitem0"> 3 <head> 4 <meta charset="utf-8"> 5 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 6 <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css" /> 7 <style> 8 .container { 9 display: flex; 10 background-color: grey; 11 font: 14px sans-serif; 12 height: 20px; 13 } 14 15 .lime { background: lime; } 16 .yellow { background: yellow; } 17 .orange { background: orange; } 18 </style> 19 20 <script> 21 "use strict"; 22 23 SimpleTest.waitForExplicitFinish(); 24 25 function testFlexParentExpectedValues(values) { 26 let expectedParent; 27 if (values.parent) { 28 expectedParent = document.getElementById(values.parent); 29 } 30 31 let item, itemLabel; 32 33 if (values.id) { 34 item = document.getElementById(values.id); 35 itemLabel = values.id; 36 } else { 37 item = expectedParent.firstChild; 38 itemLabel = "[text node]"; 39 } 40 41 const actualParent = item.parentFlexElement; 42 43 if (values.parent) { 44 is(actualParent, expectedParent, "Item " + itemLabel + " should have a parent with id " + values.parent + "."); 45 } else { 46 is(actualParent, null, "Non-item " + itemLabel + " should not have a parent."); 47 } 48 } 49 50 function testFlexParents() { 51 let expectedValues = [ 52 // These items expect to have a flex parent. 53 { id: "item0", parent: "container0" }, 54 { id: "item1", parent: "container1" }, 55 { id: "item2", parent: "container2" }, 56 { id: "item3", parent: "container3" }, 57 { id: "item4", parent: "container4" }, 58 { id: null /* choose the first child of the expected parent */, parent: "container5" }, 59 60 61 // These elements do NOT expect to have a flex parent. 62 { id: "nonitem0" }, 63 { id: "nonitem1" }, 64 { id: "nonitem2" }, 65 { id: "nonitem3" }, 66 ]; 67 68 for (let i = 0; i < expectedValues.length; ++i) { 69 testFlexParentExpectedValues(expectedValues[i]); 70 } 71 } 72 73 function runTests() { 74 testFlexParents(); 75 SimpleTest.finish(); 76 } 77 </script> 78 </head> 79 80 <body onLoad="runTests();"> 81 <!-- These items expect to have a flex parent. --> 82 <div id="container0" class="container"> 83 <div id="item0" class="lime">first item</div> 84 </div> 85 86 <div id="container1" class="container"> 87 <div class="orange">first item</div> 88 <div id="item1" class="lime">second item</div> 89 </div> 90 91 <div id="container2" class="container"> 92 <div style="display:contents"> 93 <div id="item2" class="lime">display-contents-child item</div> 94 </div> 95 </div> 96 97 <div id="container3" class="container"> 98 A <span id="item3" class="lime">middle item</span> surrounded by anonymous text items</div> 99 </div> 100 101 <div id="container4" class="container"> 102 <div id="item4" style="display: table-cell">display: table-cell item</div> 103 </div> 104 105 <div id="container5" class="container"> 106 Text that gets wrapped in anonymous flex item 107 </div> 108 109 <!-- These elements do NOT expect to have a flex parent. --> 110 111 <!-- nonitem0 is the root html element --> 112 113 <div class="container"> 114 <div> 115 <div id="nonitem1" class="yellow">child element of an item</div> 116 </div> 117 </div> 118 119 <div class="container"> 120 <div> 121 <div id="nonitem2" style="position: absolute" class="yellow">position: absolute element</div> 122 </div> 123 </div> 124 125 <div class="container" style="position:relative"> 126 <div> 127 <div id="nonitem3" style="position: absolute" class="yellow"> 128 position: absolute element, with flex as containing block 129 </div> 130 </div> 131 </div> 132 </body> 133 </html>