Skip to content

Commit 85da586

Browse files
tordextordex
committed
Added tests for Flexible Box Layout
All tests are copied from: http://test.csswg.org/suites/css-flexbox-1_dev/nightly-unstable/html/toc.htm Prefixes: "-" - test is using features that litehtml doesn't support yet "--" - all featured should be supported but test failed because of flex rendering implementation issues
1 parent 6922a84 commit 85da586

File tree

783 files changed

+30694
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

783 files changed

+30694
-0
lines changed

‎test/render/flex/--align-baseline.htm

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<!-- Mirrored from test.csswg.org/suites/css-flexbox-1_dev/nightly-unstable/html/align-baseline.htm by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 23 Dec 2023 16:15:11 GMT -->
4+
<head><link href="support/flexbox.css" rel="stylesheet">
5+
<link href="https://www.w3.org/TR/css-flexbox-1/#valdef-align-items-baseline" rel="help">
6+
<link href="https://www.w3.org/TR/css-flexbox-1/#valdef-flex-direction-column" rel="help">
7+
<link href="https://www.w3.org/TR/css-flexbox-1/#valdef-flex-wrap-wrap-reverse" rel="help">
8+
<link href="http://test.csswg.org/suites/css-flexbox-1_dev/nightly-unstable/html/reference/align-baseline-ref.htm" rel="match">
9+
<style>
10+
body {
11+
margin: 0;
12+
}
13+
</style>
14+
15+
</head><body>
16+
<div class="flexbox column align-items-baseline">
17+
<h1>This text</h1>
18+
<p>should be left aligned.</p>
19+
</div>
20+
21+
<div class="flexbox column align-items-baseline wrap-reverse">
22+
<h1>This text</h1>
23+
<p>should be right aligned.</p>
24+
</div>
25+
26+
27+
28+
</body>
29+
<!-- Mirrored from test.csswg.org/suites/css-flexbox-1_dev/nightly-unstable/html/align-baseline.htm by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 23 Dec 2023 16:15:11 GMT -->
30+
</html>

‎test/render/flex/--align-self-001.htm

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<!-- Mirrored from test.csswg.org/suites/css-flexbox-1_dev/nightly-unstable/html/align-self-001.htm by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 23 Dec 2023 16:15:11 GMT -->
4+
<head><meta charset="utf-8">
5+
<title>CSS Flexbox Test: align-self - flex-start</title>
6+
<link href="http://www.intel.com/" rel="author" title="Intel">
7+
<link href="mailto:shiyoux.tan@intel.com" rel="author" title="Shiyou Tan">
8+
<link href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" rel="help" title="8.3. Cross-axis Alignment: the 'align-items' and 'align-self' properties">
9+
<link href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" rel="help">
10+
<link href="http://test.csswg.org/suites/css-flexbox-1_dev/nightly-unstable/html/reference/ref-filled-green-100px-square.htm" rel="match">
11+
<meta content="" name="flags">
12+
<meta content="The 'align-self' property set 'flex-start' aligns the flex items to the start edge of cross axis" name="assert">
13+
<style>
14+
#test {
15+
background-color: red;
16+
display: flex;
17+
height: 100px;
18+
width: 100px;
19+
}
20+
#test div {
21+
align-self: flex-start;
22+
background-color: green;
23+
height: 50px;
24+
width: 25px;
25+
}
26+
#cover {
27+
background-color: green;
28+
height: 50px;
29+
margin-top: -50px;
30+
width: 100px;
31+
}
32+
</style>
33+
</head><body>
34+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
35+
<div id="test">
36+
<div></div>
37+
<div></div>
38+
<div></div>
39+
<div></div>
40+
</div>
41+
<div id="cover"></div>
42+
43+
</body>
44+
<!-- Mirrored from test.csswg.org/suites/css-flexbox-1_dev/nightly-unstable/html/align-self-001.htm by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 23 Dec 2023 16:15:11 GMT -->
45+
</html>

