function testItemMatchesExpectedValues(item, values, index) {
is(item.frameRect.x, values.x, "Item index " + index + " should have expected frameRect.x.");
is(item.frameRect.y, values.y, "Item index " + index + " should have expected frameRect.y.");
if (typeof(values.width) != "undefined") {
is(item.frameRect.width, values.width, "Item index " + index + " should have expected frameRect.width.");
}
is(item.frameRect.height, values.height, "Item index " + index + " should have expected frameRect.height.");
}
function runTests() {
/**
* The expectedValues array contains one rect for each flex container child of
* of the body. The values in this object are compared against the returned flex
* API values of the LAST flex item in the first line of the corresponding flex
* container.
*/
const expectedValues = [
{ x: 0, y: 0, width: 100, height: 10 },
{ x: 0, y: 0, width: undefined /* not tested */, height: 25 /* stretched to container */ },
{ x: 0, y: 0, width: 100, height: 10 },
{ x: 0, y: 0, width: 100, height: 10 },
{ x: 100, y: 0, width: 100, height: 10 },
{ x: 10, y: 10, width: 100, height: 10 },
{ x: 10, y: 10, width: 100, height: 10 },
{ x: 0, y: 0, width: 200, height: 20 },
{ x: 0, y: 0, width: 400, height: 25 },
{ x: 0, y: 0, width: 100, height: 10 },
{ x: 0, y: 0, width: 100, height: 10 },
];
let children = document.body.children;
is(children.length, expectedValues.length, "Document should have expected number of flex containers.");
for (let i = 0; i < children.length; ++i) {
const flex = children.item(i).getAsFlexContainer();
ok(flex, "Document child index " + i + " should be a flex container.");
if (flex) {
const values = expectedValues[i];
const firstLine = flex.getLines()[0];
const items = firstLine.getItems();
const lastItem = items[items.length - 1];
testItemMatchesExpectedValues(lastItem, values, i);
}
}
SimpleTest.finish();
}
</script>
</head>
<body onLoad="runTests();"> <!-- a single item -->
<f><b></b></f>
<!-- an anonymous box item around a text node -->
<f style="font-size: 10px">anonymous</f>
<!-- a table item -->
<f><table></table></f>
<!-- a display:table-cell item -->
<f><bstyle="display: table-cell"></b></f>
<!-- an item after a fixed size item -->
<f><b></b><c></c></f>
<!-- a margin-adjusted item -->
<f><bstyle="margin-top: 10px; margin-left: 10px"></b></f>
<!-- an item sized with inline styles -->
<f><bstyle="width: 200px; height: 20px"></b></f>
<!-- an item that is flexed/stretched, in both axes -->
<f style="align-items: stretch"><bstyle="flex-grow: 1; height: auto"></b></f>
<!-- These stylings should have no effect on the frameRect. --> <!-- a transform:scale item -->
<f><bstyle="transform: scale(2.0)"></b></f>
<!-- a transform:translate item -->
<f><bstyle="transform: translate(10px, 10px)"></b></f>
</body>
</html>
Messung V0.5 in Prozent
¤ Diese beiden folgenden Angebotsgruppen bietet das Unternehmen0.21Angebot
(Wie Sie bei der Firma Beratungs- und Dienstleistungen beauftragen können 2026-08-25)
¤
Die Informationen auf dieser Webseite wurden
nach bestem Wissen sorgfältig zusammengestellt. Es wird jedoch weder Vollständigkeit, noch Richtigkeit,
noch Qualität der bereit gestellten Informationen zugesichert.
Bemerkung:
Die farbliche Syntaxdarstellung und die Messung sind noch experimentell.
