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 .container { | |
11 position: relative; | |
12 } | |
13 .grid { | |
14 font: 10px/1 Ahem; | |
15 grid-template-columns: 20px 50px; | |
16 grid-template-rows: 150px 150px; | |
17 width: -webkit-fit-content; | |
18 } | |
19 .start { | |
20 align-self: start; | |
21 justify-self: start; | |
22 } | |
23 .end { | |
24 align-self: end; | |
25 justify-self: end; | |
26 } | |
27 .center { | |
28 align-self: center; | |
29 justify-self: center; | |
30 } | |
31 .right { | |
32 align-self: right; | |
33 justify-self: right; | |
34 } | |
35 .left { | |
36 align-self: left; | |
37 justify-self: left; | |
38 } | |
39 .selfStart { | |
40 align-self: self-start; | |
41 justify-self: self-start; | |
42 } | |
43 .selfEnd { | |
44 align-self: self-end; | |
45 justify-self: self-end; | |
46 } | |
47 .itemsCenter { | |
48 align-items: center; | |
49 justify-items: center; | |
50 } | |
51 </style> | |
52 </head> | |
53 <body onload="checkLayout('.grid')"> | |
54 | |
55 <p>This test checks that grid items positioning works as expected with VERTICAL- LR vs HORIZONTAL-TB orthogonal flows.</p> | |
56 | |
57 <p>Direction: LTR vs LTR</p> | |
58 <div class="container"> | |
59 <div class="grid directionLTR verticalLR" data-expected-width="300" data-exp ected-height="70"> | |
60 <div class="firstRowFirstColumn directionLTR horizontalTB end" data-of fset-x="20" data-offset-y="10" data-expected-width="130" data-expected-height="1 0">XXXXXXXXXXXXX</div> | |
Julien - ping for review
2015/01/26 10:42:06
'direction' is inherited by default so directionLT
jfernandez
2015/02/06 23:54:19
Done.
| |
61 <div class="firstRowSecondColumn directionLTR horizontalTB center" data -offset-x="40" data-offset-y="40" data-expected-width="70" data-expected-height= "10">XXXXXXX</div> | |
62 <div class="secondRowFirstColumn directionLTR horizontalTB left" data-o ffset-x="150" data-offset-y="0" data-expected-width="130" data-expected-height=" 10">XXXXXXXXXXXXX</div> | |
63 <div class="secondRowSecondColumn directionLTR horizontalTB right" data- offset-x="150" data-offset-y="60" data-expected-width="70" data-expected-height= "10">XXXXXXX</div> | |
Julien - ping for review
2015/01/26 10:42:06
Is this result really correct? I would have expect
jfernandez
2015/02/06 23:54:18
Well, I could be wrong, but since both left/right
| |
64 </div> | |
65 </div> | |
66 <div class="container"> | |
67 <div class="grid directionLTR verticalLR itemsCenter" data-expected-width="3 00" data-expected-height="70"> | |
68 <div class="firstRowFirstColumn directionLTR horizontalTB selfEnd" dat a-offset-x="20" data-offset-y="10" data-expected-width="130" data-expected-heigh t="10">XXXXXXXXXXXXX</div> | |
69 <div class="firstRowSecondColumn directionLTR horizontalTB" data-offset -x="40" data-offset-y="40" data-expected-width="70" data-expected-height="10">XX XXXXX</div> | |
70 <div class="secondRowFirstColumn directionLTR horizontalTB" data-offset -x="160" data-offset-y="5" data-expected-width="130" data-expected-height="10">X XXXXXXXXXXXX</div> | |
71 <div class="secondRowSecondColumn directionLTR horizontalTB selfStart" d ata-offset-x="150" data-offset-y="20" data-expected-width="70" data-expected-hei ght="10">XXXXXXX</div> | |
72 </div> | |
73 </div> | |
74 | |
75 <p>Direction: RTL vs LTR</p> | |
76 <div class="container"> | |
77 <div class="grid directionRTL verticalLR" data-expected-width="300" data-exp ected-height="70"> | |
78 <div class="firstRowFirstColumn directionLTR horizontalTB end" data-of fset-x="20" data-offset-y="50" data-expected-width="130" data-expected-height="1 0">XXXXXXXXXXXXX</div> | |
79 <div class="firstRowSecondColumn directionLTR horizontalTB center" data -offset-x="40" data-offset-y="20" data-expected-width="70" data-expected-height= "10">XXXXXXX</div> | |
80 <div class="secondRowFirstColumn directionLTR horizontalTB left" data-o ffset-x="150" data-offset-y="50" data-expected-width="130" data-expected-height= "10">XXXXXXXXXXXXX</div> | |
81 <div class="secondRowSecondColumn directionLTR horizontalTB right" data- offset-x="150" data-offset-y="40" data-expected-width="70" data-expected-height= "10">XXXXXXX</div> | |
82 </div> | |
83 </div> | |
84 <div class="container"> | |
85 <div class="grid directionRTL verticalLR itemsCenter" data-expected-width="3 00" data-expected-height="70"> | |
86 <div class="firstRowFirstColumn directionLTR horizontalTB selfEnd" dat a-offset-x="20" data-offset-y="60" data-expected-width="130" data-expected-heigh t="10">XXXXXXXXXXXXX</div> | |
87 <div class="firstRowSecondColumn directionLTR horizontalTB" data-offset -x="40" data-offset-y="20" data-expected-width="70" data-expected-height="10">XX XXXXX</div> | |
88 <div class="secondRowFirstColumn directionLTR horizontalTB" data-offset -x="160" data-offset-y="55" data-expected-width="130" data-expected-height="10"> XXXXXXXXXXXXX</div> | |
89 <div class="secondRowSecondColumn directionLTR horizontalTB selfStart" d ata-offset-x="150" data-offset-y="0" data-expected-width="70" data-expected-heig ht="10">XXXXXXX</div> | |
90 </div> | |
91 </div> | |
92 | |
93 <p>Direction: LTR vs RTL </p> | |
94 <div class="container"> | |
95 <div class="grid directionLTR verticalLR" data-expected-width="300" data-exp ected-height="70"> | |
96 <div class="firstRowFirstColumn directionRTL horizontalTB end" data-of fset-x="20" data-offset-y="10" data-expected-width="130" data-expected-height="1 0">XXXXXXXXXXXXX</div> | |
97 <div class="firstRowSecondColumn directionRTL horizontalTB center" data -offset-x="40" data-offset-y="40" data-expected-width="70" data-expected-height= "10">XXXXXXX</div> | |
98 <div class="secondRowFirstColumn directionRTL horizontalTB left" data-o ffset-x="150" data-offset-y="0" data-expected-width="130" data-expected-height=" 10">XXXXXXXXXXXXX</div> | |
99 <div class="secondRowSecondColumn directionRTL horizontalTB right" data- offset-x="150" data-offset-y="60" data-expected-width="70" data-expected-height= "10">XXXXXXX</div> | |
100 </div> | |
101 </div> | |
102 <div class="container"> | |
103 <div class="grid directionLTR verticalLR itemsCenter" data-expected-width="3 00" data-expected-height="70"> | |
104 <div class="firstRowFirstColumn directionRTL horizontalTB selfEnd" dat a-offset-x="0" data-offset-y="10" data-expected-width="130" data-expected-height ="10">XXXXXXXXXXXXX</div> | |
105 <div class="firstRowSecondColumn directionRTL horizontalTB" data-offset -x="40" data-offset-y="40" data-expected-width="70" data-expected-height="10">XX XXXXX</div> | |
106 <div class="secondRowFirstColumn directionRTL horizontalTB" data-offset -x="160" data-offset-y="5" data-expected-width="130" data-expected-height="10">X XXXXXXXXXXXX</div> | |
107 <div class="secondRowSecondColumn directionRTL horizontalTB selfStart" d ata-offset-x="230" data-offset-y="20" data-expected-width="70" data-expected-hei ght="10">XXXXXXX</div> | |
108 </div> | |
109 </div> | |
110 | |
111 <p>Direction: RTL vs RTL </p> | |
112 <div class="container"> | |
113 <div class="grid directionRTL verticalLR" data-expected-width="300" data-exp ected-height="70"> | |
114 <div class="firstRowFirstColumn directionRTL horizontalTB end" data-of fset-x="20" data-offset-y="50" data-expected-width="130" data-expected-height="1 0">XXXXXXXXXXXXX</div> | |
115 <div class="firstRowSecondColumn directionRTL horizontalTB center" data -offset-x="40" data-offset-y="20" data-expected-width="70" data-expected-height= "10">XXXXXXX</div> | |
116 <div class="secondRowFirstColumn directionRTL horizontalTB left" data-o ffset-x="150" data-offset-y="50" data-expected-width="130" data-expected-height= "10">XXXXXXXXXXXXX</div> | |
117 <div class="secondRowSecondColumn directionRTL horizontalTB right" data- offset-x="150" data-offset-y="40" data-expected-width="70" data-expected-height= "10">XXXXXXX</div> | |
118 </div> | |
119 </div> | |
120 <div class="container"> | |
121 <div class="grid directionRTL verticalLR itemsCenter" data-expected-width="3 00" data-expected-height="70"> | |
122 <div class="firstRowFirstColumn directionRTL horizontalTB selfEnd" dat a-offset-x="0" data-offset-y="60" data-expected-width="130" data-expected-height ="10">XXXXXXXXXXXXX</div> | |
123 <div class="firstRowSecondColumn directionRTL horizontalTB" data-offset -x="40" data-offset-y="20" data-expected-width="70" data-expected-height="10">XX XXXXX</div> | |
124 <div class="secondRowFirstColumn directionRTL horizontalTB" data-offset -x="160" data-offset-y="55" data-expected-width="130" data-expected-height="10"> XXXXXXXXXXXXX</div> | |
125 <div class="secondRowSecondColumn directionRTL horizontalTB selfStart" d ata-offset-x="230" data-offset-y="00" data-expected-width="70" data-expected-hei ght="10">XXXXXXX</div> | |
126 </div> | |
127 </div> | |
128 | |
129 </body> | |
130 </html> | |
OLD | NEW |