‎test/render/flex/--align-self-002.htm

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<!-- Mirrored from test.csswg.org/suites/css-flexbox-1_dev/nightly-unstable/html/align-self-002.htm by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 23 Dec 2023 16:15:11 GMT -->
4+
<head><meta charset="utf-8">
5+
<title>CSS Flexbox Test: align-self - flex-end</title>
6+
<link href="http://www.intel.com/" rel="author" title="Intel">
7+
<link href="mailto:shiyoux.tan@intel.com" rel="author" title="Shiyou Tan">
8+
<link href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" rel="help" title="8.3. Cross-axis Alignment: the 'align-items' and 'align-self' properties">
9+
<link href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" rel="help">
10+
<link href="http://test.csswg.org/suites/css-flexbox-1_dev/nightly-unstable/html/reference/ref-filled-green-100px-square.htm" rel="match">
11+
<meta content="" name="flags">
12+
<meta content="The 'align-self' property set 'flex-end' aligns the flex items to the end edge of cross axis" name="assert">
13+
<style>
14+
#test {
15+
background-color: red;
16+
display: flex;
17+
height: 100px;
18+
width: 100px;
19+
}
20+
#test div {
21+
align-self: flex-end;
22+
background-color: green;
23+
height: 50px;
24+
width: 25px;
25+
}
26+
#cover {
27+
background-color: green;
28+
height: 50px;
29+
margin-top: -100px;
30+
width: 100px;
31+
}
32+
</style>
33+
</head><body>
34+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
35+
<div id="test">
36+
<div></div>
37+
<div></div>
38+
<div></div>
39+
<div></div>
40+
</div>
41+
<div id="cover"></div>
42+
43+
</body>
44+
<!-- Mirrored from test.csswg.org/suites/css-flexbox-1_dev/nightly-unstable/html/align-self-002.htm by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 23 Dec 2023 16:15:11 GMT -->
45+
</html>

‎test/render/flex/--align-self-003.htm

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<!-- Mirrored from test.csswg.org/suites/css-flexbox-1_dev/nightly-unstable/html/align-self-003.htm by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 23 Dec 2023 16:15:11 GMT -->
4+
<head><meta charset="utf-8">
5+
<title>CSS Flexbox Test: align-self - center</title>
6+
<link href="http://www.intel.com/" rel="author" title="Intel">
7+
<link href="mailto:shiyoux.tan@intel.com" rel="author" title="Shiyou Tan">
8+
<link href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" rel="help" title="8.3. Cross-axis Alignment: the 'align-items' and 'align-self' properties">
9+
<link href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" rel="help">
10+
<link href="http://test.csswg.org/suites/css-flexbox-1_dev/nightly-unstable/html/reference/ref-filled-green-100px-square.htm" rel="match">
11+
<meta content="" name="flags">
12+
<meta content="The 'align-self' property set 'center' centered the flex items in the cross axis within the line" name="assert">
13+
<style>
14+
#test {
15+
background-color: red;
16+
display: flex;
17+
height: 100px;
18+
width: 100px;
19+
}
20+
#test div {
21+
align-self: center;
22+
background-color: green;
23+
height: 50px;
24+
width: 25px;
25+
}
26+
#top {
27+
background-color: green;
28+
margin-top: -100px;
29+
height: 25px;
30+
width: 100px;
31+
}
32+
#bottom {
33+
background-color: green;
34+
height: 25px;
35+
margin-top: 50px;
36+
width: 100px;
37+
}
38+
</style>
39+
</head><body>
40+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
41+
<div id="test">
42+
<div></div>
43+
<div></div>
44+
<div></div>
45+
<div></div>
46+
</div>
47+
<div id="top"></div>
48+
<div id="bottom"></div>
49+
50+
</body>
51+
<!-- Mirrored from test.csswg.org/suites/css-flexbox-1_dev/nightly-unstable/html/align-self-003.htm by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 23 Dec 2023 16:15:11 GMT -->
52+
</html>

