Skip to content

Commit 6383bc5

Browse files
simonwuelkerservo-wpt-sync
simonwuelker
authored and
servo-wpt-sync
committed
Add web platform test
Signed-off-by: Simon Wülker <simon.wuelker@arcor.de>
1 parent 92ce110 commit 6383bc5

1 file changed

Lines changed: 145 additions & 0 deletions

File tree

‎css/css-flexbox/align-self-baseline-with-flex-wrap.html‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
<!DOCTYPE html>
2+
<head>
3+
<link rel="help" href="https://drafts.csswg.org/css-align-3/#synthesize-baseline">
4+
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#logical-to-physical">
5+
<link rel="author" href="mailto:simonwuelker@arcor.de" title="Simon Wülker">
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+
.box {
11+
display: flex;
12+
outline: 1px solid;
13+
position: relative;
14+
}
15+
16+
.row {
17+
width: 20px;
18+
height: 50px;
19+
flex-direction: row;
20+
21+
.big {
22+
width: 10px;
23+
height: 30px;
24+
margin-top: 2px;
25+
margin-bottom: 5px;
26+
}
27+
}
28+
29+
.column {
30+
flex-direction: column;
31+
width: 50px;
32+
height: 20px;
33+
34+
.big {
35+
width: 30px;
36+
height: 10px;
37+
margin-left: 2px;
38+
margin-right: 5px;
39+
}
40+
}
41+
42+
.reverse {
43+
flex-wrap: wrap-reverse;
44+
}
45+
46+
.box span {
47+
outline: 1px solid;
48+
align-self: baseline;
49+
}
50+
51+
.rtl {
52+
direction: rtl;
53+
}
54+
55+
.small {
56+
width: 10px;
57+
height: 10px;
58+
background-color: blue;
59+
}
60+
61+
.big {
62+
background-color: blueviolet;
63+
}
64+
65+
th, td {
66+
border: 1px solid black;
67+
padding: 5px;
68+
text-align: center;
69+
vertical-align: middle;
70+
}
71+
div {
72+
margin-inline: auto;
73+
}
74+
</style>
75+
</head>
76+
<body onload="checkLayout('.box > span')">
77+
<table>
78+
<thead>
79+
<tr>
80+
<th></th>
81+
<th><pre>flex-direction: row</pre></th>
82+
<th><pre>flex-direction: row-reverse</pre></th>
83+
<th><pre>flex-direction: column</pre></th>
84+
<th><pre>flex-direction: column-reverse</pre></th>
85+
</tr>
86+
</thead>
87+
<tbody>
88+
<tr>
89+
<th><pre>direction=ltr</pre></th>
90+
<td>
91+
<div class="box row">
92+
<span class="small" data-offset-x="0" data-offset-y="22"></span>
93+
<span class="big" data-offset-x="10" data-offset-y="2"></span>
94+
</div>
95+
</td>
96+
<td>
97+
<div class="box row reverse">
98+
<span class="small" data-offset-x="0" data-offset-y="35"></span>
99+
<span class="big" data-offset-x="10" data-offset-y="15"></span>
100+
</div>
101+
</td>
102+
<td>
103+
<div class="box column">
104+
<span class="small" data-offset-x="2" data-offset-y="0"></span>
105+
<span class="big" data-offset-x="2" data-offset-y="10"></span>
106+
</div>
107+
</td>
108+
<td>
109+
<div class="box column reverse">
110+
<span class="small" data-offset-x="15" data-offset-y="0"></span>
111+
<span class="big" data-offset-x="15" data-offset-y="10"></span>
112+
</div>
113+
</td>
114+
</tr>
115+
<tr>
116+
<th>
117+
<pre>direction=rtl</pre>
118+
</th>
119+
<td>
120+
<div class="box rtl row">
121+
<span class="small" data-offset-x="10" data-offset-y="22"></span>
122+
<span class="big" data-offset-x="0" data-offset-y="2"></span>
123+
</div>
124+
</td>
125+
<td>
126+
<div class="box rtl row reverse">
127+
<span class="small" data-offset-x="10" data-offset-y="35"></span>
128+
<span class="big" data-offset-x="0" data-offset-y="15"></span>
129+
</div>
130+
</td>
131+
<td>
132+
<div class="box rtl column">
133+
<span class="small" data-offset-x="15" data-offset-y="0"></span>
134+
<span class="big" data-offset-x="15" data-offset-y="10"></span>
135+
</div>
136+
</td>
137+
<td>
138+
<div class="box rtl column reverse">
139+
<span class="small" data-offset-x="2" data-offset-y="0"></span>
140+
<span class="big" data-offset-x="2" data-offset-y="10"></span>
141+
</div>
142+
</td>
143+
</tr>
144+
</tbody>
145+
</table>

0 commit comments

Comments
 (0)