| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <meta charset="utf-8"> | 2 <meta charset="utf-8"> |
| 3 <title>CSS Grid Layout Test: Content Distribution 'stretch'</title> | 3 <title>CSS Grid Layout Test: Content Distribution 'stretch' and gaps on 2x2 grid
</title> |
| 4 <link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernande
z@igalia.com"> | 4 <link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernande
z@igalia.com"> |
| 5 <link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distributio
n"> | 5 <link rel="help" href="https://drafts.csswg.org/css-align-3/#content-distributio
n"> |
| 6 <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-conten
t-stretch"> | 6 <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-conten
t-stretch"> |
| 7 <link rel="match" href="../../reference/ref-filled-green-200px-square.html"> | 7 <link rel="match" href="../../reference/ref-filled-green-200px-square.html"> |
| 8 <meta name="assert" content="Content Distribution properties with 'stretch' valu
e render correcly."> | 8 <meta name="assert" content="Content Distribution properties with 'stretch' valu
e render correcly."> |
| 9 <style> | 9 <style> |
| 10 .block { | 10 .block { |
| 11 position: absolute; | 11 position: absolute; |
| 12 z-index: -1; | 12 z-index: -1; |
| 13 background: green; | 13 background: green; |
| 14 width: 200px; | 14 width: 200px; |
| 15 height: 200px; | 15 height: 200px; |
| 16 } | 16 } |
| 17 .block > div { | 17 .block > div { |
| 18 position: absolute; | 18 position: absolute; |
| 19 background: red; | 19 background: red; |
| 20 width: 100px; | 20 width: 95px; |
| 21 height: 100px; | 21 height: 95px; |
| 22 } | 22 } |
| 23 .grid { | 23 .grid { |
| 24 z-index: 1; | 24 z-index: 1; |
| 25 display: grid; | 25 display: grid; |
| 26 width: 200px; | 26 width: 200px; |
| 27 height: 200px; | 27 height: 200px; |
| 28 grid-template-columns: auto auto; | 28 grid-template-columns: auto auto; |
| 29 grid-template-rows: auto auto; | 29 grid-template-rows: auto auto; |
| 30 grid-row-gap: 10px; |
| 31 grid-column-gap: 10px; |
| 30 align-content: stretch; | 32 align-content: stretch; |
| 31 justify-content: stretch; | 33 justify-content: stretch; |
| 32 } | 34 } |
| 33 .grid > div { background: green; } | 35 .grid > div { background: green; } |
| 34 </style> | 36 </style> |
| 35 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p
> | 37 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p
> |
| 36 <div class="block"> | 38 <div class="block"> |
| 37 <div style="top: 0px; left: 0px;"></div> | 39 <div style="top: 0px; left: 0px;"></div> |
| 38 <div style="top: 100px; left: 100px;"></div> | 40 <div style="top: 105px; left: 105px;"></div> |
| 39 </div> | 41 </div> |
| 40 <div class="grid"> | 42 <div class="grid"> |
| 41 <div style="grid-row: 1; grid-column: 1;"></div> | 43 <div style="grid-row: 1; grid-column: 1;"></div> |
| 42 <div style="grid-row: 2; grid-column: 2;"></div> | 44 <div style="grid-row: 2; grid-column: 2;"></div> |
| 43 </div> | 45 </div> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2825133003:
[css-grid] Ignore collapsed tracks on content-distribution alignment (Closed)
