jfernandez@igalia.com | c5a0ff2 | 2016-01-19 11:36:11 +0000 | [diff] [blame] | 1 | <!DOCTYPE html> |
| 2 | <link href="resources/grid.css" rel="stylesheet"> |
| 3 | <link href="resources/grid-alignment.css" rel="stylesheet"> |
| 4 | <script src="../../resources/check-layout.js"></script> |
| 5 | <style> |
| 6 | .grid { |
rego@igalia.com | 9250823 | 2016-05-06 08:17:12 +0000 | [diff] [blame] | 7 | grid-template-columns: 500px; |
| 8 | grid-template-rows: 500px; |
jfernandez@igalia.com | c5a0ff2 | 2016-01-19 11:36:11 +0000 | [diff] [blame] | 9 | } |
| 10 | .fixedSizes { |
| 11 | width: 150px; |
| 12 | height: 150px; |
| 13 | } |
| 14 | .autoMargins { |
| 15 | margin: auto; |
| 16 | } |
| 17 | </style> |
| 18 | |
| 19 | <body onload="checkLayout('.grid')"> |
hyatt@apple.com | 1a1c3b0 | 2017-03-07 01:29:19 +0000 | [diff] [blame] | 20 | |
| 21 | <p>This test checks that the alignment properties align-self and justify-self apply the 'stretch' value correctly on replaced elements.</p> |
| 22 | |
| 23 | <div style="position: relative"> |
| 24 | <p>The blue image's original size is 100px x 100px, default alignment is resolved as 'start' for replaced elements so it prevents stretching to be applied.</p> |
| 25 | <div class="grid"> |
| 26 | <img src="../../css3/images/resources/blue-100.png" data-expected-width="100" data-expected-height="100"/> |
| 27 | </div> |
jfernandez@igalia.com | c5a0ff2 | 2016-01-19 11:36:11 +0000 | [diff] [blame] | 28 | </div> |
hyatt@apple.com | 1a1c3b0 | 2017-03-07 01:29:19 +0000 | [diff] [blame] | 29 | |
| 30 | <div style="position: relative"> |
| 31 | <p>The blue image's original size is 100px x 100px, 'normal' is resolved as 'start' for replaced elements so it prevents stretching to be applied.</p> |
| 32 | <div class="grid itemsNormal"> |
| 33 | <img src="../../css3/images/resources/blue-100.png" data-expected-width="100" data-expected-height="100"/> |
| 34 | </div> |
jfernandez@igalia.com | c5a0ff2 | 2016-01-19 11:36:11 +0000 | [diff] [blame] | 35 | </div> |
hyatt@apple.com | 1a1c3b0 | 2017-03-07 01:29:19 +0000 | [diff] [blame] | 36 | |
| 37 | <div style="position: relative"> |
| 38 | <p>The blue image's original size is 100px x 100px, but it should be stretched to fill the 500px x 500px grid area it's placed into.</p> |
| 39 | <div class="grid alignItemsStretch justifyItemsStretch"> |
| 40 | <img src="../../css3/images/resources/blue-100.png" data-expected-width="500" data-expected-height="500"/> |
| 41 | </div> |
jfernandez@igalia.com | c5a0ff2 | 2016-01-19 11:36:11 +0000 | [diff] [blame] | 42 | </div> |
hyatt@apple.com | 1a1c3b0 | 2017-03-07 01:29:19 +0000 | [diff] [blame] | 43 | |
| 44 | <div style="position: relative"> |
| 45 | <p>The blue image's original size is 100px x 100px, non-stretch values prevent stretching to be applied.</p> |
| 46 | <div class="grid itemsCenter"> |
| 47 | <img src="../../css3/images/resources/blue-100.png" data-expected-width="100" data-expected-height="100"/> |
| 48 | </div> |
jfernandez@igalia.com | c5a0ff2 | 2016-01-19 11:36:11 +0000 | [diff] [blame] | 49 | </div> |
hyatt@apple.com | 1a1c3b0 | 2017-03-07 01:29:19 +0000 | [diff] [blame] | 50 | |
| 51 | <div style="position: relative"> |
| 52 | <p>The blue image's original size is 100px x 100px, non-auto sizes prevent stretching to be applied.</p> |
| 53 | <div class="grid"> |
| 54 | <img class="fixedSizes" src="../../css3/images/resources/blue-100.png" data-expected-width="150" data-expected-height="150"/> |
| 55 | </div> |
| 56 | </div> |
| 57 | |
| 58 | <div style="position: relative"> |
| 59 | <p>The blue image's original size is 100px x 100px, auto-margins prevent stretching to be applied.</p> |
| 60 | <div class="grid"> |
| 61 | <img class="autoMargins" src="../../css3/images/resources/blue-100.png" data-expected-width="100" data-expected-height="100"/> |
| 62 | </div> |
| 63 | </div> |
jfernandez@igalia.com | c5a0ff2 | 2016-01-19 11:36:11 +0000 | [diff] [blame] | 64 | </body> |