File tree Expand file tree Collapse file tree 3 files changed +112
-0
lines changed
testing/web-platform/tests/css/css-flexbox/alignment Expand file tree Collapse file tree 3 files changed +112
-0
lines changed Original file line number Diff line number Diff line change
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 >
Original file line number Diff line number Diff line change
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 >
Original file line number Diff line number Diff line change
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 >
You can’t perform that action at this time.
0 commit comments