Skip to content

Commit 042c264

Browse files
sammygillfoolip
sammygill
authored and
foolip
committed
1 parent d59c916 commit 042c264

File tree

3 files changed

+112
-0
lines changed

3 files changed

+112
-0
lines changed

‎css/css-flexbox/alignment/flex-align-baseline-column-rtl-direction.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+
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
5+
<meta name="assert" content="Baseline aligned item should be aligned towards the start of the inline axis (right side)."
6+
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-wrap-property">
7+
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
8+
<style>
9+
.flexbox {
10+
display: flex;
11+
width: 100px;
12+
height: 100px;
13+
align-items: baseline;
14+
flex-direction: column;
15+
direction: rtl;
16+
position: relative;
17+
}
18+
.item {
19+
width: 50px;
20+
height: 100px;
21+
background-color: green;
22+
}
23+
.abspos {
24+
position: absolute;
25+
right: 50px;
26+
}
27+
</style>
28+
</head>
29+
<body>
30+
<p>Test passes if there is a filled green square.</p>
31+
<div class="flexbox">
32+
<div class="abspos item"></div>
33+
<div class="item"></div>
34+
</div>
35+
</body>
36+
</html>

‎css/css-flexbox/alignment/flex-align-baseline-column-vert-lr-rtl-wrap-reverse.html

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
5+
<meta name="assert" content="Baseline aligned item should be aligned towards the start of the inline axis (bottom side)."
6+
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-wrap-property">
7+
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
8+
<style>
9+
.flexbox {
10+
display: flex;
11+
width: 100px;
12+
height: 100px;
13+
align-items: baseline;
14+
flex-direction: column;
15+
writing-mode: vertical-lr;
16+
direction: rtl;
17+
flex-wrap: wrap-reverse;
18+
position: relative;
19+
}
20+
.item {
21+
width: 100px;
22+
height: 50px;
23+
background-color: green;
24+
}
25+
.abspos {
26+
position: absolute;
27+
bottom: 50px;
28+
}
29+
</style>
30+
</head>
31+
<body>
32+
<p>Test passes if there is a filled green square.</p>
33+
<div class="flexbox">
34+
<div class="abspos item"></div>
35+
<div class="item"></div>
36+
</div>
37+
</body>
38+
</html>

‎css/css-flexbox/alignment/flex-align-baseline-column-vert-rl-rtl-wrap-reverse.html

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
5+
<meta name="assert" content="Baseline aligned item should be aligned towards the start of the inline axis (bottom side)."
6+
<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#flex-wrap-property">
7+
<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline">
8+
<style>
9+
.flexbox {
10+
display: flex;
11+
width: 100px;
12+
height: 100px;
13+
align-items: baseline;
14+
flex-direction: column;
15+
writing-mode: vertical-rl;
16+
direction: rtl;
17+
flex-wrap: wrap-reverse;
18+
position: relative;
19+
}
20+
.item {
21+
width: 100px;
22+
height: 50px;
23+
background-color: green;
24+
}
25+
.abspos {
26+
position: absolute;
27+
bottom: 50px;
28+
}
29+
</style>
30+
</head>
31+
<body>
32+
<p>Test passes if there is a filled green square.</p>
33+
<div class="flexbox">
34+
<div class="abspos item"></div>
35+
<div class="item"></div>
36+
</div>
37+
</body>
38+
</html>

0 commit comments

Comments
 (0)