diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-28 14:29:10 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-28 14:29:10 +0000 |
| commit | 2aa4a82499d4becd2284cdb482213d541b8804dd (patch) | |
| tree | b80bf8bf13c3766139fbacc530efd0dd9d54394c /dom/flex/test/chrome/test_flex_item_rect.html | |
| parent | Initial commit. (diff) | |
| download | firefox-upstream.tar.xz firefox-upstream.zip | |
Adding upstream version 86.0.1.upstream/86.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'dom/flex/test/chrome/test_flex_item_rect.html')
| -rw-r--r-- | dom/flex/test/chrome/test_flex_item_rect.html | 124 |
1 files changed, 124 insertions, 0 deletions
diff --git a/dom/flex/test/chrome/test_flex_item_rect.html b/dom/flex/test/chrome/test_flex_item_rect.html new file mode 100644 index 0000000000..c535ea756b --- /dev/null +++ b/dom/flex/test/chrome/test_flex_item_rect.html @@ -0,0 +1,124 @@ +<!doctype html> +<html> +<head> +<meta charset="utf-8"> +<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> +<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css" /> +<style> +f { + display: flex; + background-color: grey; + width: 400px; + height: 25px; + margin-bottom: 5px; +} + +f > * { + width: 100px; + height: 10px; +} + +b { + background-color: gold; +} + +c { + background-color: yellow; +} +</style> + +<script> +"use strict"; + +SimpleTest.waitForExplicitFinish(); + +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><b style="display: table-cell"></b></f> + + <!-- an item after a fixed size item --> + <f><b></b><c></c></f> + + <!-- a relatively-positioned item --> + <f><b style="position: relative; top: 10px; left: 10px"></b></f> + + <!-- a margin-adjusted item --> + <f><b style="margin-top: 10px; margin-left: 10px"></b></f> + + <!-- an item sized with inline styles --> + <f><b style="width: 200px; height: 20px"></b></f> + + <!-- an item that is flexed/stretched, in both axes --> + <f style="align-items: stretch"><b style="flex-grow: 1; height: auto"></b></f> + + <!-- These stylings should have no effect on the frameRect. --> + <!-- a transform:scale item --> + <f><b style="transform: scale(2.0)"></b></f> + + <!-- a transform:translate item --> + <f><b style="transform: translate(10px, 10px)"></b></f> +</body> +</html> |