| <!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> |