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
Do we really need this?
I'm also wondering if we
jfernandez
2015/09/25 13:47:01
Well, not mandatory but it helps to check grid ite
Manuel Rego
2015/09/25 16:00:58
Yeah, specially for the different writing modes.
S
| |
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> | |
38 | |
39 <p>Direction: LTR | Self Aligmment: center | fixed size items | 1 auto-margin</p > | |
Manuel Rego
2015/09/24 11:38:26
Typo "Aligmment" vs "Alignment".
This is repeated
jfernandez
2015/09/25 13:47:01
Done.
| |
40 <div style="position: relative"> | |
41 <div class="grid itemsCenter" data-expected-width="200" data-expected-height ="400"> | |
Manuel Rego
2015/09/24 11:38:26
I was referring to these lines,
I don't think we n
jfernandez
2015/09/25 13:47:01
Acknowledged.
| |
42 <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="40" d ata-offset-y="160" data-expected-width="20" data-expected-height="40"></div> | |
43 <div class="item autoMarginRight firstRowSecondColumn" data-offset-x="10 0" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div> | |
44 <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="80" data-offset-y="280" data-expected-width="20" data-expected-height="40"></div> | |
45 <div class="item autoMarginBottom secondRowSecondColumn" data-offset-x=" 140" data-offset-y="200" 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> | |
Manuel Rego
2015/09/24 11:38:26
I guess the right thing would be:
"Self Alignment:
jfernandez
2015/09/25 13:47:02
Acknowledged.
| |
50 <div style="position: relative"> | |
51 <div class="grid" data-expected-width="200" data-expected-height="400"> | |
52 <div class="item autoMargin firstRowFirstColumn" data-offset-x="40" data -offset-y="80" data-expected-width="20" data-expected-height="40"></div> | |
53 <div class="item autoMargin firstRowSecondColumn" data-offset-x="140" da ta-offset-y="80" data-expected-width="20" data-expected-height="40"></div> | |
54 <div class="item autoMargin secondRowFirstColumn" data-offset-x="40" dat a-offset-y="280" data-expected-width="20" data-expected-height="40"></div> | |
55 <div class="item autoMargin secondRowSecondColumn" data-offset-x="140" d ata-offset-y="280" 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 itemsCenter" data-expected-width="200" data-expected-height ="400"> | |
62 <div class="autoMarginTop firstRowFirstColumn" data-offset-x="40" data-o ffset-y="160" data-expected-width="20" data-expected-height="40"><div class="ite m"></div></div> | |
63 <div class="autoMarginRight firstRowSecondColumn" data-offset-x="100" da ta-offset-y="80" data-expected-width="20" data-expected-height="40"><div class=" item"></div></div> | |
64 <div class="autoMarginLeft secondRowFirstColumn" data-offset-x="80" data -offset-y="280" data-expected-width="20" data-expected-height="40"><div class="i tem"></div></div> | |
65 <div class="autoMarginBottom secondRowSecondColumn" data-offset-x="140" data-offset-y="200" 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> | |
Manuel Rego
2015/09/24 11:38:26
"stretch" instead of "start" again.
jfernandez
2015/09/25 13:47:01
Acknowledged.
| |
70 <div style="position: relative"> | |
71 <div class="grid" data-expected-width="200" data-expected-height="400"> | |
72 <div class="autoMargin firstRowFirstColumn" data-offset-x="40" data-offs et-y="80" data-expected-width="20" data-expected-height="40"><div class="item">< /div></div> | |
73 <div class="autoMargin firstRowSecondColumn" data-offset-x="140" data-of fset-y="80" data-expected-width="20" data-expected-height="40"><div class="item" ></div></div> | |
74 <div class="autoMargin secondRowFirstColumn" data-offset-x="40" data-off set-y="280" data-expected-width="20" data-expected-height="40"><div class="item" ></div></div> | |
75 <div class="autoMargin secondRowSecondColumn" data-offset-x="140" data-o ffset-y="280" 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 itemsCenter directionRTL" data-expected-width="200" data-ex pected-height="400"> | |
83 <div class="item autoMarginTop firstRowFirstColumn" data-offset-x="140" data-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="80" data-expected-width="20" data-expected-height="40"></div> | |
85 <div class="item autoMarginLeft secondRowFirstColumn" data-offset-x="180 " data-offset-y="280" data-expected-width="20" data-expected-height="40"></div> | |
86 <div class="item autoMarginBottom secondRowSecondColumn" data-offset-x=" 40" data-offset-y="200" data-expected-width="20" data-expected-height="40"></div > | |
87 </div> | |
88 </div> | |
89 | |
90 <p>Direction: RTL | Self Aligmment: start | fixed size items | 4 auto-margin</p> | |
91 <div style="position: relative"> | |
92 <div class="grid directionRTL" data-expected-width="200" data-expected-heigh t="400"> | |
93 <div class="item autoMargin firstRowFirstColumn" data-offset-x="140" dat a-offset-y="80" data-expected-width="20" data-expected-height="40"></div> | |
94 <div class="item autoMargin firstRowSecondColumn" data-offset-x="40" dat a-offset-y="80" data-expected-width="20" data-expected-height="40"></div> | |
95 <div class="item autoMargin secondRowFirstColumn" data-offset-x="140" da ta-offset-y="280" data-expected-width="20" data-expected-height="40"></div> | |
96 <div class="item autoMargin secondRowSecondColumn" data-offset-x="40" da ta-offset-y="280" data-expected-width="20" data-expected-height="40"></div> | |
97 </div> | |
98 </div> | |
99 | |
100 <p>Direction: RTL | Self Aligmment: center | auto size items | 1 auto-margin</p> | |
101 <div style="position: relative"> | |
102 <div class="grid itemsCenter directionRTL" data-expected-width="200" data-ex pected-height="400"> | |
103 <div class="autoMarginTop firstRowFirstColumn" data-offset-x="140" data- offset-y="160" data-expected-width="20" data-expected-height="40"><div class="it em"></div></div> | |
104 <div class="autoMarginRight firstRowSecondColumn" data-offset-x="0" data -offset-y="80" data-expected-width="20" data-expected-height="40"><div class="it em"></div></div> | |
105 <div class="autoMarginLeft secondRowFirstColumn" data-offset-x="180" dat a-offset-y="280" data-expected-width="20" data-expected-height="40"><div class=" item"></div></div> | |
106 <div class="autoMarginBottom secondRowSecondColumn" data-offset-x="40" d ata-offset-y="200" data-expected-width="20" data-expected-height="40"><div class ="item"></div></div> | |
107 </div> | |
108 </div> | |
109 | |
110 <p>Direction: RTL | Self Aligmment: start | auto size items | 4 auto-margin</p> | |
111 <div style="position: relative"> | |
112 <div class="grid directionRTL" data-expected-width="200" data-expected-heigh t="400"> | |
113 <div class="autoMargin firstRowFirstColumn" data-offset-x="140" data-off set-y="80" data-expected-width="20" data-expected-height="40"><div class="item"> </div></div> | |
114 <div class="autoMargin firstRowSecondColumn" data-offset-x="40" data-off set-y="80" data-expected-width="20" data-expected-height="40"><div class="item"> </div></div> | |
115 <div class="autoMargin secondRowFirstColumn" data-offset-x="140" data-of fset-y="280" data-expected-width="20" data-expected-height="40"><div class="item "></div></div> | |
116 <div class="autoMargin secondRowSecondColumn" data-offset-x="40" data-of fset-y="280" data-expected-width="20" data-expected-height="40"><div class="item "></div></div> | |
117 </div> | |
118 </div> | |
119 | |
120 </body> | |
121 </html> | |
OLD | NEW |