diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
| commit | 36d22d82aa202bb199967e9512281e9a53db42c9 (patch) | |
| tree | 105e8c98ddea1c1e4784a60a5a6410fa416be2de /dom/flex/test/chrome/test_flex_item_clamp.html | |
| parent | Initial commit. (diff) | |
| download | firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.tar.xz firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.zip | |
Adding upstream version 115.7.0esr.upstream/115.7.0esrupstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'dom/flex/test/chrome/test_flex_item_clamp.html')
| -rw-r--r-- | dom/flex/test/chrome/test_flex_item_clamp.html | 169 |
1 files changed, 169 insertions, 0 deletions
diff --git a/dom/flex/test/chrome/test_flex_item_clamp.html b/dom/flex/test/chrome/test_flex_item_clamp.html new file mode 100644 index 0000000000..6624b3ee20 --- /dev/null +++ b/dom/flex/test/chrome/test_flex_item_clamp.html @@ -0,0 +1,169 @@ +<!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: 20px; + margin-bottom: 5px; +} + +b { + flex-basis: 100px; + flex-grow: 1; + flex-shrink: 1; + background-color: gold; +} + +c { + flex-basis: 100px; + flex-grow: 1; + flex-shrink: 1; + background-color: yellow; +} + +d { + flex: none; + background-color: orange; +} + +b::after, c::after, d::after { + content: ""; + display: block; + width: 10px; + height: 10px; + border: 1px solid teal; +} + + +.min50 { + min-width: 50px; +} +.min370 { + min-width: 370px; +} +.min400 { + min-width: 400px; +} + +.max5 { + max-width: 5px; +} +.max50 { + max-width: 50px; +} + +</style> + +<script> +"use strict"; + +SimpleTest.waitForExplicitFinish(); + +const TEXT_NODE = Node.TEXT_NODE; + +function testItemMatchesExpectedValues(item, values, index) { + is(item.clampState, values.cs, "Item index " + index + " should have expected clampState."); +} + +function runTests() { + /** + * The expectedValues array contains one element for each flex container child of + * of the body. The values in this object are compared against the returned flex + * API values of the first flex item in the first line of the corresponding flex + * container. The "cs" value is compared against the flex item's clampState. + **/ + const expectedValues = [ + { cs: "unclamped" }, + { cs: "unclamped" }, + { cs: "unclamped" }, + { cs: "unclamped" }, + + { cs: "clamped_to_min" }, + { cs: "clamped_to_min" }, + { cs: "clamped_to_min" }, + { cs: "clamped_to_min" }, + { cs: "clamped_to_min" }, + + { cs: "clamped_to_max" }, + { cs: "clamped_to_max" }, + { cs: "clamped_to_max" }, + { cs: "clamped_to_max" }, + { cs: "clamped_to_max" }, + ]; + + 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 item = flex.getLines()[0].getItems()[0]; + testItemMatchesExpectedValues(item, values, i); + } + } + + SimpleTest.finish(); +} +</script> +</head> + +<body onLoad="runTests();"> + <!-- unclamped cases --> + <!-- a flex:none item --> + <f><d></d></f> + + <!-- a flex-grow item with room to grow --> + <f><b class="min370"></b></f> + + <!-- a flex-shrink item with room to shrink --> + <f><b class="max50"></b><c class="min370"></c></f> + + <!-- a flex-grow basis 100px item paired with a basis 200px item, where the second item is clamped, + and the first item then can grow past its minimum --> + <f><b style="min-width: 170px"></b><c class="max50" style="flex-basis:200px"></c></f> + + + <!-- clamped_to_min cases --> + <!-- a flex-grow item with a min smaller than the container --> + <f><b class="min370"></b><c></c></f> + + <!-- a flex-shrink item with a min, paired with another that in total exceeds the container --> + <f><b class="min50"></b><c class="min370"></c></f> + + <!-- a flex-shrink item shrunk to its (content-based) automatic minimum size --> + <f><b></b><c class="min400"></c></f> + + <!-- a flex:none item with a min that is larger than its flex base size --> + <f><d class="min50"></d><c></c></f> + + <!-- a flex-grow item paired with another flex-grow item that have equal-sized violations of + the first item's min with the second item's max --> + <f><b style="min-width: 200px"></b><c style="flex-basis:150px; max-width:200px"></c></f> + + + <!-- clamped_to_max cases --> + <!-- a flexible item with a max --> + <f><b class="max50"></b></f> + + <!-- a flexible item with a max, paired with another flex-grow item --> + <f><b class="max50"></b><c></c></f> + + <!-- a flexible item with a max smaller than its content size --> + <f><b class="max5"></b><c></c></f> + + <!-- a flex:none item with a max smaller than its content size --> + <f><d class="max5"></d><c></c></f> + + <!-- a flex-grow item paired with another flex-grow item that have equal-sized violations of + the first item's max with the second item's min --> + <f><b style="flex-basis:150px; max-width:200px"></b><c style="min-width: 200px"></c></f> +</body> +</html> |