test_flex_item_rect.html (3646B)
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: 25px; 13 margin-bottom: 5px; 14 } 15 16 f > * { 17 width: 100px; 18 height: 10px; 19 } 20 21 b { 22 background-color: gold; 23 } 24 25 c { 26 background-color: yellow; 27 } 28 </style> 29 30 <script> 31 "use strict"; 32 33 SimpleTest.waitForExplicitFinish(); 34 35 function testItemMatchesExpectedValues(item, values, index) { 36 is(item.frameRect.x, values.x, 37 "Item index " + index + " should have expected frameRect.x."); 38 is(item.frameRect.y, values.y, 39 "Item index " + index + " should have expected frameRect.y."); 40 if (typeof(values.width) != "undefined") { 41 is(item.frameRect.width, values.width, 42 "Item index " + index + " should have expected frameRect.width."); 43 } 44 is(item.frameRect.height, values.height, 45 "Item index " + index + " should have expected frameRect.height."); 46 } 47 48 function runTests() { 49 /** 50 * The expectedValues array contains one rect for each flex container child of 51 * of the body. The values in this object are compared against the returned flex 52 * API values of the LAST flex item in the first line of the corresponding flex 53 * container. 54 */ 55 const expectedValues = [ 56 { x: 0, y: 0, width: 100, height: 10 }, 57 { x: 0, y: 0, width: undefined /* not tested */, height: 25 /* stretched to container */ }, 58 { x: 0, y: 0, width: 100, height: 10 }, 59 { x: 0, y: 0, width: 100, height: 10 }, 60 { x: 100, y: 0, width: 100, height: 10 }, 61 { x: 10, y: 10, width: 100, height: 10 }, 62 { x: 10, y: 10, width: 100, height: 10 }, 63 { x: 0, y: 0, width: 200, height: 20 }, 64 { x: 0, y: 0, width: 400, height: 25 }, 65 { x: 0, y: 0, width: 100, height: 10 }, 66 { x: 0, y: 0, width: 100, height: 10 }, 67 ]; 68 69 let children = document.body.children; 70 is(children.length, expectedValues.length, "Document should have expected number of flex containers."); 71 72 for (let i = 0; i < children.length; ++i) { 73 const flex = children.item(i).getAsFlexContainer(); 74 ok(flex, "Document child index " + i + " should be a flex container."); 75 if (flex) { 76 const values = expectedValues[i]; 77 const firstLine = flex.getLines()[0]; 78 const items = firstLine.getItems(); 79 const lastItem = items[items.length - 1]; 80 testItemMatchesExpectedValues(lastItem, values, i); 81 } 82 } 83 84 SimpleTest.finish(); 85 } 86 </script> 87 </head> 88 89 <body onLoad="runTests();"> 90 <!-- a single item --> 91 <f><b></b></f> 92 93 <!-- an anonymous box item around a text node --> 94 <f style="font-size: 10px">anonymous</f> 95 96 <!-- a table item --> 97 <f><table></table></f> 98 99 <!-- a display:table-cell item --> 100 <f><b style="display: table-cell"></b></f> 101 102 <!-- an item after a fixed size item --> 103 <f><b></b><c></c></f> 104 105 <!-- a relatively-positioned item --> 106 <f><b style="position: relative; top: 10px; left: 10px"></b></f> 107 108 <!-- a margin-adjusted item --> 109 <f><b style="margin-top: 10px; margin-left: 10px"></b></f> 110 111 <!-- an item sized with inline styles --> 112 <f><b style="width: 200px; height: 20px"></b></f> 113 114 <!-- an item that is flexed/stretched, in both axes --> 115 <f style="align-items: stretch"><b style="flex-grow: 1; height: auto"></b></f> 116 117 <!-- These stylings should have no effect on the frameRect. --> 118 <!-- a transform:scale item --> 119 <f><b style="transform: scale(2.0)"></b></f> 120 121 <!-- a transform:translate item --> 122 <f><b style="transform: translate(10px, 10px)"></b></f> 123 </body> 124 </html>