Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(348)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-rl.html

Issue 842193004: [css-grid] Handle alignment with orthogonal flows (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@orthogonal-flows
Patch Set: Implemented logic for self-start/end values. Created 5 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« LayoutTests/fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-lr.html ('K') | « LayoutTests/fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-lr-expected.txt ('k') | LayoutTests/fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-rl-expected.txt » ('j') | Source/core/rendering/RenderGrid.cpp » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(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- RL vs HORIZONTAL-TB orthogonal flows.</p>
56
57 <p>Direction: LTR vs LTR</p>
58 <div class="container">
59 <div class="grid directionLTR verticalRL" data-expected-width="300" data-exp ected-height="70">
60 <div class="firstRowFirstColumn directionLTR horizontalTB end" data-of fset-x="150" data-offset-y="10" data-expected-width="130" data-expected-height=" 10">XXXXXXXXXXXXX</div>
61 <div class="firstRowSecondColumn directionLTR horizontalTB center" data -offset-x="190" 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="20" data-offset-y="0" data-expected-width="130" data-expected-height="1 0">XXXXXXXXXXXXX</div>
63 <div class="secondRowSecondColumn directionLTR horizontalTB right" data- offset-x="80" data-offset-y="60" data-expected-width="70" data-expected-height=" 10">XXXXXXX</div>
64 </div>
65 </div>
66 <div class="container">
67 <div class="grid directionLTR verticalRL itemsCenter" data-expected-width="3 00" data-expected-height="70">
68 <div class="firstRowFirstColumn directionLTR horizontalTB selfEnd" dat a-offset-x="170" data-offset-y="10" data-expected-width="130" data-expected-heig ht="10">XXXXXXXXXXXXX</div>
69 <div class="firstRowSecondColumn directionLTR horizontalTB" data-offset -x="190" data-offset-y="40" data-expected-width="70" data-expected-height="10">X XXXXXX</div>
70 <div class="secondRowFirstColumn directionLTR horizontalTB" data-offset -x="10" data-offset-y="5" data-expected-width="130" data-expected-height="10">XX XXXXXXXXXXX</div>
71 <div class="secondRowSecondColumn directionLTR horizontalTB selfStart" d ata-offset-x="0" data-offset-y="20" data-expected-width="70" data-expected-heigh t="10">XXXXXXX</div>
72 </div>
73 </div>
74
75 <p>Direction: RTL vs LTR</p>
76 <div class="container">
77 <div class="grid directionRTL verticalRL" data-expected-width="300" data-exp ected-height="70">
78 <div class="firstRowFirstColumn directionLTR horizontalTB end" data-of fset-x="150" data-offset-y="50" data-expected-width="130" data-expected-height=" 10">XXXXXXXXXXXXX</div>
79 <div class="firstRowSecondColumn directionLTR horizontalTB center" data -offset-x="190" 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="20" data-offset-y="50" data-expected-width="130" data-expected-height=" 10">XXXXXXXXXXXXX</div>
81 <div class="secondRowSecondColumn directionLTR horizontalTB right" data- offset-x="80" 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 verticalRL itemsCenter" data-expected-width="3 00" data-expected-height="70">
86 <div class="firstRowFirstColumn directionLTR horizontalTB selfEnd" dat a-offset-x="170" data-offset-y="60" data-expected-width="130" data-expected-heig ht="10">XXXXXXXXXXXXX</div>
87 <div class="firstRowSecondColumn directionLTR horizontalTB" data-offset -x="190" data-offset-y="20" data-expected-width="70" data-expected-height="10">X XXXXXX</div>
88 <div class="secondRowFirstColumn directionLTR horizontalTB" data-offset -x="10" data-offset-y="55" data-expected-width="130" data-expected-height="10">X XXXXXXXXXXXX</div>
89 <div class="secondRowSecondColumn directionLTR horizontalTB selfStart" d ata-offset-x="0" data-offset-y="0" data-expected-width="70" data-expected-height ="10">XXXXXXX</div>
90 </div>
91 </div>
92
93 <p>Direction: LTR vs RTL</p>
94 <div class="container">
95 <div class="grid directionLTR verticalRL" data-expected-width="300" data-exp ected-height="70">
96 <div class="firstRowFirstColumn directionRTL horizontalTB end" data-of fset-x="150" data-offset-y="10" data-expected-width="130" data-expected-height=" 10">XXXXXXXXXXXXX</div>
97 <div class="firstRowSecondColumn directionRTL horizontalTB center" data -offset-x="190" 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="20" data-offset-y="0" data-expected-width="130" data-expected-height="1 0">XXXXXXXXXXXXX</div>
99 <div class="secondRowSecondColumn directionRTL horizontalTB right" data- offset-x="80" 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 verticalRL itemsCenter" data-expected-width="3 00" data-expected-height="70">
104 <div class="firstRowFirstColumn directionRTL horizontalTB selfEnd" dat a-offset-x="150" data-offset-y="10" data-expected-width="130" data-expected-heig ht="10">XXXXXXXXXXXXX</div>
105 <div class="firstRowSecondColumn directionRTL horizontalTB" data-offset -x="190" data-offset-y="40" data-expected-width="70" data-expected-height="10">X XXXXXX</div>
106 <div class="secondRowFirstColumn directionRTL horizontalTB" data-offset -x="10" data-offset-y="5" data-expected-width="130" data-expected-height="10">XX XXXXXXXXXXX</div>
107 <div class="secondRowSecondColumn directionRTL horizontalTB selfStart" d ata-offset-x="80" data-offset-y="20" data-expected-width="70" data-expected-heig ht="10">XXXXXXX</div>
108 </div>
109 </div>
110
111 <p>Direction: RTL vs RTL</p>
112 <div class="container">
113 <div class="grid directionRTL verticalRL" data-expected-width="300" data-exp ected-height="70">
114 <div class="firstRowFirstColumn directionRTL horizontalTB end" data-of fset-x="150" data-offset-y="50" data-expected-width="130" data-expected-height=" 10">XXXXXXXXXXXXX</div>
115 <div class="firstRowSecondColumn directionRTL horizontalTB center" data -offset-x="190" 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="20" data-offset-y="50" data-expected-width="130" data-expected-height=" 10">XXXXXXXXXXXXX</div>
117 <div class="secondRowSecondColumn directionRTL horizontalTB right" data- offset-x="80" 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 verticalRL itemsCenter" data-expected-width="3 00" data-expected-height="70">
122 <div class="firstRowFirstColumn directionRTL horizontalTB selfEnd" dat a-offset-x="150" data-offset-y="60" data-expected-width="130" data-expected-heig ht="10">XXXXXXXXXXXXX</div>
123 <div class="firstRowSecondColumn directionRTL horizontalTB" data-offset -x="190" data-offset-y="20" data-expected-width="70" data-expected-height="10">X XXXXXX</div>
124 <div class="secondRowFirstColumn directionRTL horizontalTB" data-offset -x="10" data-offset-y="55" data-expected-width="130" data-expected-height="10">X XXXXXXXXXXXX</div>
125 <div class="secondRowSecondColumn directionRTL horizontalTB selfStart" d ata-offset-x="80" data-offset-y="0" data-expected-width="70" data-expected-heigh t="10">XXXXXXX</div>
126 </div>
127 </div>
128
129 </body>
130 </html>
OLDNEW
« LayoutTests/fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-lr.html ('K') | « LayoutTests/fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-lr-expected.txt ('k') | LayoutTests/fast/css-grid-layout/grid-item-alignment-with-orthogonal-flows-vertical-rl-expected.txt » ('j') | Source/core/rendering/RenderGrid.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698