| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <link href="resources/grid.css" rel="stylesheet"> |
| 4 <style> |
| 5 |
| 6 .grid { |
| 7 grid-template-columns: 100px 200px; |
| 8 grid-template-rows: 50px 150px; |
| 9 width: 400px; |
| 10 height: 300px; |
| 11 border: 5px solid black; |
| 12 margin: 30px; |
| 13 padding: 15px; |
| 14 /* Ensures that the grid container is the containing block of the absolutely
positioned grid children. */ |
| 15 position: relative; |
| 16 } |
| 17 |
| 18 .container { |
| 19 position: relative; |
| 20 float: left; |
| 21 } |
| 22 |
| 23 .absolute { |
| 24 position: absolute; |
| 25 } |
| 26 |
| 27 .grid > div { |
| 28 background-color: green; |
| 29 } |
| 30 |
| 31 .lengthSize { |
| 32 width: 50px; |
| 33 height: 20px; |
| 34 } |
| 35 |
| 36 .percentageSize { |
| 37 width: 50%; |
| 38 height: 20%; |
| 39 } |
| 40 |
| 41 .offsetsSize { |
| 42 left: 25px; |
| 43 right: 30px; |
| 44 top: 35px; |
| 45 bottom: 40px; |
| 46 } |
| 47 |
| 48 .red { |
| 49 background-color: red; |
| 50 } |
| 51 </style> |
| 52 <body> |
| 53 |
| 54 <p>This test checks that the background of positioned items is painted in the ri
ght position.</p> |
| 55 |
| 56 <p>The test passes if you see 4 green boxes and no red.</p> |
| 57 |
| 58 <div class="container"> |
| 59 <div class="absolute red" style="left: 55px; top: 50px; width: 100px; height
: 50px"></div> |
| 60 <div class="absolute red" style="left: 290px; top: 50px; width: 50px; height
: 20px"></div> |
| 61 <div class="absolute red" style="left: 50px; top: 115px; width: 50px; height
: 30px"></div> |
| 62 <div class="absolute red" style="left: 175px; top: 135px; width: 145px; heig
ht: 75px"></div> |
| 63 <div class="grid"> |
| 64 <div class="absolute onlyFirstRowOnlyFirstColumn sizedToGridArea" |
| 65 style="left: 5px;"> |
| 66 </div> |
| 67 <div class="absolute onlyFirstRowOnlySecondColumn lengthSize" |
| 68 style="right: 10px;"> |
| 69 </div> |
| 70 <div class="absolute onlySecondRowOnlyFirstColumn percentageSize" |
| 71 style="top: 15px;"> |
| 72 </div> |
| 73 <div class="absolute onlySecondRowOnlySecondColumn offsetsSize"></div> |
| 74 </div> |
| 75 </div> |
| 76 |
| 77 </body> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 637033003:
[CSS Grid Layout] Fix positioned grid children position and size (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master