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'</title> | 3 <title>CSS Grid Layout Test: Content Distribution 'space-evenly' on 4x4 grid wit
h collapsed tracks</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-space-evenly"> | 6 <link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-align-conten
t-space-evenly"> |
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 'space-evenly'
value render correcly."> | 8 <meta name="assert" content="Content Distribution properties with 'space-evenly'
value 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: 25px; | 20 width: 25px; |
21 height: 25px; | 21 height: 25px; |
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: 25px 25px; | 28 grid-template-columns: repeat(auto-fit, 25px); |
29 grid-template-rows: 25px 25px; | 29 grid-template-rows: repeat(auto-fit, 25px); |
30 align-content: space-evenly; | 30 align-content: space-evenly; |
31 justify-content: space-evenly; | 31 justify-content: space-evenly; |
32 } | 32 } |
33 .grid > div { background: green; } | 33 .grid > div { background: green; } |
34 </style> | 34 </style> |
35 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p
> | 35 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p
> |
36 <div class="block"> | 36 <div class="block"> |
37 <div style="top: 50px; left: 50px;"></div> | 37 <div style="top: 20px; left: 65px;"></div> |
38 <div style="top: 125px; left: 125px;"></div> | 38 <div style="top: 20px; left: 110px;"></div> |
| 39 <div style="top: 65px; left: 110px;"></div> |
| 40 <div style="top: 110px; left: 110px;"></div> |
| 41 <div style="top: 155px; left: 20px;"></div> |
| 42 <div style="top: 155px; left: 155px;"></div> |
39 </div> | 43 </div> |
40 <div class="grid"> | 44 <div class="grid"> |
41 <div style="grid-row: 1; grid-column: 1;"></div> | 45 <div class="item" style="grid-row: 1; grid-column: 2;"></div> |
42 <div style="grid-row: 2; grid-column: 2;"></div> | 46 <div class="item" style="grid-row: 1; grid-column: 5;"></div> |
| 47 <div class="item" style="grid-row: 3; grid-column: 5;"></div> |
| 48 <div class="item" style="grid-row: 4; grid-column: 5;"></div> |
| 49 <div class="item" style="grid-row: 6; grid-column: 1;"></div> |
| 50 <div class="item" style="grid-row: 6; grid-column: 7;"></div> |
43 </div> | 51 </div> |
OLD | NEW |