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 'space-evenly' with collapsed
tracks</title> | 3 <title>CSS Grid Layout Test: Content Distribution 'space-evenly' with collapsed
tracks 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/#distribution-values
"> | 6 <link rel="help" href="https://drafts.csswg.org/css-align-3/#distribution-values
"> |
7 <link rel="help" href="https://drafts.csswg.org/css-grid/#collapsed-track"> | 7 <link rel="help" href="https://drafts.csswg.org/css-grid/#collapsed-track"> |
8 <link rel="match" href="../../reference/ref-filled-green-200px-square.html"> | 8 <link rel="match" href="../../reference/ref-filled-green-200px-square.html"> |
9 <meta name="assert" content="Content Distribution alignment ignore collapsed gri
d tracks and render correctly with a value of 'space-evenly'."> | 9 <meta name="assert" content="Content Distribution alignment ignore collapsed gri
d tracks and render correctly with a value of 'space-evenly'."> |
10 <style> | 10 <style> |
11 .block { | 11 .block { |
12 position: absolute; | 12 position: absolute; |
13 z-index: -1; | 13 z-index: -1; |
(...skipping 18 matching lines...) Expand all Loading... |
32 justify-content: space-evenly; | 32 justify-content: space-evenly; |
33 } | 33 } |
34 .grid > div { background: green; } | 34 .grid > div { background: green; } |
35 </style> | 35 </style> |
36 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p
> | 36 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p
> |
37 <div class="block"> | 37 <div class="block"> |
38 <div style="top: 50px; left: 50px;"></div> | 38 <div style="top: 50px; left: 50px;"></div> |
39 <div style="top: 125px; left: 125px;"></div> | 39 <div style="top: 125px; left: 125px;"></div> |
40 </div> | 40 </div> |
41 <div class="grid"> | 41 <div class="grid"> |
42 <div style="grid-row: 1; grid-column: 1;"></div> | 42 <div style="grid-row: 2; grid-column: 3;"></div> |
43 <div style="grid-row: 3; grid-column: 6;"></div> | 43 <div style="grid-row: 3; grid-column: 4;"></div> |
44 </div> | 44 </div> |
OLD | NEW |