forked from mirrors/gecko-dev
13f2be375e
MozReview-Commit-ID: KWzThXA9Jk5 --HG-- extra : rebase_source : 2ed00b04698c4296935aca99c184e1cbbbdefdc5
169 lines
5.5 KiB
HTML
169 lines
5.5 KiB
HTML
<!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>
|
|
.container {
|
|
display: flex;
|
|
background-color: grey;
|
|
font: 14px sans-serif;
|
|
width: 800px;
|
|
height: 50px;
|
|
}
|
|
|
|
.base { align-self: baseline; }
|
|
.lastbase { align-self: last baseline; }
|
|
|
|
.offset { margin-top: 10px;
|
|
margin-bottom: 3px; }
|
|
|
|
.lime { background: lime; }
|
|
.yellow { background: yellow; }
|
|
.orange { background: orange; }
|
|
.pink { background: pink; }
|
|
.white { background: white; }
|
|
|
|
.crossMinMax { min-height: 40px;
|
|
max-height: 120px; }
|
|
|
|
.mainMinMax { min-width: 120px;
|
|
max-width: 500px; }
|
|
|
|
.flexGrow { flex-grow: 1; }
|
|
|
|
#second { width: 100px; }
|
|
</style>
|
|
|
|
<script>
|
|
"use strict";
|
|
|
|
SimpleTest.waitForExplicitFinish();
|
|
|
|
const {classes: Cc, interfaces: Ci, utils: Cu} = Components;
|
|
|
|
const TEXT_NODE = Ci.nsIDOMNode.TEXT_NODE;
|
|
|
|
function testItemMatchesExpectedValues(item, values, index) {
|
|
if (typeof(values.node) != "undefined") {
|
|
is(item.node, values.node, "Item index " + index + " has expected node.");
|
|
}
|
|
|
|
if (typeof(values.node_todo) != "undefined") {
|
|
todo_is(item.node, values.node_todo, "Item index " + index + " has expected node.");
|
|
}
|
|
|
|
if (typeof(values.mainBaseSize) != "undefined") {
|
|
is(item.mainBaseSize, values.mainBaseSize, "Item index " + index + " has expected mainBaseSize.");
|
|
}
|
|
|
|
if (typeof(values.mainDeltaSize) != "undefined") {
|
|
is(item.mainDeltaSize, values.mainDeltaSize, "Item index " + index + " has expected mainDeltaSize.");
|
|
}
|
|
|
|
if (typeof(values.mainMinSize) != "undefined") {
|
|
is(item.mainMinSize, values.mainMinSize, "Item index " + index + " has expected mainMinSize.");
|
|
}
|
|
|
|
if (typeof(values.mainMaxSize) != "undefined") {
|
|
is(item.mainMaxSize, values.mainMaxSize, "Item index " + index + " has expected mainMaxSize.");
|
|
}
|
|
|
|
if (typeof(values.crossMinSize) != "undefined") {
|
|
is(item.crossMinSize, values.crossMinSize, "Item index " + index + " has expected crossMinSize.");
|
|
}
|
|
|
|
if (typeof(values.crossMaxSize) != "undefined") {
|
|
is(item.crossMaxSize, values.crossMaxSize, "Item index " + index + " has expected crossMaxSize.");
|
|
}
|
|
}
|
|
|
|
function nearlyEqual(a, b) {
|
|
const ep = 1e-4;
|
|
let diff = a - b;
|
|
return (diff < ep && diff > -ep);
|
|
}
|
|
|
|
function runTests() {
|
|
let container = document.getElementById("wrapper");
|
|
let flex = container.getAsFlexContainer();
|
|
let lines = flex.getLines();
|
|
is(lines.length, 1, "Container has expected number of lines.");
|
|
|
|
let line = lines[0];
|
|
let containerHeight = container.getBoundingClientRect().height;
|
|
is(line.crossSize, containerHeight, "Line crossSize equals the height of the container.");
|
|
|
|
let first = document.getElementById("first");
|
|
let second = document.getElementById("second");
|
|
let third = document.getElementById("third");
|
|
let fourth = document.getElementById("fourth");
|
|
let fifth = document.getElementById("fifth");
|
|
let sixth = container.lastChild;
|
|
is(sixth.nodeType, TEXT_NODE, "Sixth child should be an anonymous text node.");
|
|
|
|
// We can't compare baselines precisely, so we'll just confirm that they appear
|
|
// somewhere within the elements that determine them.
|
|
let firstRect = first.getBoundingClientRect();
|
|
ok(line.firstBaselineOffset > firstRect.top &&
|
|
line.firstBaselineOffset < firstRect.bottom,
|
|
"Line firstBaselineOffset lands somewhere within the element that determines it.");
|
|
|
|
// For last baseline, it's measured from the bottom, so we have to compare against
|
|
// the element bounds subtracted from the container height.
|
|
let secondRect = second.getBoundingClientRect();
|
|
ok(line.lastBaselineOffset > containerHeight - secondRect.bottom &&
|
|
line.lastBaselineOffset < containerHeight - secondRect.top,
|
|
"Line lastBaselineOffset lands somewhere within the element that determines it.");
|
|
|
|
let items = line.getItems();
|
|
is(items.length, 6, "Line has expected number of items.");
|
|
|
|
let expectedValues = [
|
|
{ node: first,
|
|
crossMinSize: 0 },
|
|
{ node: second,
|
|
mainBaseSize: secondRect.width,
|
|
mainDeltaSize: 0 },
|
|
{ node: third,
|
|
crossMinSize: 40,
|
|
crossMaxSize: 120,
|
|
mainDeltaSize: 0 },
|
|
{ node: fourth,
|
|
mainMinSize: 120,
|
|
mainMaxSize: 500,
|
|
mainDeltaSize: 0 },
|
|
{ node: fifth,
|
|
mainDeltaSize: 0 },
|
|
{ node: sixth },
|
|
];
|
|
|
|
for (let i = 0; i < items.length; ++i) {
|
|
let item = items[i];
|
|
let values = expectedValues[i];
|
|
testItemMatchesExpectedValues(item, values, i);
|
|
}
|
|
|
|
// Check that the delta size of the first item is nearly equal to the actual size minus the base size.
|
|
ok(nearlyEqual(items[0].mainDeltaSize, firstRect.width - items[0].mainBaseSize),
|
|
"flex-grow item has expected mainDeltaSize.");
|
|
|
|
SimpleTest.finish();
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
<body onLoad="runTests();">
|
|
<div id="wrapper" class="container">
|
|
<div id="first" class="lime base flexGrow">one line (first)</div>
|
|
<div id="second" class="yellow lastbase">one line (last)</div>
|
|
<div id="third" class="orange offset lastbase crossMinMax">two<br/>lines and offset (last)</div>
|
|
<div id="fourth" class="pink offset base mainMinMax">offset (first)</div>
|
|
<div style="display:contents">
|
|
<div id="fifth" class="white">replaced</div>
|
|
</div>
|
|
anonymous text node
|
|
</div>
|
|
</body>
|
|
</html>
|