Skip to content

Commit 63a10b6

Browse files
sammygillsammygill
authored
1 parent 8a7d516 commit 63a10b6

6 files changed

+228
-0
lines changed

‎css/css-flexbox/flex-order-last-baseline-multiple-ref.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>CSS Test Reference: flex last baseline with multiple order values</title>
5+
<style>
6+
.outer {
7+
display: flex;
8+
align-items: last baseline;
9+
height: 100px;
10+
border: 1px solid black;
11+
}
12+
.flex {
13+
display: flex;
14+
flex-wrap: wrap;
15+
width: 60px;
16+
}
17+
.flex > div {
18+
width: 60px;
19+
}
20+
.a { font-size: 10px; background: lightblue; }
21+
.b { font-size: 20px; background: lightyellow; }
22+
.c { font-size: 30px; background: lightgreen; }
23+
</style>
24+
</head>
25+
<body>
26+
<p>Test passes if "Ref" is aligned to the baseline of "C" (the large green text).</p>
27+
<div class="outer">
28+
<div class="flex">
29+
<div class="a">A</div>
30+
<div class="b">B</div>
31+
<div class="c">C</div>
32+
</div>
33+
<div>Ref</div>
34+
</div>
35+
</body>
36+
</html>

‎css/css-flexbox/flex-order-last-baseline-multiple.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>CSS Test: flex last baseline with multiple order values</title>
5+
<link rel="author" title="WebKit" href="https://webkit.org">
6+
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#order-property">
7+
<link rel="help" href="https://www.w3.org/TR/css-align-3/#baseline-values">
8+
<link rel="match" href="flex-order-last-baseline-multiple-ref.html">
9+
<meta name="assert" content="The last baseline of a flex container with multiple order values should come from the item with the highest order value.">
10+
<style>
11+
.outer {
12+
display: flex;
13+
align-items: last baseline;
14+
height: 100px;
15+
border: 1px solid black;
16+
}
17+
.flex {
18+
display: flex;
19+
flex-wrap: wrap;
20+
width: 60px;
21+
}
22+
.flex > div {
23+
width: 60px;
24+
align-self: baseline;
25+
}
26+
.a { order: 1; font-size: 10px; background: lightblue; }
27+
.b { order: 2; font-size: 20px; background: lightyellow; }
28+
.c { order: 3; font-size: 30px; background: lightgreen; }
29+
</style>
30+
</head>
31+
<body>
32+
<p>Test passes if "Ref" is aligned to the baseline of "C" (the large green text).</p>
33+
<div class="outer">
34+
<div class="flex">
35+
<div class="a">A</div>
36+
<div class="b">B</div>
37+
<div class="c">C</div>
38+
</div>
39+
<div>Ref</div>
40+
</div>
41+
</body>
42+
</html>

‎css/css-flexbox/flex-order-last-baseline-ref.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>CSS Test Reference: flex last baseline with order property</title>
5+
<style>
6+
.outer {
7+
display: flex;
8+
align-items: last baseline;
9+
height: 100px;
10+
border: 1px solid black;
11+
}
12+
.flex {
13+
display: flex;
14+
flex-wrap: wrap;
15+
width: 60px;
16+
}
17+
.flex > div {
18+
width: 60px;
19+
}
20+
/* Reference: items in DOM order matching visual order, no order property needed. */
21+
.a { font-size: 10px; background: lightblue; }
22+
.b { font-size: 30px; background: lightgreen; }
23+
</style>
24+
</head>
25+
<body>
26+
<p>Test passes if "Ref" is aligned to the baseline of "B" (the large green text).</p>
27+
<div class="outer">
28+
<div class="flex">
29+
<div class="a">A</div>
30+
<div class="b">B</div>
31+
</div>
32+
<div>Ref</div>
33+
</div>
34+
</body>
35+
</html>

