| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 |
| 3 <link href="resources/grid.css" rel="stylesheet"> |
| 4 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel
="stylesheet"> |
| 5 <style> |
| 6 .frGrid { |
| 7 grid: 1fr / 1fr; |
| 8 font: 50px/1 Ahem; |
| 9 border: 50px solid magenta; |
| 10 width: 300px; |
| 11 } |
| 12 |
| 13 .item { |
| 14 border: 50px solid rgba(0, 255, 250, 0.5); |
| 15 } |
| 16 |
| 17 .borderMargin { |
| 18 border: 20px solid blue; |
| 19 margin: 30px; |
| 20 } |
| 21 |
| 22 .frRowsGrid { |
| 23 grid-auto-columns: 100px; |
| 24 grid-auto-rows: minmax(0,1fr); |
| 25 } |
| 26 |
| 27 .frColsGrid { |
| 28 grid-auto-columns: minmax(0,1fr); |
| 29 grid-auto-rows: 100px; |
| 30 } |
| 31 |
| 32 span { |
| 33 background: yellow; |
| 34 border: 10px solid; |
| 35 } |
| 36 |
| 37 .child { |
| 38 height:40px; |
| 39 width:40px; |
| 40 } |
| 41 |
| 42 </style> |
| 43 <script src="../../resources/testharness.js"></script> |
| 44 <script src="../../resources/testharnessreport.js"></script> |
| 45 <script src="../../resources/check-layout-th.js"></script> |
| 46 |
| 47 <body onload="checkLayout('.grid')"> |
| 48 <div id=log></div> |
| 49 |
| 50 <div class="grid frGrid" data-expected-width="400" data-expected-height="250" da
ta-expected-client-width="300" data-expected-client-height="150"> |
| 51 <div class="item" data-expected-width="300" data-expected-height="150" data-
expected-client-width="200" data-expected-client-height="50">X</div> |
| 52 </div> |
| 53 |
| 54 <div class="grid borderMargin fit-content frRowsGrid" data-expected-width="140"
data-expected-height="100" data-expected-client-width="100" data-expected-client
-height="60"> |
| 55 <span data-expected-width="100" data-expected-height="60" data-expected-clie
nt-width="80" data-expected-client-height="40"> |
| 56 <div class="child"></div> |
| 57 </span> |
| 58 </div> |
| 59 |
| 60 <div class="grid borderMargin fit-content frColsGrid" data-expected-width="100"
data-expected-height="140" data-expected-client-width="60" data-expected-client-
height="100"> |
| 61 <span data-expected-width="60" data-expected-height="100" data-expected-clie
nt-width="40" data-expected-client-height="80"> |
| 62 <div class="child"></div> |
| 63 </span> |
| 64 </div> |
| 65 |
| 66 </body> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1490093003:
[css-grid] Fix items' height computation in indefinite grids with fr (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master