[css-grid] Import additional grid layout tests and update TestExpectations
[WebKit-https.git] / LayoutTests / fast / css-grid-layout / grid-align-baseline-vertical.html
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 src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px;"></div>
64   <div data-expected-width="50" data-offset-x="25" class="firstRowThirdColumn alignSelfCenter"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px; vertical-align: middle"></div>
65   <div id="baseline3" data-expected-width="50" class="firstRowFourthColumn alignSelfBaseline"><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" style="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 src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px;"></div>
72   <div data-expected-width="50" data-offset-x="50" class="firstRowThirdColumn alignSelfBaseline"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 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 alignSelfBaseline">ahem</div>
78   <div id="baseline7" data-offset-x="18" class="firstRowSecondColumn alignSelfBaseline"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px;"></div>
79   <div data-expected-width="50" data-offset-x="25" class="firstRowThirdColumn alignSelfCenter"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px; vertical-align: middle"></div>
80   <div data-expected-width="50" data-offset-x="0" class="firstRowFourthColumn alignSelfBaseline"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px; vertical-align: middle"></div>
81   <div data-expected-width="100" data-offset-x="0" class="firstRowFifthColumn" style="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 src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px;"></div>
87   <div data-expected-width="50" data-offset-x="0" class="firstRowThirdColumn alignSelfBaseline"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 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.offsetLeft + 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>