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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-align-baseline-vertical.html

Issue 1407633003: [css-grid] Implementation of Baseline Self-Alignment (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Fixed several bug and added new tests. Created 4 years, 1 month 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-align-baseline-expected.txt ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-align-baseline-vertical-expected.txt » ('j') | third_party/WebKit/Source/core/layout/LayoutBlockFlow.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
11 .grid {
12 height: 600px;
13 grid-auto-columns: 1fr;
14 margin-bottom: 20px;
15 position: relative;
16 -webkit-writing-mode: vertical-rl;
kojii 2016/11/15 04:21:15 nit: better to use unprefixed versions? WebKit has
jfernandez 2016/11/16 11:51:24 Done.
17 -webkit-text-orientation: sideways-right;
18 }
19
20 .itemsBaseline {
21 align-items: baseline;
22 }
23
24 .grid :nth-child(1) { background-color: brown; }
25 .grid :nth-child(2) { background-color: green; }
26 .grid :nth-child(3) { background-color: red; }
27 .grid :nth-child(4) { background-color: yellow; }
28 .grid :nth-child(5) { background-color: purple; }
29 .grid :nth-child(6) { background-color: orange; }
30 .grid :nth-child(7) { background-color: lime; }
31 .grid :nth-child(8) { background-color: lightblue; }
32 .grid :nth-child(9) { background-color: darkred; }
33 .grid :nth-child(10) { background-color: gold; }
34 .grid :nth-child(11) { background-color: salmon; }
35
36 .firstRowThirdColumn {
37 grid-row: 1;
38 grid-column: 3;
39 }
40 .firstRowFourthColumn {
41 grid-row: 1;
42 grid-column: 4;
43 }
44 .firstRowFifthColumn {
45 grid-row: 1;
46 grid-column: 5;
47 }
48 .grid > div {
49 min-width: 0px;
50 }
51 </style>
52 </head>
53 <body onload="checkLayout('.grid')">
54
55 <div class="grid">
56 <div data-expected-width="20" data-offset-x="70" class="firstRowFirstColumn" style="align-self: baseline; width: 20px;"></div>
57 <div data-expected-width="10" data-offset-x="70" class="firstRowSecondColumn " style="align-self: baseline; width: 10px; margin: 0 20px 0 10px;"></div>
58 <div data-expected-width="10" data-offset-x="70" class="firstRowThirdColumn" style="align-self: baseline; width: 10px; margin: 0 20px 0 0;"></div>
59 <div data-expected-width="100" data-offset-x="0" class="firstRowFourthColumn " style="width: 100px;"></div>
60 </div>
61
62 <div class="grid">
63 <div id="baseline1" class="firstRowFirstColumn" style="align-self: baseline">a hem</div>
64 <div id="baseline2" class="firstRowSecondColumn-one" style="align-self: baseli ne"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px;">< /div>
65 <div data-expected-width="50" data-offset-x="25" class="firstRowThirdColumn" s tyle="align-self: center"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px; vertical-align: middle"></div>
66 <div id="baseline3" data-expected-width="50" class="firstRowFourthColumn" styl e="align-self: baseline"><img src="../../fast/replaced/resources/1x1-blue.png" s tyle="width: 50px; vertical-align: middle"></div>
67 <div data-expected-width="100" data-offset-x="0" class="firstRowFifthColumn" s tyle="width: 100px;"></div>
68 </div>
69
70 <div class="grid">
71 <div id="baseline4" class="firstRowFirstColumn" style="align-self: baseline">a hem</div>
72 <div id="baseline5" class="firstRowSecondColumn" style="align-self: baseline"> <br><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px;">< /div>
73 <div data-expected-width="50" data-offset-x="50" class="firstRowThirdColumn" s tyle="align-self: baseline"><img src="../../fast/replaced/resources/1x1-blue.png " style="width: 50px; vertical-align: middle"></div>
74 <div data-expected-width="100" data-offset-x="0" class="firstRowFourthColumn" style="width: 100px;"></div>
75 </div>
76
77 <div class="grid" style="-webkit-writing-mode: vertical-lr">
78 <div id="baseline6" data-offset-x="18" class="firstRowFirstColumn" style="alig n-self: baseline">ahem</div>
79 <div id="baseline7" data-offset-x="18" class="firstRowSecondColumn" style="ali gn-self: baseline"><img src="../../fast/replaced/resources/1x1-blue.png" style=" width: 50px;"></div>
80 <div data-expected-width="50" data-offset-x="25" class="firstRowThirdColumn" s tyle="align-self: center"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px; vertical-align: middle"></div>
81 <div data-expected-width="50" data-offset-x="0" class="firstRowFourthColumn" s tyle="align-self: baseline"><img src="../../fast/replaced/resources/1x1-blue.png " style="width: 50px; vertical-align: middle"></div>
82 <div data-expected-width="100" data-offset-x="0" class="firstRowFifthColumn" s tyle="width: 100px;"></div>
83 </div>
84
85 <div class="grid" style="-webkit-writing-mode: vertical-lr">
86 <div id="baseline8" class="firstRowFirstColumn" style="align-self: baseline">a hem</div>
87 <div id="baseline9" class="firstRowSecondColumn" style="align-self: baseline"> <br><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px;">< /div>
88 <div data-expected-width="50" data-offset-x="0" class="firstRowThirdColumn" st yle="align-self: baseline"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px; vertical-align: middle"></div>
89 <div data-expected-width="100" data-offset-x="0" class="firstRowFourthColumn" style="width: 100px;"></div>
90 </div>
91
92 <div id="results"></div>
93
94 <script>
95 function additionalBaselineChecks()
96 {
97 var baseline1 = document.getElementById("baseline1");
98 var baseline2 = document.getElementById("baseline2");
99 var baseline3 = document.getElementById("baseline3");
100 logIfFalse(baseline1.offsetLeft == baseline2.offsetLeft,
101 "baseline1 and baseline2 should have the same baseline.");
102 logIfFalse(baseline3.offsetLeft + baseline3.offsetWidth > 75,
103 "baseline3 should be above the center align-itemsed item.");
104
105 var baseline4 = document.getElementById("baseline4");
106 var baseline5 = document.getElementById("baseline5");
107 logIfFalse(baseline4.offsetLeft + baseline4.offsetWidth == baseline5.offsetL eft + baseline5.offsetWidth,
108 "baseline4 and baseline5 should be right aligned with each other. ");
109 logIfFalse(baseline4.offsetLeft + baseline4.offsetWidth < 100,
110 "baseline4 and baseline5 should be below baseline6.");
111
112 var baseline6 = document.getElementById("baseline6");
113 var baseline7 = document.getElementById("baseline7");
114 logIfFalse(baseline6.offsetLeft == baseline7.offsetLeft,
115 "baseline6 and baseline7 should have the same baseline.");
116
117 var baseline8 = document.getElementById("baseline8");
118 var baseline9 = document.getElementById("baseline9");
119 logIfFalse(baseline8.offsetLeft == baseline9.offsetLeft,
120 "baseline8 and baseline9 should be left aligned with each other." );
121
122 }
123
124 function logIfFalse(condition, msg)
125 {
126 if (!condition)
127 document.getElementById("results").innerHTML += msg + "<br/>";
128 }
129
130 additionalBaselineChecks();
131 </script>
132
133 </body>
134 </html>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-align-baseline-expected.txt ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-align-baseline-vertical-expected.txt » ('j') | third_party/WebKit/Source/core/layout/LayoutBlockFlow.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698