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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-align-justify-stretch-with-orthogonal-flows.html

Issue 2176533002: [css-grid] Implementing stretch alignment in orthogonal flows (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Applied suggested changes. Created 4 years, 4 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 | « no previous file | third_party/WebKit/Source/core/layout/LayoutGrid.cpp » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 <!DOCTYPE html>
2 <link href="resources/grid.css" rel="stylesheet">
3 <link href="resources/grid-alignment.css" rel="stylesheet">
4 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel ="stylesheet">
5 <script src="../../resources/testharness.js"></script>
6 <script src="../../resources/testharnessreport.js"></script>
7 <script src="../../resources/check-layout-th.js"></script>
8 <style>
9 body {
10 margin: 0;
11 }
12 .container {
13 position: relative;
14 }
15 .grid {
16 grid-template-columns: 100px 100px;
17 grid-template-rows: 150px 150px;
18 font: 10px/1 ahem;
19 }
20 .widthAndHeightSet {
21 width: 20px;
22 height: 40px;
23 }
24 .onlyWidthSet { width: 20px; }
25 .onlyHeightSet { height: 40px; }
26 .maxHeight { max-height: 160px; }
27 .maxWidth { max-width: 90px; }
28 .minWidth { min-width: 120px; }
29 .minHeight { min-height: 220px; }
30 .topAutoMargin { margin-top: auto; }
31 .bottomAutoMargin { margin-bottom: auto; }
32 .leftAutoMargin { margin-left: auto; }
33 .rightAutoMargin { margin-right: auto; }
34 </style>
35 <body onload="checkLayout('.grid')">
36 <div id="log"></div>
37 <p>This test checks that stretching alignment works as expected with orthogonal flows.</p>
38
39 <p>HORIZONTAL vs VERTICAL-RL</p>
40 <p><b>row1/col1:</b> fixed width and height - <b>row1/col2:</b> fixed width and auto height - <b>row2/col1:</b> auto width and fixed height - <b>row2/col2:</b> auto width and height, but start.</p>
41 <div class="container">
42 <div class="grid fit-content" data-expected-width="200" data-expected-height ="300">
43 <div class="verticalRL firstRowFirstColumn selfStretch widthAndHeigh tSet " data-expected-width="20" data-expected-height="40">XXX</div>
44 <div class="verticalRL firstRowSecondColumn sefStretch onlyWidthSet " data-expected-width="20" data-expected-height="150">XXX</div>
45 <div class="verticalRL secondRowFirstColumn selfStretch onlyHeightSe t " data-expected-width="100" data-expected-height="40">XXX</div>
46 <div class="verticalRL secondRowSecondColumn selfSelfStart " data-expected-width="10" data-expected-height="30">XXX</div>
47 </div>
48 </div>
49 <p><b>row1/co1l:</b> bottom auto margin - <b>row1/col2:</b> left auto margin - < b>row2/col1:</b> top auto margin - <b>row2/col2:</b> right auto margin.</p>
50 <div class="container">
51 <div class="grid fit-content" data-expected-width="200" data-expected-height ="300">
52 <div class="verticalRL firstRowFirstColumn selfStretch bottomAutoMargi n " data-expected-width="100" data-expected-height="30">XXX</div>
53 <div class="verticalRL firstRowSecondColumn seffStretch leftAutoMargin " data-expected-width="10" data-expected-height="150">XXX</div>
54 <div class="verticalRL secondRowFirstColumn selffStretch topAutoMargin " data-expected-width="100" data-expected-height="30">XXX</div>
55 <div class="verticalRL secondRowSecondColumn selffStretch rightAutoMargi n " data-expected-width="10" data-expected-height="150">XXX</div>
56 </div>
57 </div>
58
59 <p>HORIZONTAL vs VERTICAL-LR</p>
60 <p><b>row1/col1:</b> fixed width and height - <b>row1/col2:</b> fixed width and auto height - <b>row2/col1:</b> auto width and fixed height - <b>row2/col2:</b> auto width and height, but start.</p>
61 <div class="container">
62 <div class="grid fit-content" data-expected-width="200" data-expected-height ="300">
63 <div class="verticalLR firstRowFirstColumn selfStretch widthAndHeigh tSet " data-expected-width="20" data-expected-height="40">XXX</div>
64 <div class="verticalLR firstRowSecondColumn sefStretch onlyWidthSet " data-expected-width="20" data-expected-height="150">XXX</div>
65 <div class="verticalLR secondRowFirstColumn selfStretch onlyHeightSe t " data-expected-width="100" data-expected-height="40">XXX</div>
66 <div class="verticalLR secondRowSecondColumn selfSelfStart " data-expected-width="10" data-expected-height="30">XXX</div>
67 </div>
68 </div>
69 <p><b>row1/co1l:</b> bottom auto margin - <b>row1/col2:</b> left auto margin - < b>row2/col1:</b> top auto margin - <b>row2/col2:</b> right auto margin.</p>
70 <div class="container">
71 <div class="grid fit-content" data-expected-width="200" data-expected-height ="300">
72 <div class="verticalLR firstRowFirstColumn selfStretch bottomAutoMargi n " data-expected-width="100" data-expected-height="30">XXX</div>
73 <div class="verticalLR firstRowSecondColumn seffStretch leftAutoMargin " data-expected-width="10" data-expected-height="150">XXX</div>
74 <div class="verticalLR secondRowFirstColumn selffStretch topAutoMargin " data-expected-width="100" data-expected-height="30">XXX</div>
75 <div class="verticalLR secondRowSecondColumn selffStretch rightAutoMargi n " data-expected-width="10" data-expected-height="150">XXX</div>
76 </div>
77 </div>
78
79 <p>VERTICAL-RL vs HORIZONTAL</p>
80 <p><b>row1/col1:</b> fixed width and height - <b>row1/col2:</b> fixed width and auto height - <b>row2/col1:</b> auto width and fixed height - <b>row2/col2:</b> auto width and height, but start.</p>
81 <div class="container">
82 <div class="grid fit-content verticalRL" data-expected-width="300" data-expe cted-height="200">
83 <div class="horizonalTB firstRowFirstColumn selfStretch widthAndHeig htSet " data-expected-width="20" data-expected-height="40">XXX</div>
84 <div class="horizonalTB firstRowSecondColumn sefStretch onlyWidthSet " data-expected-width="20" data-expected-height="100">XXX</div>
85 <div class="horizonalTB secondRowFirstColumn selfStretch onlyHeightS et " data-expected-width="150" data-expected-height="40">XXX</div>
86 <div class="horizonalTB secondRowSecondColumn selfSelfStart " data-expected-width="10" data-expected-height="30">XXX</div>
87 </div>
88 </div>
89 <p><b>row1/co1l:</b> bottom auto margin - <b>row1/col2:</b> left auto margin - < b>row2/col1:</b> top auto margin - <b>row2/col2:</b> right auto margin.</p>
90 <div class="container">
91 <div class="grid fit-content verticalRL" data-expected-width="300" data-expe cted-height="200">
92 <div class="horizonalTB firstRowFirstColumn selfStretch bottomAutoMarg in " data-expected-width="150" data-expected-height="30">XXX</div>
93 <div class="horizonalTB firstRowSecondColumn seffStretch leftAutoMargin " data-expected-width="10" data-expected-height="100">XXX</div>
94 <div class="horizonalTB secondRowFirstColumn selffStretch topAutoMargin " data-expected-width="150" data-expected-height="30">XXX</div>
95 <div class="horizonalTB secondRowSecondColumn selffStretch rightAutoMarg in " data-expected-width="10" data-expected-height="100">XXX</div>
96 </div>
97 </div>
98
99 <p>VERTICAL-LR vs HORIZONTAL</p>
100 <p><b>row1/col1:</b> fixed width and height - <b>row1/col2:</b> fixed width and auto height - <b>row2/col1:</b> auto width and fixed height - <b>row2/col2:</b> auto width and height, but start.</p>
101 <div class="container">
102 <div class="grid fit-content verticalLR" data-expected-width="300" data-expe cted-height="200">
103 <div class="horizonalTB firstRowFirstColumn selfStretch widthAndHeig htSet " data-expected-width="20" data-expected-height="40">XXX</div>
104 <div class="horizonalTB firstRowSecondColumn sefStretch onlyWidthSet " data-expected-width="20" data-expected-height="100">XXX</div>
105 <div class="horizonalTB secondRowFirstColumn selfStretch onlyHeightS et " data-expected-width="150" data-expected-height="40">XXX</div>
106 <div class="horizonalTB secondRowSecondColumn selfSelfStart " data-expected-width="10" data-expected-height="30">XXX</div>
107 </div>
108 </div>
109 <p><b>row1/co1l:</b> bottom auto margin - <b>row1/col2:</b> left auto margin - < b>row2/col1:</b> top auto margin - <b>row2/col2:</b> right auto margin.</p>
110 <div class="container">
111 <div class="grid fit-content verticalLR" data-expected-width="300" data-expe cted-height="200">
112 <div class="horizonalTB firstRowFirstColumn selfStretch bottomAutoMarg in " data-expected-width="150" data-expected-height="30">XXX</div>
113 <div class="horizonalTB firstRowSecondColumn seffStretch leftAutoMargin " data-expected-width="10" data-expected-height="100">XXX</div>
114 <div class="horizonalTB secondRowFirstColumn selffStretch topAutoMargin " data-expected-width="150" data-expected-height="30">XXX</div>
115 <div class="horizonalTB secondRowSecondColumn selffStretch rightAutoMarg in " data-expected-width="10" data-expected-height="100">XXX</div>
116 </div>
117 </div>
118
119 </body>
OLDNEW
« no previous file with comments | « no previous file | third_party/WebKit/Source/core/layout/LayoutGrid.cpp » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698