blob: 1e977b9e1466995d5cd108b5c5cd67d7a475f94c [file] [log] [blame]
jfernandez@igalia.comc5a0ff22016-01-19 11:36:11 +00001<!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.com92508232016-05-06 08:17:12 +00007 grid-template-columns: 500px;
8 grid-template-rows: 500px;
jfernandez@igalia.comc5a0ff22016-01-19 11:36:11 +00009}
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.com1a1c3b02017-03-07 01:29:19 +000020
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.comc5a0ff22016-01-19 11:36:11 +000028 </div>
hyatt@apple.com1a1c3b02017-03-07 01:29:19 +000029
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.comc5a0ff22016-01-19 11:36:11 +000035 </div>
hyatt@apple.com1a1c3b02017-03-07 01:29:19 +000036
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.comc5a0ff22016-01-19 11:36:11 +000042 </div>
hyatt@apple.com1a1c3b02017-03-07 01:29:19 +000043
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.comc5a0ff22016-01-19 11:36:11 +000049 </div>
hyatt@apple.com1a1c3b02017-03-07 01:29:19 +000050
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.comc5a0ff22016-01-19 11:36:11 +000064</body>