diff options
| author | James Graham <james@hoppipolla.co.uk> | 2015-03-27 09:18:12 +0000 |
|---|---|---|
| committer | James Graham <james@hoppipolla.co.uk> | 2015-04-03 23:29:19 +0100 |
| commit | 2c9faf5363be229498578bdeca55c0c52730f0fa (patch) | |
| tree | e070d5d12a587f1e1939410b2cd88450543d7534 /tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference | |
| parent | 1a81b18b9f22d7bc1a967d08fcc7fbcf2ee200f5 (diff) | |
| download | servo-2c9faf5363be229498578bdeca55c0c52730f0fa.tar.gz servo-2c9faf5363be229498578bdeca55c0c52730f0fa.zip | |
Update CSS tests to revision 31d63cc79bd4c929ed582229e936d7b389f3e6ab
Diffstat (limited to 'tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference')
384 files changed, 15645 insertions, 0 deletions
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/Flexible-order-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/Flexible-order-ref.xht new file mode 100644 index 00000000000..a7cfd462494 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/Flexible-order-ref.xht @@ -0,0 +1,52 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>CSS Test: Change the value of 'order' property</title> +<link href="mailto:keynesqu@sohu.com" rel="author" title="KeynesQu" /> + +<style> + +.box { + margin:0 auto; + background:#CCC; + border-radius:5px; + width:600px; +} + +.box div { + margin:0; + width:200px; + float:left; + text-align:center; +} + +.box .red { + background:#F00; +} +.box .blue { + background:#00F; +} +.box .black { + color:#FFF; + background:#000; +} + + + + +</style> + +</head> + +<body> + + +<!-- FLEX CONTAINER --> +<div class="box"> + <div class="blue">B</div> + <div class="red">A</div> + <div class="black">C</div> +</div> + + + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/align-content-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/align-content-001-ref.xht new file mode 100644 index 00000000000..eb27f973478 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/align-content-001-ref.xht @@ -0,0 +1,16 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /> +<title>CSS Reference</title> +<link href="http://www.intel.com" rel="author" title="Intel" /> +<style> + div { + background: green; + height: 100px; + width: 300px; + } +</style> +</head><body> + <p>Test passes if there is no red visible on the page.</p> + <div></div> + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/autoheight-flexbox-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/autoheight-flexbox-001-ref.xht new file mode 100644 index 00000000000..70251d0e943 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/autoheight-flexbox-001-ref.xht @@ -0,0 +1,29 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea" /> + <style> + .flex { + height: 100px; + width: 100px; + background-color: green; + } + .region { + width: 100px; + background-color: gray; + padding: 10px; + } + </style> + </head> + <body> + <ul> + <li>Test passes if you see a green square inside a gray square.</li> + <li>You shouldn't see any red.</li> + </ul> + <div class="region"> + <div class="flex"> + </div> + </div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/autoheight-flexbox-003-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/autoheight-flexbox-003-ref.xht new file mode 100644 index 00000000000..3b5efbbb133 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/autoheight-flexbox-003-ref.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea" /> + <style> + .content { + font-family: Ahem; + font-size: 20px; + line-height: 1em; + color: green; + } + </style> + </head> + <body> + <ul> + <li>Test passes if you see a green square.</li> + <li>You shouldn't see any red.</li> + </ul> + <div class="content"> + XXXXX<br /> + XXXXX<br /> + XXXXX<br /> + XXXXX<br /> + XXXXX + </div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/autoheight-regions-in-autoheight-flexbox-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/autoheight-regions-in-autoheight-flexbox-001-ref.xht new file mode 100644 index 00000000000..592b52b5e18 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/autoheight-regions-in-autoheight-flexbox-001-ref.xht @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea" /> + <style> + .blue { + height: 60px; + width: 100px; + background-color: blue; + } + + .green { + height: 40px; + width: 100px; + background-color: green; + position: relative; + bottom: 40px; + left: 200px; + } + </style> + </head> + <body> + <ul> + <li>Test passes if you see a blue rectangle and a green rectangle, from left to right in this order.</li> + <li>The blue rectangle one the left should be taller than the green rectangle on the right.</li> + <li>You shouldn't see any red.</li> + </ul> + <div class="blue"> </div> + <div class="green"> </div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/autoheight-regions-in-autoheight-flexbox-002-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/autoheight-regions-in-autoheight-flexbox-002-ref.xht new file mode 100644 index 00000000000..329a06adce5 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/autoheight-regions-in-autoheight-flexbox-002-ref.xht @@ -0,0 +1,25 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea" /> + <style> + .content { + font-family: Ahem; + line-height: 1em; + font-size: 20px; + color: green; + } + </style> + </head> + <body> + <ul> + <li>Test passes if you see a horizontal green stripe.</li> + <li>You shouldn't see any red.</li> + </ul> + <div class="content"> + XXXXX<br /> + XXXXX + </div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/autoheight-regions-in-autoheight-flexbox-003-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/autoheight-regions-in-autoheight-flexbox-003-ref.xht new file mode 100644 index 00000000000..2c6e7ac7f8f --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/autoheight-regions-in-autoheight-flexbox-003-ref.xht @@ -0,0 +1,25 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea" /> + <style> + .content { + font-family: Ahem; + font-size: 20px; + line-height: 1em; + color: green; + margin-bottom: 20px; + } + </style> + </head> + <body> + <ul> + <li>Test passes if you see three horizontal green stripes.</li> + <li>You shouldn't see any red.</li> + </ul> + <div class="content">XXXX</div> + <div class="content">XXXX</div> + <div class="content">XXXX</div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/autoheight-regions-in-autoheight-flexbox-004-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/autoheight-regions-in-autoheight-flexbox-004-ref.xht new file mode 100644 index 00000000000..01fb2ac15c8 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/autoheight-regions-in-autoheight-flexbox-004-ref.xht @@ -0,0 +1,34 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea" /> + <style> + .c1, .c2 { + font-family: Ahem; + font-size: 20px; + line-height: 1em; + } + + .c1 { + color: blue; + margin-top: 20px; + margin-bottom: 20px; + } + + .c2 { + color: green; + } + </style> + </head> + <body> + <ul> + <li>Test passes if you see a column of three horizontal stripes with colors in the following order: + green, blue, green.</li> + <li>You shouldn't see any red.</li> + </ul> + <div class="c2">XXX</div> + <div class="c1">XXX</div> + <div class="c2">XXX</div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/autoheight-regions-in-fixed-sized-flexbox-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/autoheight-regions-in-fixed-sized-flexbox-001-ref.xht new file mode 100644 index 00000000000..c50f32dd74a --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/autoheight-regions-in-fixed-sized-flexbox-001-ref.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea" /> + <style> + .block { + display: inline-block; + margin: 0px; + padding: 0px; + height: 200px; + width: 100px; + } + + .blue { + background-color: blue; + } + + .green { + background-color: green; + } + + .white { + background-color: white; + } + </style> + </head> + <body> + <ul> + <li>Test passes if you can see two squares placed on the same horizontal line. Each square consists of two + vertical halves. The left square has the left half colored green and the right half colored blue. + The right square has left half colored blue and the right half colored green.</li> + <li>You shouldn't see any red.</li> + </ul> + <div class="block green"></div><div class="block blue"></div><div class="block white"></div><div class="block blue"></div><div class="block green"></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/autoheight-regions-in-fixed-sized-flexbox-002-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/autoheight-regions-in-fixed-sized-flexbox-002-ref.xht new file mode 100644 index 00000000000..dae879fd2d3 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/autoheight-regions-in-fixed-sized-flexbox-002-ref.xht @@ -0,0 +1,30 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea" /> + <style> + .block { + width: 200px; + height: 200px; + } + + .blue { + background-color: blue; + } + + .green { + background-color: green; + } + </style> + </head> + <body> + <ul> + <li>Test passes if you can see two squares: a green square at the top and a blue square at the bottom.</li> + <li>The two squares should be of the same size.</li> + <li>You shouldn't see any red.</li> + </ul> + <div class="block green"></div> + <div class="block blue"></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/autoheight-regions-in-fixed-sized-flexbox-003-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/autoheight-regions-in-fixed-sized-flexbox-003-ref.xht new file mode 100644 index 00000000000..88128cb0168 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/autoheight-regions-in-fixed-sized-flexbox-003-ref.xht @@ -0,0 +1,42 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea" /> + <style> + .column { + display: inline-block; + margin-right: 20px; + } + + .green { + width: 100px; + height: 40px; + background-color: green; + } + + .blue { + width: 100px; + height: 40px; + background-color: blue; + } + </style> + </head> + <body> + <ul> + <li>The green and blue rectangles are regions placed inside a flexbox with column wrap flow.</li> + <li>Test passes if you see two columns with a total of 6 alternating horizontal green and blue stripes.</li> + <li>You shouldn't see any red.</li> + </ul> + <div class="column"> + <div class="green"></div> + <div class="blue"></div> + <div class="green"></div> + </div><div class="column"> + <div class="blue"></div> + <div class="green"></div> + <div class="blue"></div> + </div> + + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/autoheight-regions-in-fixed-sized-flexbox-004-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/autoheight-regions-in-fixed-sized-flexbox-004-ref.xht new file mode 100644 index 00000000000..2f2dd51d073 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/autoheight-regions-in-fixed-sized-flexbox-004-ref.xht @@ -0,0 +1,25 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea" /> + <style> + .fixed { + height: 40px; + width: 100px; + margin-bottom: 20px; + background-color: green; + position: relative; + top: 60px; + } + </style> + </head> + <body> + <ul> + <li>Test passes if you see two green stripes.</li> + <li>You should not see any red.</li> + </ul> + <div class="fixed"></div> + <div class="fixed"></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/autoheight-regions-in-fixed-sized-flexbox-005-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/autoheight-regions-in-fixed-sized-flexbox-005-ref.xht new file mode 100644 index 00000000000..63dadebc314 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/autoheight-regions-in-fixed-sized-flexbox-005-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea" /> + <style> + .stripe { + height: 20px; + width: 80px; + display: inline-block; + margin-left: 30px; + margin-right: 26px; + margin-top: 40px; + background-color: green; + } + </style> + </head> + <body> + <ul> + <li>Test passes if you see three horizontal green stripes.</li> + <li>You shouldn't see any red.</li> + </ul> + <div class="stripe"></div> + <div class="stripe"></div> + <div class="stripe"></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/autoheight-regions-in-fixed-sized-flexbox-006-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/autoheight-regions-in-fixed-sized-flexbox-006-ref.xht new file mode 100644 index 00000000000..640d879dca0 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/autoheight-regions-in-fixed-sized-flexbox-006-ref.xht @@ -0,0 +1,30 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea" /> + <style> + .block { + display: inline-block; + height: 80px; + width: 80px; + } + + .blue { + background-color: blue; + } + + .green { + background-color: green; + } + </style> + </head> + <body> + <ul> + <li>Test passes if you see a rectangle having the left half colored green and the right half colored + blue.</li> + <li>You shouldn't see any red.</li> + </ul> + <div class="block green"></div><div class="block blue"></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/autoheight-regions-in-fixed-sized-flexbox-007-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/autoheight-regions-in-fixed-sized-flexbox-007-ref.xht new file mode 100644 index 00000000000..037928585bf --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/autoheight-regions-in-fixed-sized-flexbox-007-ref.xht @@ -0,0 +1,25 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea" /> + <style> + .stripe { + background-color: green; + height: 20px; + width: 80px; + margin-top: 39px; + margin-bottom: 46px; + } + </style> + </head> + <body> + <ul> + <li>Test passes if you see you three identical green stripes.</li> + <li>You shouldn't see any red.</li> + </ul> + <div class="stripe"></div> + <div class="stripe"></div> + <div class="stripe"></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/autoheight-regions-in-fixed-sized-flexbox-008-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/autoheight-regions-in-fixed-sized-flexbox-008-ref.xht new file mode 100644 index 00000000000..65d9a0fa5b9 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/autoheight-regions-in-fixed-sized-flexbox-008-ref.xht @@ -0,0 +1,24 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea" /> + <style> + .stripe { + background-color: green; + height: 20px; + width: 80px; + margin-bottom: 20px; + } + </style> + </head> + <body> + <ul> + <li>Test passes if you see three horizontal green stripes.</li> + <li>You shouldn't see any red.</li> + </ul> + <div class="stripe"></div> + <div class="stripe"></div> + <div class="stripe"></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/column-flexbox-break-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/column-flexbox-break-ref.xht new file mode 100644 index 00000000000..95429faf73f --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/column-flexbox-break-ref.xht @@ -0,0 +1,30 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea" /> + <style> + .first, .second { + width: 80px; + background-color: green; + margin-bottom: 20px; + } + + .first { + height: 45px; + } + + .second { + height: 35px; + } + </style> + </head> + <body> + <ul> + <li>Test passes if you see two horizontal green stripes.</li> + <li>You shouldn't see any red.</li> + </ul> + <div class="first"></div> + <div class="second"></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/css-box-justify-content-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/css-box-justify-content-ref.xht new file mode 100644 index 00000000000..d651d786256 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/css-box-justify-content-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox |css-box-justufy-content</title> +<link href="ava656094@gmail.com" rel="author" title="xiaoxia" /> +<style> +#flexbox { + background: green; + display: inline-block; + width: 300px; + height: 40px; + text-align:right; +} +.item{ + display: inline-block; + align:right; + width:50px; + height: 30px; + } +</style> + +</head><body><p>This test passes if the DIV5's position in the end and the div is Horizontal layout</p> +<div id="flexbox"> + <div style="background-color: rgb(242, 210, 80); color: rgb(41, 119, 248);" class="item">DIV1</div> + <div style="background-color: rgb(110, 8, 7); color: rgb(162, 152, 22);" class="item">DIV2</div> + <div style="background-color: rgb(215, 172, 243); color: rgb(74, 123, 110);" class="item">DIV3</div> + <div style="background-color: rgb(242, 133, 80); color: rgb(41, 119, 248);" class="item">DIV4</div> + <div style="background-color: rgb(242, 50, 80); color: rgb(41, 119, 248);" class="item">DIV5</div> +</div></body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/css-flexbox-column-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/css-flexbox-column-ref.xht new file mode 100644 index 00000000000..4f4b322478b --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/css-flexbox-column-ref.xht @@ -0,0 +1,33 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <meta charset="utf-8" /> + <title>CSS Reftest Reference</title> + <link href="mailto:info@ogaoga.org" rel="author" title="Tsutomu ogaoga Ogasawara" /> + <style type="text/css"> + .container { + color: white; + width: 9em; + } + .item { + -webkit-writing-mode: vertical-rl; + writing-mode: vertical-rl; + background: green; + height: 4em; + width: 1.5em; + float: right; + } + </style> +</head> +<body> + <p>The test passes if you see a tall green box with pairs of the digits 1-9 and a-i listed right to left in two columns.</p> + <div class="container"> + <div class="item">１２３</div> + <div class="item">ａｂｃ</div> + <div class="item">４５６</div> + <div class="item">ｄｅｆ</div> + <div class="item">７８９</div> + <div class="item">ｇｈｉ</div> + </div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/css-flexbox-height-animation-stretch-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/css-flexbox-height-animation-stretch-ref.xht new file mode 100644 index 00000000000..0fb11afbb7d --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/css-flexbox-height-animation-stretch-ref.xht @@ -0,0 +1,22 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Flexbox Test: Items stretch correctly while content is animating</title> + <link href="mailto:micky2be@gmail.com" rel="author" title="Micky Brunetti" /> + <style> + @keyframes resize { + 0% {height: 100px;} + 100% {height: 50px;} + } + .test { + height: 100px; + width: 200px; + background-color: green; + animation: resize 500ms infinite alternate; + } + </style> +</head> +<body> + <p>The test passes if you keep seeing a green rectangle and no red.</p> + <div class="test"></div> + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/css-flexbox-img-expand-evenly-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/css-flexbox-img-expand-evenly-ref.xht new file mode 100644 index 00000000000..25b1de545d1 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/css-flexbox-img-expand-evenly-ref.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:agektmr+github@gmail.com" rel="author" title="Eiji Kitamura" /> + <style type="text/css"> + + /* ADD STYLE BLOCK HERE (PREFERRABLE TO INLINE STYLES) */ + div.flexbox { + height: 50px; + width: 300px; + border: 2px dotted black; + } + img { + width: 98px; + height: 48px; + background: purple; + border: 1px solid white; + } + + </style> +</head> +<body> + <p>3 square images fill out border.</p> + + <!-- PAGE CONTENT --> + <div class="flexbox"> + <img src="support/solidblue.png" /> + <img src="support/solidblue.png" /> + <img src="support/solidblue.png" /> + </div> + + + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/css-flexbox-row-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/css-flexbox-row-ref.xht new file mode 100644 index 00000000000..0357fe55d14 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/css-flexbox-row-ref.xht @@ -0,0 +1,29 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <meta charset="utf-8" /> + <title>CSS Reftest Reference</title> + <link href="mailto:info@ogaoga.org" rel="author" title="Tsutomu ogaoga Ogasawara" /> + <style type="text/css"> + .container { + color: white; + } + .item { + writing-mode: vertical-rl; + background: green; + height: 3em; + width: 3em; + } + </style> +</head> +<body> + <p>The test passes if you see a tall green box with pairs of the 1-9 and a-i listed top to bottom in two columns.</p> + + <div class="container"> + <div class="item">１２３<br />ａｂｃ</div> + <div class="item">４５６<br />ｄｅｆ</div> + <div class="item">７８９<br />ｇｈｉ</div> + </div> + + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/css-flexbox-test1-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/css-flexbox-test1-ref.xht new file mode 100644 index 00000000000..22db779d807 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/css-flexbox-test1-ref.xht @@ -0,0 +1,30 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <meta charset="utf-8" /> + <title>CSS Reftest Reference</title> + <link href="mailto:info@ogaoga.org" rel="author" title="Tsutomu ogaoga Ogasawara" /> + <style type="text/css"> + .container { + color: white; + } + .item { + writing-mode: vertical-rl; + background: green; + height: 3em; + width: 3em; + } + </style> +</head> +<body> + + <p>The test passes if you see a tall green box with pairs of the digits 1-9 listed top to bottom in two columns.</p> + + <div class="container"> + <div class="item">１２３<br />１２３</div> + <div class="item">４５６<br />４５６</div> + <div class="item">７８９<br />７８９</div> + </div> + + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-align-items-center-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-align-items-center-ref.xht new file mode 100644 index 00000000000..0aaa6858ec8 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-align-items-center-ref.xht @@ -0,0 +1,66 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Flex-basis Test</title> + <link href="mailto:zhangcs_423@163.com" rel="author" title="Chunsheng Zhang" /> + <style type="text/css"> + #container { + display: flex; + justify-content: center; + align-items: center; + border: 5px solid green; + width: 600px; + height: 200px; + padding: 5px; + border-radius: 3px; + position: absolute; + top: 70px; + left: 10px; + } + #a { + top: 150px; + left: 230px; + border: 2px dotted blue; + background: green; + border-radius: 3px; + padding: 10px; + width: 30px; + height: 40px; + text-align: center; + flex: none; + } + #b { + top: 150px; + left: 283px; + border: 2px dotted blue; + background: green; + border-radius: 3px; + padding: 10px; + width: 30px; + height: 40px; + text-align: center; + flex: none; + } + #c { + top: 150px; + left: 336px; + border: 2px dotted blue; + background: green; + border-radius: 3px; + padding: 10px; + width: 30px; + height: 40px; + text-align: center; + flex: none; + } + </style> + </head> + <body> + <p>This case tests that flex items center</p> + <p>The test passes if there is no red</p> + <section id="container"> + </section> + <div style="position:absolute" id="a"></div> + <div style="position:absolute" id="b"></div> + <div style="position:absolute" id="c"></div> + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-box-float-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-box-float-ref.xht new file mode 100644 index 00000000000..a0ccc3c7932 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-box-float-ref.xht @@ -0,0 +1,40 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>flexible box flex item float effect</title> + <link href="mailto:liz@oupeng.com" rel="author" title="zhouli" /> + <style> + #myDiv{ + position: relative; + } + #myDiv p{ + width: 300px; + height: 30px; + display: inline-block; + margin: 0; + } + #first-p{ + background-color: green; + } + #second-p{ + background-color: blue; + } + #myDiv #fail-flag{ + width: 600px; + background-color: red; + position: absolute; + left: 0; + top: 0; + z-index: -1; + } + </style> +</head> +<body> + <p>'float' have no effect on a flex item.</p> + <p>The test passes if there is a green square, a blue square and no red square.</p> +<div id="myDiv"> + <p id="first-p"> </p><p id="second-p"> </p><p id="fail-flag"> </p> +</div> +<script> +</script> + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-box-wrap-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-box-wrap-ref.xht new file mode 100644 index 00000000000..f6a9cf9b742 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-box-wrap-ref.xht @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Flexbox Test: flex-wrap: wrap</title> + <link href="mailto:tokuda109@gmail.com" rel="author" title="Tsuyoshi Tokuda" /> + <style type="text/css"> + + .box { + margin: 0; + padding-left: 0; + width: 200px; + } + .item { + float: left; + list-style-type: none; + width: 120px; + height: 100px; + background-color: green; + } + + </style> +</head> +<body> + <p>There should be a green block with no red.</p> + + <ul class="box"> + <li class="item">width: 120px</li> + <li class="item">width: 120px</li> + </ul> + + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-container-margin-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-container-margin-ref.xht new file mode 100644 index 00000000000..38187fe38ca --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-container-margin-ref.xht @@ -0,0 +1,33 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> +<title>CSS Test: flex-container-margin-not-collapse-with-content-margin</title> +<link href="http://www.github.com/sskyy" rel="author" title="houzhenyu" /> +<style> + .flex-container{ + display:block; + margin:20px; + background: #333; + line-height: 0px; + } + .flex-item{ + display: inline-block; + width:50px; + height:50px; + margin:20px 20px; + background: #eee; + } + .flex-item.first{ + margin-left:20px; + } + .flex-item.last{ + margin-right: 20px; + } +</style> +</head> +<body> + <div class="flex-container"> + <div class="flex-item first"></div><div class="flex-item"></div><div class="flex-item last"></div> + </div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-direction-modify.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-direction-modify.xht new file mode 100644 index 00000000000..409c288e79e --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-direction-modify.xht @@ -0,0 +1,43 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> +<title>CSS Test: flex flow direction</title> +<link href="http://www.github.com/sskyy" rel="author" title="houzhenyu" /> +<style> + .flex-container{ + display: flex; + margin:20px; + background: #333; + } + .flex-item{ + display: inline-block; + width:50px; + height:50px; + margin:20px; + background: #eee; + line-height: 50px; + text-align: center; + } + + + .flex-container.flex-direction-row{ + flex-direction : row; + } + + .flex-container.flex-direction-row-reverse{ + flex-direction : row-reverse; + } + + .flex-container.flex-direction-column{ + flex-direction : column; + } + .flex-container.flex-direction-column-reverse{ + flex-direction : column-reverse; + } +</style> +</head> +<body> + <h1>flex-direction:row</h1> + <div class="flex-container flex-direction-row" id="flex_container"><div class="flex-item">1</div><div class="flex-item">2</div><div class="flex-item">3</div></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-direction-with-element-insert.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-direction-with-element-insert.xht new file mode 100644 index 00000000000..6c1180c7bda --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-direction-with-element-insert.xht @@ -0,0 +1,76 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> +<title>CSS Test: flex flow direction</title> +<link href="http://www.github.com/sskyy" rel="author" title="houzhenyu" /> +<style> + .flex-container{ + display:block; + margin:20px; + background: #333; + line-height: 0px; + } + .flex-item{ + display: inline-block; + width:50px; + height:50px; + margin:20px 20px; + background: #eee; + line-height: 50px; + text-align: center; + } + + .flex-container.flex-direction-row{ + flex-direction : row; + } + .flex-container.flex-direction-row-reverse{ + text-align: right; + } + + .flex-container.flex-direction-column{ + padding:20px 0px; + } + + .flex-container.flex-direction-column .flex-item{ + display: block; + margin:40px 20px; + } + + .flex-container.flex-direction-column .flex-item.first{ + margin-top:0px; + } + .flex-container.flex-direction-column .flex-item.last{ + margin-bottom:0px; + } + + .flex-container.flex-direction-column-reverse{ + padding:20px 0px; + } + + .flex-container.flex-direction-column-reverse .flex-item{ + display: block; + margin:40px 20px; + } + + .flex-container.flex-direction-column-reverse .flex-item.first{ + margin-top:0px; + } + .flex-container.flex-direction-column-reverse .flex-item.last{ + margin-bottom:0px; + } +</style> +</head> +<body> + <h1>flex-direction:row</h1> + <div class="flex-container flex-direction-row"><div class="flex-item">1</div><div class="flex-item">2</div><div class="flex-item">3</div><div class="flex-item">new</div></div> + + <h1>flex-direction:row-reverse</h1> + <div class="flex-container flex-direction-row-reverse"><div class="flex-item">new</div><div class="flex-item">3</div><div class="flex-item">2</div><div class="flex-item">1</div></div> + + <h1>flex-direction:column</h1> + <div class="flex-container flex-direction-column"><div class="flex-item first">1</div><div class="flex-item">2</div><div class="flex-item">3</div><div class="flex-item last">new</div></div> + + <h1>flex-direction:column-reverse</h1> + <div class="flex-container flex-direction-column-reverse"><div class="flex-item first">new</div><div class="flex-item">3</div><div class="flex-item">2</div><div class="flex-item last">1</div></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-direction.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-direction.xht new file mode 100644 index 00000000000..a046951996c --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-direction.xht @@ -0,0 +1,76 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> +<title>CSS Test: flex flow direction</title> +<link href="http://www.github.com/sskyy" rel="author" title="houzhenyu" /> +<style> + .flex-container{ + display:block; + margin:20px; + background: #333; + line-height: 0px; + } + .flex-item{ + display: inline-block; + width:50px; + height:50px; + margin:20px 20px; + background: #eee; + line-height: 50px; + text-align: center; + } + + .flex-container.flex-direction-row{ + flex-direction : row; + } + .flex-container.flex-direction-row-reverse{ + text-align: right; + } + + .flex-container.flex-direction-column{ + padding:20px 0px; + } + + .flex-container.flex-direction-column .flex-item{ + display: block; + margin:40px 20px; + } + + .flex-container.flex-direction-column .flex-item.first{ + margin-top:0px; + } + .flex-container.flex-direction-column .flex-item.last{ + margin-bottom:0px; + } + + .flex-container.flex-direction-column-reverse{ + padding:20px 0px; + } + + .flex-container.flex-direction-column-reverse .flex-item{ + display: block; + margin:40px 20px; + } + + .flex-container.flex-direction-column-reverse .flex-item.first{ + margin-top:0px; + } + .flex-container.flex-direction-column-reverse .flex-item.last{ + margin-bottom:0px; + } +</style> +</head> +<body> + <h1>flex-direction:row</h1> + <div class="flex-container flex-direction-row"><div class="flex-item">1</div><div class="flex-item">2</div><div class="flex-item">3</div></div> + + <h1>flex-direction:row-reverse</h1> + <div class="flex-container flex-direction-row-reverse"><div class="flex-item">3</div><div class="flex-item">2</div><div class="flex-item">1</div></div> + + <h1>flex-direction:column</h1> + <div class="flex-container flex-direction-column"><div class="flex-item first">1</div><div class="flex-item">2</div><div class="flex-item last">3</div></div> + + <h1>flex-direction:column-reverse</h1> + <div class="flex-container flex-direction-column-reverse"><div class="flex-item first">3</div><div class="flex-item">2</div><div class="flex-item last">1</div></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-flexitem-childmargin-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-flexitem-childmargin-ref.xht new file mode 100644 index 00000000000..8d85b885325 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-flexitem-childmargin-ref.xht @@ -0,0 +1,46 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Test: childNodes' 'margin' property of flex item'</title> + <link href="mailto:csf178@gmail.com" rel="author" title="Shaofei Cheng" /> + <meta content="" name="flags" /> + <style> + #test + { + background: blue; + display: block; + height:300px; + position:relative; + } + #test>div.flex { + width: 100px; + background:red; + } + #test>div.fixed + { + height: 300px; + flex:1; + background:red; + } + #test p + { + margin:200px 0 0 0; + } + </style> + +</head> +<body> +<div id="test"> + <div class="fixed"> + <p style="width:100px;height:100px;background:orange;position:absolute;left:0px;bottom:0px;"> + a + </p> + </div> + <div class="flex"> + <p style="width:100px;height:100px;background:green;position:absolute;right:0px;bottom:0px;"> + b + </p> + </div> +</div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-flexitem-percentage-prescation-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-flexitem-percentage-prescation-ref.xht new file mode 100644 index 00000000000..16863b64369 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-flexitem-percentage-prescation-ref.xht @@ -0,0 +1,31 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Test: childNodes' 'margin' property of flex item'</title> + <link href="mailto:csf178@gmail.com" rel="author" title="Shaofei Cheng" /> + <meta content="" name="flags" /> + <style> + #test + { + background: blue; + position:relative; + height:300px; + width:101px; + } + p + { + position:absolute; + margin:0 0 0 0; + } + </style> + +</head> +<body> +<div id="test"> + <div id="test"> + <p style="background:green;top:0px;height:300px;left:0px;height:300px;width:50px;">damer</p> + <p style="top:0px;left:50px;height:300px;background:Red;width:51px;">damer</p> + </div> +</div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-flow-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-flow-001-ref.xht new file mode 100644 index 00000000000..124b836a68b --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-flow-001-ref.xht @@ -0,0 +1,21 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /> +<title>CSS Flexbox Test Reference File</title> +<link href="http://www.intel.com" rel="author" title="Intel" /> +<style> + div { + background-color: green; + float: left; + height: 50px; + width: 25px; + } +</style> +</head><body> + <p>Test passes if there is a filled green rectangle whose width is greater than height + and the number within rectangle is '1 2 3 4' from left to right.</p> + <div>1</div> + <div>2</div> + <div>3</div> + <div>4</div> + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-flow-002-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-flow-002-ref.xht new file mode 100644 index 00000000000..507a544c450 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-flow-002-ref.xht @@ -0,0 +1,24 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /> +<title>CSS Flexbox Test Reference File</title> +<link href="http://www.intel.com" rel="author" title="Intel" /> +<style> + div { + background-color: green; + height: 50px; + width: 50px; + } + .float { + margin-left: 50px; + margin-top: -50px; + } +</style> +</head><body> + <p>Test passes if there is a filled green square and <strong>no red</strong>, the number within square is '1 2 3 4' + from left to right, top to bottom.</p> + <div>1</div> + <div class="float">2</div> + <div>3</div> + <div class="float">4</div> + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-flow-007-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-flow-007-ref.xht new file mode 100644 index 00000000000..d7af0f54de2 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-flow-007-ref.xht @@ -0,0 +1,19 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /> +<title>CSS Flexbox Test Reference File</title> +<link href="http://www.intel.com" rel="author" title="Intel" /> +<style> + div { + background-color: green; + height: 25px; + width: 100px; + } +</style> +</head><body> + <p>Test passes if there is a filled green square and no red, the number within square is '1 2 3 4' from top to bottom.</p> + <div>1</div> + <div>2</div> + <div>3</div> + <div>4</div> + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-grow-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-grow-001-ref.xht new file mode 100644 index 00000000000..021bca2f63b --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-grow-001-ref.xht @@ -0,0 +1,46 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flex-grow-001-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Hanrui Gao" href="mailto:hanrui.gao@gmail.com" /> + <style type="text/css"><![CDATA[ + #container { + width: 240px; + height: 60px; + border: 1px solid #000; + } + #container > div { + height: 100%; + float: left; + } + #child_1 { + width: 30px; + background-color: green; + } + #child_2 { + width: 80px; + background-color: blue; + } + #child_3 { + width: 130px; + background-color: gray; + } + ]]></style> + </head> + <body> + <div id="container"> + <div id="child_1"></div> + <div id="child_2"></div> + <div id="child_3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-items-flexibility.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-items-flexibility.xht new file mode 100644 index 00000000000..15602acb5e0 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-items-flexibility.xht @@ -0,0 +1,47 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Flex-basis Test</title> + <link href="mailto:zhangcs_423@163.com" rel="author" title="Chunsheng Zhang" /> + <style type="text/css"> + #container { + display: flex; + justify-content: center; + align-items: center; + border: 5px solid green; + width: 600px; + height: 200px; + padding: 5px; + border-radius: 3px; + position: absolute; + top: 70px; + left: 10px; + } + div { + padding: 10px; + width: 30px; + height: 40px; + text-align: center; + flex: 1 0 auto; + } + #flex { + border: 2px dotted blue; + background: green; + border-radius: 3px; + flex: 2 0 auto; + position: absolute; + top: 70px; + left: 160px; + width: 254px; + } + </style> + </head> + <body> + <p>This case tests that flex items flexibility</p> + <p>The test passes if there is no red</p> + <section id="container"> + <div></div> + <div id="flex"></div> + <div></div> + </section> + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-margin-no-collapse-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-margin-no-collapse-ref.xht new file mode 100644 index 00000000000..2b962ba1b77 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-margin-no-collapse-ref.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Flexible Box Reference File</title> + <link href="mailto:phuangce@gmail.com" rel="author" title="Ping Huang" /> + <style type="text/css"> + #container { + position: absolute; + top: 100px; + left: 10px; + width: 200px; + height: 300px; + } + + .box { + width: 100px; + height: 100px; + background-color: green; + } + + #box1 { + margin: 50px 0; + } + + #box2 { + margin: 100px 0; + } + + </style> +</head> +<body> + <p>The test passes if there are two green boxes and no red.</p> + <div id="container"> + <div class="box" id="box1"></div> + <div class="box" id="box2"></div> + </div> + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-order-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-order-ref.xht new file mode 100644 index 00000000000..1ba69136aa2 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-order-ref.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference: flex order</title> + <link href="mailto:mitsuteru.s@gmail.com" rel="author" title="Mitsuteru Sawa" /> + <style> + #container { display: -webkit-flex; } + #highOrdinal { + background: lime; + height: 100px; width: 100px; + } + #middleOrdinal { + background: orange; + height: 100px; width: 100px; + } + #lowOrdinal { + background: red; + height: 100px; width: 100px; + } + </style> +</head> +<body> + <div id="container"> + <div id="highOrdinal"></div> + <div id="middleOrdinal"></div> + <div id="lowOrdinal"></div> + </div> + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-vertical-align-effect.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-vertical-align-effect.xht new file mode 100644 index 00000000000..305b9ab9aad --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flex-vertical-align-effect.xht @@ -0,0 +1,22 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Test: 'display' property set to 'flex'</title> + <link href="mailto:zhaohua.design@163.com" rel="author" title="Hua Zhao" /> + + <style type="text/css"> + input{ + margin:0; + padding:0; + vertical-align:top; + float: left; + } + </style> +</head> +<body> + + <div id="container"> + <input type="text" value="input1" /> + <input type="radio" /> + </div> + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-abspos-child-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-abspos-child-001-ref.xht new file mode 100644 index 00000000000..4e904a8aa1d --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-abspos-child-001-ref.xht @@ -0,0 +1,25 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" /> + <meta charset="utf-8" /> + <style> + .tealBlock { + background: teal; + width: 20px; + height: 20px; + margin-bottom: 5px; + } + </style> +</head> +<body> + <div class="tealBlock"></div> + <div class="tealBlock"></div> + <div class="tealBlock"></div> + <div class="tealBlock"></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-content-horiz-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-content-horiz-001-ref.xht new file mode 100644 index 00000000000..0cb217e24d4 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-content-horiz-001-ref.xht @@ -0,0 +1,136 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-align-content-horiz-001-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + width: 20px; + height: 200px; + margin-right: 2px; + float: left; + background: lightgray; + } + div.a { + width: 20px; + height: 10px; + background: lightgreen; + } + div.b { + width: 20px; + height: 30px; + background: pink; + } + div.c { + width: 20px; + height: 40px; + background: orange; + } + + /* Inside of 'b': */ + div.fixedSizeChild { + width: 10px; + height: 30px; + background: purple; + } + </style> + </head> + <body> + + <!-- default (stretch) --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/> + <div class="b" style="margin-top:80px; height:110px"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox"> + <div class="a"/> + <div class="b" style="margin-top:40px; height: 70px"><div class="fixedSizeChild"/></div> + <div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + <div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 160px"/> + <div class="b"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 120px"/> + <div class="b"><div class="fixedSizeChild"/></div> + <div class="c"/> + </div> + + <!-- center --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 80px"/> + <div class="b"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 60px"/> + <div class="b"><div class="fixedSizeChild"/></div> + <div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/> + <div class="b" style="margin-top: 160px"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox"> + <div class="a"/> + <div class="b" style="margin-top: 60px"><div class="fixedSizeChild"/></div> + <div class="c" style="margin-top: 60px"/> + </div> + + <!-- space-around --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 40px"/> + <div class="b" style="margin-top: 80px"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 20px"/> + <div class="b" style="margin-top: 40px"><div class="fixedSizeChild"/></div> + <div class="c" style="margin-top: 40px"/> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-content-vert-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-content-vert-001-ref.xht new file mode 100644 index 00000000000..2b8a854540d --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-content-vert-001-ref.xht @@ -0,0 +1,139 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-align-content-vert-001-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + width: 200px; + margin-bottom: 2px; + background: lightgray; + height: 20px; + clear: all; + } + div.a { + width: 10px; + height: 20px; + background: lightgreen; + float: left; + } + div.b { + width: 30px; + height: 20px; + background: pink; + float: left; + } + div.c { + width: 40px; + height: 20px; + background: orange; + float: left; + } + + /* Inside of 'b': */ + div.fixedSizeChild { + width: 30px; + height: 10px; + background: purple; + } + </style> + </head> + <body> + + <!-- default (stretch) --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/> + <div class="b" style="margin-left:80px; width:110px"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox"> + <div class="a"/> + <div class="b" style="margin-left: 40px; width: 70px"><div class="fixedSizeChild"/></div> + <div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox"> + <div class="a"/> + <div class="b"><div class="fixedSizeChild"/></div> + <div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 160px"/> + <div class="b"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 120px"/> + <div class="b"><div class="fixedSizeChild"/></div> + <div class="c"/> + </div> + + <!-- center --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 80px"/> + <div class="b"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 60px"/> + <div class="b"><div class="fixedSizeChild"/></div> + <div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/> + <div class="b" style="margin-left: 160px"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox"> + <div class="a"/> + <div class="b" style="margin-left: 60px"><div class="fixedSizeChild"/></div> + <div class="c" style="margin-left: 60px"/> + </div> + + <!-- space-around --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 40px"/> + <div class="b" style="margin-left: 80px"><div class="fixedSizeChild"/></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 20px"/> + <div class="b" style="margin-left: 40px"><div class="fixedSizeChild"/></div> + <div class="c" style="margin-left: 40px"/> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-baseline-horiz-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-baseline-horiz-001-ref.xht new file mode 100644 index 00000000000..c08a08f5adb --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-baseline-horiz-001-ref.xht @@ -0,0 +1,64 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><!-- Reference case for behavior of the 'baseline' value for align-items and + align-self. + + NOTE: For multi-line 'display: block' elements in the testcase (and inline + content that gets wrapped in an anonymous block), we add an inline-table + wrapper here in the reference case, so that we get first-line baseline + alignment instead of the last-line baseline-alignment that an inline-block + would give us. +--><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-align-self-baseline-horiz-001-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + display: block; + border: 1px dashed blue; + font: 14px sans-serif; + } + + div { display: inline-block; } + table { display: inline-table; } + + .big { + height: 100px; + font: 24px sans-serif; + margin-top: 20px; + } + .super { + vertical-align: super; + font-size: 12px; + } + .sub { + vertical-align: sub; + font-size: 12px; + } + + .lime { background: lime; } + .yellow { background: yellow; } + .orange { background: orange; } + .pink { background: pink; } + .aqua { background: aqua; } + .tan { background: tan; } + </style> + </head> + <body> + <div class="flexbox"> + <div class="lime">blk_1line</div><table cellspacing="0" cellpadding="0" class="yellow">blk<br/>2lines</table><div class="orange"><span class="super">super</span></div><div class="pink"><span class="sub">sub</span></div><table cellspacing="0" cellpadding="0" class="aqua big">big<br/>text<br/>3lines</table><table class="tan" cellspacing="0" cellpadding="0"> + <i>ital<br/>ic</i> + </table> + </div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-baseline-horiz-002-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-baseline-horiz-002-ref.xht new file mode 100644 index 00000000000..37837ac5de6 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-baseline-horiz-002-ref.xht @@ -0,0 +1,89 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-align-self-baseline-horiz-002-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + width: 40px; + height: 40px; + border: 1px solid gray; + margin: 5px; /* just for visual separation */ + float: left; + } + + .flexbox > * { + background: yellow; + border: 1px solid black; + height: 20px; + } + </style> + </head> + <body> + <!-- ZEROTH ROW: NO MARGINS --> + <!-- No margins on flex item: --> + <div class="flexbox"> + <div>a</div> + </div> + + + <!-- FIRST ROW: SETTING MARGIN-TOP: --> + <br style="clear: both"/> + + <!-- auto: --> + <div class="flexbox"> + <div style="margin-top: 18px">a</div> + </div> + + <!-- Negative: --> + <div class="flexbox"> + <div style="margin-top: -4px">a</div> + </div> + + <!-- Small: --> + <div class="flexbox"> + <div style="margin-top: 4px">a</div> + </div> + + <!-- Large (pushing us out of container): --> + <div class="flexbox"> + <div style="margin-top: 25px">a</div> + </div> + + + <!-- SECOND ROW: SETTING MARGIN-BOTTOM: --> + <br style="clear: both"/> + + <!-- auto: --> + <div class="flexbox"> + <div>a</div> + </div> + + <!-- Negative: --> + <div class="flexbox"> + <div>a</div> + </div> + + <!-- Small: --> + <div class="flexbox"> + <div>a</div> + </div> + + <!-- Large: --> + <div class="flexbox"> + <div>a</div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-baseline-horiz-003-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-baseline-horiz-003-ref.xht new file mode 100644 index 00000000000..22d567e0a78 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-baseline-horiz-003-ref.xht @@ -0,0 +1,89 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-align-self-baseline-horiz-003-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + width: 40px; + height: 40px; + border: 1px solid gray; + margin: 5px; /* just for visual separation */ + float: left; + } + + .flexbox > * { + background: yellow; + border: 1px solid black; + height: 20px; + } + </style> + </head> + <body> + <!-- ZEROTH ROW: NO MARGINS --> + <!-- No margins on flex item: --> + <div class="flexbox"> + <div style="margin-top: 18px">a</div> + </div> + + + <!-- FIRST ROW: SETTING MARGIN-TOP: --> + <br style="clear: both"/> + + <!-- auto: --> + <div class="flexbox"> + <div style="margin-top: 18px">a</div> + </div> + + <!-- Negative: --> + <div class="flexbox"> + <div style="margin-top: 18px">a</div> + </div> + + <!-- Small: --> + <div class="flexbox"> + <div style="margin-top: 18px">a</div> + </div> + + <!-- Large (pushing us out of container): --> + <div class="flexbox"> + <div style="margin-top: 18px">a</div> + </div> + + + <!-- SECOND ROW: SETTING MARGIN-BOTTOM: --> + <br style="clear: both"/> + + <!-- auto: --> + <div class="flexbox"> + <div>a</div> + </div> + + <!-- Negative: --> + <div class="flexbox"> + <div style="margin-top: 22px">a</div> + </div> + + <!-- Small: --> + <div class="flexbox"> + <div style="margin-top: 14px">a</div> + </div> + + <!-- Large: --> + <div class="flexbox"> + <div style="margin-top: -7px">a</div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-baseline-horiz-004-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-baseline-horiz-004-ref.xht new file mode 100644 index 00000000000..acb3f28856c --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-baseline-horiz-004-ref.xht @@ -0,0 +1,62 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><!-- Reference case for behavior of the 'baseline' value for align-items and + align-self, in a multi-line flex container. + + This reference case just consists of three single-line flex containers, + to match the testcase's one flex container with three flex lines. +--><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-align-self-baseline-horiz-004-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + display: flex; + align-items: baseline; + width: 90px; + } + + .flexbox > * { + width: 28px; + background: yellow; + border: 1px solid black; + } + + .big { font: 24px sans-serif; } + .medium { font: 14px sans-serif; } + .small { font: 8px sans-serif; } + + </style> + </head> + <body> + <div class="flexbox"> + <!-- First flex line: Just 3 different sizes of text --> + <div class="big">a</div> + <div class="small">b</div> + <div class="medium">c</div> + </div> + <div class="flexbox"> + <!-- Second flex line: different margin/padding amounts on each item, + and one non-baseline-aligned item.--> + <div class="medium" style="padding-top: 10px">d</div> + <div class="medium" style="margin-bottom: 8px">e</div> + <div class="medium" style="align-self: stretch">f</div> + </div> + <div class="flexbox"> + <!-- Third flex line: other margin/padding amounts on each item --> + <div class="small" style="margin-top: 20px">g</div> + <div class="big">h</div> + <div class="medium" style="padding-bottom: 6px">i</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-baseline-horiz-005-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-baseline-horiz-005-ref.xht new file mode 100644 index 00000000000..0e4908cabe2 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-baseline-horiz-005-ref.xht @@ -0,0 +1,64 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><!-- Reference case for behavior of the 'baseline' value for align-items and + align-self, in a multi-line flex container. + + This reference case just consists of three single-line flex containers, + to match the testcase's one flex container with three flex lines. +--><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-align-self-baseline-horiz-005-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + display: flex; + align-items: baseline; + width: 90px; + } + + .flexbox > * { + width: 28px; + background: yellow; + border: 1px solid black; + } + + .big { font: 24px sans-serif; } + .medium { font: 14px sans-serif; } + .small { font: 8px sans-serif; } + + </style> + </head> + <body> + <!-- Note: The lines are reversed here with respect to the testcase, + due to the testcase's "wrap-reverse". --> + <div class="flexbox"> + <!-- Third flex line: other margin/padding amounts on each item --> + <div class="small" style="margin-top: 20px">g</div> + <div class="big">h</div> + <div class="medium" style="padding-bottom: 6px">i</div> + </div> + <div class="flexbox"> + <!-- Second flex line: different margin/padding amounts on each item, + and one non-baseline-aligned item.--> + <div class="medium" style="padding-top: 10px">d</div> + <div class="medium" style="margin-bottom: 8px">e</div> + <div class="medium" style="align-self: stretch">f</div> + </div> + <div class="flexbox"> + <!-- First flex line: Just 3 different sizes of text --> + <div class="big">a</div> + <div class="small">b</div> + <div class="medium">c</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-horiz-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-horiz-001-ref.xht new file mode 100644 index 00000000000..92e4aa64010 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-horiz-001-ref.xht @@ -0,0 +1,94 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><!-- Reference case for align-items / align-self behavior, using floated divs + in place of flex items and using margin-top in place of the align-items / + align-self properties. --><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-align-self-horiz-001-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + border: 1px dashed blue; + height: 200px; + width: 560px; + font-size: 10px; + line-height: 10px; + } + + .flexbox > div { + width: 40px; + float: left; + } + + .big { + height: 100px; + font-size: 20px; + line-height: 20px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + } + .flex-end { + background: orange; + } + .center { + background: lightblue; + } + .baseline { + background: teal; + } + .stretch { + background: pink; + } + .auto { + background: yellow; + } + .unspecified { + background: lightgreen; + } + .initial { + background: aqua; + } + .inherit { + background: violet; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end" style="margin-top: 190px">end</div> + <div class="flex-end big" style="margin-top: 100px">a b c d e f</div> + <div class="center" style="margin-top: 95px">center</div> + <div class="center big" style="margin-top: 50px">a b c d e f</div> + <!-- We use inline-blocks inside of a wrapper-block as references for the + baseline-aligned flex items, since inline-blocks get + baseline-aligned in block layout. We also need to specify the widths + manually here since the "flexbox > div" child-selector doesn't + handle these guys (since they're grandchildren). + --> + <div style="width: 80px"> + <div class="baseline" style="width: 40px; display: inline-block">base</div><div class="baseline big" style="width: 40px; display: inline-block">abc</div> + </div> + <div class="stretch" style="height: 100%">stretch</div> + <div class="stretch big">a b c d e f</div> + <div class="auto" style="margin-top: 95px">auto</div> + <div class="unspecified" style="margin-top: 95px">unspec</div> + <div class="initial" style="margin-top: 95px">initial</div> + <div class="inherit" style="margin-top: 190px">inherit</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-horiz-002-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-horiz-002-ref.xht new file mode 100644 index 00000000000..508b6d58cfb --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-horiz-002-ref.xht @@ -0,0 +1,88 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><!-- Reference case for align-items / align-self behavior, using floated divs + in place of flex items and using relative positioning in place of the + align-items / align-self properties. --><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-align-self-horiz-002-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + border: 1px dashed blue; + height: 200px; + display: inline-block; + font-size: 10px; + line-height: 10px; + vertical-align: top; + } + + .flexbox > div { float: left } + .flex-start, .flex-end, .center, .baseline, .stretch, + .auto, .unspecified, .initial, .inherit { + width: 40px; + margin: 1px 2px 3px 4px; + border-width: 2px 3px 4px 5px; + padding: 3px 4px 5px 6px; + position: relative; + border-style: dotted; + } + + .big { + height: 100px; + font-size: 20px; + line-height: 20px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + } + .flex-end { + background: orange; + } + .center { + background: lightblue; + } + .baseline { + background: teal; + } + .stretch { + background: pink; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end" style="top: 172px">end</div> + <div class="flex-end big" style="top: 82px">a b c d e f</div> + <div class="center" style="top: 86px">center</div> + <div class="center big" style="top: 41px">a b c d e f</div> + </div> + <br/> + <div class="flexbox"> + <!-- We use inline-blocks inside of a wrapper-block as references for the + baseline-aligned flex items, since inline-blocks get + baseline-aligned in block layout. We also need to specify the widths + manually here since the "flexbox > div" child-selector doesn't + handle these guys (since they're grandchildren). + --> + <div> + <div class="baseline" style="display: inline-block">base</div><div class="baseline big" style="display: inline-block">abc</div> + </div> + <div class="stretch" style="height: 182px">stretch</div> + <div class="stretch big">a b c d e f</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-horiz-003-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-horiz-003-ref.xht new file mode 100644 index 00000000000..caba6d3048d --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-horiz-003-ref.xht @@ -0,0 +1,96 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><!-- Reference case for align-items / align-self behavior, using floated divs + in place of flex items and using relative positioning in place of the + align-items / align-self properties. --><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-align-self-horiz-003-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + border: 1px dashed blue; + padding: 3px; + width: 560px; + height: 4px; + font-size: 10px; + line-height: 10px; + font-family: sans-serif; + } + + .flexbox > div { + width: 40px; + float: left; + } + + .big { + height: 100px; + font-size: 20px; + line-height: 20px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + } + .flex-end { + background: orange; + } + .center { + background: lightblue; + } + .baseline { + background: teal; + } + .stretch { + background: pink; + } + .auto { + background: yellow; + } + .unspecified { + background: lightgreen; + } + .initial { + background: aqua; + } + .inherit { + background: violet; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end" style="position: relative; top: -6px">end</div> + <div class="flex-end big" style="position: relative; top: -96px">a b c d e f</div> + <div class="center" style="position: relative; top: -3px">center</div> + <div class="center big" style="position: relative; top: -48px">a b c d e f</div> + <!-- We use inline-blocks inside of a wrapper-block as references for the + baseline-aligned flex items, since inline-blocks get + baseline-aligned in block layout. We also need to specify the widths + manually here since the "flexbox > div" child-selector doesn't + handle these guys (since they're grandchildren). + --> + <div style="width: 80px"> + <div class="baseline" style="width: 40px; display: inline-block">base</div><div class="baseline big" style="width: 40px; display: inline-block">abc</div> + </div> + <div class="stretch" style="height: 100%">stretch</div> + <div class="stretch big">a b c d e f</div> + <div class="auto" style="height: 100%">auto</div> + <div class="unspecified" style="height: 100%">unspec</div> + <div class="initial" style="height: 100%">initial</div> + <div class="inherit" style="height: 100%">inherit</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-horiz-004-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-horiz-004-ref.xht new file mode 100644 index 00000000000..b0a4f9adc48 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-horiz-004-ref.xht @@ -0,0 +1,92 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><!-- Reference case for align-items / align-self behavior, using floated divs + in place of flex items and using relative positioning in place of the + align-items / align-self properties. --><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-align-self-horiz-004-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + border: 1px dashed blue; + padding: 3px; + height: 4px; + display: inline-block; + font-size: 10px; + line-height: 10px; + font-family: sans-serif; + margin-top: 20px; + margin-bottom: 120px; + vertical-align: top; + } + + .flexbox > div { float: left } + .flex-start, .flex-end, .center, .baseline, .stretch, + .auto, .unspecified, .initial, .inherit { + width: 40px; + margin: 1px 2px 3px 4px; + border-width: 2px 3px 4px 5px; + padding: 3px 4px 5px 6px; + position: relative; + border-style: dotted; + } + + .big { + height: 100px; + font-size: 20px; + line-height: 20px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + } + .flex-end { + background: orange; + } + .center { + background: lightblue; + } + .baseline { + background: teal; + } + .stretch { + background: pink; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end" style="top: -24px">end</div> + <div class="flex-end big" style="top: -114px">a b c d e f</div> + <div class="center" style="top: -12px">center</div> + <div class="center big" style="top: -57px">a b c d e f</div> + </div> + <br/> + <div class="flexbox"> + <!-- We use inline-blocks inside of a wrapper-block as references for the + baseline-aligned flex items, since inline-blocks get + baseline-aligned in block layout. We also need to specify the widths + manually here since the "flexbox > div" child-selector doesn't + handle these guys (since they're grandchildren). + --> + <div> + <div class="baseline" style="display: inline-block">base</div><div class="baseline big" style="display: inline-block">abc</div> + </div> + <div class="stretch" style="height: 2px">stretch</div> + <div class="stretch big">a b c d e f</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-horiz-005-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-horiz-005-ref.xht new file mode 100644 index 00000000000..895fb68983c --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-horiz-005-ref.xht @@ -0,0 +1,104 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><!-- Reference case for align-items / align-self behavior with auto + margins in play. This reference case uses fixed margin-top values + in place of the testcase's auto margins. --><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-align-self-horiz-005-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + border: 1px dashed blue; + height: 140px; + width: 400px; + display: flex; + font-size: 10px; + line-height: 10px; + margin-bottom: 10px; + } + + .kidsAutoTop > div { margin-top: 130px; } + .kidsAutoTop > div.big { margin-top: 60px; } + .kidsAutoBoth > div { margin-top: 65px; } + .kidsAutoBoth > div.big { margin-top: 30px; } + + .flexbox > div { + width: 40px; + height: 10px; + } + + .flexbox > div.big { + height: 80px; + font-size: 20px; + line-height: 20px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + } + .flex-end { + background: orange; + } + .center { + background: lightblue; + } + .baseline { + background: teal; + } + .stretch { + background: pink; + } + </style> + </head> + <body> + <div class="flexbox kidsAutoTop"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b c d e f</div> + <div class="center">center</div> + <div class="center big">a b c d e f</div> + <div class="baseline">base</div> + <div class="baseline big">a b c d e f</div> + <div class="stretch">stretch</div> + <div class="stretch big">a b c d e f</div> + </div> + + <div class="flexbox kidsAutoBottom"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b c d e f</div> + <div class="center">center</div> + <div class="center big">a b c d e f</div> + <div class="baseline">base</div> + <div class="baseline big">a b c d e f</div> + <div class="stretch">stretch</div> + <div class="stretch big">a b c d e f</div> + </div> + + <div class="flexbox kidsAutoBoth"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b c d e f</div> + <div class="center">center</div> + <div class="center big">a b c d e f</div> + <div class="baseline">base</div> + <div class="baseline big">a b c d e f</div> + <div class="stretch">stretch</div> + <div class="stretch big">a b c d e f</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-stretch-vert-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-stretch-vert-001-ref.xht new file mode 100644 index 00000000000..6e174390083 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-stretch-vert-001-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><!-- In this reference case, we just have the testcases's text placed directly + in the outermost wrapper-block, with a lime background on that wrapper + instead of on a flex item. +--><html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" /> + <meta charset="utf-8" /> + <style> + div.fixedWidthWrapper { + width: 200px; + /* Small enough that 3 characters can _easily_ fit in our width */ + font-size: 12px; + background: lime; + } + </style> +</head> +<body> + <div class="fixedWidthWrapper"> + A B C + </div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-stretch-vert-002-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-stretch-vert-002-ref.xht new file mode 100644 index 00000000000..c82197dca2f --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-stretch-vert-002-ref.xht @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><!-- In this reference case, we use floated fixed-sized divs to mimic the + testcases's flex items. +--><html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" /> + <meta charset="utf-8" /> + <style> + div.container { + width: 100px; + height: 20px; + border: 2px solid black; + } + div.item { + width: 48px; + height: 15px; + float: left; + border: 1px dotted blue; + } + </style> +</head> +<body> + <div class="container"> + <div class="item"></div> + <div class="item"></div> + </div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-vert-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-vert-001-ref.xht new file mode 100644 index 00000000000..27e61655298 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-vert-001-ref.xht @@ -0,0 +1,115 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><!-- Reference case for align-items / align-self behavior, using blocks in + place of flex items and using float and width keywords to emulate the + align-items / align-self properties. --><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-align-self-vert-001-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + border: 1px dashed blue; + width: 200px; + font-size: 10px; + } + + div.big { + font-size: 20px; + width: 50px; + } + + .flexbox > * { + clear: both; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + float: left; + } + .flex-end { + background: orange; + float: right; + } + .center { + background: lightblue; + margin: auto; + } + .baseline { + background: teal; + float: left; + } + .stretch { + background: pink; + width: 100%; + } + .auto { + background: yellow; + margin: auto; + } + .unspecified { + background: lightgreen; + margin: auto; + } + .initial { + background: aqua; + margin: auto; + } + .inherit { + background: violet; + float: right; + } + + <!-- We center shrinkwrapped text by putting it into an inline-block, and + then wrapping that inline-block in a helper-div that has + "text-align:center" set. --> + .centerParent { + text-align: center; + } + .centerParent > * { + display: inline-block; + text-align: left; /* Keep parent's centering from tweaking my text */ + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b c d e f</div> + <div class="centerParent"> + <div class="center">center</div> + </div> + <div class="center big">a b c d e f</div> + <div class="baseline">base</div> + <div class="baseline big">abc</div> + <div class="stretch">stretch</div> + <div class="stretch big">a b c d e f</div> + <div class="centerParent"> + <div class="auto">auto</div> + </div> + <div class="centerParent"> + <div class="unspecified">unspec</div> + </div> + <div class="centerParent"> + <div class="initial">initial</div> + </div> + <div class="inherit">inherit</div> + <!-- Since that last div is floated right, the container doesn't include + its height by default. So we add some invisible hacky text (of the + same font) to make sure our container is tall enough. --> + <span style="visibility:hidden">hacky text</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-vert-002-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-vert-002-ref.xht new file mode 100644 index 00000000000..b3d7e1b52be --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-vert-002-ref.xht @@ -0,0 +1,96 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><!-- Reference case for align-items / align-self behavior, using blocks in + place of flex items and using float and width keywords to emulate the + align-items / align-self properties. --><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-align-self-vert-002-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + border: 1px dashed blue; + width: 200px; + float: left; + font-size: 10px; + } + + .flex-start, .flex-end, .center, .baseline, .stretch { + clear: both; + margin: 1px 2px 3px 4px; + border-width: 2px 3px 4px 5px; + padding: 3px 4px 5px 6px; + border-style: dotted; + } + + div.big { + font-size: 20px; + width: 50px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + float: left; + } + .flex-end { + background: orange; + float: right; + } + <!-- We center shrinkwrapped text by putting it into an inline-block, and + then wrapping that inline-block in a helper-div that has + "text-align:center" set. --> + .centerParent { + text-align: center; + } + .center { + background: lightblue; + display: inline-block; + text-align: left; /* Keep parent's centering from tweaking my text */ + } + .baseline { + background: teal; + float: left; + } + .stretch { + background: pink; + } + .clearFloats { clear: both } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b c d e f</div> + <div class="clearFloats"/> + <div class="centerParent"> + <div class="center">center</div> + </div> + <div class="centerParent"> + <div class="center big">a b c d e f</div> + </div> + </div> + <div class="flexbox"> + <div class="baseline">base</div> + <div class="baseline big">abc</div> + <div class="clearFloats"/> + <div class="stretch">stretch</div> + <!-- Force a 3px + 1px = 4px margin between this and the previous div + (to thwart the effects of margin-collapsing). This is the only + place we need this hack, because everywhere else in this test + we use floats or inline-blocks, whose margins don't collapse. --> + <div class="stretch big" style="margin-top: 4px">a b c d e f</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-vert-003-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-vert-003-ref.xht new file mode 100644 index 00000000000..d32aae4bdc3 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-vert-003-ref.xht @@ -0,0 +1,86 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><!-- Reference case for align-items / align-self behavior, using blocks in + place of flex items and using float and width keywords to emulate the + align-items / align-self properties. --><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-align-self-vert-003-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + border: 1px dashed blue; + width: 4px; + font-family: sans-serif; + font-size: 10px; + margin-left: 80px; + } + + div.big { + font-size: 18px; + width: 50px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + float: left; + } + .flex-end { + background: orange; + float: right; + } + <!-- We center shrinkwrapped text by putting it into an inline-block, and + then wrapping that inline-block in a helper-div that has + "text-align:center" set. For this to work, the parent has to be at + least as wide as the centered content inside of it, so we make it + large with a negative margin such that its center aligns with the + 4px-wide container's center. --> + .centerParent { + text-align: center; + width: 100px; + margin-left: -48px; + } + .center { + background: lightblue; + display: inline-block; + text-align: left; /* Keep parent's centering from tweaking my text */ + } + .baseline { + background: teal; + float: left; + } + .stretch { + background: pink; + } + .clearFloats { clear: both } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b</div> + <div class="centerParent clearFloats"> + <div class="center">center</div> + </div> + <div class="centerParent"> + <div class="center big">a b</div> + </div> + <div class="baseline">base</div> + <div class="baseline big">abc</div> + <div class="stretch clearFloats">stretch</div> + <div class="stretch big">a b</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-vert-004-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-vert-004-ref.xht new file mode 100644 index 00000000000..b1561442f9f --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-vert-004-ref.xht @@ -0,0 +1,102 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><!-- Reference case for align-items / align-self behavior, using blocks in + place of flex items and using float and width keywords to emulate the + align-items / align-self properties. --><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-align-self-vert-004-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + border: 1px dashed blue; + width: 4px; + float: left; + font-family: sans-serif; + font-size: 10px; + margin-left: 80px; + } + + .flex-start, .flex-end, .center, .baseline, .stretch { + clear: both; + margin: 1px 2px 3px 4px; + border-width: 2px 3px 4px 5px; + padding: 3px 4px 5px 6px; + border-style: dotted; + } + + div.big { + font-size: 18px; + width: 50px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + float: left; + } + .flex-end { + background: orange; + float: right; + } + <!-- We center shrinkwrapped text by putting it into an inline-block, and + then wrapping that inline-block in a helper-div that has + "text-align:center" set. For this to work, the parent has to be at + least as wide as the centered content inside of it, so we make it + large with a negative margin such that its center aligns with the + 4px-wide container's center. --> + .centerParent { + text-align: center; + width: 100px; + margin-left: -48px; + } + .center { + background: lightblue; + display: inline-block; + text-align: left; /* Keep parent's centering from tweaking my text */ + } + .baseline { + background: teal; + float: left; + } + .stretch { + background: pink; + } + .clearFloats { clear: both } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b</div> + <div class="centerParent"> + <div class="center">center</div> + </div> + <div class="centerParent"> + <div class="center big">a b</div> + </div> + </div> + <div class="flexbox"> + <div class="baseline">base</div> + <div class="baseline big">abc</div> + <div class="clearFloats"/> + <div class="stretch">stretch</div> + <!-- Force a 3px + 1px = 4px margin between this and the previous div + (to thwart the effects of margin-collapsing). This is the only + place we need this hack, because everywhere else in this test + we use floats or inline-blocks, whose margins don't collapse. --> + <div class="stretch big" style="margin-top: 4px">a b</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-vert-rtl-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-vert-rtl-001-ref.xht new file mode 100644 index 00000000000..d8c05208f9e --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-vert-rtl-001-ref.xht @@ -0,0 +1,118 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><!-- Reference case for align-items / align-self behavior in a vertical + "direction: rtl" flex container, using blocks in place of flex items and + using float and width keywords to emulate the align-items / align-self + properties. --><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-align-self-vert-rtl-001-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + border: 1px dashed blue; + width: 200px; + direction: rtl; + font-family: sans-serif; + font-size: 10px; + } + + div.big { + font-size: 20px; + width: 50px; + } + + .flexbox > * { + clear: both; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + float: right; + } + .flex-end { + background: orange; + float: left; + } + .center { + background: lightblue; + margin: auto; + } + .baseline { + background: teal; + float: right; + } + .stretch { + background: pink; + width: 100%; + } + .auto { + background: yellow; + margin: auto; + } + .unspecified { + background: lightgreen; + margin: auto; + } + .initial { + background: aqua; + margin: auto; + } + .inherit { + background: violet; + float: left; + } + + <!-- We center shrinkwrapped text by putting it into an inline-block, and + then wrapping that inline-block in a helper-div that has + "text-align:center" set. --> + .centerParent { + text-align: center; + } + .centerParent > * { + display: inline-block; + text-align: left; /* Keep parent's centering from tweaking my text */ + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b c d e f</div> + <div class="centerParent"> + <div class="center">center</div> + </div> + <div class="center big">a b c d e f</div> + <div class="baseline">base</div> + <div class="baseline big">abc</div> + <div class="stretch">stretch</div> + <div class="stretch big">a b c d e f</div> + <div class="centerParent"> + <div class="auto">auto</div> + </div> + <div class="centerParent"> + <div class="unspecified">unspec</div> + </div> + <div class="centerParent"> + <div class="initial">initial</div> + </div> + <div class="inherit">inherit</div> + <!-- Since that last div is floated right, the container doesn't include + its height by default. So we add some invisible hacky text (of the + same font) to make sure our container is tall enough. --> + <span style="visibility:hidden">hacky text</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-vert-rtl-002-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-vert-rtl-002-ref.xht new file mode 100644 index 00000000000..fe4c46cb354 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-vert-rtl-002-ref.xht @@ -0,0 +1,99 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><!-- Reference case for align-items / align-self behavior in a vertical + "direction: rtl" flex container, using blocks in place of flex items and + using float and width keywords to emulate the align-items / align-self + properties. --><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-align-self-vert-rtl-002-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + border: 1px dashed blue; + width: 200px; + float: left; + direction: rtl; + font-family: sans-serif; + font-size: 10px; + } + + .flex-start, .flex-end, .center, .baseline, .stretch { + clear: both; + margin: 1px 2px 3px 4px; + border-width: 2px 3px 4px 5px; + padding: 3px 4px 5px 6px; + border-style: dotted; + } + + div.big { + font-size: 20px; + width: 50px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + float: right; + } + .flex-end { + background: orange; + float: left; + } + <!-- We center shrinkwrapped text by putting it into an inline-block, and + then wrapping that inline-block in a helper-div that has + "text-align:center" set. --> + .centerParent { + text-align: center; + } + .center { + background: lightblue; + display: inline-block; + text-align: right; /* Keep parent's centering from tweaking my text */ + } + .baseline { + background: teal; + float: right; + } + .stretch { + background: pink; + } + .clearFloats { clear: both } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b c d e f</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b c d e f</div> + <div class="clearFloats"/> + <div class="centerParent"> + <div class="center">center</div> + </div> + <div class="centerParent"> + <div class="center big">a b c d e f</div> + </div> + </div> + <div class="flexbox"> + <div class="baseline">base</div> + <div class="baseline big">abc</div> + <div class="clearFloats"/> + <div class="stretch">stretch</div> + <!-- Force a 3px + 1px = 4px margin between this and the previous div + (to thwart the effects of margin-collapsing). This is the only + place we need this hack, because everywhere else in this test + we use floats or inline-blocks, whose margins don't collapse. --> + <div class="stretch big" style="margin-top: 4px">a b c d e f</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-vert-rtl-003-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-vert-rtl-003-ref.xht new file mode 100644 index 00000000000..7e563fd468b --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-vert-rtl-003-ref.xht @@ -0,0 +1,88 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><!-- Reference case for align-items / align-self behavior in a vertical + "direction: rtl" flex container, using blocks in place of flex items and + using float and width keywords to emulate the align-items / align-self + properties. --><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-align-self-vert-rtl-003-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + border: 1px dashed blue; + width: 4px; + font-family: sans-serif; + direction: rtl; + font-size: 10px; + margin-left: 80px; + } + + div.big { + font-size: 18px; + width: 50px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + float: right; + } + .flex-end { + background: orange; + float: left; + } + <!-- We center shrinkwrapped text by putting it into an inline-block, and + then wrapping that inline-block in a helper-div that has + "text-align:center" set. For this to work, the parent has to be at + least as wide as the centered content inside of it, so we make it + large with a negative margin such that its center aligns with the + 4px-wide container's center. --> + .centerParent { + text-align: center; + width: 100px; + margin-right: -48px; + } + .center { + background: lightblue; + display: inline-block; + text-align: right; /* Keep parent's centering from tweaking my text */ + } + .baseline { + background: teal; + float: right; + } + .stretch { + background: pink; + } + .clearFloats { clear: both } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b</div> + <div class="centerParent clearFloats"> + <div class="center">center</div> + </div> + <div class="centerParent"> + <div class="center big">a b</div> + </div> + <div class="baseline">base</div> + <div class="baseline big">abc</div> + <div class="stretch clearFloats">stretch</div> + <div class="stretch big">a b</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-vert-rtl-004-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-vert-rtl-004-ref.xht new file mode 100644 index 00000000000..f79e9c43e37 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-align-self-vert-rtl-004-ref.xht @@ -0,0 +1,104 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><!-- Reference case for align-items / align-self behavior in a vertical + "direction: rtl" flex container, using blocks in place of flex items and + using float and width keywords to emulate the align-items / align-self + properties. --><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-align-self-vert-rtl-004-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + border: 1px dashed blue; + width: 4px; + float: left; + direction: rtl; + font-family: sans-serif; + font-size: 10px; + margin-left: 80px; + } + + .flex-start, .flex-end, .center, .baseline, .stretch { + clear: both; + margin: 1px 2px 3px 4px; + border-width: 2px 3px 4px 5px; + padding: 3px 4px 5px 6px; + border-style: dotted; + } + + div.big { + font-size: 18px; + width: 50px; + } + + /* Classes for each of the various align-self values */ + .flex-start { + background: lime; + float: right; + } + .flex-end { + background: orange; + float: left; + } + <!-- We center shrinkwrapped text by putting it into an inline-block, and + then wrapping that inline-block in a helper-div that has + "text-align:center" set. For this to work, the parent has to be at + least as wide as the centered content inside of it, so we make it + large with a negative margin such that its center aligns with the + 4px-wide container's center. --> + .centerParent { + text-align: center; + width: 100px; + margin-right: -48px; + } + .center { + background: lightblue; + display: inline-block; + text-align: right; /* Keep parent's centering from tweaking my text */ + } + .baseline { + background: teal; + float: right; + } + .stretch { + background: pink; + } + .clearFloats { clear: both } + </style> + </head> + <body> + <div class="flexbox"> + <div class="flex-start">start</div> + <div class="flex-start big">a b</div> + <div class="clearFloats"/> + <div class="stretch">stretch</div> + <!-- Force a 3px + 1px = 4px margin between this and the previous div + (to thwart the effects of margin-collapsing). This is the only + place we need this hack, because everywhere else in this test + we use floats or inline-blocks, whose margins don't collapse. --> + <div class="stretch big" style="margin-top: 4px">a b</div> + <div class="centerParent"> + <div class="center">center</div> + </div> + <div class="centerParent"> + <div class="center big">a b</div> + </div> + </div> + <div class="flexbox"> + <div class="baseline">base</div> + <div class="baseline big">abc</div> + <div class="flex-end">end</div> + <div class="flex-end big">a b</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-anonymous-items-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-anonymous-items-001-ref.xht new file mode 100644 index 00000000000..92acb330710 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-anonymous-items-001-ref.xht @@ -0,0 +1,14 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" /> + <meta charset="utf-8" /> +</head> +<body> + a ab bx x + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-baseline-align-self-baseline-horiz-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-baseline-align-self-baseline-horiz-001-ref.xht new file mode 100644 index 00000000000..e9850769a0b --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-baseline-align-self-baseline-horiz-001-ref.xht @@ -0,0 +1,48 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><!-- Reference case, using inline-block instead of inline-flex, and with the + unaligned children taken out of baseline-alignment with + "vertical-align:top". +--><html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" /> + <meta charset="utf-8" /> + <style> + body { + margin: 0; + font-size: 20px; + line-height: 20px; + } + .flexContainer { + display: inline-block; + background: lightblue; + vertical-align: top; + } + .hugeAndUnaligned { + font-size: 35px; + line-height: 35px; + vertical-align: top; + } + .smallFont { + font-size: 10px; + line-height: 10px; + } + .flexContainer > * { display: inline; } + </style> +</head> +<body> + a + <div class="flexContainer"> + <div class="smallFont">b</div><div>c</div><div class="hugeAndUnaligned">d</div> + </div> + <div class="flexContainer"> + <div class="hugeAndUnaligned">e</div><div>f</div><div class="smallFont">g</div> + </div> + <div class="flexContainer"> + <div class="hugeAndUnaligned">h</div><div class="smallFont">i</div><div>j</div> + </div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-baseline-align-self-baseline-vert-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-baseline-align-self-baseline-vert-001-ref.xht new file mode 100644 index 00000000000..f9ba48eb247 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-baseline-align-self-baseline-vert-001-ref.xht @@ -0,0 +1,50 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><!-- Reference case, using inline-block instead of inline-flex, and with the + unaligned children taken out of baseline-alignment with + "vertical-align:top". +--><html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" /> + <meta charset="utf-8" /> + <link href="support/ahem.css" type="text/css" rel="stylesheet" /> + <style> + body { + margin: 0; + font: 20px Ahem; + line-height: 20px; + /* Baseline is 0.8em = 16px from top */ + } + .flexContainer { + display: inline-block; + background: lightblue; + } + .hugeAndUnaligned { + font-size: 35px; + line-height: 35px; + vertical-align: top; + } + .smallFont { + font-size: 10px; + line-height: 10px; + /* Baseline is 0.8em = 8px from top */ + } + * { vertical-align: top } + </style> +</head> +<body> + <div style="display: inline-block; margin-top: 12px">a</div> + <div style="margin-top: 20px" class="flexContainer"> + <div class="smallFont">b</div><div>c</div><div class="hugeAndUnaligned">d</div> + </div> + <div class="flexContainer"> + <div class="hugeAndUnaligned">e</div><div>f</div><div class="smallFont">g</div> + </div> + <div class="flexContainer"> + <div class="hugeAndUnaligned">h</div><div class="smallFont">i</div><div>j</div> + </div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-baseline-empty-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-baseline-empty-001-ref.xht new file mode 100644 index 00000000000..4cb1edc6c63 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-baseline-empty-001-ref.xht @@ -0,0 +1,46 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><!-- In this reference case, we have inline-blocks instead of inline + flex containers. We stick an Ahem whitespace character in each + inline-block, with a customized line-height to make the baseline + end up at the bottom of the inline-block's content-box. --><html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" /> + <meta charset="utf-8" /> + <link href="support/ahem.css" type="text/css" rel="stylesheet" /> + <style> + body { + font: 20px Ahem; + } + .flexContainer { + display: inline-block; + height: 16px; + width: 16px; + /* Each inline-block's baseline will be the baseline of the single Ahem + character that it contains. We want to set up that char such that its + baseline is at the bottom of the container's content box (since that's + the corresponding flex container's baseline). So, we use a line-height + of 20px, which gives us a baseline of 20px * 0.8 = 16px, which is the + bottom of the container's content-box -- awesome. */ + line-height: 20px; + background: purple; + border: 0px dotted black; + /* (Elements that want a border will set their border-width.) */ + } + </style> +</head> +<body> + A + <!-- We have to include a character in the inline-blocks in order for them + to baseline-align; otherwise, they align the bottom of their + border-boxes. --> + <div class="flexContainer"> </div> + <div style="padding-bottom: 20px" class="flexContainer"> </div> + <div style="padding: 10px" class="flexContainer"> </div> + <div style="border-width: 3px" class="flexContainer"> </div> + <div style="border-bottom-width: 4px" class="flexContainer"> </div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-baseline-multi-item-horiz-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-baseline-multi-item-horiz-001-ref.xht new file mode 100644 index 00000000000..3c047731fc5 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-baseline-multi-item-horiz-001-ref.xht @@ -0,0 +1,40 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><!-- Reference case, using inline-block instead of inline-flex, and with the + baseline-aligned items aligned using specific font-size / line-heights, + and with unaligned children taken out of baseline-alignment using + "vertical-align:top". +--><html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" /> + <meta charset="utf-8" /> + <style> + .flexContainer { + display: inline-block; + background: lightblue; + } + .flexContainer > * { display: inline; } + .smallFont { + font-size: 10px; + line-height: 10px; + } + .bigFont { + font-size: 20px; + line-height: 20px; + } + .unaligned { vertical-align: top } + </style> +</head> +<body> + a + <div class="flexContainer smallFont"> + <div class="smallFont">b</div><div class="bigFont unaligned">c</div> + </div> + <div class="flexContainer bigFont"> + <div class="bigFont">d</div><div class="smallFont unaligned">e</div> + </div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-baseline-multi-item-vert-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-baseline-multi-item-vert-001-ref.xht new file mode 100644 index 00000000000..6828442a7fc --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-baseline-multi-item-vert-001-ref.xht @@ -0,0 +1,47 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><!-- Reference case, using inline-block instead of inline-flex, and with the + inline-blocks manually positioned with "vertical-align:top" and + margin-top. +--><html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" /> + <meta charset="utf-8" /> + <link href="support/ahem.css" type="text/css" rel="stylesheet" /> + <style> + body { + margin: 0; + font: 20px Ahem; + line-height: 20px; + /* Baseline is 0.8em = 16px from top */ + } + .flexContainer { + display: inline-block; + background: lightblue; + } + .smallFont { + font-size: 10px; + line-height: 10px; + /* Baseline is 0.8em = 8px from top */ + } + .bigFont { + font-size: 20px; + line-height: 20px; + /* Baseline is 0.8em = 16px from top */ + } + * { vertical-align: top } + </style> +</head> +<body> + a + <div style="margin-top: 8px" class="flexContainer"> + <div class="smallFont">b</div><div class="bigFont">c</div> + </div> + <div class="flexContainer"> + <div class="bigFont">d</div><div class="smallFont">e</div> + </div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-baseline-multi-line-horiz-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-baseline-multi-line-horiz-001-ref.xht new file mode 100644 index 00000000000..c9a2dda121a --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-baseline-multi-line-horiz-001-ref.xht @@ -0,0 +1,60 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><!-- Reference case, using inline-block instead of inline-flex, and with the + baseline-aligned items aligned using specific font-size / line-heights, + and with unaligned children taken out of baseline-alignment using + "vertical-align:top". +--><html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" /> + <meta charset="utf-8" /> + <style> + .flexContainer { + display: inline-block; + width: 40px; + height: 40px; + background: lightblue; + } + .flexContainer > * { + width: 20px; + display: inline-block; + } + + .smallFont { + font-size: 8px; + line-height: 8px; + } + .medFont { + font-size: 12px; + line-height: 12px; + } + .bigFont { + font-size: 16px; + line-height: 16px; + } + .unaligned { vertical-align: top } + </style> +</head> +<body> + a + <!-- Flex containers with flex items that have a mix of baselines: --> + <div class="flexContainer medFont"> + <div class="medFont">b</div><div class="bigFont unaligned">c</div> + </div> + + <div class="flexContainer bigFont"> + <div class="bigFont">f</div><div class="smallFont unaligned">g</div> + </div> + + <!-- Flex container with second line baseline-aligned + (shouldn't make a difference) --> + <div class="flexContainer smallFont"> + <div class="smallFont">j</div><div class="bigFont unaligned">k</div> + </div> + n + + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-baseline-multi-line-horiz-002-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-baseline-multi-line-horiz-002-ref.xht new file mode 100644 index 00000000000..ffc541aead2 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-baseline-multi-line-horiz-002-ref.xht @@ -0,0 +1,64 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><!-- Reference case, using inline-block instead of inline-flex, and with the + baseline-aligned items aligned using specific font-size / line-heights, + and with unaligned children taken out of baseline-alignment using + "vertical-align:top". +--><html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" /> + <meta charset="utf-8" /> + <style> + .flexContainer { + display: inline-block; + width: 40px; + /* Split testcase's 40px height into 20px of padding-top and 20px of + height, to set aside space for the testcase's (invisible) second line + (which is above the first line, since this is wrap-reverse) */ + height: 20px; + padding-top: 20px; + background: lightblue; + } + .flexContainer > * { + width: 20px; + display: inline-block; + } + + .smallFont { + font-size: 8px; + line-height: 8px; + } + .medFont { + font-size: 12px; + line-height: 12px; + } + .bigFont { + font-size: 16px; + line-height: 16px; + } + .unaligned { vertical-align: top } + </style> +</head> +<body> + a + <!-- Flex containers with flex items that have a mix of baselines: --> + <div class="flexContainer medFont"> + <div class="medFont">b</div><div class="bigFont unaligned">c</div> + </div> + + <div class="flexContainer bigFont"> + <div class="bigFont">f</div><div class="smallFont unaligned">g</div> + </div> + + <!-- Flex container with second line baseline-aligned + (shouldn't make a difference) --> + <div class="flexContainer smallFont"> + <div class="smallFont">j</div><div class="bigFont unaligned">k</div> + </div> + n + + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-baseline-multi-line-horiz-003-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-baseline-multi-line-horiz-003-ref.xht new file mode 100644 index 00000000000..dbd317bab41 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-baseline-multi-line-horiz-003-ref.xht @@ -0,0 +1,84 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" /> + <meta charset="utf-8" /> + <style> + /* We use an outer vertical flex container, wrapping two single-line + flex containers, to match the testcase's multi-line flex container. */ + .outerFlexContainer { + height: 100px; + background: lightgray; + display: inline-flex; + flex-direction: column; + justify-content: center; /* to mimic testcase's "align-content:center" */ + } + .flexContainer { + display: flex; + width: 40px; + } + .flexContainer > * { + width: 20px; + } + + .smallFont { + font-size: 8px; + line-height: 8px; + } + .medFont { + font-size: 12px; + line-height: 12px; + } + .bigFont { + font-size: 16px; + line-height: 16px; + } + </style> +</head> +<body> + a + <!-- Flex container with second item in first line baseline-aligned + (should set the container's baseline) --> + <div class="outerFlexContainer"> + <div class="flexContainer"> + <div class="medFont">b</div> + <div style="align-self: baseline" class="bigFont">c</div> + </div> + <div class="flexContainer"> + <div class="medFont">d</div> + <div class="smallFont">e</div> + </div> + </div> + + <!-- Flex container with both items in first line baseline-aligned + (should set the container's baseline) --> + <div class="outerFlexContainer"> + <div class="flexContainer"> + <div style="align-self: baseline" class="smallFont">f</div> + <div style="align-self: baseline" class="medFont">g</div> + </div> + <div class="flexContainer"> + <div class="bigFont">h</div> + <div class="smallFont">i</div> + </div> + </div> + + <!-- Flex container with all items baseline-aligned + (only those on first line should set the container's baseline) --> + <div class="outerFlexContainer"> + <div style="align-items: baseline" class="flexContainer"> + <div class="bigFont">j</div> + <div style="padding-bottom: 20px" class="smallFont">k</div> + </div> + <div style="align-items: baseline" class="flexContainer"> + <div class="smallFont">l</div> + <div class="medFont">m</div> + </div> + </div> + n + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-baseline-multi-line-horiz-004-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-baseline-multi-line-horiz-004-ref.xht new file mode 100644 index 00000000000..3e1631dcfb5 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-baseline-multi-line-horiz-004-ref.xht @@ -0,0 +1,84 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" /> + <meta charset="utf-8" /> + <style> + /* We use an outer vertical flex container, wrapping two single-line + flex containers, to match the testcase's multi-line flex container. */ + .outerFlexContainer { + height: 100px; + background: lightgray; + display: inline-flex; + flex-direction: column-reverse; + justify-content: center; /* to mimic testcase's "align-content:center" */ + } + .flexContainer { + display: flex; + width: 40px; + } + .flexContainer > * { + width: 20px; + } + + .smallFont { + font-size: 8px; + line-height: 8px; + } + .medFont { + font-size: 12px; + line-height: 12px; + } + .bigFont { + font-size: 16px; + line-height: 16px; + } + </style> +</head> +<body> + a + <!-- Flex container with second item in first line baseline-aligned + (should set the container's baseline) --> + <div class="outerFlexContainer"> + <div class="flexContainer"> + <div class="medFont">b</div> + <div style="align-self: baseline" class="bigFont">c</div> + </div> + <div class="flexContainer"> + <div class="medFont">d</div> + <div class="smallFont">e</div> + </div> + </div> + + <!-- Flex container with both items in first line baseline-aligned + (should set the container's baseline) --> + <div class="outerFlexContainer"> + <div class="flexContainer"> + <div style="align-self: baseline" class="smallFont">f</div> + <div style="align-self: baseline" class="medFont">g</div> + </div> + <div class="flexContainer"> + <div class="bigFont">h</div> + <div class="smallFont">i</div> + </div> + </div> + + <!-- Flex container with all items baseline-aligned + (only those on first line should set the container's baseline) --> + <div class="outerFlexContainer"> + <div style="align-items: baseline" class="flexContainer"> + <div class="bigFont">j</div> + <div style="padding-bottom: 20px" class="smallFont">k</div> + </div> + <div style="align-items: baseline" class="flexContainer"> + <div class="smallFont">l</div> + <div class="medFont">m</div> + </div> + </div> + n + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-baseline-multi-line-vert-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-baseline-multi-line-vert-001-ref.xht new file mode 100644 index 00000000000..7b2c376ed9e --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-baseline-multi-line-vert-001-ref.xht @@ -0,0 +1,60 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><!-- Reference case, using inline-block instead of inline-flex, and with the + baseline-aligned items aligned using specific font-size / line-heights, + and with unaligned children taken out of baseline-alignment using + "float: left". +--><html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" /> + <meta charset="utf-8" /> + <style> + .flexContainer { + display: inline-block; + width: 40px; + height: 40px; + background: lightblue; + } + .flexContainer > * { + height: 20px; + display: inline-block; + } + + .smallFont { + font-size: 8px; + line-height: 8px; + } + .medFont { + font-size: 12px; + line-height: 12px; + } + .bigFont { + font-size: 16px; + line-height: 16px; + } + .unaligned { float: left } + </style> +</head> +<body> + a + <!-- Flex containers with flex items that have a mix of baselines: --> + <div class="flexContainer medFont"> + <div class="medFont">b</div><br /><div class="bigFont unaligned">c</div> + </div> + + <div class="flexContainer bigFont"> + <div class="bigFont">f</div><br /><div class="smallFont unaligned">g</div> + </div> + + <!-- Flex container with second line baseline-aligned + (shouldn't make a difference) --> + <div class="flexContainer smallFont"> + <div class="smallFont">j</div><br /><div class="bigFont unaligned">k</div> + </div> + n + + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-baseline-multi-line-vert-002-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-baseline-multi-line-vert-002-ref.xht new file mode 100644 index 00000000000..9f4828caa5c --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-baseline-multi-line-vert-002-ref.xht @@ -0,0 +1,66 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><!-- Reference case, using inline-block instead of inline-flex, and with the + baseline-aligned items aligned using specific font-size / line-heights, + and with unaligned children taken out of baseline-alignment using + "float: left". +--><html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" /> + <meta charset="utf-8" /> + <style> + .flexContainer { + display: inline-block; + /* Split testcase's 40px width into 20px of padding-left and 20px of + width, to set aside space for the testcase's (invisible) second line + (which is to the left of the first line, since this is wrap-reverse) + */ + width: 20px; + padding-left: 20px; + height: 40px; + background: lightblue; + } + .flexContainer > * { + width: 20px; + height: 20px; + display: inline-block; + } + + .smallFont { + font-size: 8px; + line-height: 8px; + } + .medFont { + font-size: 12px; + line-height: 12px; + } + .bigFont { + font-size: 16px; + line-height: 16px; + } + .unaligned { float: left } + </style> +</head> +<body> + a + <!-- Flex containers with flex items that have a mix of baselines: --> + <div class="flexContainer medFont"> + <div class="medFont">b</div><br /><div class="bigFont unaligned">c</div> + </div> + + <div class="flexContainer bigFont"> + <div class="bigFont">f</div><br /><div class="smallFont unaligned">g</div> + </div> + + <!-- Flex container with second line baseline-aligned + (shouldn't make a difference) --> + <div class="flexContainer smallFont"> + <div class="smallFont">j</div><br /><div class="bigFont unaligned">k</div> + </div> + n + + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-baseline-single-item-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-baseline-single-item-001-ref.xht new file mode 100644 index 00000000000..93c783c4261 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-baseline-single-item-001-ref.xht @@ -0,0 +1,29 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><!-- Reference case, using inline-block instead of inline-flex. --><html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" /> + <meta charset="utf-8" /> + <style> + .flexContainer { + display: inline-block; + height: 16px; + width: 16px; + background: purple; + border: 0px dotted black; + /* (Elements that want a border will set their border-width.) */ + } + </style> +</head> +<body> + A + <div class="flexContainer">a</div> + <div style="padding-bottom: 20px" class="flexContainer">a</div> + <div style="padding: 10px" class="flexContainer">a</div> + <div style="border-width: 3px" class="flexContainer">a</div> + <div style="border-bottom-width: 4px" class="flexContainer">a</div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-basic-block-horiz-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-basic-block-horiz-001-ref.xht new file mode 100644 index 00000000000..2334fb60b85 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-basic-block-horiz-001-ref.xht @@ -0,0 +1,71 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-basic-block-horiz-001-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div { height: 100px; } + div.flexbox { + border: 1px dashed blue; + width: 200px; + } + div.a { + display: inline-block; + background: lightgreen; + } + div.b { + display: inline-block; + background: yellow; + } + div.c { + display: inline-block; + background: orange; + } + div.auto { + display: inline-block; + background: pink; + } + div.inflex { + display: inline-block; + background: gray; + } + div.spacer { + height: 15px; + background: purple; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="a" style="width: 80px"/><div class="b" style="width: 120px"/> + </div> + <div class="flexbox"> + <div class="a" style="width: 62.5px"/><div class="c" style="width: 137.5px"/> + </div> + <div class="flexbox"> + <div class="a" style="width: 185px"/><div class="auto"> + <div class="spacer" style="width: 15px"/></div> + </div> + <div class="flexbox"> + <div class="b" style="width: 76px"/><div class="c" style="width: 124px"/> + </div> + <div class="flexbox"> + <div class="b" style="width: 170px"/><div class="auto"> + <div class="spacer" style="width: 30px"/></div> + </div> + <div class="flexbox"> + <div class="a" style="width: 45px"/><div class="b" style="width: 50px"/><div class="inflex" style="width: 20px"/><div class="c" style="width: 85px"/> + </div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-basic-block-vert-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-basic-block-vert-001-ref.xht new file mode 100644 index 00000000000..c909d7a1da8 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-basic-block-vert-001-ref.xht @@ -0,0 +1,66 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-basic-block-vert-001-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div { width: 50px; } + div.flexbox { + border: 1px dashed blue; + float: left; + } + div.a { + background: lightgreen; + } + div.b { + background: yellow; + } + div.c { + background: orange; + } + div.auto { + background: pink; + } + div.inflex { + background: gray; + } + div.spacer { + width: 15px; + background: purple; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="a" style="height: 80px"/><div class="b" style="height: 120px"/> + </div> + <div class="flexbox"> + <div class="a" style="height: 62.5px"/><div class="c" style="height: 137.5px"/> + </div> + <div class="flexbox"> + <div class="a" style="height: 185px"/><div class="auto"> + <div class="spacer" style="height: 15px"/></div> + </div> + <div class="flexbox"> + <div class="b" style="height: 76px"/><div class="c" style="height: 124px"/> + </div> + <div class="flexbox"> + <div class="b" style="height: 170px"/><div class="auto"> + <div class="spacer" style="height: 30px"/></div> + </div> + <div class="flexbox"> + <div class="a" style="height: 45px"/><div class="b" style="height: 50px"/><div class="inflex" style="height: 20px"/><div class="c" style="height: 85px"/> + </div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-basic-canvas-horiz-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-basic-canvas-horiz-001-ref.xht new file mode 100644 index 00000000000..9864dd1d7e5 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-basic-canvas-horiz-001-ref.xht @@ -0,0 +1,62 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-basic-canvas-horiz-001-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + width: 200px; + background: lightgreen; + margin-bottom: 5px; + line-height: 8px; + } + canvas { + width: 10px; + height: 20px; + border: 1px dotted green; + } + </style> + </head> + <body> + <div class="flexbox"> + <canvas/> + </div> + + <div class="flexbox" style="height: 22px"> + some words + <canvas style="float:right"/> + </div> + + <div class="flexbox"> + <canvas style="width: 122.5px"/><canvas style="width: 73.5px"/> + </div> + + <div class="flexbox"> + <canvas style="width: 93px"/><canvas style="width: 103px"/> + </div> + + <div class="flexbox"> + <canvas style="width: 114px"/><canvas style="width: 82px"/> + </div> + + <div class="flexbox"> + <canvas style="width: 106px"/><canvas style="width: 90px"/> + </div> + + <div class="flexbox"> + <canvas style="width: 46px"/><canvas style="width: 150px"/> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-basic-canvas-vert-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-basic-canvas-vert-001-ref.xht new file mode 100644 index 00000000000..eefab9b3170 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-basic-canvas-vert-001-ref.xht @@ -0,0 +1,66 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-basic-canvas-vert-001-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + height: 200px; + width: 22px; + float: left; + margin-right: 10px; + background: lightgreen; + line-height: 0; + } + canvas { + width: 20px; + height: 10px; + border: 1px dotted green; + } + </style> + </head> + <body> + <div class="flexbox"> + <canvas/> + </div> + + <div class="flexbox"> + <div style="font: 8px monospace; height: 188px"> + a b + </div> + <canvas/> + </div> + + <div class="flexbox"> + <canvas style="height: 122.5px"/><canvas style="height: 73.5px"/> + </div> + + <div class="flexbox"> + <canvas style="height: 93px"/><canvas style="height: 103px"/> + </div> + + <div class="flexbox"> + <canvas style="height: 114px"/><canvas style="height: 82px"/> + </div> + + <div class="flexbox"> + <canvas style="height: 106px"/><canvas style="height: 90px"/> + </div> + + <div class="flexbox"> + <canvas style="height: 46px"/><canvas style="height: 150px"/> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-basic-fieldset-horiz-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-basic-fieldset-horiz-001-ref.xht new file mode 100644 index 00000000000..b843bc60949 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-basic-fieldset-horiz-001-ref.xht @@ -0,0 +1,67 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-basic-fieldset-horiz-001-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + width: 200px; + background: lightgreen; + margin-bottom: 5px; + line-height: 8px; + clear: all; + height: 22px; + } + fieldset { + width: 10px; + height: 20px; + border: 1px dotted green; + margin: 0; + padding: 0; + float: left; + } + </style> + </head> + <body> + <div class="flexbox"> + <fieldset/> + </div> + + <div class="flexbox" style="height: 22px"> + some words + <fieldset style="float:right"/> + </div> + + <div class="flexbox"> + <fieldset style="width: 122.5px"/><fieldset style="width: 73.5px"/> + </div> + + <div class="flexbox"> + <fieldset style="width: 93px"/><fieldset style="width: 103px"/> + </div> + + <div class="flexbox"> + <fieldset style="width: 114px"/><fieldset style="width: 82px"/> + </div> + + <div class="flexbox"> + <fieldset style="width: 106px"/><fieldset style="width: 90px"/> + </div> + + <div class="flexbox"> + <fieldset style="width: 46px"/><fieldset style="width: 150px"/> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-basic-fieldset-vert-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-basic-fieldset-vert-001-ref.xht new file mode 100644 index 00000000000..6544f4b77d6 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-basic-fieldset-vert-001-ref.xht @@ -0,0 +1,68 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-basic-fieldset-vert-001-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + height: 200px; + width: 22px; + float: left; + margin-right: 10px; + background: lightgreen; + line-height: 0; + } + fieldset { + width: 20px; + height: 10px; + border: 1px dotted green; + margin: 0; + padding: 0; + } + </style> + </head> + <body> + <div class="flexbox"> + <fieldset/> + </div> + + <div class="flexbox"> + <div style="font: 8px monospace; height: 188px"> + a b + </div> + <fieldset/> + </div> + + <div class="flexbox"> + <fieldset style="height: 122.5px"/><fieldset style="height: 73.5px"/> + </div> + + <div class="flexbox"> + <fieldset style="height: 93px"/><fieldset style="height: 103px"/> + </div> + + <div class="flexbox"> + <fieldset style="height: 114px"/><fieldset style="height: 82px"/> + </div> + + <div class="flexbox"> + <fieldset style="height: 106px"/><fieldset style="height: 90px"/> + </div> + + <div class="flexbox"> + <fieldset style="height: 46px"/><fieldset style="height: 150px"/> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-basic-iframe-horiz-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-basic-iframe-horiz-001-ref.xht new file mode 100644 index 00000000000..60476aed62b --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-basic-iframe-horiz-001-ref.xht @@ -0,0 +1,62 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-basic-iframe-horiz-001-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + width: 200px; + background: lightgreen; + margin-bottom: 5px; + line-height: 8px; + } + iframe { + width: 10px; + height: 20px; + border: 1px dotted green; + } + </style> + </head> + <body> + <div class="flexbox"> + <iframe/> + </div> + + <div class="flexbox" style="height: 22px"> + some words + <iframe style="float:right"/> + </div> + + <div class="flexbox"> + <iframe style="width: 122.5px"/><iframe style="width: 73.5px"/> + </div> + + <div class="flexbox"> + <iframe style="width: 93px"/><iframe style="width: 103px"/> + </div> + + <div class="flexbox"> + <iframe style="width: 114px"/><iframe style="width: 82px"/> + </div> + + <div class="flexbox"> + <iframe style="width: 106px"/><iframe style="width: 90px"/> + </div> + + <div class="flexbox"> + <iframe style="width: 46px"/><iframe style="width: 150px"/> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-basic-iframe-vert-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-basic-iframe-vert-001-ref.xht new file mode 100644 index 00000000000..5ebcd2b63c1 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-basic-iframe-vert-001-ref.xht @@ -0,0 +1,66 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-basic-iframe-vert-001-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + height: 200px; + width: 22px; + float: left; + margin-right: 10px; + background: lightgreen; + line-height: 0; + } + iframe { + width: 20px; + height: 10px; + border: 1px dotted green; + } + </style> + </head> + <body> + <div class="flexbox"> + <iframe/> + </div> + + <div class="flexbox"> + <div style="font: 8px monospace; height: 188px"> + a b + </div> + <iframe/> + </div> + + <div class="flexbox"> + <iframe style="height: 122.5px"/><iframe style="height: 73.5px"/> + </div> + + <div class="flexbox"> + <iframe style="height: 93px"/><iframe style="height: 103px"/> + </div> + + <div class="flexbox"> + <iframe style="height: 114px"/><iframe style="height: 82px"/> + </div> + + <div class="flexbox"> + <iframe style="height: 106px"/><iframe style="height: 90px"/> + </div> + + <div class="flexbox"> + <iframe style="height: 46px"/><iframe style="height: 150px"/> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-basic-img-horiz-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-basic-img-horiz-001-ref.xht new file mode 100644 index 00000000000..f1819756f37 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-basic-img-horiz-001-ref.xht @@ -0,0 +1,62 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-basic-img-horiz-001-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + width: 200px; + background: lightgreen; + margin-bottom: 5px; + line-height: 8px; + } + img { + width: 10px; + height: 20px; + border: 1px dotted green; + } + </style> + </head> + <body> + <div class="flexbox"> + <img src="support/solidblue.png"/> + </div> + + <div class="flexbox" style="height: 22px"> + some words + <img src="support/solidblue.png" style="float:right"/> + </div> + + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 122.5px"/><img src="support/solidblue.png" style="width: 73.5px"/> + </div> + + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 93px"/><img src="support/solidblue.png" style="width: 103px"/> + </div> + + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 114px"/><img src="support/solidblue.png" style="width: 82px"/> + </div> + + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 106px"/><img src="support/solidblue.png" style="width: 90px"/> + </div> + + <div class="flexbox"> + <img src="support/solidblue.png" style="width: 46px"/><img src="support/solidblue.png" style="width: 150px"/> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-basic-img-vert-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-basic-img-vert-001-ref.xht new file mode 100644 index 00000000000..9a1fbab6fea --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-basic-img-vert-001-ref.xht @@ -0,0 +1,66 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-basic-img-vert-001-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + height: 200px; + width: 22px; + float: left; + margin-right: 10px; + background: lightgreen; + line-height: 0; + } + img { + width: 20px; + height: 10px; + border: 1px dotted green; + } + </style> + </head> + <body> + <div class="flexbox"> + <img src="support/solidblue.png"/> + </div> + + <div class="flexbox"> + <div style="font: 8px monospace; height: 188px"> + a b + </div> + <img src="support/solidblue.png"/> + </div> + + <div class="flexbox"> + <img src="support/solidblue.png" style="height: 122.5px"/><img src="support/solidblue.png" style="height: 73.5px"/> + </div> + + <div class="flexbox"> + <img src="support/solidblue.png" style="height: 93px"/><img src="support/solidblue.png" style="height: 103px"/> + </div> + + <div class="flexbox"> + <img src="support/solidblue.png" style="height: 114px"/><img src="support/solidblue.png" style="height: 82px"/> + </div> + + <div class="flexbox"> + <img src="support/solidblue.png" style="height: 106px"/><img src="support/solidblue.png" style="height: 90px"/> + </div> + + <div class="flexbox"> + <img src="support/solidblue.png" style="height: 46px"/><img src="support/solidblue.png" style="height: 150px"/> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-basic-textarea-horiz-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-basic-textarea-horiz-001-ref.xht new file mode 100644 index 00000000000..3fbc0b4d4f6 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-basic-textarea-horiz-001-ref.xht @@ -0,0 +1,65 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-basic-textarea-horiz-001-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + width: 200px; + background: lightgreen; + margin-bottom: 5px; + line-height: 8px; + } + textarea { + width: 10px; + height: 20px; + background: white; + border-radius: 0; + border: 1px dotted green; + padding: 0; + } + </style> + </head> + <body> + <div class="flexbox"> + <textarea/> + </div> + + <div class="flexbox" style="height: 24px"> + some words + <textarea style="float:right"/> + </div> + + <div class="flexbox"> + <textarea style="width: 122.5px"/><textarea style="width: 73.5px"/> + </div> + + <div class="flexbox"> + <textarea style="width: 93px"/><textarea style="width: 103px"/> + </div> + + <div class="flexbox"> + <textarea style="width: 114px"/><textarea style="width: 82px"/> + </div> + + <div class="flexbox"> + <textarea style="width: 106px"/><textarea style="width: 90px"/> + </div> + + <div class="flexbox"> + <textarea style="width: 46px"/><textarea style="width: 150px"/> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-basic-textarea-vert-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-basic-textarea-vert-001-ref.xht new file mode 100644 index 00000000000..5db2d74b29b --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-basic-textarea-vert-001-ref.xht @@ -0,0 +1,70 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-basic-textarea-vert-001-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + height: 200px; + width: 22px; + float: left; + margin-right: 10px; + background: lightgreen; + line-height: 0; + } + textarea { + width: 20px; + height: 10px; + background: white; + border-radius: 0; + border: 1px dotted green; + margin: 0; + padding: 0; + } + </style> + </head> + <body> + <div class="flexbox"> + <textarea/> + </div> + + <div class="flexbox"> + <div style="font: 8px monospace; height: 188px"> + a b + </div> + <textarea/> + </div> + + <div class="flexbox"> + <textarea style="height: 122.5px"/><textarea style="height: 73.5px"/> + </div> + + <div class="flexbox"> + <textarea style="height: 93px"/><textarea style="height: 103px"/> + </div> + + <div class="flexbox"> + <textarea style="height: 114px"/><textarea style="height: 82px"/> + </div> + + <div class="flexbox"> + <textarea style="height: 106px"/><textarea style="height: 90px"/> + </div> + + <div class="flexbox"> + <textarea style="height: 46px"/><textarea style="height: 150px"/> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-basic-video-horiz-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-basic-video-horiz-001-ref.xht new file mode 100644 index 00000000000..e2449af8262 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-basic-video-horiz-001-ref.xht @@ -0,0 +1,62 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-basic-video-horiz-001-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + width: 200px; + background: lightgreen; + margin-bottom: 5px; + line-height: 8px; + } + video { + width: 10px; + height: 20px; + border: 1px dotted green; + } + </style> + </head> + <body> + <div class="flexbox"> + <video/> + </div> + + <div class="flexbox" style="height: 22px"> + some words + <video style="float:right"/> + </div> + + <div class="flexbox"> + <video style="width: 122.5px"/><video style="width: 73.5px"/> + </div> + + <div class="flexbox"> + <video style="width: 93px"/><video style="width: 103px"/> + </div> + + <div class="flexbox"> + <video style="width: 114px"/><video style="width: 82px"/> + </div> + + <div class="flexbox"> + <video style="width: 106px"/><video style="width: 90px"/> + </div> + + <div class="flexbox"> + <video style="width: 46px"/><video style="width: 150px"/> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-basic-video-vert-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-basic-video-vert-001-ref.xht new file mode 100644 index 00000000000..fbbbf54a504 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-basic-video-vert-001-ref.xht @@ -0,0 +1,66 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-basic-video-vert-001-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + height: 200px; + width: 22px; + float: left; + margin-right: 10px; + background: lightgreen; + line-height: 0; + } + video { + width: 20px; + height: 10px; + border: 1px dotted green; + } + </style> + </head> + <body> + <div class="flexbox"> + <video/> + </div> + + <div class="flexbox"> + <div style="font: 8px monospace; height: 188px"> + a b + </div> + <video/> + </div> + + <div class="flexbox"> + <video style="height: 122.5px"/><video style="height: 73.5px"/> + </div> + + <div class="flexbox"> + <video style="height: 93px"/><video style="height: 103px"/> + </div> + + <div class="flexbox"> + <video style="height: 114px"/><video style="height: 82px"/> + </div> + + <div class="flexbox"> + <video style="height: 106px"/><video style="height: 90px"/> + </div> + + <div class="flexbox"> + <video style="height: 46px"/><video style="height: 150px"/> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-break-request-horiz-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-break-request-horiz-001-ref.xht new file mode 100644 index 00000000000..7a37c3599c8 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-break-request-horiz-001-ref.xht @@ -0,0 +1,97 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" /> + <meta charset="utf-8" /> + <style> + div.flexbox { + border: 1px dashed black; + width: 60px; + height: 20px; + margin: 2px; + float: left; + } + div.item { + width: 28px; + border: 1px solid blue; + background: lightblue; + } + div.fullCrossSize { + height: 18px; + } + div.halfCrossSize { + height: 8px; + } + </style> +</head> +<body> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div style="clear: both"></div> + + <div class="flexbox"> + <div style="float: left" class="item fullCrossSize"></div> + <div style="float: left" class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div style="float: left" class="item fullCrossSize"></div> + <div style="float: left" class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item halfCrossSize"></div> + <div class="item halfCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item halfCrossSize"></div> + <div class="item halfCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item halfCrossSize"></div> + <div class="item halfCrossSize"></div> + </div> + <div style="clear: both"></div> + + <div class="flexbox"> + <div style="float: left" class="item halfCrossSize"></div> + <div style="float: left" class="item halfCrossSize"></div> + <div style="float: left" class="item halfCrossSize"></div> + </div> + <div class="flexbox"> + <div style="float: left" class="item halfCrossSize"></div> + <div style="float: left" class="item halfCrossSize"></div> + <div style="float: left" class="item halfCrossSize"></div> + </div> + <div class="flexbox"> + <div style="float: left" class="item halfCrossSize"></div> + <div style="float: left" class="item halfCrossSize"></div> + <div style="float: left" class="item halfCrossSize"></div> + </div> + <div class="flexbox"> + <div style="float: left" class="item halfCrossSize"></div> + <div style="float: left" class="item halfCrossSize"></div> + <div style="float: left" class="item halfCrossSize"></div> + </div> + <div class="flexbox"> + <div style="float: left" class="item halfCrossSize"></div> + <div style="float: left" class="item halfCrossSize"></div> + <div style="float: left" class="item halfCrossSize"></div> + </div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-break-request-horiz-002-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-break-request-horiz-002-ref.xht new file mode 100644 index 00000000000..9561ca44ee9 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-break-request-horiz-002-ref.xht @@ -0,0 +1,100 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" /> + <meta charset="utf-8" /> + <style> + div.flexbox { + border: 1px dashed black; + width: 60px; + height: 20px; + margin: 2px; + float: left; + } + div.item { + width: 28px; + border: 1px solid blue; + background: lightblue; + } + div.fullCrossSize { + height: 18px; + } + div.halfCrossSize { + height: 8px; + } + div.shrunkMainSize { + width: 18px; + } + </style> +</head> +<body> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div style="clear: both"></div> + + <div class="flexbox"> + <div style="float: left" class="item fullCrossSize"></div> + <div style="float: left" class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div style="float: left" class="item fullCrossSize"></div> + <div style="float: left" class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div style="float: left" class="item fullCrossSize"></div> + <div style="float: left" class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div style="float: left" class="item fullCrossSize"></div> + <div style="float: left" class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div style="float: left" class="item fullCrossSize"></div> + <div style="float: left" class="item fullCrossSize"></div> + </div> + <div style="clear: both"></div> + + <div class="flexbox"> + <div style="float: left" class="item fullCrossSize shrunkMainSize"></div> + <div style="float: left" class="item fullCrossSize shrunkMainSize"></div> + <div style="float: left" class="item fullCrossSize shrunkMainSize"></div> + </div> + <div class="flexbox"> + <div style="float: left" class="item fullCrossSize shrunkMainSize"></div> + <div style="float: left" class="item fullCrossSize shrunkMainSize"></div> + <div style="float: left" class="item fullCrossSize shrunkMainSize"></div> + </div> + <div class="flexbox"> + <div style="float: left" class="item fullCrossSize shrunkMainSize"></div> + <div style="float: left" class="item fullCrossSize shrunkMainSize"></div> + <div style="float: left" class="item fullCrossSize shrunkMainSize"></div> + </div> + <div class="flexbox"> + <div style="float: left" class="item fullCrossSize shrunkMainSize"></div> + <div style="float: left" class="item fullCrossSize shrunkMainSize"></div> + <div style="float: left" class="item fullCrossSize shrunkMainSize"></div> + </div> + <div class="flexbox"> + <div style="float: left" class="item fullCrossSize shrunkMainSize"></div> + <div style="float: left" class="item fullCrossSize shrunkMainSize"></div> + <div style="float: left" class="item fullCrossSize shrunkMainSize"></div> + </div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-break-request-vert-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-break-request-vert-001-ref.xht new file mode 100644 index 00000000000..c95d2df81cc --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-break-request-vert-001-ref.xht @@ -0,0 +1,97 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" /> + <meta charset="utf-8" /> + <style> + div.flexbox { + border: 1px dashed black; + width: 20px; + height: 60px; + margin: 2px; + float: left; + } + div.item { + height: 28px; + border: 1px solid blue; + background: lightblue; + } + div.fullCrossSize { + width: 18px; + } + div.halfCrossSize { + width: 8px; + } + </style> +</head> +<body> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div style="clear: both"></div> + + <div class="flexbox"> + <div class="item fullCrossSize"></div> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div style="float: left" class="item halfCrossSize"></div> + <div style="float: left" class="item halfCrossSize"></div> + </div> + <div class="flexbox"> + <div style="float: left" class="item halfCrossSize"></div> + <div style="float: left" class="item halfCrossSize"></div> + </div> + <div class="flexbox"> + <div style="float: left" class="item halfCrossSize"></div> + <div style="float: left" class="item halfCrossSize"></div> + </div> + <div style="clear: both"></div> + + <div class="flexbox"> + <div style="float: left" class="item halfCrossSize"></div> + <div style="float: left" class="item halfCrossSize"></div> + <div style="float: left" class="item halfCrossSize"></div> + </div> + <div class="flexbox"> + <div style="float: left" class="item halfCrossSize"></div> + <div style="float: left" class="item halfCrossSize"></div> + <div style="float: left" class="item halfCrossSize"></div> + </div> + <div class="flexbox"> + <div style="float: left" class="item halfCrossSize"></div> + <div style="float: left" class="item halfCrossSize"></div> + <div style="float: left" class="item halfCrossSize"></div> + </div> + <div class="flexbox"> + <div style="float: left" class="item halfCrossSize"></div> + <div style="float: left" class="item halfCrossSize"></div> + <div style="float: left" class="item halfCrossSize"></div> + </div> + <div class="flexbox"> + <div style="float: left" class="item halfCrossSize"></div> + <div style="float: left" class="item halfCrossSize"></div> + <div style="float: left" class="item halfCrossSize"></div> + </div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-break-request-vert-002-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-break-request-vert-002-ref.xht new file mode 100644 index 00000000000..65c65bb8931 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-break-request-vert-002-ref.xht @@ -0,0 +1,100 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" /> + <meta charset="utf-8" /> + <style> + div.flexbox { + border: 1px dashed black; + width: 20px; + height: 60px; + margin: 2px; + float: left; + } + div.item { + height: 28px; + border: 1px solid blue; + background: lightblue; + } + div.fullCrossSize { + width: 18px; + } + div.halfCrossSize { + width: 8px; + } + div.shrunkMainSize { + height: 18px; + } + </style> +</head> +<body> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + </div> + <div style="clear: both"></div> + + <div class="flexbox"> + <div class="item fullCrossSize"></div> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + <div class="item fullCrossSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize"></div> + <div class="item fullCrossSize"></div> + </div> + <div style="clear: both"></div> + + <div class="flexbox"> + <div class="item fullCrossSize shrunkMainSize"></div> + <div class="item fullCrossSize shrunkMainSize"></div> + <div class="item fullCrossSize shrunkMainSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize shrunkMainSize"></div> + <div class="item fullCrossSize shrunkMainSize"></div> + <div class="item fullCrossSize shrunkMainSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize shrunkMainSize"></div> + <div class="item fullCrossSize shrunkMainSize"></div> + <div class="item fullCrossSize shrunkMainSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize shrunkMainSize"></div> + <div class="item fullCrossSize shrunkMainSize"></div> + <div class="item fullCrossSize shrunkMainSize"></div> + </div> + <div class="flexbox"> + <div class="item fullCrossSize shrunkMainSize"></div> + <div class="item fullCrossSize shrunkMainSize"></div> + <div class="item fullCrossSize shrunkMainSize"></div> + </div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-collapsed-item-baseline-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-collapsed-item-baseline-001-ref.xht new file mode 100644 index 00000000000..1faaeaaaa45 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-collapsed-item-baseline-001-ref.xht @@ -0,0 +1,61 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><!-- In this reference case, we get each container to be sized the same as + in the testcase, without any visible baseline alignemnt, by using some + hidden flex items. +--><html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" /> + <meta charset="utf-8" /> + <style> + .flexContainer { + display: flex; + width: 50px; + background: yellow; + border: 1px dotted black; + margin: 5px; + align-items: flex-start; + } + .hiddenItemForSizing { + width: 0; + min-width: 0; /* disable default min-width:auto behavior */ + color: transparent; + align-self: baseline; + } + .largeFont { + font-size: 20px; + background: lightblue; + /* Our flex items get padding on opposite sides (top/bottom) so that they + produce a large combined height when baseline-aligned: */ + padding-top: 5px; + } + .smallFont { + font-size: 10px; + background: pink; + /* Our flex items get padding on opposite sides (top/bottom) so that they + produce a large combined height when baseline-aligned: */ + padding-bottom: 20px; + } + </style> +</head> +<body> + <div class="flexContainer"> + <div class="largeFont">a</div> + <!-- Hidden flex items used to determine container's cross size, + based on their baseline-aligned combined cross size: --> + <div class="largeFont hiddenItemForSizing">a</div> + <div class="smallFont hiddenItemForSizing">b</div> + </div> + + <div class="flexContainer"> + <div class="smallFont">b</div> + <!-- Hidden flex items used to determine container's cross size, + based on their baseline-aligned combined cross size: --> + <div class="largeFont hiddenItemForSizing">a</div> + <div class="smallFont hiddenItemForSizing">b</div> + </div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-collapsed-item-horiz-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-collapsed-item-horiz-001-ref.xht new file mode 100644 index 00000000000..036a81759ba --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-collapsed-item-horiz-001-ref.xht @@ -0,0 +1,100 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><!-- In this reference case, we have blocks in place of the testcase's + flex containers. The testcase's collapsed flex items are entirely + absent here (and the remaining content is sized using exact pixel + values). +--><html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" /> + <meta charset="utf-8" /> + <style> + .flexContainer { + display: flex; + background: yellow; + border: 1px dotted black; + float: left; + margin: 5px; + } + .flexContainer > * { + /* All flex items have 20px base size */ + width: 20px; + } + .collapse { + flex-basis: 0; + height: 20px; + } + .flexible { + flex: 1 auto; + } + .heightTall { + height: 40px; + background: purple; + } + .heightAuto { + background: teal; + } + .heightShort { + height: 10px; + background: pink; + } + </style> +</head> +<body> + <!-- FIRST ROW: --> + <!-- Just one (collapsed) flex item, which ends up establishing + the container's size (even though it's collapsed): --> + <div class="flexContainer"> + <div class="heightTall collapse"></div> + </div> + + <div style="clear: both"></div> + + <!-- SECOND ROW: --> + <!-- One collapsed flex item, one short flex item. + (Container ends up with collapsed item's height) --> + <div class="flexContainer"> + <div class="heightTall collapse"></div> + <div class="heightShort"></div> + </div> + <!-- (same, but with items in opposite order) --> + <div class="flexContainer"> + <div class="heightShort"></div> + <div class="heightTall collapse"></div> + </div> + + <div style="clear: both"></div> + + <!-- THIRD ROW: --> + <!-- One collapsed flex item, one stretched flex item. + (Container and stretched item end up with collapsed item's height) --> + <div class="flexContainer"> + <div class="heightTall collapse"></div> + <div class="heightAuto"></div> + </div> + <!-- (again, with items in opposite order) --> + <div class="flexContainer"> + <div class="heightAuto"></div> + <div class="heightTall collapse"></div> + </div> + + <div style="clear: both"></div> + + <!-- FOURTH ROW: --> + <!-- One collapsed flex item, one other flex item; both are flexible. + (The non-collapsed one should take all of the available width.) --> + <div class="flexContainer"> + <div class="heightAuto collapse"></div> + <div class="heightTall flexible"></div> + </div> + <!-- (again, with items in opposite order) --> + <div class="flexContainer"> + <div class="heightTall flexible"></div> + <div class="heightAuto collapse"></div> + </div> + + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-collapsed-item-horiz-002-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-collapsed-item-horiz-002-ref.xht new file mode 100644 index 00000000000..9ac999beda4 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-collapsed-item-horiz-002-ref.xht @@ -0,0 +1,107 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" /> + <meta charset="utf-8" /> + <style> + .flexContainer { + display: flex; + flex-wrap: wrap; + + /* These let us show where each flex line begins (and hence, how tall + the flex lines end up) */ + align-content: flex-start; + align-items: flex-start; + + width: 30px; + background: yellow; + border: 1px dotted black; + float: left; + margin: 5px; + } + .collapsedItem { + width: 0; + height: 25px; + } + .halfWidthItem { + width: 15px; + height: 15px; + background: teal; + } + .fullWidthItem { + width: 30px; + height: 20px; + background: purple; + } + .veryTallItem { + width: 15px; + height: 40px; + background: olive; + } + </style> +</head> +<body> + <!-- FIRST ROW: --> + <!-- One collapsed flex item, at the beginning of a flex line, which + ends up establishing its flex line's cross size: --> + <div class="flexContainer"> + <div class="collapsedItem"></div> + <div class="halfWidthItem"></div> + <div class="fullWidthItem"></div> + </div> + <!-- ...and now with it being at the end of that flex line: --> + <div class="flexContainer"> + <div class="halfWidthItem"></div> + <div class="collapsedItem"></div> + <div class="fullWidthItem"></div> + </div> + + <div style="clear: both"></div> + + <!-- SECOND ROW: --> + <!-- One collapsed flex item, initially in its own line. It ends + up being merged into another line after it collapses, due to its + (post-collapse) zero main-size. --> + <div class="flexContainer"> + <div class="collapsedItem"></div> + <div class="fullWidthItem"></div> + <div class="fullWidthItem"></div> + </div> + <div class="flexContainer"> + <div class="fullWidthItem"></div> + <div class="collapsedItem"></div> + <div class="fullWidthItem"></div> + </div> + <div class="flexContainer"> + <div class="fullWidthItem"></div> + <div class="fullWidthItem"></div> + <div class="collapsedItem"></div> + </div> + + <div style="clear: both"></div> + + <!-- THIRD ROW: --> + <!-- One collapsed flex item, initially in a line with an even-taller item. + The collapsed item ends up shifting into another line after it + collapses, but it carries the taller item's cross size with it, as its + strut size. --> + <div class="flexContainer"> + <div class="fullWidthItem"></div> + <div style="height: 40px" class="collapsedItem"></div> + <div class="veryTallItem"></div> + </div> + <!-- ...and now with two (differently-sized) struts in first line: + (the one that's taller - due to being initially grouped with the tall + item - wins out.) --> + <div class="flexContainer"> + <div class="collapsedItem"></div> + <div class="fullWidthItem"></div> + <div style="height: 40px" class="collapsedItem"></div> + <div class="veryTallItem"></div> + </div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-collapsed-item-horiz-003-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-collapsed-item-horiz-003-ref.xht new file mode 100644 index 00000000000..782e3542553 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-collapsed-item-horiz-003-ref.xht @@ -0,0 +1,45 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" /> + <meta charset="utf-8" /> + <style> + .flexContainer { + display: flex; + flex-wrap: wrap; + align-content: stretch; /* Initial value; just here for emphasis */ + width: 25px; + height: 60px; + background: yellow; + border: 1px dotted black; + float: left; + margin: 5px; + } + .collapsedItem { + width: 0; + height: 40px; + } + .shortItem { + width: 25px; + height: 10px; + background: purple; + } + .tallItem { + width: 10px; + height: 30px; + background: olive; + } + </style> +</head> +<body> + <div class="flexContainer"> + <div class="shortItem"></div> + <div class="collapsedItem"></div> + <div class="tallItem"></div> + </div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-flex-direction-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-flex-direction-ref.xht new file mode 100644 index 00000000000..9e6d400584e --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-flex-direction-ref.xht @@ -0,0 +1,50 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference: Flexbox direction and wrapping</title> + <link href="mailto:gavin.elster@me.com" rel="author" title="Gavin Elster" /> + <link href="http://fantasai.inkedblade.net/contact" rel="reviewer" title="Elika J. Etemad" /> + <meta content="" name="flags" /> + <style> + + /* Ref test styles */ + + .flex-wrapper div{ + display: inline-block; + } + + + /* Test-series styles */ + + .flex-wrapper { + width: 120px; + height: 120px; + + /* should only display on error */ + background: red; + + /* Enforce writing mode */ + direction: ltr; + writing-mode: horizontal-tb; + } + + .flex-wrapper div { + width: 38px; + height: 38px; + + background: green; + border: 1px solid limegreen; + + color: white; + line-height: 40px; + text-align: center; + vertical-align: middle; + } + </style> + </head> + <body> + <p>The test passes if there is a 3x3 grid of green squares, numbered 1-9 left-to-right and top-to-bottom, and there is no red.</p> + <div class="flex-wrapper"> + <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div> + </div> + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-flex-flow-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-flex-flow-001-ref.xht new file mode 100644 index 00000000000..83805d4875c --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-flex-flow-001-ref.xht @@ -0,0 +1,126 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" /> + <meta charset="utf-8" /> + <style> + .flexContainer { + height: 60px; + width: 60px; + font: 10px sans-serif; + background: yellow; + float: left; + border: 1px solid black; + } + .flexContainer > * { + border: 1px dotted gray; + width: 28px; + height: 28px; + float: left; + } + + /* The single-line flex containers' flex items are shrunk in main axis: */ + .singleLineHoriz > * { + width: 13px; + } + .singleLineVert > * { + height: 13px; + float: none; + } + </style> +</head> +<body> + <!-- single-line (flex-wrap unspecified): --> + <div class="flexContainer singleLineHoriz"><!-- flex-flow: row --> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + <div class="flexContainer singleLineHoriz"><!-- flex-flow: row-reverse --> + <div>4</div><div>3</div><div>2</div><div>1</div> + </div> + <div class="flexContainer singleLineVert"><!-- flex-flow: column --> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + <div class="flexContainer singleLineVert"><!-- flex-flow: column-reverse --> + <div>4</div><div>3</div><div>2</div><div>1</div> + </div> + + <div style="clear:both"></div> + + <!-- now using "wrap", after flex-direction: --> + <div class="flexContainer"><!-- flex-flow: row wrap --> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + <div class="flexContainer"><!-- flex-flow: row-reverse wrap --> + <div>2</div><div>1</div><div>4</div><div>3</div> + </div> + <div class="flexContainer"><!-- flex-flow: column wrap --> + <div>1</div><div>3</div><div>2</div><div>4</div> + </div> + <div class="flexContainer"><!-- flex-flow: column-reverse wrap --> + <div>2</div><div>4</div><div>1</div><div>3</div> + </div> + + <div style="clear:both"></div> + + <!-- now using "wrap", before flex-direction: --> + <div class="flexContainer"><!-- flex-flow: wrap row --> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + <div class="flexContainer"><!-- flex-flow: wrap row-reverse --> + <div>2</div><div>1</div><div>4</div><div>3</div> + </div> + <div class="flexContainer"><!-- flex-flow: wrap column --> + <div>1</div><div>3</div><div>2</div><div>4</div> + </div> + <div class="flexContainer"><!-- flex-flow: wrap column-reverse --> + <div>2</div><div>4</div><div>1</div><div>3</div> + </div> + + <div style="clear:both"></div> + + <!-- now using "wrap-reverse", after flex-direction: --> + <div class="flexContainer"><!-- flex-flow: row wrap-reverse --> + <div>3</div><div>4</div><div>1</div><div>2</div> + </div> + <div class="flexContainer"><!-- flex-flow: row-reverse wrap-reverse --> + <div>4</div><div>3</div><div>2</div><div>1</div> + </div> + <div class="flexContainer"><!-- flex-flow: column wrap-reverse --> + <div>3</div><div>1</div><div>4</div><div>2</div> + </div> + <div class="flexContainer"><!-- flex-flow: column-reverse wrap-reverse --> + <div>4</div><div>2</div><div>3</div><div>1</div> + </div> + + <div style="clear:both"></div> + + <!-- now using "wrap-reverse", before flex-direction: --> + <div class="flexContainer"><!-- flex-flow: wrap-reverse row --> + <div>3</div><div>4</div><div>1</div><div>2</div> + </div> + <div class="flexContainer"><!-- flex-flow: wrap-reverse row-reverse --> + <div>4</div><div>3</div><div>2</div><div>1</div> + </div> + <div class="flexContainer"> <!-- flex-flow: wrap-reverse column --> + <div>3</div><div>1</div><div>4</div><div>2</div> + </div> + <div class="flexContainer"><!-- flex-flow: wrap-reverse column-reverse --> + <div>4</div><div>2</div><div>3</div><div>1</div> + </div> + + <div style="clear:both"></div> + + <!-- now just specifying flex-wrap (no flex-direction) --> + <div class="flexContainer"><!-- flex-flow: wrap --> + <div>1</div><div>2</div><div>3</div><div>4</div> + </div> + <div class="flexContainer"><!-- flex-flow: wrap-reverse --> + <div>3</div><div>4</div><div>1</div><div>2</div> + </div> + + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-flex-flow-002-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-flex-flow-002-ref.xht new file mode 100644 index 00000000000..a4ca4a3671c --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-flex-flow-002-ref.xht @@ -0,0 +1,132 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" /> + <meta charset="utf-8" /> + <style> + .flexContainer { + height: 60px; + width: 60px; + font: 10px sans-serif; + background: yellow; + float: left; + border: 1px solid black; + } + .flexContainer > * { + border: 1px dotted gray; + width: 28px; + height: 28px; + float: left; + } + + /* The single-line flex containers' flex items are shrunk in main axis: */ + .singleLineHoriz > * { + width: 18px; + } + .singleLineVert > * { + height: 18px; + float: none; + } + .hidden { + /* We use this to hide the "4" box in each of the multi-line chunks. + The testcase has 3 flex items in each flex container, but it's easier + to write this reference case w/ a hidden 4th box as a space-filler. */ + visibility: hidden; + } + </style> +</head> +<body> + <!-- single-line (flex-wrap unspecified): --> + <div class="flexContainer singleLineHoriz"><!-- flex-flow: row --> + <div>1</div><div>2</div><div>3</div> + </div> + <div class="flexContainer singleLineHoriz"><!-- flex-flow: row-reverse --> + <div>3</div><div>2</div><div>1</div> + </div> + <div class="flexContainer singleLineVert"><!-- flex-flow: column --> + <div>1</div><div>2</div><div>3</div> + </div> + <div class="flexContainer singleLineVert"><!-- flex-flow: column-reverse --> + <div>3</div><div>2</div><div>1</div> + </div> + + <div style="clear:both"></div> + + <!-- now using "wrap", after flex-direction: --> + <div class="flexContainer"><!-- flex-flow: row wrap --> + <div>1</div><div>2</div><div>3</div><div class="hidden">4</div> + </div> + <div class="flexContainer"><!-- flex-flow: row-reverse wrap --> + <div>2</div><div>1</div><div class="hidden">4</div><div>3</div> + </div> + <div class="flexContainer"><!-- flex-flow: column wrap --> + <div>1</div><div>3</div><div>2</div><div class="hidden">4</div> + </div> + <div class="flexContainer"><!-- flex-flow: column-reverse wrap --> + <div>2</div><div class="hidden">4</div><div>1</div><div>3</div> + </div> + + <div style="clear:both"></div> + + <!-- now using "wrap", before flex-direction: --> + <div class="flexContainer"><!-- flex-flow: wrap row --> + <div>1</div><div>2</div><div>3</div><div class="hidden">4</div> + </div> + <div class="flexContainer"><!-- flex-flow: wrap row-reverse --> + <div>2</div><div>1</div><div class="hidden">4</div><div>3</div> + </div> + <div class="flexContainer"><!-- flex-flow: wrap column --> + <div>1</div><div>3</div><div>2</div><div class="hidden">4</div> + </div> + <div class="flexContainer"><!-- flex-flow: wrap column-reverse --> + <div>2</div><div class="hidden">4</div><div>1</div><div>3</div> + </div> + + <div style="clear:both"></div> + + <!-- now using "wrap-reverse", after flex-direction: --> + <div class="flexContainer"><!-- flex-flow: row wrap-reverse --> + <div>3</div><div class="hidden">4</div><div>1</div><div>2</div> + </div> + <div class="flexContainer"><!-- flex-flow: row-reverse wrap-reverse --> + <div class="hidden">4</div><div>3</div><div>2</div><div>1</div> + </div> + <div class="flexContainer"><!-- flex-flow: column wrap-reverse --> + <div>3</div><div>1</div><div class="hidden">4</div><div>2</div> + </div> + <div class="flexContainer"><!-- flex-flow: column-reverse wrap-reverse --> + <div class="hidden">4</div><div>2</div><div>3</div><div>1</div> + </div> + + <div style="clear:both"></div> + + <!-- now using "wrap-reverse", before flex-direction: --> + <div class="flexContainer"><!-- flex-flow: wrap-reverse row --> + <div>3</div><div class="hidden">4</div><div>1</div><div>2</div> + </div> + <div class="flexContainer"><!-- flex-flow: wrap-reverse row-reverse --> + <div class="hidden">4</div><div>3</div><div>2</div><div>1</div> + </div> + <div class="flexContainer"> <!-- flex-flow: wrap-reverse column --> + <div>3</div><div>1</div><div class="hidden">4</div><div>2</div> + </div> + <div class="flexContainer"><!-- flex-flow: wrap-reverse column-reverse --> + <div class="hidden">4</div><div>2</div><div>3</div><div>1</div> + </div> + + <div style="clear:both"></div> + + <!-- now just specifying flex-wrap (no flex-direction) --> + <div class="flexContainer"><!-- flex-flow: wrap --> + <div>1</div><div>2</div><div>3</div><div class="hidden">4</div> + </div> + <div class="flexContainer"><!-- flex-flow: wrap-reverse --> + <div>3</div><div class="hidden">4</div><div>1</div><div>2</div> + </div> + + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-flex-wrap-flexing-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-flex-wrap-flexing-ref.xht new file mode 100644 index 00000000000..94411aa7242 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-flex-wrap-flexing-ref.xht @@ -0,0 +1,17 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Flexbox Test: flex-wrap flexes widths after line breaking</title> + <link href="mailto:stearns@adobe.com" rel="author" title="Alan Stearns" /> + <style> + .container { + width: 150px; + height: 100px; + background: green; + } + </style> +</head> +<body> + <p>Test passes if there is a green rectangle and no red.</p> + <div class="container"></div> + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-flex-wrap-horiz-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-flex-wrap-horiz-001-ref.xht new file mode 100644 index 00000000000..c81cf23582f --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-flex-wrap-horiz-001-ref.xht @@ -0,0 +1,98 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" /> + <meta charset="utf-8" /> + <style> + div.flexbox { + border: 1px dashed black; + width: 100px; + height: 12px; + margin-bottom: 2px; + } + div.halfMainSize { + width: 48px; + border: 1px solid blue; + background: lightblue; + } + div.hugeMainSize { + width: 148px; + border: 1px solid purple; + background: fuchsia; + } + div.fullCrossSize { + height: 10px; + } + div.halfCrossSize { + height: 4px; + } + </style> +</head> +<body> + + <!-- Single small flex item --> + <div class="flexbox"> + <div class="halfMainSize fullCrossSize"></div> + </div> + + <!-- Single small flex item with 'margin-left' set to push it to protrude + from the far edge of the container (and to shrink as a result) --> + <div class="flexbox"> + <div style="margin-left: 80px; width: 18px" class="halfMainSize fullCrossSize"></div> + </div> + + <!-- Single small inflexible flex item with 'margin-left' set to push it to + protrude from the far edge of the container --> + <div class="flexbox"> + <div style="margin-left: 80px" class="halfMainSize fullCrossSize"></div> + </div> + + <!-- Two flex items, exactly large enough to fit in line (no wrapping): --> + <div class="flexbox"> + <div style="float: left" class="halfMainSize fullCrossSize"></div> + <div style="float: left" class="halfMainSize fullCrossSize"></div> + </div> + + <!-- and now with some margin on first item, to force second item to wrap: --> + <div class="flexbox"> + <div class="halfMainSize halfCrossSize"></div> + <div class="halfMainSize halfCrossSize"></div> + </div> + + <!-- and now with some margin on second item, again forcing it to wrap: --> + <div class="flexbox"> + <div class="halfMainSize halfCrossSize"></div> + <div class="halfMainSize halfCrossSize"></div> + </div> + + <!-- Single large flex item: overflows (but does not wrap) and is shrunk + to fit container's main-size --> + <div class="flexbox"> + <div style="width: 98px" class="hugeMainSize fullCrossSize"></div> + </div> + + <!-- Single large flex item: overflows (but does not wrap) --> + <div class="flexbox"> + <div class="hugeMainSize fullCrossSize"></div> + </div> + + <!-- Small flex item, followed by large flex item (which wraps to + its own line and then shrink to container's main-size) --> + <div class="flexbox"> + <div class="halfMainSize halfCrossSize"></div> + <div style="width: 98px" class="hugeMainSize halfCrossSize"></div> + </div> + + <!-- Small flex item, followed by large inflexible flex item (which wraps to + its own line and then shrink to container's main-size) --> + <div class="flexbox"> + <div class="halfMainSize halfCrossSize"></div> + <div class="hugeMainSize halfCrossSize"></div> + </div> + + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-flex-wrap-horiz-002-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-flex-wrap-horiz-002-ref.xht new file mode 100644 index 00000000000..10ad506d8d7 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-flex-wrap-horiz-002-ref.xht @@ -0,0 +1,63 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" /> + <meta charset="utf-8" /> + <style> + div.flexbox { + border: 1px dashed black; + min-width: 100px; + height: 12px; + float: left; + clear: both; + margin-bottom: 2px; + } + div.smallItem { + width: 30px; + border: 1px solid blue; + background: lightblue; + float: left; + } + div.fullCrossSize { + height: 10px; + } + div.halfCrossSize { + height: 4px; + } + </style> +</head> +<body> + + <!-- No flex items --> + <div class="flexbox"> + </div> + + <!-- Single small flex item --> + <div class="flexbox"> + <div class="smallItem fullCrossSize"></div> + </div> + + <!-- Multiple flex items, larger than flex container's min-size: --> + <div class="flexbox"> + <div class="smallItem fullCrossSize"></div> + <div class="smallItem fullCrossSize"></div> + <div class="smallItem fullCrossSize"></div> + <div class="smallItem fullCrossSize"></div> + <div class="smallItem fullCrossSize"></div> + </div> + + <!--- ...and now with flex container constrained by both min and max-size --> + <div style="max-width: 120px" class="flexbox"> + <div class="smallItem halfCrossSize"></div> + <div class="smallItem halfCrossSize"></div> + <div class="smallItem halfCrossSize"></div> + <div class="smallItem halfCrossSize"></div> + <div class="smallItem halfCrossSize"></div> + </div> + + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-flex-wrap-nowrap-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-flex-wrap-nowrap-ref.xht new file mode 100644 index 00000000000..c591cb9581a --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-flex-wrap-nowrap-ref.xht @@ -0,0 +1,20 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference: Flexbox flex-wrap: nowrap</title> + <link href="mailto:gavin.elster@me.com" rel="author" title="Gavin Elster" /> + <link href="http://fantasai.inkedblade.net/contact" rel="reviewer" title="Elika J. Etemad" /> + <meta content="" name="flags" /> + <style type="text/css"> + div { + width: 120px; + height: 120px; + background: green; + } + </style> +</head> +<body> + <p>The test passes if there is a green square and no red.</p> + <div></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-flex-wrap-vert-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-flex-wrap-vert-001-ref.xht new file mode 100644 index 00000000000..f6b2cdc50be --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-flex-wrap-vert-001-ref.xht @@ -0,0 +1,99 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" /> + <meta charset="utf-8" /> + <style> + div.flexbox { + border: 1px dashed black; + width: 12px; + height: 100px; + margin-right: 2px; + float: left; + } + div.halfMainSize { + height: 48px; + border: 1px solid blue; + background: lightblue; + } + div.hugeMainSize { + height: 148px; + border: 1px solid purple; + background: fuchsia; + } + div.fullCrossSize { + width: 10px; + } + div.halfCrossSize { + width: 4px; + } + </style> +</head> +<body> + + <!-- Single small flex item --> + <div class="flexbox"> + <div class="halfMainSize fullCrossSize"></div> + </div> + + <!-- Single small flex item with 'margin-left' set to push it to protrude + from the far edge of the container (and to shrink as a result) --> + <div class="flexbox"> + <div style="margin-top: 80px; height: 18px" class="halfMainSize fullCrossSize"></div> + </div> + + <!-- Single small inflexible flex item with 'margin-left' set to push it to + protrude from the far edge of the container --> + <div class="flexbox"> + <div style="margin-top: 80px" class="halfMainSize fullCrossSize"></div> + </div> + + <!-- Two flex items, exactly large enough to fit in line (no wrapping): --> + <div class="flexbox"> + <div class="halfMainSize fullCrossSize"></div> + <div class="halfMainSize fullCrossSize"></div> + </div> + + <!-- and now with some margin on first item, to force second item to wrap: --> + <div class="flexbox"> + <div style="float: left" class="halfMainSize halfCrossSize"></div> + <div style="float: left" class="halfMainSize halfCrossSize"></div> + </div> + + <!-- and now with some margin on second item, again forcing it to wrap: --> + <div class="flexbox"> + <div style="float: left" class="halfMainSize halfCrossSize"></div> + <div style="float: left" class="halfMainSize halfCrossSize"></div> + </div> + + <!-- Single large flex item: overflows (but does not wrap) and is shrunk + to fit container's main-size --> + <div class="flexbox"> + <div style="height: 98px" class="hugeMainSize fullCrossSize"></div> + </div> + + <!-- Single large flex item: overflows (but does not wrap) --> + <div class="flexbox"> + <div class="hugeMainSize fullCrossSize"></div> + </div> + + <!-- Small flex item, followed by large flex item (which wraps to + its own line and then shrink to container's main-size) --> + <div class="flexbox"> + <div style="float: left" class="halfMainSize halfCrossSize"></div> + <div style="float: left; height: 98px" class="hugeMainSize halfCrossSize"></div> + </div> + + <!-- Small flex item, followed by large inflexible flex item (which wraps to + its own line and then shrink to container's main-size) --> + <div class="flexbox"> + <div style="float: left" class="halfMainSize halfCrossSize"></div> + <div style="float: left" class="hugeMainSize halfCrossSize"></div> + </div> + + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-flex-wrap-vert-002-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-flex-wrap-vert-002-ref.xht new file mode 100644 index 00000000000..0f7b6073b62 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-flex-wrap-vert-002-ref.xht @@ -0,0 +1,58 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" /> + <meta charset="utf-8" /> + <style> + div.flexbox { + border: 1px dashed black; + width: 12px; + min-height: 100px; + margin-right: 2px; + float: left; + } + div.smallItem { + height: 30px; + border: 1px solid blue; + background: lightblue; + } + div.halfCrossSize { + width: 4px; + } + </style> +</head> +<body> + + <!-- No flex items --> + <div class="flexbox"> + </div> + + <!-- Single small flex item --> + <div class="flexbox"> + <div class="smallItem"></div> + </div> + + <!-- Multiple flex items, larger than flex container's min-size: --> + <div class="flexbox"> + <div class="smallItem"></div> + <div class="smallItem"></div> + <div class="smallItem"></div> + <div class="smallItem"></div> + <div class="smallItem"></div> + </div> + + <!--- ...and now with flex container constrained by both min and max-size --> + <div style="max-height: 120px" class="flexbox"> + <div style="float: left" class="smallItem halfCrossSize"></div> + <div style="float: left" class="smallItem halfCrossSize"></div> + <div style="float: left" class="smallItem halfCrossSize"></div> + <div style="float: left" class="smallItem halfCrossSize"></div> + <div style="float: left" class="smallItem halfCrossSize"></div> + </div> + + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-items-as-stacking-contexts-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-items-as-stacking-contexts-001-ref.xht new file mode 100644 index 00000000000..a6e02cda81d --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-items-as-stacking-contexts-001-ref.xht @@ -0,0 +1,121 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><!-- Reference case, with floated elements in place of flex items, and using + "position: relative" on those elements, to make z-index work on them + outside of a flex container. --><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-items-as-stacking-contexts-001-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .flexbox { + width: 90px; + height: 10px; + border: 2px solid gray; + margin-bottom: 10px; + } + .a { + width: 10px; + height: 10px; + background: lightblue; + min-width: 0; + float: left; + } + .b { + width: 10px; + height: 10px; + background: pink; + min-width: 0; + margin-right: 10px; + float: left; + } + .aKid { + margin-left: 3px; + margin-top: 3px; + width: 10px; + height: 10px; + background: steelblue; + border: 1px solid blue; + } + .bKid { + margin-left: 3px; + margin-top: 6px; + width: 10px; + height: 10px; + background: violet; + border: 1px solid purple; + } + + .z0, .z1, .zn1 { position: relative; } + .z0 { z-index: 0; } + .z1 { z-index: 1; } + .zn1 { z-index: -1; } + + </style> + </head> + <body> + <!-- No "z-index" --> + <div class="flexbox"> + <div class="a"><div class="aKid"/></div> + <div class="b"><div class="bKid"/></div> + </div> + + <!-- Various "z-index" just on the first item --> + <div class="flexbox"> + <div class="a zn1"><div class="aKid"/></div> + <div class="b"><div class="bKid"/></div> + + <div class="a z0"><div class="aKid"/></div> + <div class="b"><div class="bKid"/></div> + + <div class="a z1"><div class="aKid"/></div> + <div class="b"><div class="bKid"/></div> + </div> + + <!-- Various "z-index" just on the second item --> + <div class="flexbox"> + <div class="a"><div class="aKid"/></div> + <div class="b zn1"><div class="bKid"/></div> + + <div class="a"><div class="aKid"/></div> + <div class="b z0"><div class="bKid"/></div> + + <div class="a"><div class="aKid"/></div> + <div class="b z1"><div class="bKid"/></div> + </div> + + <!-- Various "z-index" on the first item, w/ "z-index:0" on second item --> + <div class="flexbox"> + <div class="a zn1"><div class="aKid"/></div> + <div class="b z0"><div class="bKid"/></div> + + <div class="a z0"><div class="aKid"/></div> + <div class="b z0"><div class="bKid"/></div> + + <div class="a z1"><div class="aKid"/></div> + <div class="b z0"><div class="bKid"/></div> + </div> + + <!-- Various "z-index" on the second item, w/ "z-index:0" on first item --> + <div class="flexbox"> + <div class="a z0"><div class="aKid"/></div> + <div class="b zn1"><div class="bKid"/></div> + + <div class="a z0"><div class="aKid"/></div> + <div class="b z0"><div class="bKid"/></div> + + <div class="a z0"><div class="aKid"/></div> + <div class="b z1"><div class="bKid"/></div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-items-as-stacking-contexts-002-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-items-as-stacking-contexts-002-ref.xht new file mode 100644 index 00000000000..b1fb51a74b3 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-items-as-stacking-contexts-002-ref.xht @@ -0,0 +1,47 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" /> + <style> + body { font: 10px sans-serif } + .flexContainer { + background: orange; + width: 70px; + padding: 2px; + margin-bottom: 2px; + } + + .flexContainer > div:first-child { + margin-right: 10px; /* the space between the flex items, in testcase */ + } + + .item1 { + display: inline-block; + background: lightblue; + width: 30px; + } + .item2 { + display: inline-block; + background: yellow; + width: 30px; + } + </style> +</head> +<body> + <div class="flexContainer"><div class="item1">ThisIsALongUnbrokenString</div><div class="item2">HereIsSomeMoreLongText</div></div> + + <div class="flexContainer"><div style="position:relative" class="item1">ThisIsALongUnbrokenString</div><div class="item2">HereIsSomeMoreLongText</div></div> + + <div class="flexContainer"><div style="position:relative" class="item1">ThisIsALongUnbrokenString</div><div class="item2">HereIsSomeMoreLongText</div></div> + + <div class="flexContainer"><div class="item2">HereIsSomeMoreLongText</div><div class="item1">ThisIsALongUnbrokenString</div></div> + + <div class="flexContainer"><div class="item2">HereIsSomeMoreLongText</div><div class="item1">ThisIsALongUnbrokenString</div></div> + + <div class="flexContainer"><div style="position:relative" class="item2">HereIsSomeMoreLongText</div><div class="item1">ThisIsALongUnbrokenString</div></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-items-as-stacking-contexts-003-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-items-as-stacking-contexts-003-ref.xht new file mode 100644 index 00000000000..4bb95b2a73a --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-items-as-stacking-contexts-003-ref.xht @@ -0,0 +1,62 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" /> + <style> + .flexContainer { + background: orange; + width: 70px; + height: 20px; + padding: 2px; + margin-bottom: 2px; + } + .item1 { + display: inline-block; + background: lightblue; + width: 30px; + height: 16px; + padding: 2px; + margin-right: 2px; + vertical-align: top; + } + .item2 { + display: inline-block; + background: yellow; + width: 30px; + height: 16px; + padding: 2px; + vertical-align: top; + } + .grandchildA { + background: purple; + width: 80px; + height: 6px; + position: relative; + z-index: 10; + } + .grandchildB { + background: teal; + width: 80px; + height: 6px; + position: relative; + z-index: 20; + } + .grandchildC { + background: lime; + width: 20px; + height: 16px; + position: relative; + /* This z-index should interleave this content + between grandchildA and grandchildB: */ + z-index: 15; + } + </style> +</head> +<body> + <div class="flexContainer"><div class="item1"><div class="grandchildA"></div><div class="grandchildB"></div></div><div class="item2"><div class="grandchildC"></div></div></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-justify-content-horiz-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-justify-content-horiz-001-ref.xht new file mode 100644 index 00000000000..93c1252fb2e --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-justify-content-horiz-001-ref.xht @@ -0,0 +1,111 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-justify-content-horiz-001-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + margin-bottom: 2px; + line-height: 0; + } + div.flexbox > * { + display: inline-block; + } + div.a { + height: 20px; + width: 10px; + background: lightgreen; + } + div.b { + height: 20px; + width: 50px; + background: pink; + } + div.c { + height: 20px; + width: 100px; + background: orange; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox"> + <div class="a" style="margin-left: 190px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 140px"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 40px"/><div class="b"/><div class="c"/> + </div> + + <!-- center --> + <div class="flexbox"> + <div class="a" style="margin-left: 95px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 70px"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 20px"/><div class="b"/><div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b" style="margin-left: 140px"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b" style="margin-left: 20px"/><div class="c" style="margin-left: 20px"/> + </div> + + <!-- space-around --> + <div class="flexbox"> + <div class="a" style="margin-left: 95px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 35px"/><div class="b" style="margin-left: 70px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: calc(40px / 6)"/><div class="b" style="margin-left: calc(40px / 3)"/><div class="c" style="margin-left: calc(40px / 3)"/> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-justify-content-horiz-002-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-justify-content-horiz-002-ref.xht new file mode 100644 index 00000000000..2bcfa06aeaa --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-justify-content-horiz-002-ref.xht @@ -0,0 +1,125 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-justify-content-horiz-002-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + width: 200px; + line-height: 0; + margin-bottom: 4px; + border: 1px dotted black; + } + div.flexbox > * { + vertical-align: top; + display: inline-block; + } + div.a { + height: 10px; + width: 10px; + background: lightgreen; + border-style: solid; + border-color: purple; + border-top-width: 1px; + border-right-width: 2px; + border-bottom-width: 3px; + border-left-width: 4px; + padding: 2px; + } + div.b { + height: 10px; + width: 50px; + background: pink; + padding: 4px 3px 2px 1px; + margin: 2px 3px 4px 5px; + } + div.c { + height: 10px; + width: 100px; + background: orange; + margin: 3px; + border: 2px dashed teal; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox"> + <div class="a" style="margin-left: 180px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 118px"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 8px"/><div class="b"/><div class="c"/> + </div> + + <!-- center --> + <div class="flexbox"> + <div class="a" style="margin-left: 90px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 59px"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 4px"/><div class="b"/><div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div style="margin-left: 118px"><div class="b"/></div> + </div> + <div class="flexbox"> + <div class="a"/><div style="margin-left: 4px"><div class="b"/></div><div style="margin-left: 4px"><div class="c"/></div> + </div> + + <!-- space-around --> + <div class="flexbox"> + <div class="a" style="margin-left: 90px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 29.5px"/><div style="margin-left: 59px"><div class="b"/></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: calc(8px / 6)"/><div style="margin-left: calc(8px / 3)"><div class="b"/></div><div style="margin-left: calc(8px / 3)"><div class="c"/></div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-justify-content-horiz-003-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-justify-content-horiz-003-ref.xht new file mode 100644 index 00000000000..1388eab3f98 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-justify-content-horiz-003-ref.xht @@ -0,0 +1,112 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-justify-content-horiz-003-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + body { margin-left: 0px; } /* We'll apply margins w/ style attribute */ + div.flexbox { + margin-bottom: 2px; + line-height: 0; + } + div.flexbox > * { + display: inline-block; + } + div.a { + height: 20px; + width: 35px; + background: lightgreen; + } + div.b { + height: 20px; + width: 40px; + background: pink; + } + div.c { + height: 20px; + width: 45px; + background: orange; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox" style="margin-left: 95px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-left: 55px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-left: 10px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- center --> + <div class="flexbox" style="margin-left: 97.5px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-left: 77.5px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-left: 55px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-around --> + <div class="flexbox" style="margin-left: 97.5px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-left: 77.5px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-left: 55px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-justify-content-horiz-004-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-justify-content-horiz-004-ref.xht new file mode 100644 index 00000000000..fb4f5848bdc --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-justify-content-horiz-004-ref.xht @@ -0,0 +1,124 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-justify-content-horiz-004-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + body { margin-left: 0px; } /* We'll apply margins w/ style attribute */ + div.flexbox { + line-height: 0; + margin-bottom: 4px; + } + div.flexbox > * { + vertical-align: top; + display: inline-block; + } + div.a { + height: 10px; + width: 35px; + background: lightgreen; + border-style: solid; + border-color: purple; + border-top-width: 1px; + border-right-width: 2px; + border-bottom-width: 3px; + border-left-width: 4px; + padding: 2px; + } + div.b { + height: 10px; + width: 40px; + background: pink; + padding: 4px 3px 2px 1px; + margin: 2px 3px 4px 5px; + } + div.c { + height: 10px; + width: 45px; + background: orange; + margin: 3px; + border: 2px dashed teal; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox" style="margin-left: 85px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-left: 33px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-left: -22px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- center --> + <div class="flexbox" style="margin-left: 92.5px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-left: 66.5px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-left: 39px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-around --> + <div class="flexbox" style="margin-left: 92.5px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-left: 66.5px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-left: 39px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-justify-content-horiz-005-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-justify-content-horiz-005-ref.xht new file mode 100644 index 00000000000..9222d130a26 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-justify-content-horiz-005-ref.xht @@ -0,0 +1,145 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-justify-content-horiz-005-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + body { line-height: 0; } + + div.flexbox > * { + display: inline-block; + } + div.a { + height: 20px; + width: 10px; + background: lightgreen; + } + div.b { + height: 20px; + width: 50px; + background: pink; + } + div.c { + height: 20px; + width: 100px; + background: orange; + } + .centerParent { + text-align: center; + } + .center { + display: inline-block; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox" style="float:right; clear:right;"> + <div class="a"/> + </div> + <div class="flexbox" style="float:right; clear:right;"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="float:right; clear:right;"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + <div style="clear:right;"/> + + <!-- center --> + <div class="centerParent"> + <div class="flexbox center"> + <div class="a"/> + </div> + </div> + <div class="centerParent"> + <div class="flexbox center"> + <div class="a"/><div class="b"/> + </div> + </div> + <div class="centerParent"> + <div class="flexbox center"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + </div> + + <!-- space-between --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b" style="float: right"/> + </div> + <div class="flexbox"> + <div class="a" style="display:block; float: left"/> + <div class="c" style="float:right"/> + <!-- Use fixed-size margins to subtract space for "a" and "c", and then + use auto margins to center 'b' within the remaining space --> + <div style="display: block; margin-left: 10px; margin-right: 100px"> + <div class="b" style="margin: auto"/> + </div> + </div> + + <!-- space-around --> + <!-- Center "a" here just as we did above in the "center" case. --> + <div class="centerParent"> + <div class="flexbox center"> + <div class="a"/> + </div> + </div> + <!-- For the rest, we'll use a flex container with invisible flexible items + instead of packing space. That's simpler than trying to hack up + a width-independent reference case for "justify-content: space-around". + (There are other reftests to ensure that basic flex container + behavior is correct, so it's safe to rely on it here.) --> + <div class="flexbox" style="display: flex"> + <div style="flex: 0.5"/> + <div class="a"/> + <div style="flex: 1"/> + <div class="b"/> + <div style="flex: 0.5"/> + </div> + <div class="flexbox" style="display: flex"> + <div style="flex: 0.5"/> + <div class="a"/> + <div style="flex: 1"/> + <div class="b"/> + <div style="flex: 1"/> + <div class="c"/> + <div style="flex: 0.5"/> + </div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-justify-content-vert-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-justify-content-vert-001-ref.xht new file mode 100644 index 00000000000..869ad014a72 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-justify-content-vert-001-ref.xht @@ -0,0 +1,109 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-justify-content-vert-001-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + height: 200px; + margin-right: 2px; + float: left; + } + div.a { + width: 20px; + height: 10px; + background: lightgreen; + } + div.b { + width: 20px; + height: 50px; + background: pink; + } + div.c { + width: 20px; + height: 100px; + background: orange; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox"> + <div class="a" style="margin-top: 190px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 140px"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 40px"/><div class="b"/><div class="c"/> + </div> + + <!-- center --> + <div class="flexbox"> + <div class="a" style="margin-top: 95px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 70px"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 20px"/><div class="b"/><div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b" style="margin-top: 140px"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b" style="margin-top: 20px"/><div class="c" style="margin-top: 20px"/> + </div> + + <!-- space-around --> + <div class="flexbox"> + <div class="a" style="margin-top: 95px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 35px"/><div class="b" style="margin-top: 70px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: calc(40px / 6)"/><div class="b" style="margin-top: calc(40px / 3)"/><div class="c" style="margin-top: calc(40px / 3)"/> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-justify-content-vert-002-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-justify-content-vert-002-ref.xht new file mode 100644 index 00000000000..30e2f2e9b74 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-justify-content-vert-002-ref.xht @@ -0,0 +1,122 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-justify-content-vert-002-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + height: 200px; + margin-right: 2px; + border: 1px dotted black; + float: left; + } + div.a { + width: 10px; + height: 10px; + background: lightgreen; + border-style: solid; + border-color: purple; + border-top-width: 4px; + border-right-width: 3px; + border-bottom-width: 2px; + border-left-width: 1px; + padding: 2px; + } + div.b { + width: 10px; + height: 50px; + background: pink; + padding: 1px 2px 3px 4px; + margin: 5px 4px 3px 2px; + } + div.c { + width: 10px; + height: 100px; + background: orange; + margin: 3px; + margin-top: 6px; /* Increased to counteract for collapsing */ + border: 2px dashed teal; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox"> + <div class="a" style="margin-top: 180px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 118px"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 8px"/><div class="b"/><div class="c"/> + </div> + + <!-- center --> + <div class="flexbox"> + <div class="a" style="margin-top: 90px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 59px"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 4px"/><div class="b"/><div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div style="margin-top: 123px"><div class="b"/></div> + </div> + <div class="flexbox"> + <div class="a"/><div style="margin-top: 9px"><div class="b"/></div><div style="margin-top: 10px"><div class="c"/></div> + </div> + + <!-- space-around --> + <div class="flexbox"> + <div class="a" style="margin-top: 90px"/> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 29.5px"/><div style="margin-top: 64px"><div class="b"/></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: calc(8px / 6)"/><div style="margin-top: calc(5px + 8px / 3)"><div class="b"/></div><div style="margin-top: calc(6px + 8px / 3)"><div class="c"/></div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-justify-content-vert-003-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-justify-content-vert-003-ref.xht new file mode 100644 index 00000000000..82355d51075 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-justify-content-vert-003-ref.xht @@ -0,0 +1,110 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-justify-content-vert-003-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + body { margin-top: 0px; } /* We'll apply margins w/ style attribute */ + div.flexbox { + height: 200px; + margin-right: 2px; + float: left; + } + div.a { + width: 20px; + height: 35px; + background: lightgreen; + } + div.b { + width: 20px; + height: 40px; + background: pink; + } + div.c { + width: 20px; + height: 45px; + background: orange; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox" style="margin-top: 95px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-top: 55px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-top: 10px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- center --> + <div class="flexbox" style="margin-top: 97.5px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-top: 77.5px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-top: 55px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-around --> + <div class="flexbox" style="margin-top: 97.5px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-top: 77.5px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-top: 55px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-justify-content-vert-004-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-justify-content-vert-004-ref.xht new file mode 100644 index 00000000000..48b68f1d94c --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-justify-content-vert-004-ref.xht @@ -0,0 +1,121 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-justify-content-vert-004-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + body { margin-top: 0px; } /* We'll apply margins w/ style attribute */ + div.flexbox { + margin-right: 4px; + float: left; + } + div.a { + width: 10px; + height: 35px; + background: lightgreen; + border-style: solid; + border-color: purple; + border-top-width: 4px; + border-right-width: 3px; + border-bottom-width: 2px; + border-left-width: 1px; + padding: 2px; + } + div.b { + width: 10px; + height: 40px; + background: pink; + padding: 1px 2px 3px 4px; + margin: 5px 4px 3px 2px; + } + div.c { + width: 10px; + height: 45px; + background: orange; + margin: 3px; + margin-top: 6px; /* Increased to counteract for collapsing */ + border: 2px dashed teal; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox" style="margin-top: 85px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-top: 33px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-top: -22px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- center --> + <div class="flexbox" style="margin-top: 92.5px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-top: 66.5px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-top: 39px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-around --> + <div class="flexbox" style="margin-top: 92.5px"> + <div class="a"/> + </div> + <div class="flexbox" style="margin-top: 66.5px"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox" style="margin-top: 39px"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-justify-content-vert-005-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-justify-content-vert-005-ref.xht new file mode 100644 index 00000000000..d60ee12a9aa --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-justify-content-vert-005-ref.xht @@ -0,0 +1,109 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-justify-content-vert-005-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + margin-right: 2px; + float: left; + border: 1px dotted black; + } + div.a { + width: 20px; + height: 10px; + background: lightgreen; + } + div.b { + width: 20px; + height: 50px; + background: pink; + } + div.c { + width: 20px; + height: 100px; + background: orange; + } + </style> + </head> + <body> + + <!-- default (start) --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-start --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- flex-end --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- center --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-between --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <!-- space-around --> + <div class="flexbox"> + <div class="a"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/> + </div> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-margin-auto-horiz-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-margin-auto-horiz-001-ref.xht new file mode 100644 index 00000000000..bea773fcc0e --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-margin-auto-horiz-001-ref.xht @@ -0,0 +1,94 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-margin-auto-horiz-001-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div { height: 20px; } + div.flexbox { + width: 200px; + background: lightgray; + margin-bottom: 2px; + } + div.a { + width: 20px; + background: green; + display: inline-block; + } + div.b { + width: 20px; + background: pink; + display: inline-block; + } + div.c { + width: 20px; + background: purple; + display: inline-block; + } + + <!-- These classes allow us to conveniently/concisely specify margin + values below, for exact positioning of the items on each reference + line. ("l" = "margin-_l_eft", and the number = number of pixels) --> + div.l180 { margin-left: 180px } + div.l90 { margin-left: 90px } + div.l80 { margin-left: 80px } + div.l70 { margin-left: 70px } + div.l53 { margin-left: calc(160px / 3) } <!-- == 53.33333px --> + div.l35 { margin-left: 35px } + </style> + </head> + <body> + <!-- just one item --> + <div class="flexbox"> + <div class="a l180"/> + </div> + <div class="flexbox"> + <div class="b l90"/> + </div> + <div class="flexbox"> + <div class="c"/> + </div> + + <!-- Two items --> + <div class="flexbox"> + <div class="a l53"/><div class="b l53"/> + </div> + <div class="flexbox"> + <div class="a l80"/><div class="c"/> + </div> + <div class="flexbox"> + <div class="b l53"/><div class="c l53"/> + </div> + + <!-- Three items --> + <div class="flexbox"> + <div class="a l35"/><div class="b l35"/><div class="c l35"/> + </div> + <div class="flexbox"> + <div class="a l35"/><div class="c"/><div class="b l70"/> + </div> + <div class="flexbox"> + <div class="b l35"/><div class="a l70"/><div class="c"/> + </div> + <div class="flexbox"> + <div class="b l35"/><div class="c l35"/><div class="a l70"/> + </div> + <div class="flexbox"> + <div class="c"/><div class="a l70"/><div class="b l35"/> + </div> + <div class="flexbox"> + <div class="c"/><div class="b l70"/><div class="a l70"/> + </div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-margin-auto-horiz-002-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-margin-auto-horiz-002-ref.xht new file mode 100644 index 00000000000..c238ea535aa --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-margin-auto-horiz-002-ref.xht @@ -0,0 +1,67 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><!-- Testcase with a variety of 'display: flex' examples + with margin-top and/or margin-bottom set to 'auto' on flex items. --><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-margin-auto-horiz-002-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + border: 2px dotted black; + display: flex; + margin-bottom: 2px; + width: 100px; + } + div.fixedSize { + width: 20px; + height: 20px; + } + div.gray { background: gray; } + div.green { background: green; } + div.pink { background: pink; } + div.blue { background: blue; } + </style> + </head> + <body> + + <!-- fixed-height flexbox, with items that have auto margins --> + <div class="flexbox" style="height: 100px"> + <div class="fixedSize green" style="margin-top: 80px"/> + <div class="fixedSize pink"/> + <div class="fixedSize blue" style="margin-top: 40px"/> + </div> + <!-- fixed-height flexbox, with items that have auto & fixed margins --> + <div class="flexbox" style="height: 100px"> + <div class="fixedSize green" style="margin-top: 70px"/> + <div class="fixedSize pink" style="margin-top: 10px"/> + </div> + + <!-- height-shrinkwrapping flexbox, sized by item w/ fixed height & margins, + with other items that have auto margins --> + <div class="flexbox" style="height: 50px"> + <div class="fixedSize green" style="margin-top: 30px"/> + <div class="fixedSize pink"/> + <div class="fixedSize blue" style="margin-top: 15px"/> + <div class="gray" style="width: 10px; height: 30px; margin-top: 10px"/> + </div> + + <!-- height-shrinkwrapping flexbox, sized by item w/ fixed height & margins, + with other items that have auto & fixed margins --> + <div class="flexbox" style="height: 50px"> + <div class="fixedSize green" style="margin-top: 20px"/> + <div class="fixedSize pink" style="margin-top: 10px"/> + <div class="gray" style="width: 10px; height: 30px; margin-top: 10px"/> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-mbp-horiz-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-mbp-horiz-001-ref.xht new file mode 100644 index 00000000000..d34f616602a --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-mbp-horiz-001-ref.xht @@ -0,0 +1,76 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-mbp-horiz-001-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div { height: 100px; border: 0; } + div.flexbox { + width: 200px; + } + div.a { + display: inline-block; + background: lightgreen; + border-style: dotted; + border-left-width: 2px; + border-right-width: 4px; + } + div.b { + display: inline-block; + background: yellow; + border-style: dashed; + border-left-width: 7px; + border-right-width: 3px; + } + div.c { + display: inline-block; + background: orange; + } + div.flexNone { + display: inline-block; + background: pink; + } + div.flexBasis { + display: inline-block; + background: gray; + } + div.spacer { + height: 15px; + background: purple; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="a" style="width: 74px"/><div class="b" style="width: 110px"/> + </div> + <div class="flexbox"> + <div class="a" style="width: 56.5px"/><div class="c" style="width: 137.5px"/> + </div> + <div class="flexbox"> + <div class="a" style="width: 179px"/><div class="flexNone"> + <div class="spacer" style="width: 15px"/></div> + </div> + <div class="flexbox"> + <div class="b" style="width: 66px"/><div class="c" style="width: 124px"/> + </div> + <div class="flexbox"> + <div class="b" style="width: 160px"/><div class="flexNone"> + <div class="spacer" style="width: 30px"/></div> + </div> + <div class="flexbox"> + <div class="a" style="width: 39px"/><div class="b" style="width: 40px"/><div class="flexBasis" style="width: 20px"/><div class="c" style="width: 85px"/> + </div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-mbp-horiz-001-reverse-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-mbp-horiz-001-reverse-ref.xht new file mode 100644 index 00000000000..2c65819de73 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-mbp-horiz-001-reverse-ref.xht @@ -0,0 +1,76 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-mbp-horiz-001-reverse-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div { height: 100px; border: 0; } + div.flexbox { + width: 200px; + } + div.a { + display: inline-block; + background: lightgreen; + border-style: dotted; + border-left-width: 2px; + border-right-width: 4px; + } + div.b { + display: inline-block; + background: yellow; + border-style: dashed; + border-left-width: 7px; + border-right-width: 3px; + } + div.c { + display: inline-block; + background: orange; + } + div.flexNone { + display: inline-block; + background: pink; + } + div.flexBasis { + display: inline-block; + background: gray; + } + div.spacer { + height: 15px; + background: purple; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="b" style="width: 110px"/><div class="a" style="width: 74px"/> + </div> + <div class="flexbox"> + <div class="c" style="width: 137.5px"/><div class="a" style="width: 56.5px"/> + </div> + <div class="flexbox"> + <div class="flexNone"><div class="spacer" style="width: 15px"/> + </div><div class="a" style="width: 179px"/> + </div> + <div class="flexbox"> + <div class="c" style="width: 124px"/><div class="b" style="width: 66px"/> + </div> + <div class="flexbox"> + <div class="flexNone"><div class="spacer" style="width: 30px"/> + </div><div class="b" style="width: 160px"/> + </div> + <div class="flexbox"> + <div class="c" style="width: 85px"/><div class="flexBasis" style="width: 20px"/><div class="b" style="width: 40px"/><div class="a" style="width: 39px"/> + </div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-mbp-horiz-002-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-mbp-horiz-002-ref.xht new file mode 100644 index 00000000000..6e90d2449f5 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-mbp-horiz-002-ref.xht @@ -0,0 +1,80 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-mbp-horiz-002-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div { height: 100px; border: 0; } + div.flexbox { + width: 200px; + } + div.a { + display: inline-block; + background: lightgreen; + margin-left: 1px; + margin-right: 3px; + border-style: dotted; + border-left-width: 2px; + border-right-width: 4px; + } + div.b { + display: inline-block; + background: yellow; + margin-left: 2px; + margin-right: 4px; + border-style: dashed; + border-left-width: 7px; + border-right-width: 3px; + } + div.c { + display: inline-block; + background: orange; + } + div.flexNone { + display: inline-block; + background: pink; + } + div.flexBasis { + display: inline-block; + background: gray; + } + div.spacer { + height: 15px; + background: purple; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="a" style="width: 70px"/><div class="b" style="width: 104px"/> + </div> + <div class="flexbox"> + <div class="a" style="width: 52.5px"/><div class="c" style="width: 137.5px"/> + </div> + <div class="flexbox"> + <div class="a" style="width: 175px"/><div class="flexNone"> + <div class="spacer" style="width: 15px"/></div> + </div> + <div class="flexbox"> + <div class="b" style="width: 60px"/><div class="c" style="width: 124px"/> + </div> + <div class="flexbox"> + <div class="b" style="width: 154px"/><div class="flexNone"> + <div class="spacer" style="width: 30px"/></div> + </div> + <div class="flexbox"> + <div class="a" style="width: 35px"/><div class="b" style="width: 34px"/><div class="flexBasis" style="width: 20px"/><div class="c" style="width: 85px"/> + </div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-mbp-horiz-003-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-mbp-horiz-003-ref.xht new file mode 100644 index 00000000000..1c515d20e15 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-mbp-horiz-003-ref.xht @@ -0,0 +1,79 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-mbp-horiz-003-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div { height: 20px; border: 0; } + div.flexbox { + width: 200px; + margin-bottom: 2px; + } + + <!-- customizations for flexbox border/padding --> + .borderA { + border-style: dashed; + border-color: purple; + border-top-width: 6px; + border-right-width: 4px; + border-bottom-width: 2px; + border-left-width: 8px; + } + + .borderB { + border-style: dashed; + border-color: purple; + border-top-width: 4px; + border-right-width: 5px; + border-bottom-width: 6px; + border-left-width: 7px; + } + + .paddingA { + padding: 4px 3px 2px 1px; + } + + .paddingB { + padding: 8px 11px 14px 17px; + } + + div.child1 { + display: inline-block; + width: 74px; + background: lightgreen; + border-style: dotted; + border-left-width: 2px; + border-right-width: 4px; + } + div.child2 { + display: inline-block; + width: 110px; + background: yellow; + border-style: dashed; + border-left-width: 7px; + border-right-width: 3px; + } + </style> + </head> + <body> + <div class="flexbox borderA"><div class="child1"/><div class="child2"/></div> + <div class="flexbox borderA paddingA"><div class="child1"/><div class="child2"/></div> + <div class="flexbox borderA paddingB"><div class="child1"/><div class="child2"/></div> + <div class="flexbox borderB"><div class="child1"/><div class="child2"/></div> + <div class="flexbox borderB paddingA"><div class="child1"/><div class="child2"/></div> + <div class="flexbox borderB paddingB"><div class="child1"/><div class="child2"/></div> + <div class="flexbox paddingA"><div class="child1"/><div class="child2"/></div> + <div class="flexbox paddingB"><div class="child1"/><div class="child2"/></div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-mbp-horiz-003-reverse-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-mbp-horiz-003-reverse-ref.xht new file mode 100644 index 00000000000..384e85cc3cd --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-mbp-horiz-003-reverse-ref.xht @@ -0,0 +1,79 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-mbp-horiz-003-reverse-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div { height: 20px; border: 0; } + div.flexbox { + width: 200px; + margin-bottom: 2px; + } + + <!-- customizations for flexbox border/padding --> + .borderA { + border-style: dashed; + border-color: purple; + border-top-width: 6px; + border-right-width: 4px; + border-bottom-width: 2px; + border-left-width: 8px; + } + + .borderB { + border-style: dashed; + border-color: purple; + border-top-width: 4px; + border-right-width: 5px; + border-bottom-width: 6px; + border-left-width: 7px; + } + + .paddingA { + padding: 4px 3px 2px 1px; + } + + .paddingB { + padding: 8px 11px 14px 17px; + } + + div.child1 { + display: inline-block; + width: 74px; + background: lightgreen; + border-style: dotted; + border-left-width: 2px; + border-right-width: 4px; + } + div.child2 { + display: inline-block; + width: 110px; + background: yellow; + border-style: dashed; + border-left-width: 7px; + border-right-width: 3px; + } + </style> + </head> + <body> + <div class="flexbox borderA"><div class="child2"/><div class="child1"/></div> + <div class="flexbox borderA paddingA"><div class="child2"/><div class="child1"/></div> + <div class="flexbox borderA paddingB"><div class="child2"/><div class="child1"/></div> + <div class="flexbox borderB"><div class="child2"/><div class="child1"/></div> + <div class="flexbox borderB paddingA"><div class="child2"/><div class="child1"/></div> + <div class="flexbox borderB paddingB"><div class="child2"/><div class="child1"/></div> + <div class="flexbox paddingA"><div class="child2"/><div class="child1"/></div> + <div class="flexbox paddingB"><div class="child2"/><div class="child1"/></div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-mbp-horiz-004-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-mbp-horiz-004-ref.xht new file mode 100644 index 00000000000..04db1f906b0 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-mbp-horiz-004-ref.xht @@ -0,0 +1,83 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><!-- Reference case - identical to the testcase, but with with the flex items' + vertical margin and padding values set to 0 by default, and then set to + specific pixel values for the items that have a 50px percent-basis. +--><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-mbp-horiz-004-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div { border: 0; } + div.flexbox { + width: 200px; + display: flex; + margin-bottom: 2px; + border: 1px dotted black; + } + div.height50 { height: 50px; } + + .marginA { margin: 0 8% 0 4%; } + .marginB { margin: 0 10% 0 14%; } + .paddingA { padding: 0 6% 0 2%; } + .paddingB { padding: 0 8% 0 12%; } + + div.height50 > .marginA { + margin-top: 5px; + margin-bottom: 3px; + } + div.height50 > .marginB { + margin-top: 4px; + margin-bottom: 6px; + } + div.height50 > .paddingA { + padding-top: 4px; + padding-bottom: 2px; + } + div.height50 > .paddingB { + padding-top: 3px; + padding-bottom: 5px; + } + + div.child1 { + flex: none; + width: 10px; + height: 10px; + background: lightgreen; + } + div.child2 { + flex: none; + width: 10px; + height: 10px; + background: purple; + } + + div.filler { + /* Filler-div to fill up content-box and make padding easier to see. */ + height: 10px; + width: 100%; + background: lightgrey; + } + + </style> + </head> + <body> + <div class="flexbox"><div class="child1 paddingA"><div class="filler"/></div><div class="child2 paddingB"><div class="filler"/></div><div class="child1 marginA"/><div class="child2 marginB"/></div> + + <div class="flexbox height50"><div class="child1 paddingA"><div class="filler"/></div><div class="child2 paddingB"><div class="filler"/></div><div class="child1 marginA"/><div class="child2 marginB"/></div> + + <div class="flexbox height50" style="align-items: flex-end"><div class="child1 paddingA"><div class="filler"/></div><div class="child2 paddingB"><div class="filler"/></div><div class="child1 marginA"/><div class="child2 marginB"/></div> + + <div class="flexbox height50"><div class="child1 paddingA marginA"><div class="filler"/></div><div class="child2 paddingB marginB"><div class="filler"/></div></div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-min-height-auto-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-min-height-auto-001-ref.xht new file mode 100644 index 00000000000..993cbd3a09e --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-min-height-auto-001-ref.xht @@ -0,0 +1,41 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"><head> + <meta charset="utf-8" /> + <title>CSS Reftest Reference</title> + <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" /> + <style> + .item { + /* Flex items have purple border: */ + border: 2px dotted purple; + margin-right: 2px; /* (Just for spacing things out, visually) */ + float: left; + } + + .small { height: 50px; } + .big { height: 80px; } + + .item > * { + /* Flex items' contents are gray & fixed-size: */ + background: gray; + width: 10px; + height: 80px; + } + </style> + </head> + <body> + <div class="item small"><div></div></div> + <div class="item small"><div></div></div> + <div class="item small"><div></div></div> + <div class="item small"><div></div></div> + <div class="item small"><div></div></div> + <div class="item small"><div></div></div> + + <div class="item big"><div></div></div> + <div class="item big"><div></div></div> + <div class="item big"><div></div></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-min-height-auto-002-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-min-height-auto-002-ref.xht new file mode 100644 index 00000000000..fa0eb0c8512 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-min-height-auto-002-ref.xht @@ -0,0 +1,25 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"><head> + <meta charset="utf-8" /> + <title>CSS Reftest Reference</title> + <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" /> + <style> + img { + width: 30px; + height: 30px; + float: left; + border: 2px dotted purple; + margin-right: 2px; /* (Just for spacing things out, visually) */ + } + </style> + </head> + <body> + <img src="support/solidblue.png" alt="blue square" /> + <img src="support/solidblue.png" alt="blue square" /> + <img src="support/solidblue.png" alt="blue square" /> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-min-height-auto-003-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-min-height-auto-003-ref.xht new file mode 100644 index 00000000000..18ca4d5bbaa --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-min-height-auto-003-ref.xht @@ -0,0 +1,40 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"><head> + <meta charset="utf-8" /> + <title>CSS Reftest Reference</title> + <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" /> + <style> + .item { + /* Flex items have purple border: */ + border: 2px dotted purple; + margin-right: 2px; /* (Just for spacing things out, visually) */ + float: left; + } + + .small { height: 26px; } + .big { height: 80px; } + + .item > * { + /* Flex items' contents are gray & fixed-size: */ + background: gray; + width: 40px; + height: 80px; + } + + .yvisible { overflow-y: visible; } + .yhidden { overflow-y: hidden; } + .yscroll { overflow-y: scroll; } + .yauto { overflow-y: auto; } + </style> + </head> + <body> + <div class="item big yvisible"><div></div></div> + <div class="item small yhidden"><div></div></div> + <div class="item small yscroll"><div></div></div> + <div class="item small yauto"><div></div></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-min-height-auto-004-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-min-height-auto-004-ref.xht new file mode 100644 index 00000000000..9b35d0e2012 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-min-height-auto-004-ref.xht @@ -0,0 +1,40 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"><head> + <meta charset="utf-8" /> + <title>CSS Reftest Reference</title> + <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" /> + <style> + .item { + /* Flex items have purple border: */ + border: 2px dotted purple; + margin-right: 2px; /* (Just for spacing things out, visually) */ + float: left; + } + + .small { height: 26px; } + .big { height: 80px; } + + .item > * { + /* Flex items' contents are gray & fixed-size: */ + background: gray; + width: 40px; + height: 80px; + } + + .xvisible { overflow-x: visible; } + .xhidden { overflow-x: hidden; } + .xscroll { overflow-x: scroll; } + .xauto { overflow-x: auto; } + </style> + </head> + <body> + <div class="item big xvisible"><div></div></div> + <div class="item small xhidden"><div></div></div> + <div class="item small xscroll"><div></div></div> + <div class="item small xauto"><div></div></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-min-width-auto-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-min-width-auto-001-ref.xht new file mode 100644 index 00000000000..86cb2765cb7 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-min-width-auto-001-ref.xht @@ -0,0 +1,40 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"><head> + <meta charset="utf-8" /> + <title>CSS Reftest Reference</title> + <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" /> + <style> + .item { + /* Flex items have purple border: */ + border: 2px dotted purple; + margin-bottom: 2px; /* (Just for spacing things out, visually) */ + } + + .small { width: 50px; } + .big { width: 80px; } + + .item > * { + /* Flex items' contents are gray & fixed-size: */ + background: gray; + height: 10px; + width: 80px; + } + </style> + </head> + <body> + <div class="item small"><div></div></div> + <div class="item small"><div></div></div> + <div class="item small"><div></div></div> + <div class="item small"><div></div></div> + <div class="item small"><div></div></div> + <div class="item small"><div></div></div> + + <div class="item big"><div></div></div> + <div class="item big"><div></div></div> + <div class="item big"><div></div></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-min-width-auto-002-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-min-width-auto-002-ref.xht new file mode 100644 index 00000000000..a0bbff3c7e8 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-min-width-auto-002-ref.xht @@ -0,0 +1,25 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"><head> + <meta charset="utf-8" /> + <title>CSS Reftest Reference</title> + <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" /> + <style> + img { + width: 30px; + height: 30px; + display: block; + border: 2px dotted purple; + margin-bottom: 2px; /* (Just for spacing things out, visually) */ + } + </style> + </head> + <body> + <img src="support/solidblue.png" alt="blue square" /> + <img src="support/solidblue.png" alt="blue square" /> + <img src="support/solidblue.png" alt="blue square" /> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-min-width-auto-003-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-min-width-auto-003-ref.xht new file mode 100644 index 00000000000..e6f714f5717 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-min-width-auto-003-ref.xht @@ -0,0 +1,39 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"><head> + <meta charset="utf-8" /> + <title>CSS Reftest Reference</title> + <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" /> + <style> + .item { + /* Flex items have purple border: */ + border: 2px dotted purple; + margin-bottom: 2px; /* (Just for spacing things out, visually) */ + } + + .small { width: 26px; } + .big { width: 80px; } + + .item > * { + /* Flex items' contents are gray & fixed-size: */ + background: gray; + height: 40px; + width: 80px; + } + + .xvisible { overflow-x: visible; } + .xhidden { overflow-x: hidden; } + .xscroll { overflow-x: scroll; } + .xauto { overflow-x: auto; } + </style> + </head> + <body> + <div class="item big xvisible"><div></div></div> + <div class="item small xhidden"><div></div></div> + <div class="item small xscroll"><div></div></div> + <div class="item small xauto"><div></div></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-min-width-auto-004-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-min-width-auto-004-ref.xht new file mode 100644 index 00000000000..29e579b1264 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-min-width-auto-004-ref.xht @@ -0,0 +1,39 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"><head> + <meta charset="utf-8" /> + <title>CSS Reftest Reference</title> + <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" /> + <style> + .item { + /* Flex items have purple border: */ + border: 2px dotted purple; + margin-bottom: 2px; /* (Just for spacing things out, visually) */ + } + + .small { width: 26px; } + .big { width: 80px; } + + .item > * { + /* Flex items' contents are gray & fixed-size: */ + background: gray; + height: 40px; + width: 80px; + } + + .yvisible { overflow-y: visible; } + .yhidden { overflow-y: hidden; } + .yscroll { overflow-y: scroll; } + .yauto { overflow-y: auto; } + </style> + </head> + <body> + <div class="item big yvisible"><div></div></div> + <div class="item small yhidden"><div></div></div> + <div class="item small yscroll"><div></div></div> + <div class="item small yauto"><div></div></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-overflow-horiz-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-overflow-horiz-001-ref.xht new file mode 100644 index 00000000000..ec6f2b347c2 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-overflow-horiz-001-ref.xht @@ -0,0 +1,55 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" /> + <style> + .flexContainer { + background: purple; + width: 70px; + height: 70px; + float: left; + margin-right: 5px; + } + .bigItem { + background: blue; + display: inline-block; + height: 200px; + width: 75%; + float: left; + } + .smallItem { + background: teal; + width: 25%; + /* In the testcase, we'll stretch to container's height, + minus our 10px margin-bottom. */ + height: calc(100% - 10px); + float: left; + } + .scroll { overflow: scroll } + .auto { overflow: auto } + .hidden { overflow: hidden } + </style> +</head> +<body> + <div class="flexContainer"><!-- (overflow un-set) --> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> + <div class="flexContainer hidden"> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> + <div class="flexContainer scroll"> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> + <div class="flexContainer auto"> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-overflow-horiz-002-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-overflow-horiz-002-ref.xht new file mode 100644 index 00000000000..5dca75c8add --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-overflow-horiz-002-ref.xht @@ -0,0 +1,50 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" /> + <style> + .flexContainer { + background: purple; + display: flex; + align-items: center; + width: 70px; + height: 70px; + float: left; + margin-right: 5px; + } + .bigItem { + background: blue; + height: 10px; + /* Tall border (taller than our container): */ + border: solid coral; + border-width: 50px 2px; + flex: 3; + } + .smallItem { + background: teal; + height: 20px; + flex: 1; + } + .hidden > .bigItem { + /* To match the testcase's "overflow:hidden"-cropped flex item, we + just use a smaller border that exactly fits our container (and + doesn't overflow). */ + border-width: 30px 2px; + } + </style> +</head> +<body> + <div class="flexContainer"><!-- (overflow un-set) --> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> + <div class="flexContainer hidden"> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-overflow-horiz-003-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-overflow-horiz-003-ref.xht new file mode 100644 index 00000000000..28fc45ad173 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-overflow-horiz-003-ref.xht @@ -0,0 +1,47 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" /> + <style> + .flexContainer { + background: purple; + display: flex; + justify-content: space-around; + width: 70px; + height: 70px; + float: left; + margin-right: 5px; + } + .bigItem { + background: blue; + width: 20px; + height: 200px; + } + .smallItem { + background: teal; + width: 20px; + height: 20px; + } + .hidden > .bigItem { + /* To match the testcase's "overflow:hidden"-cropped flex item, we + just use a smaller height that exactly fits our container (and + doesn't overflow). */ + height: 70px; + } + </style> +</head> +<body> + <div class="flexContainer"><!-- (overflow un-set) --> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> + <div class="flexContainer hidden"> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-overflow-horiz-004-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-overflow-horiz-004-ref.xht new file mode 100644 index 00000000000..7e6270ecdf7 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-overflow-horiz-004-ref.xht @@ -0,0 +1,47 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" /> + <style> + .flexContainer { + background: purple; + display: flex; + flex-wrap: wrap; + width: 70px; + height: 70px; + float: left; + margin-right: 5px; + } + .bigItem { + background: blue; + width: 50px; + height: 200px; + } + .smallItem { + background: teal; + width: 50px; + height: 20px; + } + .hidden > .bigItem { + /* To match the testcase's "overflow:hidden"-cropped flex item, we + just use a smaller height that exactly fits the space remaining + in our container, after wrapping */ + height: 50px; + } + </style> +</head> +<body> + <div class="flexContainer"><!-- (overflow un-set) --> + <div class="smallItem"></div> + <div class="bigItem"></div> + </div> + <div class="flexContainer hidden"> + <div class="smallItem"></div> + <div class="bigItem"></div> + </div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-overflow-horiz-005-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-overflow-horiz-005-ref.xht new file mode 100644 index 00000000000..8f4b0799ca1 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-overflow-horiz-005-ref.xht @@ -0,0 +1,49 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" /> + <style> + .flexContainer { + background: purple; + display: flex; + flex-wrap: wrap; + align-content: space-around; + width: 70px; + height: 70px; + float: left; + margin-right: 5px; + } + .bigItem { + background: blue; + flex: none; /* prevent shrinking (so we can intentionally overflow) */ + width: 72px; + height: 20px; + } + .smallItem { + background: teal; + width: 20px; + height: 20px; + } + .hidden > .bigItem { + /* To match the testcase's "overflow:hidden"-cropped flex item, we + just use a smaller width that exactly fits our container (and + doesn't overflow). */ + width: 70px; + } + </style> +</head> +<body> + <div class="flexContainer"><!-- (overflow un-set) --> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> + <div class="flexContainer hidden"> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-overflow-vert-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-overflow-vert-001-ref.xht new file mode 100644 index 00000000000..88c6be58f08 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-overflow-vert-001-ref.xht @@ -0,0 +1,49 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" /> + <style> + .flexContainer { + background: purple; + width: 70px; + height: 70px; + margin-bottom: 5px; + } + .bigItem { + width: 200px; + background: blue; + height: 75%; + } + .smallItem { + background: teal; + margin-right: 10px; + height: 25%; + } + .scroll { overflow: scroll } + .auto { overflow: auto } + .hidden { overflow: hidden } + </style> +</head> +<body> + <div class="flexContainer"><!-- (overflow un-set) --> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> + <div class="flexContainer hidden"> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> + <div class="flexContainer scroll"> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> + <div class="flexContainer auto"> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-overflow-vert-002-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-overflow-vert-002-ref.xht new file mode 100644 index 00000000000..ca127a72569 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-overflow-vert-002-ref.xht @@ -0,0 +1,50 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" /> + <style> + .flexContainer { + background: purple; + display: flex; + flex-direction: column; + align-items: center; + width: 70px; + height: 70px; + margin-bottom: 5px; + } + .bigItem { + background: blue; + width: 10px; + /* Tall border (taller than our container): */ + border: solid coral; + border-width: 2px 50px; + flex: 3; + } + .smallItem { + background: teal; + width: 20px; + flex: 1; + } + .hidden > .bigItem { + /* To match the testcase's "overflow:hidden"-cropped flex item, we + just use a smaller border that exactly fits our container (and + doesn't overflow). */ + border-width: 2px 30px; + } + </style> +</head> +<body> + <div class="flexContainer"><!-- (overflow un-set) --> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> + <div class="flexContainer hidden"> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-overflow-vert-003-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-overflow-vert-003-ref.xht new file mode 100644 index 00000000000..ec01b63a649 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-overflow-vert-003-ref.xht @@ -0,0 +1,47 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" /> + <style> + .flexContainer { + background: purple; + display: flex; + flex-direction: column; + justify-content: space-around; + width: 70px; + height: 70px; + margin-bottom: 5px; + } + .bigItem { + background: blue; + width: 200px; + height: 20px; + } + .smallItem { + background: teal; + width: 20px; + height: 20px; + } + .hidden > .bigItem { + /* To match the testcase's "overflow:hidden"-cropped flex item, we + just use a smaller width that exactly fits our container (and + doesn't overflow). */ + width: 70px; + } + </style> +</head> +<body> + <div class="flexContainer"><!-- (overflow un-set) --> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> + <div class="flexContainer hidden"> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-overflow-vert-004-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-overflow-vert-004-ref.xht new file mode 100644 index 00000000000..272df0c598a --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-overflow-vert-004-ref.xht @@ -0,0 +1,47 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" /> + <style> + .flexContainer { + background: purple; + display: flex; + flex-direction: column; + flex-wrap: wrap; + width: 70px; + height: 70px; + margin-bottom: 5px; + } + .bigItem { + background: blue; + width: 200px; + height: 50px; + } + .smallItem { + background: teal; + width: 20px; + height: 50px; + } + .hidden > .bigItem { + /* To match the testcase's "overflow:hidden"-cropped flex item, we + just use a smaller width that exactly fits the space remaining + in our container, after wrapping */ + width: 50px; + } + </style> +</head> +<body> + <div class="flexContainer"><!-- (overflow un-set) --> + <div class="smallItem"></div> + <div class="bigItem"></div> + </div> + <div class="flexContainer hidden"> + <div class="smallItem"></div> + <div class="bigItem"></div> + </div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-overflow-vert-005-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-overflow-vert-005-ref.xht new file mode 100644 index 00000000000..a6102d17163 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-overflow-vert-005-ref.xht @@ -0,0 +1,49 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" /> + <style> + .flexContainer { + background: purple; + display: flex; + flex-direction: column; + flex-wrap: wrap; + align-content: space-around; + width: 70px; + height: 70px; + margin-bottom: 5px; + } + .bigItem { + background: blue; + flex: none; /* prevent shrinking (so we can intentionally overflow) */ + width: 20px; + height: 72px; + } + .smallItem { + background: teal; + width: 20px; + height: 20px; + } + .hidden > .bigItem { + /* To match the testcase's "overflow:hidden"-cropped flex item, we + just use a smaller height that exactly fits our container (and + doesn't overflow). */ + height: 70px; + } + </style> +</head> +<body> + <div class="flexContainer"><!-- (overflow un-set) --> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> + <div class="flexContainer hidden"> + <div class="bigItem"></div> + <div class="smallItem"></div> + </div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-paint-ordering-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-paint-ordering-001-ref.xht new file mode 100644 index 00000000000..4b6fb5cbc8a --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-paint-ordering-001-ref.xht @@ -0,0 +1,85 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-paint-ordering-001-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + .container { + width: 40px; + height: 14px; + border: 2px solid green; + margin-bottom: 2px; + } + .a { + width: 16px; + height: 10px; + background: blue; + min-width: 0; + border: 2px solid lightblue; + } + .b { + width: 16px; + height: 10px; + background: purple; + min-width: 0; + border: 2px solid slateblue; + } + .aKid { + margin-left: 10px; + margin-top: 2px; + width: 16px; + height: 6px; + background: yellow; + border: 1px solid black; + } + .a, .b { float: left; } + </style> + </head> + <body> + <!-- Just 6 copies of the same container, since they all should look the + same (except for the final "position: fixed" one, which needs to be + explicitly marked as "position: fixed" or else it paints differently + on Android.) --> + <div class="container"> + <div class="a"><div class="aKid"/></div> + <div class="b"/> + </div> + + <div class="container"> + <div class="a"><div class="aKid"/></div> + <div class="b"/> + </div> + + <div class="container"> + <div class="a"><div class="aKid"/></div> + <div class="b"/> + </div> + + <div class="container"> + <div class="a"><div class="aKid"/></div> + <div class="b"/> + </div> + + <div class="container"> + <div class="a"><div class="aKid"/></div> + <div class="b"/> + </div> + + <div class="container" style="position: fixed"> + <div class="a"><div class="aKid"/></div> + <div class="b"/> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-paint-ordering-002-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-paint-ordering-002-ref.xht new file mode 100644 index 00000000000..5baed71d0af --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-paint-ordering-002-ref.xht @@ -0,0 +1,162 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><!-- Reference case for flex items containing overlapping content. + This reference uses inline-block in place of inline-flex, with floated + children in place of flex items, and with hardcoded DOM-reordering in + place of "order" reordering. --><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-paint-ordering-002-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + body { + line-height: 0; + } + + .flexbox { + display: inline-block; + width: 20px; + height: 10px; + border: 2px solid gray; + margin-bottom: 10px; + margin-right: 10px; + } + .a { + width: 10px; + height: 10px; + background: lightblue; + float: left; /* to stack horizontally, like a flex item */ + } + .b { + width: 10px; + height: 10px; + background: pink; + float: left; /* to stack horizontally, like a flex item */ + } + .aKid { + margin-left: 3px; + margin-top: 3px; + width: 10px; + height: 10px; + background: steelblue; + border: 1px solid blue; + } + .bKid { + margin-left: 3px; + margin-top: 6px; + width: 10px; + height: 10px; + background: violet; + border: 1px solid purple; + } + + /* Need to set 'position' for z-index to take effect. */ + .zn2 { z-index: -2; position: relative; } + .zn1 { z-index: -1; position: relative; } + .z0 { z-index: 0; position: relative; } + .z1 { z-index: 1; position: relative; } + + </style> + </head> + <body> + <!-- order not set: --> + <div class="flexbox"> + <div class="a"><div class="aKid"/></div> + <div class="b"><div class="bKid"/></div> + </div> + + <br/> + + <!-- order set, but it matches content order, so it shouldn't matter: --> + <div class="flexbox"> + <div class="a"><div class="aKid"/></div> + <div class="b"><div class="bKid"/></div> + </div><div class="flexbox"> + <div class="a"><div class="aKid"/></div> + <div class="b"><div class="bKid"/></div> + </div><div class="flexbox"> + <div class="a"><div class="aKid"/></div> + <div class="b"><div class="bKid"/></div> + </div><div class="flexbox"> + <div class="a"><div class="aKid"/></div> + <div class="b"><div class="bKid"/></div> + </div><div class="flexbox"> + <div class="a"><div class="aKid"/></div> + <div class="b"><div class="bKid"/></div> + </div><div class="flexbox"> + <div class="a"><div class="aKid"/></div> + <div class="b"><div class="bKid"/></div> + </div> + + <br/> + + <!-- order set to reverse of content-order: --> + <div class="flexbox"> + <div class="b"><div class="bKid"/></div> + <div class="a"><div class="aKid"/></div> + </div><div class="flexbox"> + <div class="b"><div class="bKid"/></div> + <div class="a"><div class="aKid"/></div> + </div><div class="flexbox"> + <div class="b"><div class="bKid"/></div> + <div class="a"><div class="aKid"/></div> + </div><div class="flexbox"> + <div class="b"><div class="bKid"/></div> + <div class="a"><div class="aKid"/></div> + </div> + + <br/> + + <!-- order set to reverse of content-order, AND with z-index set on + one or both items, but not such that it changes the paint order --> + <div class="flexbox"> + <div class="b"><div class="bKid"/></div> + <div class="a"><div class="aKid"/></div> + </div><div class="flexbox"> + <div class="b"><div class="bKid"/></div> + <div class="a"><div class="aKid"/></div> + </div><div class="flexbox"> + <div class="b"><div class="bKid"/></div> + <div class="a"><div class="aKid"/></div> + </div><div class="flexbox"> + <div class="b"><div class="bKid"/></div> + <div class="a"><div class="aKid"/></div> + </div> + + <br/> + + <!-- order set to reverse of content-order, AND with z-index set on + one or both items, in such a way that it affects paint order --> + <div class="flexbox"> + <!-- 'a' is behind the container's border --> + <div class="b"><div class="bKid"/></div> + <div class="a zn1"><div class="aKid"/></div> + </div><div class="flexbox"> + <!-- 'a' and 'b' are both behind the container's border --> + <div class="b zn1"><div class="bKid"/></div> + <div class="a zn1"><div class="aKid"/></div> + </div><div class="flexbox"> + <!-- 'a' and 'b' are both behind the container's border, + and 'a' is behind 'b' despite coming after it in the 'order' + ordering--> + <div class="b zn1"><div class="bKid"/></div> + <div class="a zn2"><div class="aKid"/></div> + </div><div class="flexbox"> + <!-- 'a' and 'b' are both in front of the container's border, + and 'a' is behind 'b' despite coming after it in the 'order' + ordering--> + <div class="b z1"><div class="bKid"/></div> + <div class="a z0"><div class="aKid"/></div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-root-node-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-root-node-001-ref.xht new file mode 100644 index 00000000000..0df71e4322b --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-root-node-001-ref.xht @@ -0,0 +1,19 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html style="display: flex; justify-content: center" xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" /> + <style> + div { + display: flex; + justify-content: center; + } + </style> +</head> +<body> + <div>centered</div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-sizing-horiz-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-sizing-horiz-001-ref.xht new file mode 100644 index 00000000000..95e763f4b50 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-sizing-horiz-001-ref.xht @@ -0,0 +1,86 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-sizing-horiz-001-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div { height: 10px; } + div.flexbox { + border: 1px dashed blue; + font-size: 10px; + margin-bottom: 2px; + } + div.a, div.b, div.c { float: left } + div.a { + width: 20px; + background: lightgreen; + } + div.b { + width: 40px; + background: purple; + } + div.c { + width: 40px; + background: orange; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="a" style="width: 60px"/> + <div class="b" style="width: 60px"/> + <div class="c" style="width: 60px"/> + </div> + + <div class="flexbox"> + <div class="a" style="width: 60px"/> + <div class="b" style="width: 60px"/> + <div class="c" style="width: 60px"/> + </div> + + <div class="flexbox" style="width: 300px"> + <div class="a" style="width: 60px"/> + <div class="b" style="width: 60px"/> + <div class="c" style="width: 60px"/> + </div> + + <div class="flexbox" style="width: 70px"> + <div class="a" style="width: 10px"/> + <div class="b"/> + <div class="c" style="width: 20px"/> + </div> + + <div class="flexbox" style="width: 20px"> + <!-- We add an extra layer of <div> wrapping in this chunk, with a + fixed width, to keep the overflowing children from wrapping. --> + <div style="width: 50px"> + <div class="b"/> + <div class="c" style="width: 10px"/> + </div> + </div> + + <div class="flexbox" style="width: 58px"> + <div class="a" style="width: 6px"/> + <div class="b"/> + <div class="c" style="width: 12px"/> + </div> + + <div class="flexbox" style="width: 140px"> + <div class="a" style="width: 40px"/> + <div class="b" style="width: 40px"/> + <div class="c" style="width: 60px"/> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-sizing-horiz-002-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-sizing-horiz-002-ref.xht new file mode 100644 index 00000000000..01a9c8b2e89 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-sizing-horiz-002-ref.xht @@ -0,0 +1,53 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-sizing-horiz-002-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div { width: 200px; } + div.flexbox { + border: 1px dashed blue; + background: lightgreen; + font-size: 10px; + margin-bottom: 5px; + } + </style> + </head> + <body> + <div class="flexbox"> + <div>text</div> + </div> + + <div class="flexbox"> + <div>text</div> + </div> + + <div class="flexbox"> + <div>text</div> + </div> + + <div class="flexbox" style="height: 30px"> + <div>text</div> + </div> + + <div class="flexbox" style="height: 6px"> + <div>text</div> + </div> + + <div class="flexbox" style="height: 30px"> + <div>text</div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-sizing-vert-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-sizing-vert-001-ref.xht new file mode 100644 index 00000000000..2503138aac6 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-sizing-vert-001-ref.xht @@ -0,0 +1,88 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-sizing-vert-001-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div { width: 10px; } + div.flexbox { + float: left; + border: 1px dashed blue; + font-size: 10px; + margin-right: 2px; + } + div.a { + height: 20px; + background: lightgreen; + } + div.b { + height: 40px; + background: purple; + } + div.c { + height: 40px; + background: orange; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <div class="flexbox"> + <div class="a"/><div class="b"/><div class="c"/> + </div> + + <div class="flexbox"> + <div class="a" style="height: 30px"/> + <div class="b"/> + <div class="c" style="height: 50px"/> + </div> + + <div class="flexbox" style="height: 200px"> + <div class="a" style="height: 60px"/> + <div class="b" style="height: 60px"/> + <div class="c" style="height: 60px"/> + </div> + + <div class="flexbox"> + <div class="a" style="height: 10px"/> + <div class="b"/> + <div class="c" style="height: 20px"/> + </div> + + <div class="flexbox" style="height: 20px"> + <div class="b"/> + <div class="c" style="height: 10px"/> + </div> + + <div class="flexbox"> + <div class="a" style="height: 6px"/> + <div class="b"/> + <div class="c" style="height: 12px"/> + </div> + + <div class="flexbox"> + <div class="a" style="height: 40px"/> + <div class="b" style="height: 40px"/> + <div class="c" style="height: 60px"/> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-sizing-vert-002-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-sizing-vert-002-ref.xht new file mode 100644 index 00000000000..0e6db7f3977 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-sizing-vert-002-ref.xht @@ -0,0 +1,54 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-sizing-vert-002-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div { height: 100px; } + div.flexbox { + float: left; + border: 1px dashed blue; + background: lightgreen; + font-size: 10px; + margin-right: 10px; + } + </style> + </head> + <body> + <div class="flexbox"> + <div>AB</div> + </div> + + <div class="flexbox"> + <div>AB</div> + </div> + + <div class="flexbox"> + <div>AB</div> + </div> + + <div class="flexbox" style="width: 30px"> + <div>AB</div> + </div> + + <div class="flexbox" style="width: 3px"> + <div>AB</div> + </div> + + <div class="flexbox" style="width: 30px"> + <div>AB</div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-table-fixup-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-table-fixup-001-ref.xht new file mode 100644 index 00000000000..a03b166f39f --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-table-fixup-001-ref.xht @@ -0,0 +1,58 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><!-- Reference case for table-fixup on table parts inside of a + flex container. --><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-table-fixup-001-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div.flexbox { + border: 1px dashed blue; + } + + <!-- NOTE: table-fixup pads each td element by 1px on each side. We + override that for top & bottom, for simplicity. So the td makes us + generate a box that's 2px wider than its contents. --> + td { + padding-top: 0px; + padding-bottom: 0px; + } + + .a { + background: lightgreen; + width: 48px; + } + + .b { + background: yellow; + width: 48px; + } + + .c { + background: pink; + width: 48px; + } + </style> + </head> + <body> + <!-- Just 2 adjacent table cells (they end up in the same table) --> + <div class="flexbox" style="padding-left: 50px; width: 150px"><td class="a">cell1</td><td class="b">cell2</td></div> + + <!-- Table cell followed by tbody (they end up in the same table) --> + <div class="flexbox" style="padding-left: 75px; width: 125px"><td class="a">cell1</td><tbody class="b">t</tbody></div> + + <!-- Empty table cell (ends up occupying 2px of width), followed by div, + followed by nonempty table cell. (3 flex items). --> + <div class="flexbox" style="padding-left: 52px; width: 148px"><div style="display: inline-block;" class="c">div</div><div style="display: inline-table; margin-left: 50px"><td class="b">cell1</td></div></div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-whitespace-handling-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-whitespace-handling-001-ref.xht new file mode 100644 index 00000000000..2bebd771b7f --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-whitespace-handling-001-ref.xht @@ -0,0 +1,55 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><!-- + Reference case, with inline-blocks instead of flexbox/flex items, + with positioning done using margins. +--><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-whitespace-handling-001-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <style> + div { height: 100px; } + div.flexbox { + border: 1px dashed blue; + width: 200px; + } + div.a { + width: 30px; + background: lightgreen; + display: inline-block; + } + div.b { + width: 20px; + background: lightblue; + display: inline-block; + } + img { + width: 40px; + height: 100%; + } + </style> + </head> + <body> + <div class="flexbox"> + <div class="a" style="margin-left: 85px"/> + </div> + + <div class="flexbox"> + <div class="a" style="margin-left: 37.5px"/><div class="b" style="margin-left: 75px"/> + </div> + + <div class="flexbox"> + <img src="solidblue.png" style="margin-left: 30px"/><img src="solidblue.png" style="margin-left: 60px"/> + </div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-whitespace-handling-002-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-whitespace-handling-002-ref.xht new file mode 100644 index 00000000000..967819a7325 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-whitespace-handling-002-ref.xht @@ -0,0 +1,57 @@ +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><!-- + This reference case is the same as the testcase, but with an explicit <div> + around each run of content that we expect to turn into an anonymous + flex item (to ensure that the whitespace is included). +--><html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test flexbox-whitespace-handling-002-ref"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/> + <link rel="stylesheet" type="text/css" href="support/ahem.css"/> + <style> + div { height: 100px; } + div.flexbox { + white-space: pre; + border: 1px dashed blue; + width: 200px; + display: flex; + justify-content: space-around; + } + div.a { + width: 30px; + background: lightgreen; + } + div.b { + width: 20px; + background: lightblue; + } + </style> + </head> + <body> + <!-- spaces around inline content at the beginning of flexbox --> + <div class="flexbox"><div> abc</div><div class="a"/></div> + <div class="flexbox"><div>abc </div><div class="a"/></div> + <div class="flexbox"><div> abc </div><div class="a"/></div> + + <!-- spaces around inline content at the end of flexbox --> + <div class="flexbox"><div class="a"/><div> abc</div></div> + <div class="flexbox"><div class="a"/><div>abc </div></div> + <div class="flexbox"><div class="a"/><div> abc </div></div> + + <!-- whitespace around inline content in between flex items --> + <div class="flexbox"><div class="a"/><div> abc</div><div class="b"/></div> + <div class="flexbox"><div class="a"/><div>abc </div><div class="b"/></div> + <div class="flexbox"><div class="a"/><div> abc </div><div class="b"/></div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-with-pseudo-elements-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-with-pseudo-elements-001-ref.xht new file mode 100644 index 00000000000..81fcd85db23 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-with-pseudo-elements-001-ref.xht @@ -0,0 +1,57 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><!-- Reference case where we've swapped in actual divs (fakeBefore/fakeAfter) + for the testcase's ::before and ::after generated content. + + fakeBefore div is always the first child; fakeAfter is always the last. +--><html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" /> + <meta charset="utf-8" /> + <style> + .flexContainer { + display: flex; + align-items: flex-end; + justify-content: space-between; + height: 50px; + width: 300px; + margin-bottom: 2px; + background: lightgray; + } + .fakeBefore { + align-self: center; + content: 'b'; + background: yellow; + } + .fakeAfter { + align-self: center; + content: 'a'; + background: lightblue; + } + </style> +</head> +<body> + <div class="flexContainer"> + <div class="fakeBefore">b</div> + x + <div>y</div> + z + </div> + <div class="flexContainer"> + x + <div>y</div> + z + <div class="fakeAfter">a</div> + </div> + <div class="flexContainer"> + <div class="fakeBefore">b</div> + x + <div>y</div> + z + <div class="fakeAfter">a</div> + </div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-with-pseudo-elements-002-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-with-pseudo-elements-002-ref.xht new file mode 100644 index 00000000000..211c518bd47 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-with-pseudo-elements-002-ref.xht @@ -0,0 +1,83 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><!-- Reference case where we've swapped in actual divs (fakeBefore/fakeAfter) + for the testcase's ::before and ::after generated content. + + fakeBefore div is always the first child; fakeAfter is always the last. +--><html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" /> + <meta charset="utf-8" /> + <style> + .flexContainer { + display: flex; + margin-bottom: 2px; + background: lightgray; + } + .fakeBefore { + background: yellow; + /* This 'order' value should place us after the other elements, visually, + even though we're ::before. */ + order: 1; + } + .fakeAfter { + background: lightblue; + order: -1; + } + </style> +</head> +<body> + <!-- 'b' should be at end, due to its high 'order' value: --> + <div class="flexContainer"> + <div class="fakeBefore">b</div> + <div>I</div> + </div> + + <!-- 'b' should be at beginning, since it's '::before' and the other item has + a matching 'order' value: --> + <div class="flexContainer"> + <div class="fakeBefore">b</div> + <div style="order: 1">I</div> + </div> + + <!-- 'a' should be at beginning, due to its low 'order' value: --> + <div class="flexContainer"> + <div>I</div> + <div class="fakeAfter">a</div> + </div> + + <!-- 'a' should be at end, since it's '::after' and the other item has + a matching 'order' value: --> + <div class="flexContainer"> + <div style="order: -1">I</div> + <div class="fakeAfter">a</div> + </div> + + <!-- As above, the ::after 'a' should be at beginning, and the ::before 'b' + should be at end, due to their 'order' values --> + <div class="flexContainer"> + <div class="fakeBefore">b</div> + <div>I</div> + <div class="fakeAfter">a</div> + </div> + + <!-- ...but now the normal item "I" has its order increased, so it'll go + at the end. --> + <div class="flexContainer"> + <div class="fakeBefore">b</div> + <div style="order: 1">I</div> + <div class="fakeAfter">a</div> + </div> + + <!-- ...and now the normal item "I" has its order reduced, so it'll go + at the beginning. --> + <div class="flexContainer"> + <div class="fakeBefore">b</div> + <div style="order: -1">I</div> + <div class="fakeAfter">a</div> + </div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-with-pseudo-elements-003-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-with-pseudo-elements-003-ref.xht new file mode 100644 index 00000000000..364f554c3c8 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox-with-pseudo-elements-003-ref.xht @@ -0,0 +1,55 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><!-- Reference case where we've swapped in actual divs (fakeBefore/fakeAfter) + for the testcase's ::before and ::after generated content. + + fakeBefore div is always the first child; fakeAfter is always the last. +--><html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" /> + <meta charset="utf-8" /> + <style> + .flexContainer { + display: flex; + align-items: flex-end; + justify-content: space-between; + height: 50px; + width: 300px; + margin-bottom: 2px; + background: lightgray; + } + .fakeBefore { + content: 'b'; + background: yellow; + } + .fakeAfter { + content: 'a'; + background: lightblue; + } + </style> +</head> +<body> + <div class="flexContainer"> + <div class="fakeBefore">b</div> + x + <div>y</div> + z + </div> + <div class="flexContainer"> + x + <div>y</div> + z + <div class="fakeAfter">a</div> + </div> + <div class="flexContainer"> + <div class="fakeBefore">b</div> + x + <div>y</div> + z + <div class="fakeAfter">a</div> + </div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_absolute-atomic-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_absolute-atomic-ref.xht new file mode 100644 index 00000000000..3ac5bb82aee --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_absolute-atomic-ref.xht @@ -0,0 +1,22 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | abspos atomic flexitems</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +body {margin: 0;} +body>div { + background: #ffcc00; + + display: flex; + justify-content: space-around; +} +div div { + background: #3366cc; + margin: 20px; +} +</style> + +</head><body><div> + <div>damer</div> + <div>damer</div> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-content-center-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-content-center-ref.xht new file mode 100644 index 00000000000..c985632d735 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-content-center-ref.xht @@ -0,0 +1,38 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | align-content: center</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 20em; + position: relative; +} +span { + background: yellow; + width: 8em; + height: 2em; + position: absolute; + top: 1em; + left: 1em; + display: inline-block; +} +span:nth-child(2) { + background: pink; + left: 11em; +} +span:nth-child(3) { + background: lightblue; + top: 3em; + left: 1em; +} +</style> + +</head><body><div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-content-flexend-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-content-flexend-ref.xht new file mode 100644 index 00000000000..83c1b58e629 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-content-flexend-ref.xht @@ -0,0 +1,38 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | align-content: flex-end</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 20em; + position: relative; +} +span { + background: yellow; + width: 8em; + height: 2em; + position: absolute; + top: 2em; + left: 1em; + display: inline-block; +} +span:nth-child(2) { + background: pink; + left: 11em; +} +span:nth-child(3) { + background: lightblue; + top: 4em; + left: 1em; +} +</style> + +</head><body><div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-content-flexstart-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-content-flexstart-ref.xht new file mode 100644 index 00000000000..29275df53a5 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-content-flexstart-ref.xht @@ -0,0 +1,38 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | align-content: flex-start</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 20em; + position: relative; +} +span { + background: yellow; + width: 8em; + height: 2em; + position: absolute; + top: 0; + left: 1em; + display: inline-block; +} +span:nth-child(2) { + background: pink; + left: 11em; +} +span:nth-child(3) { + background: lightblue; + top: 2em; + left: 1em; +} +</style> + +</head><body><div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-content-spacearound-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-content-spacearound-ref.xht new file mode 100644 index 00000000000..f212df550da --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-content-spacearound-ref.xht @@ -0,0 +1,38 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | align-content: space-around</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 20em; + position: relative; +} +span { + background: yellow; + width: 8em; + height: 2em; + position: absolute; + top: 0.5em; + left: 1em; + display: inline-block; +} +span:nth-child(2) { + background: pink; + left: 11em; +} +span:nth-child(3) { + background: lightblue; + top: 3.5em; + left: 1em; +} +</style> + +</head><body><div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-content-spacebetween-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-content-spacebetween-ref.xht new file mode 100644 index 00000000000..2efe77449f3 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-content-spacebetween-ref.xht @@ -0,0 +1,38 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | align-content: space-between</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 20em; + position: relative; +} +span { + background: yellow; + width: 8em; + height: 2em; + position: absolute; + top: 0; + left: 1em; + display: inline-block; +} +span:nth-child(2) { + background: pink; + left: 11em; +} +span:nth-child(3) { + background: lightblue; + top: 4em; + left: 1em; +} +</style> + +</head><body><div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-content-stretch-2-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-content-stretch-2-ref.xht new file mode 100644 index 00000000000..0ab299fc32d --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-content-stretch-2-ref.xht @@ -0,0 +1,38 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | align-content: stretch</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 20em; + position: relative; +} +span { + background: yellow; + width: 8em; + height: 3em; + position: absolute; + top: 0; + left: 1em; + display: inline-block; +} +span:nth-child(2) { + background: pink; + left: 11em; +} +span:nth-child(3) { + background: lightblue; + top: 3em; + left: 1em; +} +</style> + +</head><body><div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-content-stretch-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-content-stretch-ref.xht new file mode 100644 index 00000000000..c5e1972affe --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-content-stretch-ref.xht @@ -0,0 +1,38 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | align-content: stretch</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 20em; + position: relative; +} +span { + background: yellow; + width: 8em; + height: 2em; + position: absolute; + top: 0; + left: 1em; + display: inline-block; +} +span:nth-child(2) { + background: pink; + left: 11em; +} +span:nth-child(3) { + background: lightblue; + top: 3em; + left: 1em; +} +</style> + +</head><body><div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-items-baseline-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-items-baseline-ref.xht new file mode 100644 index 00000000000..788e094d398 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-items-baseline-ref.xht @@ -0,0 +1,40 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | align-items: baseline</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 30em; + position: relative; +} +span { + background: white; + width: 8em; + height: 2em; + display: block; + position: absolute; + top: 1em; + left: 1em; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) { + background: pink; + height: 3em; + left: 11em; +} +span:nth-child(3) { + background: lightblue; + height: 4em; + left: 21em; +} +</style> + +</head><body><div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-items-center-2-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-items-center-2-ref.xht new file mode 100644 index 00000000000..9d7d514be66 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-items-center-2-ref.xht @@ -0,0 +1,41 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | align-items: center</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 30em; + position: relative; +} +span { + background: yellow; + width: 8em; + height: 2em; + position: absolute; + top: 2em; + left: 1em; + display: inline-block; +} +span:nth-child(2) { + background: pink; + height: 3em; + top: 1.5em; + left: 11em; +} +span:nth-child(3) { + background: lightblue; + height: 4em; + top: 1em; + left: 21em; +} +</style> + +</head><body><div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-items-center-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-items-center-ref.xht new file mode 100644 index 00000000000..2c2406c85ad --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-items-center-ref.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | align-items: center</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 30em; + position: relative; +} +span { + background: yellow; + width: 8em; + height: 2em; + position: absolute; + top: 2em; + left: 1em; + display: inline-block; +} +span:nth-child(2) { + background: pink; + left: 11em; +} +span:nth-child(3) { + background: lightblue; + left: 21em; +} +</style> + +</head><body><div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-items-flexend-2-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-items-flexend-2-ref.xht new file mode 100644 index 00000000000..eee1041c4a8 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-items-flexend-2-ref.xht @@ -0,0 +1,38 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | align-items: flex-end</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 30em; + position: relative; +} +span { + background: yellow; + width: 8em; + position: absolute; + bottom: 0; + left: 1em; + display: inline-block; +} +span:nth-child(2) { + background: pink; + height: 3em; + left: 11em; +} +span:nth-child(3) { + background: lightblue; + height: 4em; + left: 21em; +} +</style> + +</head><body><div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-items-flexend-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-items-flexend-ref.xht new file mode 100644 index 00000000000..ba407c9c190 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-items-flexend-ref.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | align-items: flex-end</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 30em; + position: relative; +} +span { + background: yellow; + width: 8em; + position: absolute; + bottom: 0; + left: 1em; + display: inline-block; +} +span:nth-child(2) { + background: pink; + left: 11em; +} +span:nth-child(3) { + background: lightblue; + left: 21em; +} +</style> + +</head><body><div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-items-flexstart-2-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-items-flexstart-2-ref.xht new file mode 100644 index 00000000000..6d64d8979c3 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-items-flexstart-2-ref.xht @@ -0,0 +1,38 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | align-items: flex-start</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 30em; + position: relative; +} +span { + background: yellow; + width: 8em; + display: inline-block; + position: absolute; + top: 0; + left: 1em; +} +span:nth-child(2) { + background: pink; + height: 3em; + left: 11em; +} +span:nth-child(3) { + background: lightblue; + height: 4em; + left: 21em; +} +</style> + +</head><body><div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-items-flexstart-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-items-flexstart-ref.xht new file mode 100644 index 00000000000..e7c0056e37b --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-items-flexstart-ref.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | align-items: flex-start</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 30em; + position: relative; +} +span { + background: yellow; + width: 8em; + position: absolute; + top: 0; + left: 1em; + display: inline-block; +} +span:nth-child(2) { + background: pink; + left: 11em; +} +span:nth-child(3) { + background: lightblue; + left: 21em; +} +</style> + +</head><body><div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-items-stretch-2-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-items-stretch-2-ref.xht new file mode 100644 index 00000000000..f72179e2bb5 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-items-stretch-2-ref.xht @@ -0,0 +1,18 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | align-items: stretch</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: black; + margin: 1em 0 0; + width: 30em; + height: 6em; +} +span { + display: inline-block; +} +</style> + +</head><body><div></div> +<span>PASS</span> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-items-stretch-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-items-stretch-ref.xht new file mode 100644 index 00000000000..9b79598bc9d --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-items-stretch-ref.xht @@ -0,0 +1,42 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | align-items: stretch</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 30em; + position: relative; +} +span { + background: yellow; + margin: 0; + width: 8em; + height: 6em; + position: absolute; + top: 0; + left: 1em; + display: inline-block; +} +span:nth-child(2) { + background: pink; + height: 3em; + top: 3em; + left: 11em; +} +span:nth-child(3) { + background: lightblue; + height: 6em; + top: 0; + left: 21em; +} +</style> + +</head><body><div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-self-auto-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-self-auto-ref.xht new file mode 100644 index 00000000000..02697fe35ac --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-self-auto-ref.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | align-self: auto</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 30em; + position: relative; +} +span { + background: yellow; + width: 8em; + position: absolute; + bottom: 0; + left: 1em; + display: inline-block; +} +span:nth-child(2) { + background: pink; + left: 11em; +} +span:nth-child(3) { + background: lightblue; + left: 21em; +} +</style> + +</head><body><div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-self-baseline-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-self-baseline-ref.xht new file mode 100644 index 00000000000..654e0eda4f5 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-self-baseline-ref.xht @@ -0,0 +1,38 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | align-self: baseline</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 30em; + position: relative; +} +span { + background: yellow; + width: 8em; + height: 3em; + position: absolute; + top: 1.5em; + left: 1em; + display: inline-block; +} +span:nth-child(2) { + background: pink; + left: 11em; +} +span:nth-child(3) { + background: lightblue; + top: 0; + left: 21em; +} +</style> + +</head><body><div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-self-center-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-self-center-ref.xht new file mode 100644 index 00000000000..ad7b089944a --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-self-center-ref.xht @@ -0,0 +1,38 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | align-self: center</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 30em; + position: relative; +} +span { + background: yellow; + width: 8em; + position: absolute; + top: 0; + left: 1em; + display: inline-block; +} +span:nth-child(2) { + background: pink; + left: 11em; +} +span:nth-child(3) { + background: lightblue; + height: 4em; + top: 1em; + left: 21em; +} +</style> + +</head><body><div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-self-flexend-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-self-flexend-ref.xht new file mode 100644 index 00000000000..17a64d42090 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-self-flexend-ref.xht @@ -0,0 +1,38 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | align-self: flex-end</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 30em; + position: relative; +} +span { + background: yellow; + width: 8em; + position: absolute; + top: 0; + left: 1em; + display: inline-block; +} +span:nth-child(2) { + background: pink; + left: 11em; +} +span:nth-child(3) { + background: lightblue; + top: auto; + bottom: 0; + left: 21em; +} +</style> + +</head><body><div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-self-flexstart-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-self-flexstart-ref.xht new file mode 100644 index 00000000000..b3600dcd1e0 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-self-flexstart-ref.xht @@ -0,0 +1,38 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | align-self: flex-start</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 30em; + position: relative; +} +span { + background: yellow; + width: 8em; + position: absolute; + bottom: 0; + left: 1em; + display: inline-block; +} +span:nth-child(2) { + background: pink; + left: 11em; +} +span:nth-child(3) { + background: lightblue; + top: 0; + bottom: auto; + left: 21em; +} +</style> + +</head><body><div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-self-stretch-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-self-stretch-ref.xht new file mode 100644 index 00000000000..123ad5182b8 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_align-self-stretch-ref.xht @@ -0,0 +1,39 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | align-self: stretch</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 6em; + width: 30em; + position: relative; +} +span { + background: yellow; + width: 8em; + height: 3em; + position: absolute; + top: 1.5em; + left: 1em; + display: inline-block; +} +span:nth-child(2) { + background: pink; + left: 11em; +} +span:nth-child(3) { + background: lightblue; + height: 6em; + top: 0; + left: 21em; +} +</style> + +</head><body><div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_box-clear-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_box-clear-ref.xht new file mode 100644 index 00000000000..d0f04386fe1 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_box-clear-ref.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | cleared box</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +#float { + background: #3366cc; + padding: 1em; + float: left; + +} +#flex { + background: #ffcc00; + padding: 2em; + clear: both; +} +div div { + background: pink; + height: 4em; + display: inline-block; +} +</style> + +</head><body><div id="float">damer</div> + +<div id="flex"> + <div>Yellow box should be below the blue box</div> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_columns-flexitems-2-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_columns-flexitems-2-ref.xht new file mode 100644 index 00000000000..9dce6720bb8 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_columns-flexitems-2-ref.xht @@ -0,0 +1,23 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | multicol on flexbox items</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div {background: blue;} +p { + font-family: ahem; + background: yellow; + column-rule: 1em solid lime; + columns: 2; + margin: 0 auto; + width: 200px; +} +</style> + +</head><body><div> + <p> + one two three four five + one two three four five + one two three four five + </p> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_columns-flexitems-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_columns-flexitems-ref.xht new file mode 100644 index 00000000000..62daedd4ea9 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_columns-flexitems-ref.xht @@ -0,0 +1,21 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | multicol on flexbox items</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; +} +p { + font-family: monospace; + background: yellow; + column-rule: 1em solid lime; + columns: 2; + width: 200px; + margin: 0 auto; +} +</style> + +</head><body><div> + <p>one two three four five</p> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_columns-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_columns-ref.xht new file mode 100644 index 00000000000..4d737e50bc2 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_columns-ref.xht @@ -0,0 +1,11 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | multicol</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: black; +} +</style> + +</head><body><div>x</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_direction-column-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_direction-column-ref.xht new file mode 100644 index 00000000000..d76d4cf2bf2 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_direction-column-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex-direction: column</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; +} +span { + background: white; + margin: 1em; + width: 8em; + display: block; +} +span~span { + margin: 2em 1em 1em; +} +</style> + +</head><body><div> + <span>damer</span> + <span>damer</span> + <span>damer</span> + <span>damer</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_direction-column-reverse-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_direction-column-reverse-ref.xht new file mode 100644 index 00000000000..df9b0e7eedc --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_direction-column-reverse-ref.xht @@ -0,0 +1,30 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex-direction: column-reverse</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; +} +span { + background: white; + margin: 1em; + width: 8em; + display: block; +} +.test { + background: #ffcc00; +} +span~span { + margin: 2em 1em 1em; +} +</style> + +</head><body><div> + <span>damer</span> + <span>damer</span> + <span>damer</span> + <span class="test">damer</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_direction-row-reverse-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_direction-row-reverse-ref.xht new file mode 100644 index 00000000000..ac7edaaf2a8 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_direction-row-reverse-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex-direction: row-reverse</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +* {font-family: monospace;} +body { + width: 10em; +} +ul { + background: blue; + padding: 0; + margin: 0; + list-style: none; +} +li { + color: white; + margin: 0 3px 0 0; + display: inline-block; +} +</style> + +</head><body><ul> + <li>EFGH</li> + <li>ABCD</li> + <li>IJKL</li> +</ul> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_display-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_display-ref.xht new file mode 100644 index 00000000000..2bcc0161c1d --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_display-ref.xht @@ -0,0 +1,21 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | display error-handling</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +ol { + background: #3366cc; + padding: 0; + list-style: none; + border: 1px solid black; +} +li { + background: #ffcc00; + margin: 2em; +} +</style> + +</head><body><ol> + <li>damer</li> + <li>Antidisestablishmentarianism</li> +</ol> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_empty-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_empty-ref.xht new file mode 100644 index 00000000000..790060a91b8 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_empty-ref.xht @@ -0,0 +1,2 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<!-- intentionallly left blank --><html xmlns="http://www.w3.org/1999/xhtml"><head></head><body></body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_fbfc-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_fbfc-ref.xht new file mode 100644 index 00000000000..57a275de7c3 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_fbfc-ref.xht @@ -0,0 +1,31 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex formatting context :: float intrusion</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +* {margin: 0;} +body {width: 600px;} +#float { + background: #3366cc; + width: 25%; + float: left; +} +#flex { + background: #ffcc00; + padding: 2em 0; + width: 80%; + clear: both; +} +div div { + background: pink; + margin: 0 2em; + height: 4em; + display: inline-block; +} +</style> + +</head><body><div id="float">damer</div> + +<div id="flex"> + <div>Yellow box should be below the blue box</div> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_fbfc2-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_fbfc2-ref.xht new file mode 100644 index 00000000000..d7a6fe33211 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_fbfc2-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex formatting context :: float intrusion</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +* {margin: 0;} +#float { + background: lightblue; + width: 200px; + float: left; +} +#flex { + background: #ffcc00; + margin-left: -200px; + width: 400px; + overflow: hidden; +} +div div { + margin: 2em; +} +</style> + +</head><body><div id="float">float</div> + +<div id="flex"> + <div>Yellow box yellow box yellow box</div> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_first-line-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_first-line-ref.xht new file mode 100644 index 00000000000..bae0241e4b5 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_first-line-ref.xht @@ -0,0 +1,23 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | first-line</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +ul { + background: #3366cc; + padding: 0; + list-style: none; + width: 900px; + display: block; +} +li { + background: #ffcc00; + margin: 2em; + border: 1px solid black; + display: inline-block; +} +</style> + +</head><body><ul> + <li>damer</li><li>Antidisestablishmentarianism</li><li>damer</li><li>Antidisestablishmentarianism</li><li>Antidisestablishmentarianism</li><li>damer</li><li>Antidisestablishmentarianism</li><li>damer</li> +</ul> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-0-0-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-0-0-ref.xht new file mode 100644 index 00000000000..69cdb0fe446 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-0-0-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: 0 0 0</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: white; + margin: 1em 0; + height: 6em; + display: inline-block; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-0-N-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-0-N-ref.xht new file mode 100644 index 00000000000..4bfe5674796 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-0-N-ref.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: 0 0 N</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + width: 40em; + height: 8em; +} +span { + background: white; + margin: 1em 0; + width: 4em; + height: 6em; + display: inline-block; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-0-N-shrink-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-0-N-shrink-ref.xht new file mode 100644 index 00000000000..883fc3ca839 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-0-N-shrink-ref.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: 0 0 N | shrinking</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + white-space: nowrap; + background: blue; + margin: 1em 0; + border: 1px solid black; + width: 12em; + height: 8em; +} +span { + background: yellow; + margin: 1em 0; + width: 4em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-0-Npercent-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-0-Npercent-ref.xht new file mode 100644 index 00000000000..4974b9b09c3 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-0-Npercent-ref.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: 0 0 N%</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: white; + margin: 1em 0; + width: 8em; + height: 6em; + display: inline-block; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-0-Npercent-shrink-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-0-Npercent-shrink-ref.xht new file mode 100644 index 00000000000..d513e57194e --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-0-Npercent-shrink-ref.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: 0 0 N% | shrinking</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + white-space: nowrap; + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 12em; +} +span { + background: yellow; + margin: 1em 0; + width: 6em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-0-auto-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-0-auto-ref.xht new file mode 100644 index 00000000000..d65511d75ec --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-0-auto-ref.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: 0 0 auto</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: white; + margin: 1em 0; + width: 5em; + height: 6em; + display: inline-block; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-0-auto-shrink-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-0-auto-shrink-ref.xht new file mode 100644 index 00000000000..d5fe8adc5d2 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-0-auto-shrink-ref.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: 0 0 auto | shrinking</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + white-space: nowrap; + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 16em; +} +span { + background: yellow; + margin: 1em 0; + width: 5em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-1-0-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-1-0-ref.xht new file mode 100644 index 00000000000..0477cbe1735 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-1-0-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: 0 1 0</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: white; + margin: 1em 0; + height: 6em; + display: inline-block; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-1-N-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-1-N-ref.xht new file mode 100644 index 00000000000..8384f2d5a1f --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-1-N-ref.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: 0 1 N</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: white; + margin: 1em 0; + width: 4em; + height: 6em; + display: inline-block; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-1-N-shrink-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-1-N-shrink-ref.xht new file mode 100644 index 00000000000..7285ec2535b --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-1-N-shrink-ref.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: 0 1 N | shrinking</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 12em; +} +span { + background: white; + margin: 1em 0; + width: 3em; + height: 6em; + display: inline-block; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-1-Npercent-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-1-Npercent-ref.xht new file mode 100644 index 00000000000..beea64da4be --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-1-Npercent-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: 0 1 N%</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 8em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-1-Npercent-shrink-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-1-Npercent-shrink-ref.xht new file mode 100644 index 00000000000..70876cdc157 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-1-Npercent-shrink-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: 0 1 N% | shrinking</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 12em; +} +span { + background: yellow; + margin: 1em 0; + width: 3em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-1-auto-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-1-auto-ref.xht new file mode 100644 index 00000000000..96d1896ec1c --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-1-auto-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: 0 1 auto</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 5em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-1-auto-shrink-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-1-auto-shrink-ref.xht new file mode 100644 index 00000000000..fa531c93e4e --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-1-auto-shrink-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: 0 1 auto | shrinking</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 16em; +} +span { + background: yellow; + margin: 1em 0; + width: 4em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-N-0-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-N-0-ref.xht new file mode 100644 index 00000000000..ed901742557 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-N-0-ref.xht @@ -0,0 +1,26 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: 0 N 0</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-N-N-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-N-N-ref.xht new file mode 100644 index 00000000000..0de1f702218 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-N-N-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: 0 N N</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 4em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-N-N-shrink-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-N-N-shrink-ref.xht new file mode 100644 index 00000000000..08936fd0519 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-N-N-shrink-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: 0 N N | shrinking</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 12em; +} +span { + background: yellow; + margin: 1em 0; + width: 3em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-N-Npercent-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-N-Npercent-ref.xht new file mode 100644 index 00000000000..3940dfd6dee --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-N-Npercent-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: 0 N N%</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 8em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-N-Npercent-shrink-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-N-Npercent-shrink-ref.xht new file mode 100644 index 00000000000..fbbb99991b7 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-N-Npercent-shrink-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: 0 N N% | shrinking</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 12em; +} +span { + background: yellow; + margin: 1em 0; + width: 3em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-N-auto-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-N-auto-ref.xht new file mode 100644 index 00000000000..733e443fada --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-N-auto-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: 0 N auto</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 5em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-N-auto-shrink-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-N-auto-shrink-ref.xht new file mode 100644 index 00000000000..cebb1d93832 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-0-N-auto-shrink-ref.xht @@ -0,0 +1,26 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: 0 N auto | shrinking</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + width: 16em; +} +span { + background: yellow; + margin: 1em 0; + width: 4em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-0-0-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-0-0-ref.xht new file mode 100644 index 00000000000..ef339542c4e --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-0-0-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: 1 0 0</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 10em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-0-N-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-0-N-ref.xht new file mode 100644 index 00000000000..3c764e708ef --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-0-N-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: 1 0 N</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 10em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-0-N-shrink-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-0-N-shrink-ref.xht new file mode 100644 index 00000000000..59a14f60264 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-0-N-shrink-ref.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: 1 0 N | shrinking</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + white-space: nowrap; + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 12em; +} +span { + background: yellow; + margin: 1em 0; + width: 4em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-0-Npercent-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-0-Npercent-ref.xht new file mode 100644 index 00000000000..ed1e58937c4 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-0-Npercent-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: 1 0 N%</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 10em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-0-Npercent-shrink-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-0-Npercent-shrink-ref.xht new file mode 100644 index 00000000000..4de9c92c9fe --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-0-Npercent-shrink-ref.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: 1 0 N% | shrinking</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + white-space: nowrap; + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 12em; +} +span { + background: yellow; + margin: 1em 0; + width: 6em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-0-auto-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-0-auto-ref.xht new file mode 100644 index 00000000000..acc28d5bbba --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-0-auto-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: 1 0 auto</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 10em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-0-auto-shrink-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-0-auto-shrink-ref.xht new file mode 100644 index 00000000000..567a3cc9ead --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-0-auto-shrink-ref.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: 1 0 auto | shrinking</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + white-space: nowrap; + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 16em; +} +span { + background: yellow; + margin: 1em 0; + width: 5em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-1-0-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-1-0-ref.xht new file mode 100644 index 00000000000..3c6b827ed7a --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-1-0-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: 1 1 0</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 10em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-1-N-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-1-N-ref.xht new file mode 100644 index 00000000000..9f12d548e99 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-1-N-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: 1 1 N</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 10em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-1-N-shrink-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-1-N-shrink-ref.xht new file mode 100644 index 00000000000..0b1a34250c9 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-1-N-shrink-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: 1 1 N | shrinking</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 12em; +} +span { + background: yellow; + margin: 1em 0; + width: 3em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-1-Npercent-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-1-Npercent-ref.xht new file mode 100644 index 00000000000..750c38052f4 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-1-Npercent-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: 1 1 N%</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 10em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-1-Npercent-shrink-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-1-Npercent-shrink-ref.xht new file mode 100644 index 00000000000..73fc588d110 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-1-Npercent-shrink-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: 1 1 N% | shrinking</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 12em; +} +span { + background: yellow; + margin: 1em 0; + width: 3em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-1-auto-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-1-auto-ref.xht new file mode 100644 index 00000000000..27497281288 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-1-auto-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: 1 1 auto</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 10em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-1-auto-shrink-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-1-auto-shrink-ref.xht new file mode 100644 index 00000000000..e17f4a2c69d --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-1-auto-shrink-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: 1 1 auto | shrinking</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 16em; +} +span { + background: yellow; + margin: 1em 0; + width: 4em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-N-0-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-N-0-ref.xht new file mode 100644 index 00000000000..b37c65047e0 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-N-0-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: 1 N 0</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 10em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-N-N-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-N-N-ref.xht new file mode 100644 index 00000000000..4d092c7699e --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-N-N-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: 1 N N</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 10em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-N-N-shrink-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-N-N-shrink-ref.xht new file mode 100644 index 00000000000..bbf2694ba2a --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-N-N-shrink-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: 1 N N | shrinking</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 12em; +} +span { + background: yellow; + margin: 1em 0; + width: 3em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-N-Npercent-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-N-Npercent-ref.xht new file mode 100644 index 00000000000..5281956ceb2 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-N-Npercent-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: 1 N N%</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 10em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-N-Npercent-shrink-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-N-Npercent-shrink-ref.xht new file mode 100644 index 00000000000..71fb92542b7 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-N-Npercent-shrink-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: 1 N N% | shrinking</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 12em; +} +span { + background: yellow; + margin: 1em 0; + width: 3em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-N-auto-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-N-auto-ref.xht new file mode 100644 index 00000000000..37895a2259a --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-N-auto-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: 1 N auto</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 10em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-N-auto-shrink-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-N-auto-shrink-ref.xht new file mode 100644 index 00000000000..1955db21ee2 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-1-N-auto-shrink-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: 1 N auto | shrinking</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 16em; +} +span { + background: yellow; + margin: 1em 0; + width: 4em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-0-0-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-0-0-ref.xht new file mode 100644 index 00000000000..bb5c65bafab --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-0-0-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: N 0 0</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 10em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-0-N-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-0-N-ref.xht new file mode 100644 index 00000000000..840b4dfc321 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-0-N-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: N 0 N</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 10em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-0-N-shrink-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-0-N-shrink-ref.xht new file mode 100644 index 00000000000..0e21d1b4928 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-0-N-shrink-ref.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: N 0 N | shrinking</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + white-space: nowrap; + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 12em; +} +span { + background: yellow; + margin: 1em 0; + width: 4em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-0-Npercent-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-0-Npercent-ref.xht new file mode 100644 index 00000000000..f593c1fab0c --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-0-Npercent-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: N 0 N%</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 10em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-0-Npercent-shrink-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-0-Npercent-shrink-ref.xht new file mode 100644 index 00000000000..f440d9c221d --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-0-Npercent-shrink-ref.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: N 0 N% | shrinking</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + white-space: nowrap; + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 12em; +} +span { + background: yellow; + margin: 1em 0; + width: 6em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-0-auto-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-0-auto-ref.xht new file mode 100644 index 00000000000..a25f7258cb8 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-0-auto-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: N 0 auto</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 10em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-0-auto-shrink-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-0-auto-shrink-ref.xht new file mode 100644 index 00000000000..8334a20b87e --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-0-auto-shrink-ref.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: N 0 auto | shrinking</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + white-space: nowrap; + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 12em; +} +span { + background: yellow; + margin: 1em 0; + width: 5em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-1-0-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-1-0-ref.xht new file mode 100644 index 00000000000..6fd70420147 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-1-0-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: N 1 0</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 10em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-1-N-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-1-N-ref.xht new file mode 100644 index 00000000000..be5d8cfff17 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-1-N-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: N 1 N</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 10em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-1-N-shrink-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-1-N-shrink-ref.xht new file mode 100644 index 00000000000..c01784ca0af --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-1-N-shrink-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: N 1 N | shrinking</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 12em; +} +span { + background: yellow; + margin: 1em 0; + width: 3em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-1-Npercent-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-1-Npercent-ref.xht new file mode 100644 index 00000000000..6501c4bd031 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-1-Npercent-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: N 1 N%</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 10em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-1-Npercent-shrink-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-1-Npercent-shrink-ref.xht new file mode 100644 index 00000000000..4eb1c664331 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-1-Npercent-shrink-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: N 1 N% | shrinking</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 12em; +} +span { + background: yellow; + margin: 1em 0; + width: 3em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-1-auto-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-1-auto-ref.xht new file mode 100644 index 00000000000..a3f12f26a17 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-1-auto-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: N 1 auto</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 10em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-1-auto-shrink-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-1-auto-shrink-ref.xht new file mode 100644 index 00000000000..cd9fefd9a8a --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-1-auto-shrink-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: N 1 auto | shrinking</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 16em; +} +span { + background: yellow; + margin: 1em 0; + width: 4em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-N-0-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-N-0-ref.xht new file mode 100644 index 00000000000..5cd904cfc2a --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-N-0-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: N N 0</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 10em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-N-N-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-N-N-ref.xht new file mode 100644 index 00000000000..5885145091d --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-N-N-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: N N N</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 10em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-N-N-shrink-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-N-N-shrink-ref.xht new file mode 100644 index 00000000000..04091a8ad45 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-N-N-shrink-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: N N N | shrinking</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 12em; +} +span { + background: yellow; + margin: 1em 0; + width: 3em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-N-Npercent-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-N-Npercent-ref.xht new file mode 100644 index 00000000000..56d001f6b0e --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-N-Npercent-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: N N N%</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 10em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-N-Npercent-shrink-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-N-Npercent-shrink-ref.xht new file mode 100644 index 00000000000..7272714040f --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-N-Npercent-shrink-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: N N N% | shrinking</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 12em; +} +span { + background: yellow; + margin: 1em 0; + width: 3em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-N-auto-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-N-auto-ref.xht new file mode 100644 index 00000000000..a7335fb6611 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-N-auto-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: N N auto</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: yellow; + margin: 1em 0; + width: 10em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-N-auto-shrink-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-N-auto-shrink-ref.xht new file mode 100644 index 00000000000..d16349ac6e5 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-N-N-auto-shrink-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: N N auto | shrinking</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 16em; +} +span { + background: yellow; + margin: 1em 0; + width: 4em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-auto-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-auto-ref.xht new file mode 100644 index 00000000000..c45be824875 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-auto-ref.xht @@ -0,0 +1,29 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: auto</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 32em; +} +span { + background: white; + margin: 1em; + width: 6em; + height: 6em; + display: inline-block; + +} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-basis-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-basis-ref.xht new file mode 100644 index 00000000000..3c80a0d3347 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-basis-ref.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex-basis: percentage</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + white-space: nowrap; + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 8em; +} +span { + background: yellow; + margin: 1em 0; + width: 8em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-basis-shrink-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-basis-shrink-ref.xht new file mode 100644 index 00000000000..96cc149141d --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-basis-shrink-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex-basis: percentage, flex-shrink: +integer</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + width: 24em; + height: 8em; +} +span { + background: yellow; + margin: 1em 0; + width: 6em; + height: 6em; + display: inline-block; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-formatting-interop-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-formatting-interop-ref.xht new file mode 100644 index 00000000000..9667787c496 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-formatting-interop-ref.xht @@ -0,0 +1,39 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex formatting context :: negative margins and + border box</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +* {margin: 0;} +.float { + background: lightblue; + width: 200px; + float: left; +} +#flex { + background: #ffcc00; + margin-left: -200px; + width: 200px; +} +div div { + border: 2px solid transparent; + margin: 0 2em 2em; +} +p { + clear: both; + margin: 2em 0; +} +#nbfc { + white-space: nowrap; + background: #ffcc00; + margin-left: -200px; + width: 200px; + table-layout: fixed; + display: table; +} +</style> + +</head><body><div class="float">float</div> +<div id="nbfc"> + <div>xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx</div> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-initial-2-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-initial-2-ref.xht new file mode 100644 index 00000000000..eb8661e984b --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-initial-2-ref.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: initial</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: white; + margin: 1em; + width: 5em; + height: 6em; + display: inline-block; +} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-initial-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-initial-ref.xht new file mode 100644 index 00000000000..72b050b2ec5 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-initial-ref.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: initial</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 22em; +} +span { + background: white; + margin: 1em; + width: 3.5em; + height: 6em; + display: inline-block; +} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-natural-mixed-basis-auto-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-natural-mixed-basis-auto-ref.xht new file mode 100644 index 00000000000..de3db219f77 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-natural-mixed-basis-auto-ref.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: larger integer, mixed basis, auto</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + font-family: ahem; + background: blue; + height: 8em; + width: 35em; +} +span { + font-family: ahem; + height: 8em; + display: inline-block; +} +span:nth-child(1) { + background: yellow; + width: 3em; +} +span:nth-child(2) { + background: pink; + width: 6em; +} +span:nth-child(3) { + background: lightblue; + width: 8em; +} +span:nth-child(4) { + background: grey; + width: 18em; +} +</style> + +</head><body><div> + <span>a</span><span>aaa</span><span>aaaaa</span><span>aaaaaaaaaaaaaaa</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-natural-mixed-basis-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-natural-mixed-basis-ref.xht new file mode 100644 index 00000000000..3c013cf09a6 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-natural-mixed-basis-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: larger integer, mixed basis</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + height: 8em; + width: 35em; +} +span { + background: yellow; + width: 10em; + height: 8em; + display: inline-block; +} +span:nth-child(1) { + width: 5em; +} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-natural-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-natural-ref.xht new file mode 100644 index 00000000000..54cf368229c --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-natural-ref.xht @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: larger integer</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 800px; +} +span { + background: white; + margin: 1em 0; + width: 25%; + height: 6em; + display: inline-block; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-natural-variable-auto-basis-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-natural-variable-auto-basis-ref.xht new file mode 100644 index 00000000000..98d39eaf019 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-natural-variable-auto-basis-ref.xht @@ -0,0 +1,30 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: larger integer, auto basis</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + border: 1px solid black; + height: 8em; + width: 32em; +} +span { + width: 7em; + height: 8em; + float: left; +} +span:nth-child(2) { + width: 11em; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-natural-variable-zero-basis-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-natural-variable-zero-basis-ref.xht new file mode 100644 index 00000000000..319558e4eb3 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-natural-variable-zero-basis-ref.xht @@ -0,0 +1,30 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: larger integer, zero basis</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + border: 1px solid black; + height: 8em; + width: 36em; +} +span { + width: 6em; + height: 8em; + float: left; +} +span:nth-child(2) { + width: 18em; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-none-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-none-ref.xht new file mode 100644 index 00000000000..a4bd0abcb97 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-none-ref.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: none</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 32em; +} +span { + background: white; + margin: 1em; + width: 5em; + height: 6em; + display: inline-block; +} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> + +<div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-unitless-basis-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-unitless-basis-ref.xht new file mode 100644 index 00000000000..59dae99b28d --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flex-unitless-basis-ref.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex: 0 1 N unitless</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 40em; +} +span { + background: white; + margin: 1em 0; + width: 5em; + height: 6em; + display: inline-block; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) {background: pink;} +span:nth-child(3) {background: lightblue;} +span:nth-child(4) {background: grey;} +</style> + +</head><body><div> + <span>one</span><span>two</span><span>three</span><span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flow-column-reverse-wrap-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flow-column-reverse-wrap-ref.xht new file mode 100644 index 00000000000..455e9b24cd1 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flow-column-reverse-wrap-ref.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex-flow: column-reverse wrap</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + padding-top: 1em; + margin: 1em 0; + border: 1px solid black; + width: 20em; + height: 7em; +} +span { + background: white; + margin: 1em; + width: 8em; + height: 1.5em; + float: left; +} +</style> + +</head><body><div> + <span>two</span> + <span>four</span> + <span>one</span> + <span>three</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flow-column-reverse-wrap-reverse-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flow-column-reverse-wrap-reverse-ref.xht new file mode 100644 index 00000000000..53cfbb4b668 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flow-column-reverse-wrap-reverse-ref.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex-flow: column-reverse wrap-reverse</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + padding-top: 1em; + margin: 1em 0; + border: 1px solid black; + width: 20em; + height: 7em; +} +span { + background: white; + margin: 1em; + width: 8em; + height: 1.5em; + float: left; +} +</style> + +</head><body><div> + <span>four</span> + <span>two</span> + <span>three</span> + <span>one</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flow-column-wrap-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flow-column-wrap-ref.xht new file mode 100644 index 00000000000..c7462ac36d4 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flow-column-wrap-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex-flow: column wrap</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + width: 20em; + height: 8em; +} +span { + background: white; + margin: 1em; + width: 8em; + display: block; + float: left; +} +</style> + +</head><body><div> + <span>one</span> + <span>three</span> + <span>two</span> + <span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flow-column-wrap-reverse-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flow-column-wrap-reverse-ref.xht new file mode 100644 index 00000000000..64194a7c332 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flow-column-wrap-reverse-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex-flow: column wrap-reverse</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + width: 20em; + height: 8em; +} +span { + background: white; + margin: 1em; + width: 8em; + display: block; + float: left; +} +</style> + +</head><body><div> + <span>three</span> + <span>one</span> + <span>four</span> + <span>two</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flow-row-wrap-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flow-row-wrap-ref.xht new file mode 100644 index 00000000000..be04466411a --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flow-row-wrap-ref.xht @@ -0,0 +1,31 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex-flow: row wrap</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + width: 20em; +} +span { + background: white; + margin: 1em; + width: 8em; + display: block; + float: left; +} +div::after { + content: ""; + clear: both; + display: block; +} +</style> + +</head><body><div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flow-row-wrap-reverse-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flow-row-wrap-reverse-ref.xht new file mode 100644 index 00000000000..16f3058f546 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_flow-row-wrap-reverse-ref.xht @@ -0,0 +1,31 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex-flow: row wrap-reverse</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + width: 20em; +} +span { + background: white; + margin: 1em; + width: 8em; + display: block; + float: left; +} +div::after { + content: ""; + clear: both; + display: block; +} +</style> + +</head><body><div> + <span>three</span> + <span>four</span> + <span>one</span> + <span>two</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_generated-container-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_generated-container-ref.xht new file mode 100644 index 00000000000..da2853a4c47 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_generated-container-ref.xht @@ -0,0 +1,12 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flexcontainer vs generated content</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + content: "xxx"; + background: blue; +} +</style> + +</head><body><div></div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_generated-flex-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_generated-flex-ref.xht new file mode 100644 index 00000000000..dff620f4a58 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_generated-flex-ref.xht @@ -0,0 +1,21 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flexcontainer via generated content</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: #3366cc; + border: 1px solid black; +} +div::after { + content: "xxx"; + background: yellow; + margin: 1em; + width: 200px; + height: 2em; + display: block; +} +</style> + +</head><body><div> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_generated-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_generated-ref.xht new file mode 100644 index 00000000000..d776b919b86 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_generated-ref.xht @@ -0,0 +1,26 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flexcontainer vs generated content</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: #3366cc; + height: 4em; +} +div::after, p { + content: "xxx"; + background: yellow; + margin: 1em; + width: 200px; + height: 2em; + float: left; +} +div::after { + content: "yyy"; + display: block; +} +</style> + +</head><body><div> + <p>FAIL</p> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_inline-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_inline-ref.xht new file mode 100644 index 00000000000..4e635f9bb85 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_inline-ref.xht @@ -0,0 +1,13 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | inline</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +body {margin: 0;} +div { + background: yellow; + display: inline-block; +} +</style> + +</head><body><div>HELLOWORLD</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_item-bottom-float-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_item-bottom-float-ref.xht new file mode 100644 index 00000000000..d0920efc7fe --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_item-bottom-float-ref.xht @@ -0,0 +1,31 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | GCPM bottom float</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: black; + margin: 1em; + height: 6em; + width: 400px; +} +p { + background: #3366cc; + margin: 2em; + width: 2em; + height: 2em; + float: left; +} +div::after { + content: ""; + clear: both; + display: block; +} +</style> + +</head><body><div> + <p></p> + <p></p> + <p></p> + <p></p> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_item-clear-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_item-clear-ref.xht new file mode 100644 index 00000000000..8f300095598 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_item-clear-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | cleared item</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +#float { + background: #3366cc; + padding: 1em; + float: left; +} +#flex { + background: #ffcc00; + overflow: hidden; +} +div div { + margin: 2em; + height: 4em; + clear: both; +} +</style> + +</head><body><div id="float">damer</div> + +<div id="flex"> + <div>Yellow box should be to the right of the blue box, and + never below</div> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_item-float-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_item-float-ref.xht new file mode 100644 index 00000000000..ff1830f6a7b --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_item-float-ref.xht @@ -0,0 +1,29 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | floated item</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: black; + margin: 1em; +} +p { + background: #3366cc; + margin: 2em; + width: 2em; + height: 2em; + float: left; +} +div::after { + content: ""; + clear: both; + display: block +} +</style> + +</head><body><div> + <p></p> + <p></p> + <p></p> + <p></p> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_item-top-float-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_item-top-float-ref.xht new file mode 100644 index 00000000000..d60e6a8feb0 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_item-top-float-ref.xht @@ -0,0 +1,30 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | floated item</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: black; + margin: 1em; + width: 400px; +} +p { + background: #3366cc; + margin: 2em; + width: 2em; + height: 2em; + float: left; +} +div::after { + content: ""; + clear: both; + display: block; +} +</style> + +</head><body><div> + <p></p> + <p></p> + <p></p> + <p></p> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_item-vertical-align-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_item-vertical-align-ref.xht new file mode 100644 index 00000000000..caa1c746131 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_item-vertical-align-ref.xht @@ -0,0 +1,31 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | vertical-align</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: yellow; + border: 1px solid black; + width: 600px; +} +p { + background: #3366cc; + margin: 2em; + width: 2em; + height: 2em; + float: left; +} +div::after { + content: ""; + clear: both; + display: block; +} +</style> + +</head><body><div> + <p></p> + <p></p> + <p></p> + <p></p> + <p></p> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_justifycontent-center-overflow-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_justifycontent-center-overflow-ref.xht new file mode 100644 index 00000000000..e41239936c0 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_justifycontent-center-overflow-ref.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | justify-content: center / overflow</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + font-family: monospace; + background: blue; + margin: 1em 0 0 10em; + border: 1px solid black; + height: 8em; + width: 4em; + position: relative; +} +span { + background: yellow; + margin: 1em 0 0 -2.85em; + height: 6em; + display: inline-block; +} +span:nth-child(2) { + background: pink; + margin-left: 2em; +} +span:nth-child(3) { + background: lightblue; + margin-left: 0; + position: relative; + top: -7em; + left: 4.95em +} +</style> + +</head><body><div> + <span>dam</span><span>dam</span><span>dam</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_justifycontent-center-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_justifycontent-center-ref.xht new file mode 100644 index 00000000000..a952ef9b6ae --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_justifycontent-center-ref.xht @@ -0,0 +1,38 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | justify-content: center</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 30em; + position: relative; +} +span { + background: yellow; + margin: 1em 0; + width: 6em; + max-width: 6em; + height: 6em; + position: absolute; + left: 4em; + display: inline-block; +} +span:nth-child(2) { + background: pink; + left: 12em; +} +span:nth-child(3) { + background: lightblue; + left: 20em; +} +</style> + +</head><body><div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_justifycontent-flex-end-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_justifycontent-flex-end-ref.xht new file mode 100644 index 00000000000..e62f20fcccb --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_justifycontent-flex-end-ref.xht @@ -0,0 +1,38 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | justify-content: flex-end</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 30em; + position: relative; +} +span { + background: yellow; + margin: 1em 0; + width: 6em; + max-width: 6em; + height: 6em; + position: absolute; + left: 7em; + display: inline-block; +} +span:nth-child(2) { + background: pink; + left: 15em; +} +span:nth-child(3) { + background: lightblue; + left: 23em; +} +</style> + +</head><body><div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_justifycontent-flex-start-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_justifycontent-flex-start-ref.xht new file mode 100644 index 00000000000..d778967fe30 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_justifycontent-flex-start-ref.xht @@ -0,0 +1,38 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | justify-content: flex-start</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 30em; + position: relative; +} +span { + background: yellow; + margin: 1em 0; + width: 6em; + max-width: 6em; + height: 6em; + position: absolute; + left: 2em; + display: inline-block; +} +span:nth-child(2) { + background: pink; + left: 12em; +} +span:nth-child(3) { + background: lightblue; + left: 22em; +} +</style> + +</head><body><div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_justifycontent-spacearound-negative-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_justifycontent-spacearound-negative-ref.xht new file mode 100644 index 00000000000..5fb494d4190 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_justifycontent-spacearound-negative-ref.xht @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | justify-content: space-around / negative</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 17em; + position: relative; +} +span { + background: yellow; + margin: 1em 0; + width: 4em; + height: 6em; + position: absolute; + left: 0.5em; + display: inline-block; +} +span:nth-child(2) { + background: pink; + left: 6.5em; +} +span:nth-child(3) { + background: lightblue; + left: 12.5em; +} +</style> + +</head><body><div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_justifycontent-spacearound-only-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_justifycontent-spacearound-only-ref.xht new file mode 100644 index 00000000000..858e3b1c357 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_justifycontent-spacearound-only-ref.xht @@ -0,0 +1,25 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | justify-content: space-around | single item</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 30em; +} +span { + background: white; + margin: 1em auto; + width: 6em; + max-width: 6em; + height: 6em; + display: block; +} +</style> + +</head><body><div> + <span>one</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_justifycontent-spacearound-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_justifycontent-spacearound-ref.xht new file mode 100644 index 00000000000..a7a0eb72114 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_justifycontent-spacearound-ref.xht @@ -0,0 +1,38 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | justify-content: space-around</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 30em; + position: relative; +} +span { + background: yellow; + margin: 1em 0; + width: 6em; + max-width: 6em; + height: 6em; + position: absolute; + left: 2em; + display: inline-block; +} +span:nth-child(2) { + background: pink; + left: 12em; +} +span:nth-child(3) { + background: lightblue; + left: 22em; +} +</style> + +</head><body><div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_justifycontent-spacebetween-negative-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_justifycontent-spacebetween-negative-ref.xht new file mode 100644 index 00000000000..65e0114a08d --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_justifycontent-spacebetween-negative-ref.xht @@ -0,0 +1,38 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | justify-content: space-between / negative</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 17em; + position: relative; +} +span { + background: white; + margin: 1em 0; + width: 4em; + height: 6em; + position: absolute; + left: 1em; + display: inline-block; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) { + background: pink; + left: 7em; +} +span:nth-child(3) { + background: lightblue; + left: 13em; +} +</style> + +</head><body><div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_justifycontent-spacebetween-only-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_justifycontent-spacebetween-only-ref.xht new file mode 100644 index 00000000000..de3ffeca6c2 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_justifycontent-spacebetween-only-ref.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | justify-content: space-between | single item</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 30em; + position: relative; +} +span { + background: white; + margin: 1em 0; + width: 6em; + max-width: 6em; + height: 6em; + position: absolute; + left: 1em; + display: inline-block; +} +</style> + +</head><body><div> + <span>one</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_justifycontent-spacebetween-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_justifycontent-spacebetween-ref.xht new file mode 100644 index 00000000000..6bd70b793a5 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_justifycontent-spacebetween-ref.xht @@ -0,0 +1,39 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | justify-content: space-between</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 30em; + position: relative; +} +span { + background: white; + margin: 1em 0; + width: 6em; + max-width: 6em; + height: 6em; + position: absolute; + left: 1em; + display: inline-block; +} +span:nth-child(1) {background: yellow;} +span:nth-child(2) { + background: pink; + left: 12em; +} +span:nth-child(3) { + background: lightblue; + left: 23em; +} +</style> + +</head><body><div> + <span>one</span> + <span>two</span> + <span>three</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_margin-auto-overflow-2-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_margin-auto-overflow-2-ref.xht new file mode 100644 index 00000000000..46199830a5d --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_margin-auto-overflow-2-ref.xht @@ -0,0 +1,34 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | margin: auto in overflow</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 32em; + position: relative; +} +span { + background: white; + margin: 0; + width: 12em; + height: 6em; + position: absolute; + left: 0; + top: 1em; + display: inline-block; +} +span+span { + background: yellow; + width: 30em; + left: 12em; +} +</style> + +</head><body><div> + <span>one</span> + <span>two</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_margin-auto-overflow-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_margin-auto-overflow-ref.xht new file mode 100644 index 00000000000..a69d213eb0a --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_margin-auto-overflow-ref.xht @@ -0,0 +1,33 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | margin: auto in overflow</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 32em; + position: relative; +} +span { + background: white; + margin: 0; + width: 30em; + height: 6em; + position: absolute; + left: 0; + top: 1em; + display: inline-block; +} +span+span { + background: yellow; + left: 30em; +} +</style> + +</head><body><div> + <span>one</span> + <span>two</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_margin-auto-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_margin-auto-ref.xht new file mode 100644 index 00000000000..0c38bd2b24d --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_margin-auto-ref.xht @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | margin: auto</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 32em; + position: relative; +} +span { + background: white; + width: 4em; + margin: 0; + height: 6em; + position: absolute; + left: 6em; + top: 1em; + display: inline-block; +} +span+span { + left: 22em; +} +</style> + +</head><body><div> + <span>one</span> + <span>two</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_margin-collapse-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_margin-collapse-ref.xht new file mode 100644 index 00000000000..efd4f53b2e0 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_margin-collapse-ref.xht @@ -0,0 +1,24 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flexitem margin collapsing</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +body { + margin: 0; +} +div { + background: blue; + border: 1px solid black; +} +p { + margin: 1em 0; +} +p+p { + margin: 2em 0 1em; +} +</style> + +</head><body><div> + <p>damer</p> + <p>damer</p> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_margin-left-ex-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_margin-left-ex-ref.xht new file mode 100644 index 00000000000..4d809b242b0 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_margin-left-ex-ref.xht @@ -0,0 +1,30 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | margin-left: auto</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + height: 8em; + width: 32em; + position: relative; +} +span { + background: white; + margin: 1em; + height: 6em; + display: inline-block; +} +span:first-child { + margin: 0; + position: absolute; + right: 1em; + top: 1em; +} +</style> + +</head><body><div> + <span>four</span><span>one</span><span>two</span><span>three</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_margin-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_margin-ref.xht new file mode 100644 index 00000000000..c564806a240 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_margin-ref.xht @@ -0,0 +1,13 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | margins</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: black; + margin: 1em; + height: 4em; +} +</style> + +</head><body><div></div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_min-height-auto-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_min-height-auto-ref.xht new file mode 100644 index 00000000000..28e2e97a6cd --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_min-height-auto-ref.xht @@ -0,0 +1,30 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | min-height: auto</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +body { + margin: 0; + width: 602px; +} +div { + background: #3366cc; + border: 1px solid black; +} +p { + background: yellow; + margin: 1em 1em 2em; + height: auto; + min-height: auto; +} +p:last-child { + margin-bottom: 1em; +} +</style> + +</head><body><div> + <p>damer</p> + <p>damer</p> + <p>damer</p> + <p>damer</p> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_min-width-auto-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_min-width-auto-ref.xht new file mode 100644 index 00000000000..2c2a0fb4752 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_min-width-auto-ref.xht @@ -0,0 +1,33 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | min-width: auto</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +body { + margin: 0; + width: 602px; +} +div { + background: #3366cc; + border: 1px solid black; +} +div::after { + content: ""; + clear: both; + display: block; +} +p { + background: yellow; + margin: 1em; + min-width: auto; + width: auto; + float: left; +} +</style> + +</head><body><div> + <p>damer</p> + <p>damer</p> + <p>damer</p> + <p>damer</p> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_object-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_object-ref.xht new file mode 100644 index 00000000000..6fdce6b1504 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_object-ref.xht @@ -0,0 +1,20 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | object fallback as a flex item</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: #ffcc00; + justify-content: space-around; + display: flex; +} +div>* { + background: #3366cc; + margin: 0; +} +</style> + +</head><body><div> + <p>this is supposed to be a flex item</p> + <p>this is supposed to be a flex item</p> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_order-abspos-space-around-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_order-abspos-space-around-ref.xht new file mode 100644 index 00000000000..ac6ca29c1ef --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_order-abspos-space-around-ref.xht @@ -0,0 +1,30 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | order; justify-content: space-around</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + border: 1px solid black; + width: 27em; + height: 8em; + position: relative; +} +span { + background: yellow; + width: 5em; + height: 8em; + position: absolute; + top: 0; + left: 2em; + display: block; +} +span+span {left: 11em;} +span+span+span {left: 20em;} +</style> + +</head><body><div> + <span>damer</span> + <span>damer</span> + <span>damer</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_order-box-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_order-box-ref.xht new file mode 100644 index 00000000000..380e7486114 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_order-box-ref.xht @@ -0,0 +1,26 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex-flow: column-reverse wrap-reverse; order</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em; + border: 1px solid black; +} +div div { + background: yellow; + display: inline-block; +} +span { + background: white; + margin: 1em; + width: 8em; + height: 1.2em; + display: inline-block; +} +</style> + +</head><body><div> + <div><span>three</span><span>four</span></div><div><span>one</span><span>two</span></div> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_order-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_order-ref.xht new file mode 100644 index 00000000000..c32c8323341 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_order-ref.xht @@ -0,0 +1,42 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex-flow: column-reverse wrap-reverse; order</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + padding: 1em 0 0; + margin: 1em 0; + border: 1px solid black; + width: 20em; + height: 7em; +} +span { + background: white; + margin: 1em; + width: 8em; + height: 1.5em; + float: left; +} +.one { + background: pink; +} +.two { + background: yellow; +} +.three { + background: black; + color: white; +} +.four { + background: fuchsia; + color: white; +} +</style> + +</head><body><div> + <span class="one">one</span> + <span class="three">three</span> + <span class="two">two</span> + <span class="four">four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_rowspan-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_rowspan-ref.xht new file mode 100644 index 00000000000..8c8ea5cd707 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_rowspan-ref.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flexcontainers in cells with rowspan</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +table { + width: 600px; + table-layout: fixed; + border-spacing: 0; +} +td { + background: blue; + padding: 0; +} +div { + background: white; + height: 8em; +} +</style> + +</head><body><table> +<tbody><tr> +<td rowspan="2"> + <div></div> +</td> +<td> + <div></div> +</td> +</tr> +<tr> +<td> + <div></div> +</td> +</tr> +</tbody></table> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_rtl-direction-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_rtl-direction-ref.xht new file mode 100644 index 00000000000..c7975a95042 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_rtl-direction-ref.xht @@ -0,0 +1,40 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex-direction: column-reverse | rtl</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; +} +div::after { + content: ""; + clear: both; + display: block; +} +span { + text-align: right; + background: white; + margin: 1em 1em 0; + width: 8em; + float: right; + clear: both; +} +.test { + background: #ffcc00; +} +span~span { + margin: 2em 1em 0; +} +span:last-child { + margin-bottom: 1em; +} +</style> + +</head><body><div> + <span>damer</span> + <span>damer</span> + <span>damer</span> + <span class="test">damer</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_rtl-flow-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_rtl-flow-ref.xht new file mode 100644 index 00000000000..ff80a3e200b --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_rtl-flow-ref.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex-flow: column wrap | rtl</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + width: 20em; + height: 8em; +} +span { + text-align: right; + background: white; + margin: 1em; + width: 8em; + float: left; + display: block; +} +</style> + +</head><body><div> + <span>three</span> + <span>one</span> + <span>four</span> + <span>two</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_rtl-flow-reverse-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_rtl-flow-reverse-ref.xht new file mode 100644 index 00000000000..edbfa278e69 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_rtl-flow-reverse-ref.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex-flow: column wrap-reverse | rtl</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + width: 20em; + height: 8em; +} +span { + text-align: right; + background: white; + margin: 1em; + width: 8em; + display: block; + float: left; +} +</style> + +</head><body><div> + <span>one</span> + <span>three</span> + <span>two</span> + <span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_rtl-order-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_rtl-order-ref.xht new file mode 100644 index 00000000000..56bddd158dd --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_rtl-order-ref.xht @@ -0,0 +1,43 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex-flow: column-reverse wrap-reverse; order | rtl</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + padding: 1em 0 0; + margin: 1em 0; + border: 1px solid black; + width: 20em; + height: 7em; +} +span { + text-align: right; + background: white; + margin: 1em; + width: 8em; + height: 1.5em; + float: left; +} +.one { + background: pink; +} +.two { + background: yellow; +} +.three { + background: black; + color: white; +} +.four { + background: fuchsia; + color: white; +} +</style> + +</head><body><div> + <span class="three">three</span> + <span class="one">one</span> + <span class="four">four</span> + <span class="two">two</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_stf-table-singleline-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_stf-table-singleline-ref.xht new file mode 100644 index 00000000000..cf11071faf5 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_stf-table-singleline-ref.xht @@ -0,0 +1,16 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | singleline flexcontainer versus stf :: table</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div, p { + display: inline-block; +} +p { + margin: 1em 0; +} +</style> + +</head><body><div> + <p>damerdamerdamerdamerdamer</p> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_visibility-collapse-line-wrapping-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_visibility-collapse-line-wrapping-ref.xht new file mode 100644 index 00000000000..dc94572f703 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_visibility-collapse-line-wrapping-ref.xht @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | visibility: collapse and line wrapping</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +body { + margin: 0; + width: 602px; +} +div { + background: #3366cc; + border: 1px solid black; +} +div::after { + content: ""; + clear: both; + display: block; +} +p { + background: #ffcc00; + margin: 1em 0; + width: 300px; + float: left; +} +</style> + +</head><body><div> + <p>damer</p> + <p>damer</p> + <p>damer</p> + <p>damer</p> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_visibility-collapse-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_visibility-collapse-ref.xht new file mode 100644 index 00000000000..b84ce9f8a00 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_visibility-collapse-ref.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | visibility: collapse</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +body { + margin: 0; +} +div { + background: #3366cc; + border: 1px solid black; +} +div::after { + content: ""; + clear: both; + display: block; +} +p { + background: #ffcc00; + margin: 2em; + float: left; +} +</style> + +</head><body><div> + <p>damer</p> + <p>damer</p> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_wrap-long-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_wrap-long-ref.xht new file mode 100644 index 00000000000..aae46531bf3 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_wrap-long-ref.xht @@ -0,0 +1,34 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex-wrap: wrap</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + width: 20em; +} +span { + background: white; + margin: 1em; + width: 8em; + display: block; + float: left; +} +span:first-child { + width: 18em; +} +div::after { + content: ""; + clear: both; + display: block; +} +</style> + +</head><body><div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_wrap-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_wrap-ref.xht new file mode 100644 index 00000000000..234726a18d2 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_wrap-ref.xht @@ -0,0 +1,31 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex-wrap: wrap</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + width: 20em; +} +span { + background: white; + margin: 1em; + width: 8em; + display: block; + float: left; +} +div::after { + content: ""; + clear: both; + display: block; +} +</style> + +</head><body><div> + <span>one</span> + <span>two</span> + <span>three</span> + <span>four</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_wrap-reverse-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_wrap-reverse-ref.xht new file mode 100644 index 00000000000..1257ddb268e --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_wrap-reverse-ref.xht @@ -0,0 +1,31 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox | flex-wrap: wrap</title> +<link href="http://opera.com" rel="author" title="Opera Software" /> +<style> +div { + background: blue; + margin: 1em 0; + border: 1px solid black; + width: 20em; +} +span { + background: white; + margin: 1em; + width: 8em; + display: block; + float: left; +} +div::after { + content: ""; + clear: both; + display: block; +} +</style> + +</head><body><div> + <span>three</span> + <span>four</span> + <span>one</span> + <span>two</span> +</div> +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_writing_mode_vertical_lays_out_contents_from_top_to_bottom-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_writing_mode_vertical_lays_out_contents_from_top_to_bottom-ref.xht new file mode 100644 index 00000000000..bee4b80c406 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/flexbox_writing_mode_vertical_lays_out_contents_from_top_to_bottom-ref.xht @@ -0,0 +1,62 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:ryuichi1com@gmail.com" rel="author" title="Ryuichi Nonaka" /> + <style type="text/css"> + .container { + position: relative; + + width: 200px; + height: 200px; + } + + .item + { + position: absolute; + + width: 100px; + height:100px; + } + + .item.one + { + top: 0; + right: 0; + + background: red; + } + .item.two + { + top: 100px; + right: 0; + + background: yellow; + } + .item.three + { + top: 0; + right: 100px; + + background: green; + } + .item.four + { + top: 100px; + right: 100px; + + background: blue; + } + </style> +</head> +<body> + <p>The test passes if you see green and red top, blue and yellow bottom.</p> + <div id="test"> + <div class="container"> + <div class="item one"></div> + <div class="item two"></div> + <div class="item three"></div> + <div class="item four"></div> + </div> + </div> + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/justify-content-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/justify-content-001-ref.xht new file mode 100644 index 00000000000..43940ec2fa5 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/justify-content-001-ref.xht @@ -0,0 +1,25 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /> +<title>CSS Reference</title> +<link href="http://www.intel.com" rel="author" title="Intel" /> +<style> + #blue { + background: blue; + height: 100px; + width: 150px; + } + #orange { + background: orange; + height: 100px; + left: 150px; + position: relative; + top: -100px; + width: 150px; + } +</style> +</head><body> + <p>Test passes if there is a single blue rectangle on the left, a single orange rectangle directly to its right, and there is no red visible on the page.</p> + <div id="blue"></div> + <div id="orange"></div> + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/multi-line-wrap-reverse-column-reverse-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/multi-line-wrap-reverse-column-reverse-ref.xht new file mode 100644 index 00000000000..715b7714446 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/multi-line-wrap-reverse-column-reverse-ref.xht @@ -0,0 +1,67 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Test Reference: flex container multiline wrapping-reverse in column-reverse direction</title> + <link href="mailto:tmtysk@gmail.com" rel="author" title="tmtysk" /> + <link href="mailto:jackalmage@gmail.com" rel="reviewer" title="Tab Atkins" /> + <style> + * { margin:0; padding:0; font-size:100%; line-height:1; } + + .test { + width: 300px; + float: left; + width: 33.3%; + } + + p { + margin-top: 10px; + margin-right: 10px; + background: #ccc; + } + + #row1-col1 { + height: 90px; + } + + #row1-col2 { + height: 90px; + } + + #row1-col3 { + height: 90px; + } + + #row2-col1 { + height: 140px; + } + + #row2-col2 { + height: 140px; + } + + #row3-col1 { + height: 290px; + } + + .clear { + clear: both; + } + + </style> + </head> + <body> + <div class="test"> + <p id="row1-col1">1-1</p> + <p id="row1-col2">1-2</p> + <p id="row1-col3">1-3</p> + </div> + <div class="test"> + <p id="row2-col1">2-1</p> + <p id="row2-col2">2-2</p> + </div> + <div class="test"> + <p id="row3-col1">3-1</p> + </div> + <div class="clear"></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/multi-line-wrap-reverse-row-reverse-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/multi-line-wrap-reverse-row-reverse-ref.xht new file mode 100644 index 00000000000..d4e87009e5f --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/multi-line-wrap-reverse-row-reverse-ref.xht @@ -0,0 +1,73 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Test Reference: flex container multiline wrapping-reverse in row-reverse direction</title> + <link href="mailto:tmtysk@gmail.com" rel="author" title="tmtysk" /> + <link href="mailto:jackalmage@gmail.com" rel="reviewer" title="Tab Atkins" /> + <style> + * { margin:0; padding:0; font-size:100%; line-height:1; } + + .test { + width: 300px; + } + + p { + margin-top: 10px; + margin-right: 10px; + background: #ccc; + } + + #row1-col1 { + width: 90px; + float: left; + } + + #row1-col2 { + width: 90px; + float: left; + } + + #row1-col3 { + width: 90px; + float: left; + } + + #row2-col1 { + width: 140px; + float: left; + } + + #row2-col2 { + width: 140px; + float: left; + } + + #row3-col1 { + width: 290px; + float: left; + } + + .clear { + clear: both; + } + + </style> + </head> + <body> + <div class="test"> + <p id="row1-col1">1-1</p> + <p id="row1-col2">1-2</p> + <p id="row1-col3">1-3</p> + </div> + <div class="clear"></div> + <div class="test"> + <p id="row2-col1">2-1</p> + <p id="row2-col2">2-2</p> + </div> + <div class="clear"></div> + <div class="test"> + <p id="row3-col1">3-1</p> + </div> + <div class="clear"></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/multi-line-wrap-with-column-reverse-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/multi-line-wrap-with-column-reverse-ref.xht new file mode 100644 index 00000000000..e2d1c6d9d02 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/multi-line-wrap-with-column-reverse-ref.xht @@ -0,0 +1,67 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Test Reference: flex container multiline wrapping in column-reverse direction</title> + <link href="mailto:tmtysk@gmail.com" rel="author" title="tmtysk" /> + <link href="mailto:jackalmage@gmail.com" rel="reviewer" title="Tab Atkins" /> + <style> + * { margin:0; padding:0; font-size:100%; line-height:1; } + + .test { + width: 300px; + float: left; + width: 33.3%; + } + + p { + margin-top: 10px; + margin-right: 10px; + background: #ccc; + } + + #row1-col1 { + height: 90px; + } + + #row1-col2 { + height: 90px; + } + + #row1-col3 { + height: 90px; + } + + #row2-col1 { + height: 140px; + } + + #row2-col2 { + height: 140px; + } + + #row3-col1 { + height: 290px; + } + + .clear { + clear: both; + } + + </style> + </head> + <body> + <div class="test"> + <p id="row1-col1">1-1</p> + <p id="row1-col2">1-2</p> + <p id="row1-col3">1-3</p> + </div> + <div class="test"> + <p id="row2-col1">2-1</p> + <p id="row2-col2">2-2</p> + </div> + <div class="test"> + <p id="row3-col1">3-1</p> + </div> + <div class="clear"></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/multi-line-wrap-with-row-reverse-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/multi-line-wrap-with-row-reverse-ref.xht new file mode 100644 index 00000000000..350c024015b --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/multi-line-wrap-with-row-reverse-ref.xht @@ -0,0 +1,70 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Test Reference: flex container multiline wrapping in row-reverse direction</title> + <link href="mailto:tmtysk@gmail.com" rel="author" title="tmtysk" /> + <link href="mailto:jackalmage@gmail.com" rel="reviewer" title="Tab Atkins" /> + <style> + .test { + width: 300px; + } + + p { + margin-right: 10px; + background: #ccc; + } + + #row1-col1 { + width: 90px; + float: left; + } + + #row1-col2 { + width: 90px; + float: left; + } + + #row1-col3 { + width: 90px; + float: left; + } + + #row2-col1 { + width: 140px; + float: left; + } + + #row2-col2 { + width: 140px; + float: left; + } + + #row3-col1 { + width: 290px; + float: left; + } + + .clear { + clear: both; + } + + </style> + </head> + <body> + <div class="test"> + <p id="row1-col1">1-1</p> + <p id="row1-col2">1-2</p> + <p id="row1-col3">1-3</p> + </div> + <div class="clear"></div> + <div class="test"> + <p id="row2-col1">2-1</p> + <p id="row2-col2">2-2</p> + </div> + <div class="clear"></div> + <div class="test"> + <p id="row3-col1">3-1</p> + </div> + <div class="clear"></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/order-with-column-reverse-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/order-with-column-reverse-ref.xht new file mode 100644 index 00000000000..91793cbe24b --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/order-with-column-reverse-ref.xht @@ -0,0 +1,18 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Test Reference: flex container layout lowest order with column-reverse direction</title> + <link href="mailto:tmtysk@gmail.com" rel="author" title="tmtysk" /> + <link href="mailto:jackalmage@gmail.com" rel="reviewer" title="Tab Atkins" /> + <style> + </style> + </head> + <body> + <p>Test passes if the paragraph below reads 'First,Second,Third' from top.</p> + <div id="test"> + <p id="first">First,</p> + <p id="second">Second,</p> + <p id="third">Third</p> + </div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/order-with-row-reverse-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/order-with-row-reverse-ref.xht new file mode 100644 index 00000000000..8f7495ece4a --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/order-with-row-reverse-ref.xht @@ -0,0 +1,29 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Test Reference: flex container layout lowest order with row-reverse direction</title> + <link href="tmtysk@gmail.com" rel="author" title="tmtysk" /> + <link href="jackalmage@gmail.com" rel="reviewer" title="Tab Atkins, Jr." /> + <style> + #leftmost { + float: right; + } + + #middle { + float: right; + } + + #rightmost { + float: right; + } + </style> + </head> + <body> + <p>Test passes if the paragraph below reads 'First,Second,Third' from leftmost.</p> + <div id="test"> + <p id="rightmost">Third</p> + <p id="middle">Second,</p> + <p id="leftmost">First,</p> + </div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/ref-filled-green-100px-square.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/ref-filled-green-100px-square.xht new file mode 100644 index 00000000000..5dd09ba5d97 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/ref-filled-green-100px-square.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <title>CSS Reftest Reference</title> + <style type="text/css"> + @page { font: italic 8pt sans-serif; color: gray; + margin: 7%; + counter-increment: page; + @top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; } + @top-right { content: "Test ref-filled-green-100px-square"; } + @bottom-right { content: counter(page); } + } +</style> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <style type="text/css"><![CDATA[ + div + { + background-color: green; + height: 100px; + width: 100px; + } + ]]></style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div></div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/regions-flexbox-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/regions-flexbox-001-ref.xht new file mode 100644 index 00000000000..876e4b159cf --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/regions-flexbox-001-ref.xht @@ -0,0 +1,30 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea" /> + <style> + .flex { + height: 100px; + width: 100px; + background-color: green; + } + + .region { + height: 150px; + width: 200px; + background-color: gray; + } + </style> + </head> + <body> + <ul> + <li>Test passes if you see a green square inside a gray rectangle.</li> + <li>You shouldn't see any red.</li> + </ul> + <div class="region"> + <div class="flex"> + </div> + </div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/regions-flexbox-002-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/regions-flexbox-002-ref.xht new file mode 100644 index 00000000000..6a85f657b2b --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/regions-flexbox-002-ref.xht @@ -0,0 +1,42 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Regions: fixed sized region inside an auto height flexbox</title> + <link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea" /> + <style> + .content { + font-family: Ahem; + font-size: 20px; + line-height: 1em; + color: green; + } + .region { + width: 100px; + height: 100px; + background-color: red; + } + .flex { + display: flex; + width: 150px; + background-color: gray; + } + </style> + </head> + <body> + <ul> + <li>Test passes if you see a green square inside a gray rectangle.</li> + <li>You shouldn't see any red.</li> + </ul> + <div class="flex"> + <div class="region"> + <div class="content"> + XXXXX<br /> + XXXXX<br /> + XXXXX<br /> + XXXXX<br /> + XXXXX + </div> + </div> + </div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/row-flexbox-break-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/row-flexbox-break-ref.xht new file mode 100644 index 00000000000..b8c6008ae51 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/row-flexbox-break-ref.xht @@ -0,0 +1,23 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea" /> + <style> + .stripe { + height: 40px; + width: 80px; + margin-bottom: 20px; + background-color: green; + } + </style> + </head> + <body> + <ul> + <li>Test passes if you see two horizontal green stripes on the same horizontal line.</li> + <li>You shouldn't see any red.</li> + </ul> + <div class="stripe"></div> + <div class="stripe"></div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/1x1-green.png b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/1x1-green.png Binary files differnew file mode 100644 index 00000000000..b98ca0ba0a0 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/1x1-green.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/1x1-lime.png b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/1x1-lime.png Binary files differnew file mode 100644 index 00000000000..cb397fb090e --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/1x1-lime.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/1x1-maroon.png b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/1x1-maroon.png Binary files differnew file mode 100644 index 00000000000..3f86b072195 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/1x1-maroon.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/1x1-navy.png b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/1x1-navy.png Binary files differnew file mode 100644 index 00000000000..9b9a03955ba --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/1x1-navy.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/1x1-red.png b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/1x1-red.png Binary files differnew file mode 100644 index 00000000000..6bd73ac1018 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/1x1-red.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/1x1-white.png b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/1x1-white.png Binary files differnew file mode 100644 index 00000000000..dd43faec54a --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/1x1-white.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/60x60-gg-rr.png b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/60x60-gg-rr.png Binary files differnew file mode 100644 index 00000000000..84f5b2a4f1d --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/60x60-gg-rr.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/60x60-green.png b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/60x60-green.png Binary files differnew file mode 100644 index 00000000000..b3c8cf3eb4c --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/60x60-green.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/60x60-red.png b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/60x60-red.png Binary files differnew file mode 100644 index 00000000000..823f125b8e4 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/60x60-red.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/README b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/README new file mode 100644 index 00000000000..69d1737bead --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/README @@ -0,0 +1,29 @@ +CSS Global Support Directory +============================ + +This directory contains common support files (such as images and external +style sheets). These are sync'ed into the support directories of all our +test suites. If you have test-suite-specific support files, please add +them to the appropriate test-suite-specific support/ directory. + +If you add to a support/ directory, please run the tools/supportprop.py +script from the top of the repository to cascade support files into the +lower-level support directories. + +Description of the Common Support File Collection +------------------------------------------------- + +The 1x1-* images are all exactly one pixel. + +The swatch-* images all use 15x15 cells. + +The square-* images all use 15x15 cells with one pixel borders. + +The pattern-* images use cells of various sizes: + + pattern-gg-gr.png 20x20 + pattern-grg-rgr-grg.png 20x20 + pattern-rgr-grg-rgr.png 20x20 + pattern-tr.png 15x15 + pattern-grg-rrg-rgg.png 15x15 + diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/a-green.css b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/a-green.css new file mode 100644 index 00000000000..b0dbb071d5b --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/a-green.css @@ -0,0 +1 @@ +.a { color: green; } diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/ahem.css b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/ahem.css new file mode 100644 index 00000000000..0d4bcedc21b --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/ahem.css @@ -0,0 +1,4 @@ +@font-face { + font-family: "Ahem"; + src: url(../../../../fonts/Ahem.ttf); +} diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/b-green.css b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/b-green.css new file mode 100644 index 00000000000..a0473f5ca26 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/b-green.css @@ -0,0 +1 @@ +.b { color: green; }
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/c-red.css b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/c-red.css new file mode 100644 index 00000000000..d4ba5c64e95 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/c-red.css @@ -0,0 +1 @@ +.c { color: red; }
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/cat.png b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/cat.png Binary files differnew file mode 100644 index 00000000000..85dd7324815 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/cat.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/import-green.css b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/import-green.css new file mode 100644 index 00000000000..537104e6633 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/import-green.css @@ -0,0 +1 @@ +.import { color: green; } diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/import-red.css b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/import-red.css new file mode 100644 index 00000000000..9945ef47114 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/import-red.css @@ -0,0 +1 @@ +.import { color: red; } diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/pattern-gg-gr.png b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/pattern-gg-gr.png Binary files differnew file mode 100644 index 00000000000..091de70bb72 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/pattern-gg-gr.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/pattern-grg-rgr-grg.png b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/pattern-grg-rgr-grg.png Binary files differnew file mode 100644 index 00000000000..9b88fbd8114 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/pattern-grg-rgr-grg.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/pattern-grg-rrg-rgg.png b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/pattern-grg-rrg-rgg.png Binary files differnew file mode 100644 index 00000000000..fcf4f3fd7d9 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/pattern-grg-rrg-rgg.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/pattern-rgr-grg-rgr.png b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/pattern-rgr-grg-rgr.png Binary files differnew file mode 100644 index 00000000000..d454e3a630c --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/pattern-rgr-grg-rgr.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/pattern-tr.png b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/pattern-tr.png Binary files differnew file mode 100644 index 00000000000..8b4b25364e0 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/pattern-tr.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/ruler-h-50%.png b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/ruler-h-50%.png Binary files differnew file mode 100644 index 00000000000..cf2eea6b438 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/ruler-h-50%.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/ruler-h-50px.png b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/ruler-h-50px.png Binary files differnew file mode 100644 index 00000000000..9f46583665c --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/ruler-h-50px.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/ruler-v-100px.png b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/ruler-v-100px.png Binary files differnew file mode 100644 index 00000000000..a837eca2225 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/ruler-v-100px.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/ruler-v-50px.png b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/ruler-v-50px.png Binary files differnew file mode 100644 index 00000000000..84141028020 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/ruler-v-50px.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/solidblue.png b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/solidblue.png Binary files differnew file mode 100644 index 00000000000..8584a701a80 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/solidblue.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/square-purple.png b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/square-purple.png Binary files differnew file mode 100644 index 00000000000..0f522d78728 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/square-purple.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/square-teal.png b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/square-teal.png Binary files differnew file mode 100644 index 00000000000..e567f51b91b --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/square-teal.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/square-white.png b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/square-white.png Binary files differnew file mode 100644 index 00000000000..5853cbb238c --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/square-white.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/swatch-blue.png b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/swatch-blue.png Binary files differnew file mode 100644 index 00000000000..bf2759634d4 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/swatch-blue.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/swatch-green.png b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/swatch-green.png Binary files differnew file mode 100644 index 00000000000..0aa79b0c86b --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/swatch-green.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/swatch-lime.png b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/swatch-lime.png Binary files differnew file mode 100644 index 00000000000..55fd7fdaedf --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/swatch-lime.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/swatch-orange.png b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/swatch-orange.png Binary files differnew file mode 100644 index 00000000000..d3cd498b52b --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/swatch-orange.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/swatch-red.png b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/swatch-red.png Binary files differnew file mode 100644 index 00000000000..1caf25c992a --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/swatch-red.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/swatch-teal.png b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/swatch-teal.png Binary files differnew file mode 100644 index 00000000000..0293ce89dea --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/swatch-teal.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/swatch-white.png b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/swatch-white.png Binary files differnew file mode 100644 index 00000000000..1a7d4323d77 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/swatch-white.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/swatch-yellow.png b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/swatch-yellow.png Binary files differnew file mode 100644 index 00000000000..1591aa0e2e2 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/swatch-yellow.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/test-bl.png b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/test-bl.png Binary files differnew file mode 100644 index 00000000000..904e24e996a --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/test-bl.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/test-br.png b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/test-br.png Binary files differnew file mode 100644 index 00000000000..f413ff5c1a0 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/test-br.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/test-inner-half-size.png b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/test-inner-half-size.png Binary files differnew file mode 100644 index 00000000000..e473bf80efc --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/test-inner-half-size.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/test-outer.png b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/test-outer.png Binary files differnew file mode 100644 index 00000000000..82eeace7fc0 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/test-outer.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/test-style.css b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/test-style.css new file mode 100644 index 00000000000..f2ffea039b1 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/test-style.css @@ -0,0 +1,18 @@ + #test01, #test02, #test03{ + width: 50px; + height: 50px; + text-align:center; + font-size: 20px; + } + #test{ + background: #ff0000; + } + #test01{ + background: #7FFF00; + } + #test02{ + background: #00FFFF; + } + #test03{ + background: #4169E1; + } diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/test-tl.png b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/test-tl.png Binary files differnew file mode 100644 index 00000000000..f6ac0ef7e8f --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/test-tl.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/test-tr.png b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/test-tr.png Binary files differnew file mode 100644 index 00000000000..59843ae54b6 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/support/test-tr.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/ttwf-reftest-flex-align-content-center-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/ttwf-reftest-flex-align-content-center-ref.xht new file mode 100644 index 00000000000..2006d61565f --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/ttwf-reftest-flex-align-content-center-ref.xht @@ -0,0 +1,38 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Flexible Box Test: align-content proprety - center</title> + <link href="mailto:haosdent@gmail.com" rel="author" title="haosdent" /> + <style type="text/css"> + .container { + position: relative; + height: 6em; + width: 20em; + background: red; + margin: 1em; + border: 1px solid black; + } + span:nth-child(3), span:nth-child(4) { + margin: 2em 1em; + } + span { + height: 2em; + display: inline-block; + background: green; + color: white; + margin: 0 1em; + width: 8em; + float: left; + } + </style> +</head> +<body> + <p>The test passed if you see a 2*2 table.</p> + <div class="container"> + <span>first</span> + <span>second</span> + <span>third</span> + <span>forth</span> + </div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/ttwf-reftest-flex-align-content-end-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/ttwf-reftest-flex-align-content-end-ref.xht new file mode 100644 index 00000000000..317a6b35f01 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/ttwf-reftest-flex-align-content-end-ref.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Flexible Box Test: align-content proprety - flex-end</title> + <link href="mailto:haosdent@gmail.com" rel="author" title="haosdent" /> + <style type="text/css"> + .container { + position: relative; + height: 8em; + width: 20em; + background: red; + margin: 1em; + padding-top: 6em; + border: 1px solid black; + } + span { + height: 2em; + display: inline-block; + background: green; + color: white; + margin: 1em; + width: 8em; + float: left; + } + </style> +</head> +<body> + <p>The test passed if you see a 2*2 table and all the cells are at the bottom of container.</p> + <div class="container"> + <span>first</span> + <span>second</span> + <span>third</span> + <span>forth</span> + </div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/ttwf-reftest-flex-base-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/ttwf-reftest-flex-base-ref.xht new file mode 100644 index 00000000000..3f09b20d3b0 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/ttwf-reftest-flex-base-ref.xht @@ -0,0 +1,29 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Flexible Box Test: display proprety - flex</title> + <link href="mailto:haosdent@gmail.com" rel="author" title="haosdent" /> + <style type="text/css"> + .container { + position: relative; + height: 6em; + width: 3em; + background: red; + margin: 1em; + border: 1px solid black; + } + .success { + background: green; + width: 100%; + height: 100%; + display: block; + } + </style> +</head> +<body> + <p>The test passed if you can't find red color.</p> + <div class="container"> + <span class="success">Hello</span> + </div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/ttwf-reftest-flex-direction-column-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/ttwf-reftest-flex-direction-column-ref.xht new file mode 100644 index 00000000000..5179a2d6e5b --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/ttwf-reftest-flex-direction-column-ref.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Flexible Box Test: flex-direction proprety - column</title> + <link href="mailto:haosdent@gmail.com" rel="author" title="haosdent" /> + <style type="text/css"> + /* Positioned container allows for the self-describing statement to still + be visible in the case of failure */ + .container { + position: relative; + background: red; + margin: 1em 0; + border: 1px solid black; + } + span ~ span { + margin: 2em 1em 1em; + } + span { + display: block; + background: green; + color: white; + margin: 1em; + width: 8em; + } + </style> +</head> +<body> + <p>The test passed if you see all the cells are arraged vertically.</p> + <div class="container"> + <span>first</span> + <span>second</span> + <span>third</span> + <span>forth</span> + </div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/ttwf-reftest-flex-direction-row-reverse-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/ttwf-reftest-flex-direction-row-reverse-ref.xht new file mode 100644 index 00000000000..7817c57e510 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/ttwf-reftest-flex-direction-row-reverse-ref.xht @@ -0,0 +1,33 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Flexible Box Test: flex-direction proprety - row-reverse</title> + <link href="mailto:haosdent@gmail.com" rel="author" title="haosdent" /> + <style type="text/css"> + .container { + position: relative; + display: flex; + flex-direction: row-reverse; + background: red; + margin: 1em 0; + border: 1px solid black; + } + span { + display: inline-block; + background: green; + color: white; + margin: 1em; + width: 8em; + } + </style> +</head> +<body> + <p>The test passed if you see all the cells are arraged horizontally and the order of cells are reversed.</p> + <div class="container"> + <span>forth</span> + <span>third</span> + <span>second</span> + <span>first</span> + </div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/ttwf-reftest-flex-inline-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/ttwf-reftest-flex-inline-ref.xht new file mode 100644 index 00000000000..d55e5c26256 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/ttwf-reftest-flex-inline-ref.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Flexible Box Test: display proprety - inline-flex</title> + <link href="mailto:haosdent@gmail.com" rel="author" title="haosdent" /> + <style type="text/css"> + /* Positioned container allows for the self-describing statement to still + be visible in the case of failure */ + .container { + position: relative; + } + .greenSquare { + display: inline-block; + margin-top: -200px; + background: green; + } + </style> +</head> +<body> + <p>The test passed if you see a green block which its text is 'Success! +'.</p> + <div class="container"> + <!-- This is the square that should not be visible if the test passes --> + <div class="greenSquare">Success!</div> + </div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/ttwf-reftest-flex-order-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/ttwf-reftest-flex-order-ref.xht new file mode 100644 index 00000000000..59ac9bb732f --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/ttwf-reftest-flex-order-ref.xht @@ -0,0 +1,33 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Flexible Box Test: order proprety - value</title> + <link href="mailto:haosdent@gmail.com" rel="author" title="haosdent" /> + <style type="text/css"> + .container { + position: relative; + height: 6em; + background: red; + margin: 1em; + border: 1px solid black; + } + span { + height: 2em; + display: inline-block; + background: green; + color: white; + margin: 1em; + width: 8em; + } + </style> +</head> +<body> + <p>The test passed if all the cells are reversed.</p> + <div class="container"> + <span class="first">forth</span> + <span class="second">third</span> + <span class="third">second</span> + <span class="forth">first</span> + </div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/ttwf-reftest-flex-wrap-reverse-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/ttwf-reftest-flex-wrap-reverse-ref.xht new file mode 100644 index 00000000000..86973267af2 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/ttwf-reftest-flex-wrap-reverse-ref.xht @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Flexible Box Test: flex-wrap proprety - wrap-reverse</title> + <link href="mailto:haosdent@gmail.com" rel="author" title="haosdent" /> + <style type="text/css"> + /* Positioned container allows for the self-describing statement to still + be visible in the case of failure */ + .container { + position: relative; + background: red; + margin: 1em 0; + border: 1px solid black; + width: 20em; + height: 6.5em; + } + span { + display: inline-block; + background: green; + color: white; + margin: 1em; + width: 8em; + float: left; + } + </style> +</head> +<body> + <p>The test passed if you see a 2 * 2 table on the page and the order of them are reversed.</p> + <div class="container"> + <span>third</span> + <span>forth</span> + <span>first</span> + <span>second</span> + </div> + + +</body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/visibility-regions-in-flexbox-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/visibility-regions-in-flexbox-ref.xht new file mode 100644 index 00000000000..d1f1d45eb87 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1print/reference/visibility-regions-in-flexbox-ref.xht @@ -0,0 +1,24 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"><head> + <title>CSS Reftest Reference</title> + <link href="mailto:badea@adobe.com" rel="author" title="Catalin Badea" /> + <style> + .content { + font-family: Ahem; + font-size: 20px; + line-height: 1em; + color: green; + } + </style> + </head> + <body> + <ul> + <li>Test passes if you see a single green stripe.</li> + <li>You shouldn't see any red.</li> + </ul> + <div class="content"> + XXXXXXXXXX + </div> + + +</body></html>
\ No newline at end of file |
