OLD | NEW |
---|---|
(Empty) | |
1 <!DOCTYPE html> | |
2 <html> | |
3 <head> | |
4 <link href="resources/grid.css" rel="stylesheet"> | |
5 <script src="../../resources/check-layout.js"></script> | |
6 <style> | |
7 body { | |
8 margin: 0; | |
9 } | |
10 | |
11 .grid { | |
12 grid-template-columns: 100px 100px; | |
13 grid-template-rows: 200px 200px; | |
14 width: -webkit-fit-content; | |
Manuel Rego
2015/09/24 11:38:26
Comments from previous test also apply here.
jfernandez
2015/09/25 13:47:01
Acknowledged.
| |
15 margin-bottom: 20px; | |
16 } | |
17 | |
18 .item { | |
19 width: 20px; | |
20 height: 40px; | |
21 } | |
22 | |
23 .autoMarginTop { margin-top: auto; } | |
24 .autoMarginRight { margin-right: auto; } | |
25 .autoMarginBottom { margin-bottom: auto; } | |
26 .autoMarginLeft { margin-left: auto; } | |
27 .autoMargin { margin: auto; } | |
28 | |
29 .itemsCenter { | |
30 align-items: center; | |
31 justify-items: center; | |
32 } | |
33 </style> | |
34 </head> | |
35 <body onload="checkLayout('.grid')"> | |
36 | |
37 <p>This test checks that aling-self and justify-self properties are not applied when there is auto-margin in the correponding axis. Instead, auto-margin alignme nt should be applied.</p> | |
Manuel Rego
2015/09/24 11:38:26
Nit: Maybe add a comment about the writing mode.
jfernandez
2015/09/25 13:47:01
Done.
| |
38 | |
39 <p>Direction: LTR | Self Aligmment: center | fixed size items | 1 auto-margin</p > | |
40 <div style="position: relative"> | |
41 <div class="grid verticalLR itemsCenter" data-expected-width="400" data-expe cted-height="200"> | |
42 <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="90" d ata-offset-y="60" data-expected-width="20" data-expected-height="40"></div> | |
43 <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="0" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> | |
44 <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="380 " data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> | |
45 <div class="item autoMarginBottom secondRowSecondColumn" data-offset-x=" 290" data-offset-y="100" data-expected-width="20" data-expected-height="40"></di v> | |
46 </div> | |
47 </div> | |
48 | |
49 <p>Direction: LTR | Self Aligmment: start | fixed size items | 4 auto-margin</p> | |
50 <div style="position: relative"> | |
51 <div class="grid verticalLR" data-expected-width="400" data-expected-height= "200"> | |
52 <div class="item autoMargin firstRowFirstColumn" data-offset-x="90" data -offset-y="30" data-expected-width="20" data-expected-height="40"></div> | |
53 <div class="item autoMargin firstRowSecondColumn" data-offset-x="90" dat a-offset-y="130" data-expected-width="20" data-expected-height="40"></div> | |
54 <div class="item autoMargin secondRowFirstColumn" data-offset-x="290" da ta-offset-y="30" data-expected-width="20" data-expected-height="40"></div> | |
55 <div class="item autoMargin secondRowSecondColumn" data-offset-x="290" d ata-offset-y="130" data-expected-width="20" data-expected-height="40"></div> | |
56 </div> | |
57 </div> | |
58 | |
59 <p>Direction: LTR | Self Aligmment: center | auto size items | 1 auto-margin</p> | |
60 <div style="position: relative"> | |
61 <div class="grid verticalLR itemsCenter" data-expected-width="400" data-expe cted-height="200"> | |
62 <div class="autoMarginTop firstRowFirstColumn" data-offset-x="90" data-o ffset-y="60" data-expected-width="20" data-expected-height="40"><div class="item "></div></div> | |
63 <div class="autoMarginRight firstRowSecondColumn" data-offset-x="0" data -offset-y="130" data-expected-width="20" data-expected-height="40"><div class="i tem"></div></div> | |
64 <div class="autoMarginLeft secondRowFirstColumn" data-offset-x="380" dat a-offset-y="30" data-expected-width="20" data-expected-height="40"><div class="i tem"></div></div> | |
65 <div class="autoMarginBottom secondRowSecondColumn" data-offset-x="290" data-offset-y="100" data-expected-width="20" data-expected-height="40"><div clas s="item"></div></div> | |
66 </div> | |
67 </div> | |
68 | |
69 <p>Direction: LTR | Self Aligmment: start | auto size items | 4 auto-margin</p> | |
70 <div style="position: relative"> | |
71 <div class="grid verticalLR" data-expected-width="400" data-expected-height= "200"> | |
72 <div class="autoMargin firstRowFirstColumn" data-offset-x="90" data-offs et-y="30" data-expected-width="20" data-expected-height="40"><div class="item">< /div></div> | |
73 <div class="autoMargin firstRowSecondColumn" data-offset-x="90" data-off set-y="130" data-expected-width="20" data-expected-height="40"><div class="item" ></div></div> | |
74 <div class="autoMargin secondRowFirstColumn" data-offset-x="290" data-of fset-y="30" data-expected-width="20" data-expected-height="40"><div class="item" ></div></div> | |
75 <div class="autoMargin secondRowSecondColumn" data-offset-x="290" data-o ffset-y="130" data-expected-width="20" data-expected-height="40"><div class="ite m"></div></div> | |
76 </div> | |
77 </div> | |
78 | |
79 <!-- direction RTL --> | |
80 <p>Direction: RTL | Self Aligmment: center | fixed size items | 1 auto-margin</p > | |
81 <div style="position: relative"> | |
82 <div class="grid verticalLR itemsCenter directionRTL" data-expected-width="4 00" data-expected-height="200"> | |
83 <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="90" d ata-offset-y="160" data-expected-width="20" data-expected-height="40"></div> | |
84 <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="0" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> | |
85 <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="380 " data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> | |
86 <div class="item autoMarginBottom secondRowSecondColumn" data-offset-x=" 290" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> | |
87 </div> | |
88 </div> | |
89 | |
90 | |
91 <p>Direction: RTL | Self Aligmment: start | fixed size items | 4 auto-margin</p> | |
92 <div style="position: relative"> | |
93 <div class="grid verticalLR directionRTL" data-expected-width="400" data-exp ected-height="200"> | |
94 <div class="item autoMargin firstRowFirstColumn" data-offset-x="90" data -offset-y="130" data-expected-width="20" data-expected-height="40"></div> | |
95 <div class="item autoMargin firstRowSecondColumn" data-offset-x="90" dat a-offset-y="30" data-expected-width="20" data-expected-height="40"></div> | |
96 <div class="item autoMargin secondRowFirstColumn" data-offset-x="290" da ta-offset-y="130" data-expected-width="20" data-expected-height="40"></div> | |
97 <div class="item autoMargin secondRowSecondColumn" data-offset-x="290" d ata-offset-y="30" data-expected-width="20" data-expected-height="40"></div> | |
98 </div> | |
99 </div> | |
100 | |
101 <p>Direction: RTL | Self Aligmment: center | auto size items | 1 auto-margin</p> | |
102 <div style="position: relative"> | |
103 <div class="grid verticalLR itemsCenter directionRTL" data-expected-width="4 00" data-expected-height="200"> | |
104 <div class="autoMarginTop firstRowFirstColumn" data-offset-x="90" data-o ffset-y="160" data-expected-width="20" data-expected-height="40"><div class="ite m"></div></div> | |
105 <div class="autoMarginRight firstRowSecondColumn" data-offset-x="0" data -offset-y="30" data-expected-width="20" data-expected-height="40"><div class="it em"></div></div> | |
106 <div class="autoMarginLeft secondRowFirstColumn" data-offset-x="380" dat a-offset-y="130" data-expected-width="20" data-expected-height="40"><div class=" item"></div></div> | |
107 <div class="autoMarginBottom secondRowSecondColumn" data-offset-x="290" data-offset-y="0" data-expected-width="20" data-expected-height="40"><div class= "item"></div></div> | |
108 </div> | |
109 </div> | |
110 | |
111 | |
112 <p>Direction: RTL | Self Aligmment: start | auto size items | 4 auto-margin</p> | |
113 <div style="position: relative"> | |
114 <div class="grid verticalLR directionRTL" data-expected-width="400" data-exp ected-height="200"> | |
115 <div class="autoMargin firstRowFirstColumn" data-offset-x="90" data-offs et-y="130" data-expected-width="20" data-expected-height="40"><div class="item"> </div></div> | |
116 <div class="autoMargin firstRowSecondColumn" data-offset-x="90" data-off set-y="30" data-expected-width="20" data-expected-height="40"><div class="item"> </div></div> | |
117 <div class="autoMargin secondRowFirstColumn" data-offset-x="290" data-of fset-y="130" data-expected-width="20" data-expected-height="40"><div class="item "></div></div> | |
118 <div class="autoMargin secondRowSecondColumn" data-offset-x="290" data-o ffset-y="30" data-expected-width="20" data-expected-height="40"><div class="item "></div></div> | |
119 </div> | |
120 </div> | |
121 | |
122 </body> | |
123 </html> | |
OLD | NEW |