OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <link href="resources/grid.css" rel="stylesheet"> |
| 3 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel
="stylesheet"> |
| 4 <style> |
| 5 .flex { |
| 6 display: flex; |
| 7 flex-direction: column; |
| 8 width: 500px; |
| 9 } |
| 10 |
| 11 input { |
| 12 margin: 10px; |
| 13 font: 10px/1 Ahem; |
| 14 } |
| 15 </style> |
| 16 |
| 17 <script src="../../resources/testharness.js"></script> |
| 18 <script src="../../resources/testharnessreport.js"></script> |
| 19 <script src="../../resources/check-layout-th.js"></script> |
| 20 |
| 21 <body onload="runTest()"> |
| 22 <p>This test checks that preferred widths computations triggered after layout fo
r flex items do not cause grid containers to shrink.</p> |
| 23 <h3>Grid as flex item.</h3> |
| 24 <div class="flex"> |
| 25 <div class="grid" data-expected-width="500"> |
| 26 <input data-expected-width="480"> |
| 27 </div> |
| 28 </div> |
| 29 |
| 30 <h3>Grid as flex item with intrinsic width.</h3> |
| 31 <div class="flex"> |
| 32 <div class="grid min-content" data-expected-width="224"> |
| 33 <input data-expected-width="204"> |
| 34 </div> |
| 35 </div> |
| 36 |
| 37 <h3>Grid with intrinsic width.</h3> |
| 38 <div class="grid min-content" data-expected-width="224"> |
| 39 <input data-expected-width="204"> |
| 40 </div> |
| 41 |
| 42 <h3>Grid as a child of a flex item.</h3> |
| 43 <div class="flex"> |
| 44 <div> |
| 45 <div class="grid" data-expected-width="500"> |
| 46 <input data-expected-width="480"> |
| 47 </div> |
| 48 </div> |
| 49 </div> |
| 50 <div id="log"></div> |
| 51 </body> |
| 52 |
| 53 <script> |
| 54 function runTest() { |
| 55 var inputs = document.getElementsByTagName("input"); |
| 56 for (i = 0; i < inputs.length; ++i) { |
| 57 inputs[i].focus(); |
| 58 document.execCommand('InsertText', false, 'X'); |
| 59 } |
| 60 checkLayout('.grid'); |
| 61 } |
| 62 </script> |
OLD | NEW |