‎test/render/flex/--align-self-005.htm

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<!-- Mirrored from test.csswg.org/suites/css-flexbox-1_dev/nightly-unstable/html/align-self-005.htm by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 23 Dec 2023 16:15:11 GMT -->
4+
<head><meta charset="utf-8">
5+
<title>CSS Flexbox Test: align-self - stretch (height: number)</title>
6+
<link href="http://www.intel.com/" rel="author" title="Intel">
7+
<link href="mailto:shiyoux.tan@intel.com" rel="author" title="Shiyou Tan">
8+
<link href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" rel="help" title="8.3. Cross-axis Alignment: the 'align-items' and 'align-self' properties">
9+
<link href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" rel="help">
10+
<link href="http://test.csswg.org/suites/css-flexbox-1_dev/nightly-unstable/html/reference/ref-filled-green-100px-square.htm" rel="match">
11+
<meta content="" name="flags">
12+
<meta content="The 'align-self' property set 'stretch' will be invalid while cross size of the flex item set exact number" name="assert">
13+
<style>
14+
#test {
15+
background-color: green;
16+
display: flex;
17+
height: 100px;
18+
width: 100px;
19+
}
20+
#test div {
21+
align-self: stretch;
22+
background-color: red;
23+
height: 50px;
24+
width: 25px;
25+
}
26+
#cover {
27+
background-color: green;
28+
height: 50px;
29+
position: relative;
30+
top: -100px;
31+
width: 100px;
32+
}
33+
</style>
34+
</head><body>
35+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
36+
<div id="test">
37+
<div></div>
38+
<div></div>
39+
<div></div>
40+
<div></div>
41+
</div>
42+
<div id="cover"></div>
43+
44+
</body>
45+
<!-- Mirrored from test.csswg.org/suites/css-flexbox-1_dev/nightly-unstable/html/align-self-005.htm by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 23 Dec 2023 16:15:11 GMT -->
46+
</html>

‎test/render/flex/--align-self-006.htm

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<!-- Mirrored from test.csswg.org/suites/css-flexbox-1_dev/nightly-unstable/html/align-self-006.htm by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 23 Dec 2023 16:15:11 GMT -->
4+
<head><meta charset="utf-8">
5+
<title>CSS Flexbox Test: align-self - baseline</title>
6+
<link href="http://www.intel.com/" rel="author" title="Intel">
7+
<link href="mailto:shiyoux.tan@intel.com" rel="author" title="Shiyou Tan">
8+
<link href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" rel="help" title="8.3. Cross-axis Alignment: the 'align-items' and 'align-self' properties">
9+
<link href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" rel="help">
10+
<meta content="" name="flags">
11+
<meta content="The 'align-self' property set 'baseline' aligns the flex items to the baseline of content" name="assert">
12+
<style>
13+
#test {
14+
border: 1px solid black;
15+
display: flex;
16+
}
17+
#test div {
18+
align-self: baseline;
19+
}
20+
#div1 {
21+
height: 90px;
22+
font-size: 20px;
23+
width: 30px;
24+
}
25+
#div2 {
26+
height: 50px;
27+
font-size: 10px;
28+
width: 30px;
29+
}
30+
#div3 {
31+
height: 100px;
32+
font-size: 30px;
33+
width: 30px;
34+
}
35+
#div4 {
36+
height: 80px;
37+
font-size: 15px;
38+
width: 30px;
39+
}
40+
</style>
41+
</head><body>
42+
<p>Test passes if the underline of all 'a' characters within black border box is horizontal and no breaking.</p>
43+
<div id="test">
44+
<div id="div1"><a href="#">aaa</a></div>
45+
<div id="div2"><a href="#">aaaaa</a></div>
46+
<div id="div3"><a href="#">aa</a></div>
47+
<div id="div4"><a href="#">aaa</a></div>
48+
</div>
49+
50+
</body>
51+
<!-- Mirrored from test.csswg.org/suites/css-flexbox-1_dev/nightly-unstable/html/align-self-006.htm by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 23 Dec 2023 16:15:11 GMT -->
52+
</html>

