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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-content-alignment-with-span-vertical-rl.html

Issue 1488493003: [css-grid] refactoring of layout tests (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Patch rebased and refactoring of alignment css rules. Created 4 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
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-content-alignment-with-span-vertical-lr.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-element-change-columns-repaint.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <head> 3 <head>
4 <link href="resources/grid.css" rel="stylesheet"> 4 <link href="resources/grid.css" rel="stylesheet">
5 <link href="resources/grid-alignment.css" rel="stylesheet">
5 <script src="../../resources/check-layout.js"></script> 6 <script src="../../resources/check-layout.js"></script>
6 <style> 7 <style>
7 body { 8 body {
8 margin: 0px; 9 margin: 0px;
9 } 10 }
10 11
11 .grid { 12 .grid {
12 grid-auto-columns: 20px; 13 grid-auto-columns: 20px;
13 grid-auto-rows: 40px; 14 grid-auto-rows: 40px;
14 grid-template-areas: "a a b" 15 grid-template-areas: "a a b"
(...skipping 15 matching lines...) Expand all
30 background-color: purple; 31 background-color: purple;
31 } 32 }
32 .d { 33 .d {
33 grid-area: d; 34 grid-area: d;
34 background-color: orange; 35 background-color: orange;
35 } 36 }
36 .stretchedGrid { 37 .stretchedGrid {
37 grid-auto-columns: auto; 38 grid-auto-columns: auto;
38 grid-auto-rows: auto; 39 grid-auto-rows: auto;
39 } 40 }
40
41 .spaceBetween {
42 justify-content: space-between;
43 align-content: space-between;
44 }
45
46 .spaceAround {
47 justify-content: space-around;
48 align-content: space-around;
49 }
50
51 .spaceEvenly {
52 justify-content: space-evenly;
53 align-content: space-evenly;
54 }
55
56 .stretch {
57 justify-content: stretch;
58 align-content: stretch;
59 }
60 </style> 41 </style>
61 </head> 42 </head>
62 <body onload="checkLayout('.grid')"> 43 <body onload="checkLayout('.grid')">
63 44
64 <p>This test checks that Content Distribution alignment is applied correctly whe n items span more than one track.</p> 45 <p>This test checks that Content Distribution alignment is applied correctly whe n items span more than one track.</p>
65 46
66 <div style="position: relative"> 47 <div style="position: relative">
67 <p>direction: LTR | distribution: 'space-between'</p> 48 <p>direction: LTR | distribution: 'space-between'</p>
68 <div class="grid spaceBetween verticalRL" data-expected-width="200" data-exp ected-height="300"> 49 <div class="grid contentSpaceBetween verticalRL" data-expected-width="200" d ata-expected-height="300">
69 <div class="a" data-offset-x="160" data-offset-y="0" data-expected-width ="40" data-expected-height="160"></div> 50 <div class="a" data-offset-x="160" data-offset-y="0" data-expected-width ="40" data-expected-height="160"></div>
70 <div class="b" data-offset-x="0" data-offset-y="280" data-expected-width ="200" data-expected-height="20"></div> 51 <div class="b" data-offset-x="0" data-offset-y="280" data-expected-width ="200" data-expected-height="20"></div>
71 <div class="c" data-offset-x="0" data-offset-y="0" data-expected-width=" 40" data-expected-height="20"></div> 52 <div class="c" data-offset-x="0" data-offset-y="0" data-expected-width=" 40" data-expected-height="20"></div>
72 <div class="d" data-offset-x="0" data-offset-y="140" data-expected-width ="40" data-expected-height="20"></div> 53 <div class="d" data-offset-x="0" data-offset-y="140" data-expected-width ="40" data-expected-height="20"></div>
73 </div> 54 </div>
74 </div> 55 </div>
75 56
76 <div style="position: relative"> 57 <div style="position: relative">
77 <p>direction: LTR | distribution: 'space-around'</p> 58 <p>direction: LTR | distribution: 'space-around'</p>
78 <div class="grid spaceAround verticalRL" data-expected-width="200" data-expe cted-height="300"> 59 <div class="grid contentSpaceAround verticalRL" data-expected-width="200" da ta-expected-height="300">
79 <div class="a" data-offset-x="130" data-offset-y="40" data-expected-widt h="40" data-expected-height="120"></div> 60 <div class="a" data-offset-x="130" data-offset-y="40" data-expected-widt h="40" data-expected-height="120"></div>
80 <div class="b" data-offset-x="30" data-offset-y="240" data-expected-widt h="140" data-expected-height="20"></div> 61 <div class="b" data-offset-x="30" data-offset-y="240" data-expected-widt h="140" data-expected-height="20"></div>
81 <div class="c" data-offset-x="30" data-offset-y="40" data-expected-width ="40" data-expected-height="20"></div> 62 <div class="c" data-offset-x="30" data-offset-y="40" data-expected-width ="40" data-expected-height="20"></div>
82 <div class="d" data-offset-x="30" data-offset-y="140" data-expected-widt h="40" data-expected-height="20"></div> 63 <div class="d" data-offset-x="30" data-offset-y="140" data-expected-widt h="40" data-expected-height="20"></div>
83 </div> 64 </div>
84 </div> 65 </div>
85 66
86 <div style="position: relative"> 67 <div style="position: relative">
87 <p>direction: LTR | distribution: 'space-evenly'</p> 68 <p>direction: LTR | distribution: 'space-evenly'</p>
88 <div class="grid spaceEvenly verticalRL" data-expected-width="200" data-expe cted-height="300"> 69 <div class="grid contentSpaceEvenly verticalRL" data-expected-width="200" da ta-expected-height="300">
89 <div class="a" data-offset-x="120" data-offset-y="60" data-expected-widt h="40" data-expected-height="100"></div> 70 <div class="a" data-offset-x="120" data-offset-y="60" data-expected-widt h="40" data-expected-height="100"></div>
90 <div class="b" data-offset-x="40" data-offset-y="220" data-expected-widt h="120" data-expected-height="20"></div> 71 <div class="b" data-offset-x="40" data-offset-y="220" data-expected-widt h="120" data-expected-height="20"></div>
91 <div class="c" data-offset-x="40" data-offset-y="60" data-expected-width ="40" data-expected-height="20"></div> 72 <div class="c" data-offset-x="40" data-offset-y="60" data-expected-width ="40" data-expected-height="20"></div>
92 <div class="d" data-offset-x="40" data-offset-y="140" data-expected-widt h="40" data-expected-height="20"></div> 73 <div class="d" data-offset-x="40" data-offset-y="140" data-expected-widt h="40" data-expected-height="20"></div>
93 </div> 74 </div>
94 </div> 75 </div>
95 76
96 <div style="position: relative"> 77 <div style="position: relative">
97 <p>direction: LTR | distribution: 'stretch'</p> 78 <p>direction: LTR | distribution: 'stretch'</p>
98 <div class="grid stretchedGrid stretch verticalRL" data-expected-width="200" data-expected-height="300"> 79 <div class="grid stretchedGrid contentStretch verticalRL" data-expected-widt h="200" data-expected-height="300">
99 <div class="a" data-offset-x="100" data-offset-y="0" data-expected-width ="100" data-expected-height="200"></div> 80 <div class="a" data-offset-x="100" data-offset-y="0" data-expected-width ="100" data-expected-height="200"></div>
100 <div class="b" data-offset-x="0" data-offset-y="200" data-expected-width ="200" data-expected-height="100"></div> 81 <div class="b" data-offset-x="0" data-offset-y="200" data-expected-width ="200" data-expected-height="100"></div>
101 <div class="c" data-offset-x="0" data-offset-y="0" data-expected-width=" 100" data-expected-height="100"></div> 82 <div class="c" data-offset-x="0" data-offset-y="0" data-expected-width=" 100" data-expected-height="100"></div>
102 <div class="d" data-offset-x="0" data-offset-y="100" data-expected-width ="100" data-expected-height="100"></div> 83 <div class="d" data-offset-x="0" data-offset-y="100" data-expected-width ="100" data-expected-height="100"></div>
103 </div> 84 </div>
104 </div> 85 </div>
105 86
106 <!-- RTL direction. --> 87 <!-- RTL direction. -->
107 <div style="position: relative"> 88 <div style="position: relative">
108 <p>direction: RTL | distribution: 'space-between'</p> 89 <p>direction: RTL | distribution: 'space-between'</p>
109 <div class="grid spaceBetween verticalRL directionRTL" data-expected-width=" 200" data-expected-height="300"> 90 <div class="grid contentSpaceBetween verticalRL directionRTL" data-expected- width="200" data-expected-height="300">
110 <div class="a" data-offset-x="160" data-offset-y="140" data-expected-wid th="40" data-expected-height="160"></div> 91 <div class="a" data-offset-x="160" data-offset-y="140" data-expected-wid th="40" data-expected-height="160"></div>
111 <div class="b" data-offset-x="0" data-offset-y="0" data-expected-width=" 200" data-expected-height="20"></div> 92 <div class="b" data-offset-x="0" data-offset-y="0" data-expected-width=" 200" data-expected-height="20"></div>
112 <div class="c" data-offset-x="0" data-offset-y="280" data-expected-width ="40" data-expected-height="20"></div> 93 <div class="c" data-offset-x="0" data-offset-y="280" data-expected-width ="40" data-expected-height="20"></div>
113 <div class="d" data-offset-x="0" data-offset-y="140" data-expected-width ="40" data-expected-height="20"></div> 94 <div class="d" data-offset-x="0" data-offset-y="140" data-expected-width ="40" data-expected-height="20"></div>
114 </div> 95 </div>
115 </div> 96 </div>
116 97
117 <div style="position: relative"> 98 <div style="position: relative">
118 <p>direction: RTL | distribution: 'space-around'</p> 99 <p>direction: RTL | distribution: 'space-around'</p>
119 <div class="grid spaceAround verticalRL directionRTL" data-expected-width="2 00" data-expected-height="300"> 100 <div class="grid contentSpaceAround verticalRL directionRTL" data-expected-w idth="200" data-expected-height="300">
120 <div class="a" data-offset-x="130" data-offset-y="140" data-expected-wid th="40" data-expected-height="120"></div> 101 <div class="a" data-offset-x="130" data-offset-y="140" data-expected-wid th="40" data-expected-height="120"></div>
121 <div class="b" data-offset-x="30" data-offset-y="40" data-expected-width ="140" data-expected-height="20"></div> 102 <div class="b" data-offset-x="30" data-offset-y="40" data-expected-width ="140" data-expected-height="20"></div>
122 <div class="c" data-offset-x="30" data-offset-y="240" data-expected-widt h="40" data-expected-height="20"></div> 103 <div class="c" data-offset-x="30" data-offset-y="240" data-expected-widt h="40" data-expected-height="20"></div>
123 <div class="d" data-offset-x="30" data-offset-y="140" data-expected-widt h="40" data-expected-height="20"></div> 104 <div class="d" data-offset-x="30" data-offset-y="140" data-expected-widt h="40" data-expected-height="20"></div>
124 </div> 105 </div>
125 </div> 106 </div>
126 107
127 <div style="position: relative"> 108 <div style="position: relative">
128 <p>direction: RTL | distribution: 'space-evenly'</p> 109 <p>direction: RTL | distribution: 'space-evenly'</p>
129 <div class="grid spaceEvenly verticalRL directionRTL" data-expected-width="2 00" data-expected-height="300"> 110 <div class="grid contentSpaceEvenly verticalRL directionRTL" data-expected-w idth="200" data-expected-height="300">
130 <div class="a" data-offset-x="120" data-offset-y="140" data-expected-wid th="40" data-expected-height="100"></div> 111 <div class="a" data-offset-x="120" data-offset-y="140" data-expected-wid th="40" data-expected-height="100"></div>
131 <div class="b" data-offset-x="40" data-offset-y="60" data-expected-width ="120" data-expected-height="20"></div> 112 <div class="b" data-offset-x="40" data-offset-y="60" data-expected-width ="120" data-expected-height="20"></div>
132 <div class="c" data-offset-x="40" data-offset-y="220" data-expected-widt h="40" data-expected-height="20"></div> 113 <div class="c" data-offset-x="40" data-offset-y="220" data-expected-widt h="40" data-expected-height="20"></div>
133 <div class="d" data-offset-x="40" data-offset-y="140" data-expected-widt h="40" data-expected-height="20"></div> 114 <div class="d" data-offset-x="40" data-offset-y="140" data-expected-widt h="40" data-expected-height="20"></div>
134 </div> 115 </div>
135 </div> 116 </div>
136 117
137 <div style="position: relative"> 118 <div style="position: relative">
138 <p>direction: RTL | distribution: 'stretch'</p> 119 <p>direction: RTL | distribution: 'stretch'</p>
139 <div class="grid stretchedGrid stretch verticalRL directionRTL" data-expecte d-width="200" data-expected-height="300"> 120 <div class="grid stretchedGrid contentStretch verticalRL directionRTL" data- expected-width="200" data-expected-height="300">
140 <div class="a" data-offset-x="100" data-offset-y="100" data-expected-wid th="100" data-expected-height="200"></div> 121 <div class="a" data-offset-x="100" data-offset-y="100" data-expected-wid th="100" data-expected-height="200"></div>
141 <div class="b" data-offset-x="0" data-offset-y="0" data-expected-width=" 200" data-expected-height="100"></div> 122 <div class="b" data-offset-x="0" data-offset-y="0" data-expected-width=" 200" data-expected-height="100"></div>
142 <div class="c" data-offset-x="0" data-offset-y="200" data-expected-width ="100" data-expected-height="100"></div> 123 <div class="c" data-offset-x="0" data-offset-y="200" data-expected-width ="100" data-expected-height="100"></div>
143 <div class="d" data-offset-x="0" data-offset-y="100" data-expected-width ="100" data-expected-height="100"></div> 124 <div class="d" data-offset-x="0" data-offset-y="100" data-expected-width ="100" data-expected-height="100"></div>
144 </div> 125 </div>
145 </div> 126 </div>
146 127
147 </body> 128 </body>
148 </html> 129 </html>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-content-alignment-with-span-vertical-lr.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-element-change-columns-repaint.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698