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

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: Get advantage of recomputing the intrinsic size to solve the issues with orthogonal flows. Created 3 years, 10 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-align-baseline.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-baseline.html » ('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 <link href="resources/grid-alignment.css" rel="stylesheet">
6 <script src="../../resources/testharness.js"></script>
7 <script src="../../resources/testharnessreport.js"></script>
8 <script src="../../resources/check-layout-th.js"></script>
9 <style>
10 body {
11 margin: 0;
12 }
13
14 .grid {
15 height: 600px;
16 grid-auto-columns: 1fr;
17 margin-bottom: 20px;
18 position: relative;
19 writing-mode: vertical-rl;
20 text-orientation: sideways-right;
21 }
22
23 .grid :nth-child(1) { background-color: brown; }
24 .grid :nth-child(2) { background-color: green; }
25 .grid :nth-child(3) { background-color: red; }
26 .grid :nth-child(4) { background-color: yellow; }
27 .grid :nth-child(5) { background-color: purple; }
28 .grid :nth-child(6) { background-color: orange; }
29 .grid :nth-child(7) { background-color: lime; }
30 .grid :nth-child(8) { background-color: lightblue; }
31 .grid :nth-child(9) { background-color: darkred; }
32 .grid :nth-child(10) { background-color: gold; }
33 .grid :nth-child(11) { background-color: salmon; }
34
35 .firstRowThirdColumn {
36 grid-row: 1;
37 grid-column: 3;
38 }
39 .firstRowFourthColumn {
40 grid-row: 1;
41 grid-column: 4;
42 }
43 .firstRowFifthColumn {
44 grid-row: 1;
45 grid-column: 5;
46 }
47 .grid > div {
48 min-width: 0px;
49 }
50 </style>
51 </head>
52 <body onload="checkLayout('.grid')">
53
54 <div class="grid">
55 <div data-expected-width="20" data-offset-x="70" class="firstRowFirstColumn alignSelfBaseline" style="width: 20px;"></div>
56 <div data-expected-width="10" data-offset-x="70" class="firstRowSecondColumn alignSelfBaseline" style="width: 10px; margin: 0 20px 0 10px;"></div>
57 <div data-expected-width="10" data-offset-x="70" class="firstRowThirdColumn alignSelfBaseline" style="width: 10px; margin: 0 20px 0 0;"></div>
58 <div data-expected-width="100" data-offset-x="0" class="firstRowFourthColumn " style="width: 100px;"></div>
59 </div>
60
61 <div class="grid">
62 <div id="baseline1" class="firstRowFirstColumn alignSelfBaseline">ahem</div>
63 <div id="baseline2" class="firstRowSecondColumn-one alignSelfBaseline"><img sr c="../../fast/replaced/resources/1x1-blue.png" style="width: 50px;"></div>
64 <div data-expected-width="50" data-offset-x="25" class="firstRowThirdColumn al ignSelfCenter"><img src="../../fast/replaced/resources/1x1-blue.png" style="widt h: 50px; vertical-align: middle"></div>
65 <div id="baseline3" data-expected-width="50" class="firstRowFourthColumn align SelfBaseline"><img src="../../fast/replaced/resources/1x1-blue.png" style="width : 50px; vertical-align: middle"></div>
66 <div data-expected-width="100" data-offset-x="0" class="firstRowFifthColumn" s tyle="width: 100px;"></div>
67 </div>
68
69 <div class="grid">
70 <div id="baseline4" class="firstRowFirstColumn alignSelfBaseline">ahem</div>
71 <div id="baseline5" class="firstRowSecondColumn alignSelfBaseline"><br><img sr c="../../fast/replaced/resources/1x1-blue.png" style="width: 50px;"></div>
72 <div data-expected-width="50" data-offset-x="50" class="firstRowThirdColumn al ignSelfBaseline"><img src="../../fast/replaced/resources/1x1-blue.png" style="wi dth: 50px; vertical-align: middle"></div>
73 <div data-expected-width="100" data-offset-x="0" class="firstRowFourthColumn" style="width: 100px;"></div>
74 </div>
75
76 <div class="grid" style="-webkit-writing-mode: vertical-lr">
77 <div id="baseline6" data-offset-x="18" class="firstRowFirstColumn alignSelfBas eline">ahem</div>
78 <div id="baseline7" data-offset-x="18" class="firstRowSecondColumn alignSelfBa seline"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px ;"></div>
79 <div data-expected-width="50" data-offset-x="25" class="firstRowThirdColumn al ignSelfCenter"><img src="../../fast/replaced/resources/1x1-blue.png" style="widt h: 50px; vertical-align: middle"></div>
80 <div data-expected-width="50" data-offset-x="0" class="firstRowFourthColumn al ignSelfBaseline"><img src="../../fast/replaced/resources/1x1-blue.png" style="wi dth: 50px; vertical-align: middle"></div>
81 <div data-expected-width="100" data-offset-x="0" class="firstRowFifthColumn" s tyle="width: 100px;"></div>
82 </div>
83
84 <div class="grid" style="-webkit-writing-mode: vertical-lr">
85 <div id="baseline8" class="firstRowFirstColumn alignSelfBaseline">ahem</div>
86 <div id="baseline9" class="firstRowSecondColumn alignSelfBaseline"><br><img sr c="../../fast/replaced/resources/1x1-blue.png" style="width: 50px;"></div>
87 <div data-expected-width="50" data-offset-x="0" class="firstRowThirdColumn ali gnSelfBaseline"><img src="../../fast/replaced/resources/1x1-blue.png" style="wid th: 50px; vertical-align: middle"></div>
88 <div data-expected-width="100" data-offset-x="0" class="firstRowFourthColumn" style="width: 100px;"></div>
89 </div>
90
91 <div id="results"></div>
92
93 <script>
94 function additionalBaselineChecks()
95 {
96 var baseline1 = document.getElementById("baseline1");
97 var baseline2 = document.getElementById("baseline2");
98 var baseline3 = document.getElementById("baseline3");
99 logIfFalse(baseline1.offsetLeft == baseline2.offsetLeft,
100 "baseline1 and baseline2 should have the same baseline.");
101 logIfFalse(baseline3.offsetLeft + baseline3.offsetWidth > 75,
102 "baseline3 should be above the center align-itemsed item.");
103
104 var baseline4 = document.getElementById("baseline4");
105 var baseline5 = document.getElementById("baseline5");
106 logIfFalse(baseline4.offsetLeft + baseline4.offsetWidth == baseline5.offsetL eft + baseline5.offsetWidth,
107 "baseline4 and baseline5 should be right aligned with each other. ");
108 logIfFalse(baseline4.offsetLeft + baseline4.offsetWidth < 100,
109 "baseline4 and baseline5 should be below baseline6.");
110
111 var baseline6 = document.getElementById("baseline6");
112 var baseline7 = document.getElementById("baseline7");
113 logIfFalse(baseline6.offsetLeft == baseline7.offsetLeft,
114 "baseline6 and baseline7 should have the same baseline.");
115
116 var baseline8 = document.getElementById("baseline8");
117 var baseline9 = document.getElementById("baseline9");
118 logIfFalse(baseline8.offsetLeft == baseline9.offsetLeft,
119 "baseline8 and baseline9 should be left aligned with each other." );
120
121 }
122
123 function logIfFalse(condition, msg)
124 {
125 if (!condition)
126 document.getElementById("results").innerHTML += msg + "<br/>";
127 }
128
129 additionalBaselineChecks();
130 </script>
131
132 </body>
133 </html>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-align-baseline.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-baseline.html » ('j') | third_party/WebKit/Source/core/layout/LayoutBlockFlow.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698