‎test/render/flex/--align-self-007.htm

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<!-- Mirrored from test.csswg.org/suites/css-flexbox-1_dev/nightly-unstable/html/align-self-007.htm by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 23 Dec 2023 16:15:11 GMT -->
4+
<head><meta charset="utf-8">
5+
<title>CSS Flexbox Test: align-self - auto and align-items - flex-start</title>
6+
<link href="http://www.intel.com/" rel="author" title="Intel">
7+
<link href="mailto:shiyoux.tan@intel.com" rel="author" title="Shiyou Tan">
8+
<link href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" rel="help" title="8.3. Cross-axis Alignment: the 'align-items' and 'align-self' properties">
9+
<link href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" rel="help">
10+
<link href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" rel="help">
11+
<link href="http://test.csswg.org/suites/css-flexbox-1_dev/nightly-unstable/html/reference/ref-filled-green-100px-square.htm" rel="match">
12+
<meta content="" name="flags">
13+
<meta content="The 'align-self' property set 'auto' aligns flex items to start edge of cross-axis when 'align-items' set 'flex-start'" name="assert">
14+
<style>
15+
#test {
16+
align-items: flex-start;
17+
background-color: red;
18+
display: flex;
19+
height: 100px;
20+
width: 100px;
21+
}
22+
#test div {
23+
align-self: auto;
24+
background-color: green;
25+
height: 50px;
26+
width: 25px;
27+
}
28+
#cover {
29+
background-color: green;
30+
height: 50px;
31+
margin-top: -50px;
32+
width: 100px;
33+
}
34+
</style>
35+
</head><body>
36+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
37+
<div id="test">
38+
<div></div>
39+
<div></div>
40+
<div></div>
41+
<div></div>
42+
</div>
43+
<div id="cover"></div>
44+
45+
</body>
46+
<!-- Mirrored from test.csswg.org/suites/css-flexbox-1_dev/nightly-unstable/html/align-self-007.htm by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 23 Dec 2023 16:15:11 GMT -->
47+
</html>

‎test/render/flex/--align-self-008.htm

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<!-- Mirrored from test.csswg.org/suites/css-flexbox-1_dev/nightly-unstable/html/align-self-008.htm by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 23 Dec 2023 16:15:11 GMT -->
4+
<head><meta charset="utf-8">
5+
<title>CSS Flexbox Test: align-self - auto and align-items - flex-end</title>
6+
<link href="http://www.intel.com/" rel="author" title="Intel">
7+
<link href="mailto:shiyoux.tan@intel.com" rel="author" title="Shiyou Tan">
8+
<link href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" rel="help" title="8.3. Cross-axis Alignment: the 'align-items' and 'align-self' properties">
9+
<link href="http://www.w3.org/TR/css-flexbox-1/#align-items-property" rel="help">
10+
<link href="http://test.csswg.org/suites/css-flexbox-1_dev/nightly-unstable/html/reference/ref-filled-green-100px-square.htm" rel="match">
11+
<meta content="" name="flags">
12+
<meta content="The 'align-self' property set 'auto' aligns flex items to end edge of cross-axis when 'align-items' set 'flex-end'" name="assert">
13+
<style>
14+
#test {
15+
align-items: flex-end;
16+
background-color: red;
17+
display: flex;
18+
height: 100px;
19+
width: 100px;
20+
}
21+
#test div {
22+
align-self: auto;
23+
background-color: green;
24+
height: 50px;
25+
width: 25px;
26+
}
27+
#cover {
28+
background-color: green;
29+
height: 50px;
30+
margin-top: -100px;
31+
width: 100px;
32+
}
33+
</style>
34+
</head><body>
35+
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
36+
<div id="test">
37+
<div></div>
38+
<div></div>
39+
<div></div>
40+
<div></div>
41+
</div>
42+
<div id="cover"></div>
43+
44+
</body>
45+
<!-- Mirrored from test.csswg.org/suites/css-flexbox-1_dev/nightly-unstable/html/align-self-008.htm by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 23 Dec 2023 16:15:11 GMT -->
46+
</html>

0 commit comments

Comments
 (0)