Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- Manifest: dom/flex/test/chrome.toml
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<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>