test_flex_item_clamp.html (4464B)
1 <!doctype html> 2 <html> 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 f { 9 display: flex; 10 background-color: grey; 11 width: 400px; 12 height: 20px; 13 margin-bottom: 5px; 14 } 15 16 b { 17 flex-basis: 100px; 18 flex-grow: 1; 19 flex-shrink: 1; 20 background-color: gold; 21 } 22 23 c { 24 flex-basis: 100px; 25 flex-grow: 1; 26 flex-shrink: 1; 27 background-color: yellow; 28 } 29 30 d { 31 flex: none; 32 background-color: orange; 33 } 34 35 b::after, c::after, d::after { 36 content: ""; 37 display: block; 38 width: 10px; 39 height: 10px; 40 border: 1px solid teal; 41 } 42 43 44 .min50 { 45 min-width: 50px; 46 } 47 .min370 { 48 min-width: 370px; 49 } 50 .min400 { 51 min-width: 400px; 52 } 53 54 .max5 { 55 max-width: 5px; 56 } 57 .max50 { 58 max-width: 50px; 59 } 60 61 </style> 62 63 <script> 64 "use strict"; 65 66 SimpleTest.waitForExplicitFinish(); 67 68 const TEXT_NODE = Node.TEXT_NODE; 69 70 function testItemMatchesExpectedValues(item, values, index) { 71 is(item.clampState, values.cs, "Item index " + index + " should have expected clampState."); 72 } 73 74 function runTests() { 75 /** 76 * The expectedValues array contains one element for each flex container child of 77 * of the body. The values in this object are compared against the returned flex 78 * API values of the first flex item in the first line of the corresponding flex 79 * container. The "cs" value is compared against the flex item's clampState. 80 */ 81 const expectedValues = [ 82 { cs: "unclamped" }, 83 { cs: "unclamped" }, 84 { cs: "unclamped" }, 85 { cs: "unclamped" }, 86 87 { cs: "clamped_to_min" }, 88 { cs: "clamped_to_min" }, 89 { cs: "clamped_to_min" }, 90 { cs: "clamped_to_min" }, 91 { cs: "clamped_to_min" }, 92 93 { cs: "clamped_to_max" }, 94 { cs: "clamped_to_max" }, 95 { cs: "clamped_to_max" }, 96 { cs: "clamped_to_max" }, 97 { cs: "clamped_to_max" }, 98 ]; 99 100 let children = document.body.children; 101 is(children.length, expectedValues.length, "Document should have expected number of flex containers."); 102 103 for (let i = 0; i < children.length; ++i) { 104 const flex = children.item(i).getAsFlexContainer(); 105 ok(flex, "Document child index " + i + " should be a flex container."); 106 if (flex) { 107 const values = expectedValues[i]; 108 const item = flex.getLines()[0].getItems()[0]; 109 testItemMatchesExpectedValues(item, values, i); 110 } 111 } 112 113 SimpleTest.finish(); 114 } 115 </script> 116 </head> 117 118 <body onLoad="runTests();"> 119 <!-- unclamped cases --> 120 <!-- a flex:none item --> 121 <f><d></d></f> 122 123 <!-- a flex-grow item with room to grow --> 124 <f><b class="min370"></b></f> 125 126 <!-- a flex-shrink item with room to shrink --> 127 <f><b class="max50"></b><c class="min370"></c></f> 128 129 <!-- a flex-grow basis 100px item paired with a basis 200px item, where the second item is clamped, 130 and the first item then can grow past its minimum --> 131 <f><b style="min-width: 170px"></b><c class="max50" style="flex-basis:200px"></c></f> 132 133 134 <!-- clamped_to_min cases --> 135 <!-- a flex-grow item with a min smaller than the container --> 136 <f><b class="min370"></b><c></c></f> 137 138 <!-- a flex-shrink item with a min, paired with another that in total exceeds the container --> 139 <f><b class="min50"></b><c class="min370"></c></f> 140 141 <!-- a flex-shrink item shrunk to its (content-based) automatic minimum size --> 142 <f><b></b><c class="min400"></c></f> 143 144 <!-- a flex:none item with a min that is larger than its flex base size --> 145 <f><d class="min50"></d><c></c></f> 146 147 <!-- a flex-grow item paired with another flex-grow item that have equal-sized violations of 148 the first item's min with the second item's max --> 149 <f><b style="min-width: 200px"></b><c style="flex-basis:150px; max-width:200px"></c></f> 150 151 152 <!-- clamped_to_max cases --> 153 <!-- a flexible item with a max --> 154 <f><b class="max50"></b></f> 155 156 <!-- a flexible item with a max, paired with another flex-grow item --> 157 <f><b class="max50"></b><c></c></f> 158 159 <!-- a flexible item with a max smaller than its content size --> 160 <f><b class="max5"></b><c></c></f> 161 162 <!-- a flex:none item with a max smaller than its content size --> 163 <f><d class="max5"></d><c></c></f> 164 165 <!-- a flex-grow item paired with another flex-grow item that have equal-sized violations of 166 the first item's max with the second item's min --> 167 <f><b style="flex-basis:150px; max-width:200px"></b><c style="min-width: 200px"></c></f> 168 </body> 169 </html>