‎css/css-flexbox/flex-order-last-baseline.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>CSS Test: flex last baseline with order property</title>
5+
<link rel="author" title="WebKit" href="https://webkit.org">
6+
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#order-property">
7+
<link rel="help" href="https://www.w3.org/TR/css-align-3/#baseline-values">
8+
<link rel="match" href="flex-order-last-baseline-ref.html">
9+
<meta name="assert" content="The last baseline of a flex container should come from the last item in order, not the first.">
10+
<style>
11+
.outer {
12+
display: flex;
13+
align-items: last baseline;
14+
height: 100px;
15+
border: 1px solid black;
16+
}
17+
.flex {
18+
display: flex;
19+
flex-wrap: wrap;
20+
width: 60px;
21+
}
22+
.flex > div {
23+
width: 60px;
24+
align-self: baseline;
25+
}
26+
.a { order: 1; font-size: 10px; background: lightblue; }
27+
.b { order: 2; font-size: 30px; background: lightgreen; }
28+
</style>
29+
</head>
30+
<body>
31+
<p>Test passes if "Ref" is aligned to the baseline of "B" (the large green text).</p>
32+
<div class="outer">
33+
<div class="flex">
34+
<div class="a">A</div>
35+
<div class="b">B</div>
36+
</div>
37+
<div>Ref</div>
38+
</div>
39+
</body>
40+
</html>

‎css/css-flexbox/flex-order-wrap-reverse-baseline-ref.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>CSS Test Reference: flex first baseline with wrap-reverse and order property</title>
5+
<style>
6+
.outer {
7+
display: flex;
8+
align-items: baseline;
9+
height: 150px;
10+
border: 1px solid black;
11+
}
12+
.flex {
13+
display: flex;
14+
flex-wrap: wrap-reverse;
15+
width: 60px;
16+
}
17+
.flex > div {
18+
width: 60px;
19+
}
20+
.a { font-size: 10px; background: lightblue; }
21+
.b { font-size: 30px; background: lightgreen; }
22+
</style>
23+
</head>
24+
<body>
25+
<p>Test passes if "Ref" is aligned to the baseline of "B" (the large green text).</p>
26+
<div class="outer">
27+
<div class="flex">
28+
<div class="a">A</div>
29+
<div class="b">B</div>
30+
</div>
31+
<div>Ref</div>
32+
</div>
33+
</body>
34+
</html>

‎css/css-flexbox/flex-order-wrap-reverse-baseline.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>CSS Test: flex first baseline with wrap-reverse and order property</title>
5+
<link rel="author" title="WebKit" href="https://webkit.org">
6+
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#order-property">
7+
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#valdef-flex-wrap-wrap-reverse">
8+
<link rel="help" href="https://www.w3.org/TR/css-align-3/#baseline-values">
9+
<link rel="match" href="flex-order-wrap-reverse-baseline-ref.html">
10+
<meta name="assert" content="With wrap-reverse, the first baseline should come from the visually first line (logically last), iterating order values in reverse.">
11+
<style>
12+
.outer {
13+
display: flex;
14+
align-items: baseline;
15+
height: 150px;
16+
border: 1px solid black;
17+
}
18+
.flex {
19+
display: flex;
20+
flex-wrap: wrap-reverse;
21+
width: 60px;
22+
}
23+
.flex > div {
24+
width: 60px;
25+
align-self: baseline;
26+
}
27+
.a { order: 1; font-size: 10px; background: lightblue; }
28+
.b { order: 2; font-size: 30px; background: lightgreen; }
29+
</style>
30+
</head>
31+
<body>
32+
<p>Test passes if "Ref" is aligned to the baseline of "B" (the large green text).</p>
33+
<div class="outer">
34+
<div class="flex">
35+
<div class="a">A</div>
36+
<div class="b">B</div>
37+
</div>
38+
<div>Ref</div>
39+
</div>
40+
</body>
41+
</html>

0 commit comments

Comments
 (0)