| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 | 2 |
| 3 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel
="stylesheet"> | 3 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel
="stylesheet"> |
| 4 <link href="../css-intrinsic-dimensions/resources/height-keyword-classes.css" re
l="stylesheet"> | 4 <link href="../css-intrinsic-dimensions/resources/height-keyword-classes.css" re
l="stylesheet"> |
| 5 <link href="resources/grid.css" rel="stylesheet"> | 5 <link href="resources/grid.css" rel="stylesheet"> |
| 6 | 6 |
| 7 <style> | 7 <style> |
| 8 .container { | 8 .container { |
| 9 width: 100px; | 9 width: 100px; |
| 10 height: 100px; | 10 height: 100px; |
| 11 } | 11 } |
| 12 | 12 |
| 13 .grid { | 13 .grid { |
| 14 grid-template-columns: 1fr; | 14 grid-template-columns: 1fr; |
| 15 grid-template-rows: 1fr; | 15 grid-template-rows: 1fr; |
| 16 } | 16 } |
| 17 | 17 |
| 18 div { font: 10px/1 Ahem; } | 18 div { font: 10px/1 Ahem; } |
| 19 | |
| 20 </style> | 19 </style> |
| 21 | 20 |
| 22 <script src="../../resources/check-layout.js"></script> | 21 <script src="../../resources/check-layout.js"></script> |
| 23 | 22 |
| 24 <body onload="checkLayout('.grid')"> | 23 <body onload="checkLayout('.grid')"> |
| 25 | 24 |
| 26 <p>This test checks that fr tracks are properly sized whenever grid have intrins
ic sizes.</p> | 25 <p>This test checks that fr tracks are properly sized whenever grid have intrins
ic sizes.</p> |
| 27 | 26 |
| 28 <div class="container"> | 27 <div class="container"> |
| 29 <div class="grid" data-expected-width="100" data-expected-height="10"> | 28 <div class="grid" data-expected-width="100" data-expected-height="10"> |
| 30 <div>XXX XXX</div> | 29 <div>XXX XXX</div> |
| 31 </div> | 30 </div> |
| 32 </div> | 31 </div> |
| 33 | 32 |
| 34 <!-- This fails due to https://code.google.com/p/chromium/issues/detail?id=54776
2 --> | |
| 35 <div class="container"> | 33 <div class="container"> |
| 36 <div class="grid min-content" data-expected-width="30" data-expected-height="1
0"> | 34 <div class="grid min-content" data-expected-width="30" data-expected-height="2
0"> |
| 37 <div>XXX XXX</div> | 35 <div>XXX XXX</div> |
| 38 </div> | 36 </div> |
| 39 </div> | 37 </div> |
| 40 | 38 |
| 41 <div class="container"> | 39 <div class="container"> |
| 42 <div class="grid max-content" data-expected-width="70" data-expected-height="1
0"> | 40 <div class="grid max-content" data-expected-width="70" data-expected-height="1
0"> |
| 43 <div>XXX XXX</div> | 41 <div>XXX XXX</div> |
| 44 </div> | 42 </div> |
| 45 </div> | 43 </div> |
| 46 | 44 |
| 47 <div class="container"> | 45 <div class="container"> |
| 48 <div class="grid fit-content" data-expected-width="70" data-expected-height="1
0"> | 46 <div class="grid fit-content" data-expected-width="70" data-expected-height="1
0"> |
| 49 <div>XXX XXX</div> | 47 <div>XXX XXX</div> |
| 50 </div> | 48 </div> |
| 51 </div> | 49 </div> |
| 52 | 50 |
| 53 <div class="container"> | 51 <div class="container"> |
| 54 <div class="grid fill-available" data-expected-width="100" data-expected-heigh
t="100"> | 52 <div class="grid fill-available" data-expected-width="100" data-expected-heigh
t="100"> |
| 55 <div>XXX XXX</div> | 53 <div>XXX XXX</div> |
| 56 </div> | 54 </div> |
| 57 </div> | 55 </div> |
| 58 | 56 |
| 57 <div class="min-content"> |
| 58 <div class="grid" data-expected-width="40" data-expected-height="50"> |
| 59 <div>XXX XXXX XX X XX XXX</div> |
| 60 </div> |
| 61 </div> |
| 62 |
| 63 <div class="grid container" data-expected-width="100" data-expected-height="100"
> |
| 64 <div style="display: grid; grid-template-columns: 3fr; grid-template-rows: 2
fr;" data-expected-width="100" data-expected-height="100"> |
| 65 <div>XXX XXXX XX X XX XXX</div> |
| 66 </div> |
| 67 </div> |
| 68 |
| 69 <div class="grid" style="grid; grid: 1fr 2fr / 2fr 1fr; width: 300px; height: 30
0px;" data-expected-width="300" data-expected-height="300"> |
| 70 <div class="firstRowFirstColumn" style="display: grid; grid: 1fr 3fr / 3fr 1
fr;" data-expected-width="200" data-expected-height="100"> |
| 71 <div style="border: 2px solid magenta;" data-expected-width="150" data-e
xpected-height="25">XXXX</div> |
| 72 <div class="secondRowSecondColumn" style="border: 2px solid cyan;" data-
expected-width="50" data-expected-height="75">XXXX XX XX</div> |
| 73 </div> |
| 74 <div class="secondRowSecondColumn" style="display: grid; grid: 3fr 4fr / 4fr
3fr;" data-expected-width="100" data-expected-height="200"> |
| 75 <div style="border: 2px solid lime;" data-expected-width="56" data-expec
ted-height="86">XXX XX X</div> |
| 76 <div class="secondRowSecondColumn" style="border: 2px solid navy;" data-
expected-width="44" data-expected-height="114">XXXX XXX XXXX XXX XXXX</div> |
| 77 </div> |
| 78 </div> |
| 79 |
| 80 |
| 59 </body> | 81 </body> |
| OLD | NEW |