зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1498273 Part 4: Add tests of FlexItem clampState. r=dholbert
Depends on D9447 Differential Revision: https://phabricator.services.mozilla.com/D8776 --HG-- extra : moz-landing-system : lando
This commit is contained in:
Brad Werth
Родитель
1600580027
Коммит
6d53b458a3
|
|
@ -1,3 +1,4 @@
|
|||
[chrome/test_flex_axis_directions.html]
|
||||
[chrome/test_flex_items.html]
|
||||
[chrome/test_flex_item_clamp.html]
|
||||
[chrome/test_flex_lines.html]
|
||||
|
|
|
|||
|
|
@ -0,0 +1,169 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<script type="text/javascript" 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>
|
||||
Загрузка…
Ссылка в новой задаче