preferred-width-computed-after-layout.html

<!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>
chromium/third_party/blink/web_tests/fast/css-grid-layout/preferred-width-computed-after-layout.html
