blob: c16187ac96ccc0a96d86528b7fd9a6dbb1c2543e [file] [log] [blame]
<!DOCTYPE html>
<link href="resources/grid.css" rel="stylesheet">
<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
<style>
.flex {
display: flex;
flex-direction: column;
width: 500px;
}
input {
margin: 10px;
font: 10px/1 Ahem;
}
</style>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<body>
<p>This test checks that preferred widths computations triggered after layout do not cause grid items to shrink.</p>
<h3>Grid as flex item.</h3>
<div class="flex">
<div class="grid" data-expected-width="500">
<input data-expected-width="480">
</div>
</div>
<h3>Grid as flex item with intrinsic width.</h3>
<div class="flex">
<div class="grid min-content" data-expected-width="224">
<input data-expected-width="204">
</div>
</div>
<h3>Grid with intrinsic width.</h3>
<div class="grid min-content" data-expected-width="224">
<input data-expected-width="204">
</div>
<h3>Grid with auto width and input with placeholder.</h3>
<div class="grid" style="max-width: 500px" data-expected-width="500">
<input placeholder="Type something here" data-expected-width="480">
</div>
<h3>Grid with auto width and input with placeholder and non-auto min-width.</h3>
<div class="grid" style="max-width: 500px" data-expected-width="500">
<input style="min-width: 0px" placeholder="Type something here" data-expected-width="480">
</div>
<h3>Grid with auto width and input with placeholder and non-visible overflow.</h3>
<div class="grid" style="max-width: 500px" data-expected-width="500">
<input style="overflow: hidden" placeholder="Type something here" data-expected-width="480">
</div>
<h3>Grid as a child of a flex item.</h3>
<div class="flex">
<div>
<div class="grid" data-expected-width="500">
<input data-expected-width="480">
</div>
</div>
</div>
<div id="log"></div>
<script>
'use strict';
var inputs = document.getElementsByTagName("input");
function doTest(i) {
return new Promise(resolve => {
inputs[i].focus();
setTimeout(() => {
document.execCommand('InsertText', false, 'X');
resolve(inputs[i]);
}, 0);
});
}
function assert_tolerance(actual, expected, message)
{
if (isNaN(expected) || Math.abs(actual - expected) >= 1) {
assert_equals(actual, Number(expected), message);
}
}
function checkExpectedValue(node) {
var expectedWidth = node.getAttribute("data-expected-width");
assert_tolerance(node.offsetWidth, expectedWidth, "Error");
}
promise_test(() => {
return doTest(0)
.then(function(input) {
checkExpectedValue(input);
});
}, 'Input 1 test');
promise_test(() => {
return doTest(1)
.then(function(input) {
checkExpectedValue(input);
});
}, 'Input 2 test');
promise_test(() => {
return doTest(2)
.then(function(input) {
checkExpectedValue(input);
});
}, 'Input 3 test');
promise_test(() => {
return doTest(3)
.then(function(input) {
checkExpectedValue(input);
});
}, 'Input 4 test');
promise_test(() => {
return doTest(4)
.then(function(input) {
checkExpectedValue(input);
});
}, 'Input 5 test');
promise_test(() => {
return doTest(5)
.then(function(input) {
checkExpectedValue(input);
});
}, 'Input 6 test');
promise_test(() => {
return doTest(6)
.then(function(input) {
checkExpectedValue(input);
});
}, 'Input 7 test');
</script>
</body>