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/html/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/html/reference')
384 files changed, 15131 insertions, 0 deletions
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/Flexible-order-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/Flexible-order-ref.htm new file mode 100644 index 00000000000..82922ae069d --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/Flexible-order-ref.htm @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<html><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/html/reference/align-content-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/align-content-001-ref.htm new file mode 100644 index 00000000000..86c034c9527 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/align-content-001-ref.htm @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html><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/html/reference/autoheight-flexbox-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/autoheight-flexbox-001-ref.htm new file mode 100644 index 00000000000..a357c9e945e --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/autoheight-flexbox-001-ref.htm @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html><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/html/reference/autoheight-flexbox-003-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/autoheight-flexbox-003-ref.htm new file mode 100644 index 00000000000..1884fc16821 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/autoheight-flexbox-003-ref.htm @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html><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/html/reference/autoheight-regions-in-autoheight-flexbox-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/autoheight-regions-in-autoheight-flexbox-001-ref.htm new file mode 100644 index 00000000000..4e612207a37 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/autoheight-regions-in-autoheight-flexbox-001-ref.htm @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html><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/html/reference/autoheight-regions-in-autoheight-flexbox-002-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/autoheight-regions-in-autoheight-flexbox-002-ref.htm new file mode 100644 index 00000000000..7e2d8d62d10 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/autoheight-regions-in-autoheight-flexbox-002-ref.htm @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html><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/html/reference/autoheight-regions-in-autoheight-flexbox-003-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/autoheight-regions-in-autoheight-flexbox-003-ref.htm new file mode 100644 index 00000000000..6e6059059ca --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/autoheight-regions-in-autoheight-flexbox-003-ref.htm @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html><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/html/reference/autoheight-regions-in-autoheight-flexbox-004-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/autoheight-regions-in-autoheight-flexbox-004-ref.htm new file mode 100644 index 00000000000..405c7f81c99 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/autoheight-regions-in-autoheight-flexbox-004-ref.htm @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html><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/html/reference/autoheight-regions-in-fixed-sized-flexbox-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/autoheight-regions-in-fixed-sized-flexbox-001-ref.htm new file mode 100644 index 00000000000..22a34bc4b41 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/autoheight-regions-in-fixed-sized-flexbox-001-ref.htm @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html><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/html/reference/autoheight-regions-in-fixed-sized-flexbox-002-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/autoheight-regions-in-fixed-sized-flexbox-002-ref.htm new file mode 100644 index 00000000000..534d36e0afe --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/autoheight-regions-in-fixed-sized-flexbox-002-ref.htm @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html><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/html/reference/autoheight-regions-in-fixed-sized-flexbox-003-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/autoheight-regions-in-fixed-sized-flexbox-003-ref.htm new file mode 100644 index 00000000000..473a295bc61 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/autoheight-regions-in-fixed-sized-flexbox-003-ref.htm @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html><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/html/reference/autoheight-regions-in-fixed-sized-flexbox-004-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/autoheight-regions-in-fixed-sized-flexbox-004-ref.htm new file mode 100644 index 00000000000..978e53ca73f --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/autoheight-regions-in-fixed-sized-flexbox-004-ref.htm @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html><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/html/reference/autoheight-regions-in-fixed-sized-flexbox-005-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/autoheight-regions-in-fixed-sized-flexbox-005-ref.htm new file mode 100644 index 00000000000..2fcf50c8d20 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/autoheight-regions-in-fixed-sized-flexbox-005-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/autoheight-regions-in-fixed-sized-flexbox-006-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/autoheight-regions-in-fixed-sized-flexbox-006-ref.htm new file mode 100644 index 00000000000..4c80805f5d4 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/autoheight-regions-in-fixed-sized-flexbox-006-ref.htm @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html><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/html/reference/autoheight-regions-in-fixed-sized-flexbox-007-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/autoheight-regions-in-fixed-sized-flexbox-007-ref.htm new file mode 100644 index 00000000000..d052293bc88 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/autoheight-regions-in-fixed-sized-flexbox-007-ref.htm @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html><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/html/reference/autoheight-regions-in-fixed-sized-flexbox-008-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/autoheight-regions-in-fixed-sized-flexbox-008-ref.htm new file mode 100644 index 00000000000..0eab0e6ccf9 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/autoheight-regions-in-fixed-sized-flexbox-008-ref.htm @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html><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/html/reference/column-flexbox-break-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/column-flexbox-break-ref.htm new file mode 100644 index 00000000000..af2879d0d32 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/column-flexbox-break-ref.htm @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html><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/html/reference/css-box-justify-content-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/css-box-justify-content-ref.htm new file mode 100644 index 00000000000..9cd6b4fae02 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/css-box-justify-content-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/css-flexbox-column-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/css-flexbox-column-ref.htm new file mode 100644 index 00000000000..a08cbe06cea --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/css-flexbox-column-ref.htm @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html><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/html/reference/css-flexbox-height-animation-stretch-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/css-flexbox-height-animation-stretch-ref.htm new file mode 100644 index 00000000000..d093deb39a4 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/css-flexbox-height-animation-stretch-ref.htm @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html><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/html/reference/css-flexbox-img-expand-evenly-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/css-flexbox-img-expand-evenly-ref.htm new file mode 100644 index 00000000000..e92180f468a --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/css-flexbox-img-expand-evenly-ref.htm @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html><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/html/reference/css-flexbox-row-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/css-flexbox-row-ref.htm new file mode 100644 index 00000000000..db86d12b4eb --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/css-flexbox-row-ref.htm @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html><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/html/reference/css-flexbox-test1-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/css-flexbox-test1-ref.htm new file mode 100644 index 00000000000..9a9d98f295f --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/css-flexbox-test1-ref.htm @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html><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/html/reference/flex-align-items-center-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flex-align-items-center-ref.htm new file mode 100644 index 00000000000..b0d876a703b --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flex-align-items-center-ref.htm @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<html><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/html/reference/flex-box-float-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flex-box-float-ref.htm new file mode 100644 index 00000000000..52a8feb1be6 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flex-box-float-ref.htm @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html><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/html/reference/flex-box-wrap-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flex-box-wrap-ref.htm new file mode 100644 index 00000000000..e31fd9e67f6 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flex-box-wrap-ref.htm @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html><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/html/reference/flex-container-margin-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flex-container-margin-ref.htm new file mode 100644 index 00000000000..56a313ef692 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flex-container-margin-ref.htm @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html><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/html/reference/flex-direction-modify.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flex-direction-modify.htm new file mode 100644 index 00000000000..efb7f0d6062 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flex-direction-modify.htm @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html><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/html/reference/flex-direction-with-element-insert.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flex-direction-with-element-insert.htm new file mode 100644 index 00000000000..6b961efaf0a --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flex-direction-with-element-insert.htm @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<html><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/html/reference/flex-direction.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flex-direction.htm new file mode 100644 index 00000000000..893cbe407c3 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flex-direction.htm @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<html><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/html/reference/flex-flexitem-childmargin-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flex-flexitem-childmargin-ref.htm new file mode 100644 index 00000000000..fd874de6afe --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flex-flexitem-childmargin-ref.htm @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html><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/html/reference/flex-flexitem-percentage-prescation-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flex-flexitem-percentage-prescation-ref.htm new file mode 100644 index 00000000000..f3d1b8b75d9 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flex-flexitem-percentage-prescation-ref.htm @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html><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/html/reference/flex-flow-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flex-flow-001-ref.htm new file mode 100644 index 00000000000..63dee212776 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flex-flow-001-ref.htm @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html><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/html/reference/flex-flow-002-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flex-flow-002-ref.htm new file mode 100644 index 00000000000..32e452d569c --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flex-flow-002-ref.htm @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html><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/html/reference/flex-flow-007-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flex-flow-007-ref.htm new file mode 100644 index 00000000000..9610286004f --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flex-flow-007-ref.htm @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html><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/html/reference/flex-grow-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flex-grow-001-ref.htm new file mode 100644 index 00000000000..40fe0e7ad7c --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flex-grow-001-ref.htm @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Hanrui Gao" href="mailto:hanrui.gao@gmail.com"> + <style type="text/css"> + #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/html/reference/flex-items-flexibility.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flex-items-flexibility.htm new file mode 100644 index 00000000000..0b0aa74c1ac --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flex-items-flexibility.htm @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html><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/html/reference/flex-margin-no-collapse-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flex-margin-no-collapse-ref.htm new file mode 100644 index 00000000000..1dee1a19d0d --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flex-margin-no-collapse-ref.htm @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html><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/html/reference/flex-order-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flex-order-ref.htm new file mode 100644 index 00000000000..d053097f30d --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flex-order-ref.htm @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html><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/html/reference/flex-vertical-align-effect.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flex-vertical-align-effect.htm new file mode 100644 index 00000000000..459f77162b4 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flex-vertical-align-effect.htm @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox-abspos-child-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-abspos-child-001-ref.htm new file mode 100644 index 00000000000..fbbe318d360 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-abspos-child-001-ref.htm @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html><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/html/reference/flexbox-align-content-horiz-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-align-content-horiz-001-ref.htm new file mode 100644 index 00000000000..f4273d4fdbb --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-align-content-horiz-001-ref.htm @@ -0,0 +1,128 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html> + <head> + <title>CSS Reftest Reference</title> + <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> + <div class="flexbox"> + <div class="a"></div> + <div class="b" style="margin-top:80px; height:110px"><div class="fixedSizeChild"></div></div> + </div> + <div class="flexbox"> + <div class="a"></div> + <div class="b" style="margin-top:40px; height: 70px"><div class="fixedSizeChild"></div></div> + <div class="c"></div> + </div> + + <!-- flex-start --> + <div class="flexbox"> + <div class="a"></div> + </div> + <div class="flexbox"> + <div class="a"></div> + <div class="b"><div class="fixedSizeChild"></div></div> + </div> + <div class="flexbox"> + <div class="a"></div> + <div class="b"><div class="fixedSizeChild"></div></div> + <div class="c"></div> + </div> + + <!-- flex-end --> + <div class="flexbox"> + <div class="a"></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 160px"></div> + <div class="b"><div class="fixedSizeChild"></div></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 120px"></div> + <div class="b"><div class="fixedSizeChild"></div></div> + <div class="c"></div> + </div> + + <!-- center --> + <div class="flexbox"> + <div class="a"></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 80px"></div> + <div class="b"><div class="fixedSizeChild"></div></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 60px"></div> + <div class="b"><div class="fixedSizeChild"></div></div> + <div class="c"></div> + </div> + + <!-- space-between --> + <div class="flexbox"> + <div class="a"></div> + </div> + <div class="flexbox"> + <div class="a"></div> + <div class="b" style="margin-top: 160px"><div class="fixedSizeChild"></div></div> + </div> + <div class="flexbox"> + <div class="a"></div> + <div class="b" style="margin-top: 60px"><div class="fixedSizeChild"></div></div> + <div class="c" style="margin-top: 60px"></div> + </div> + + <!-- space-around --> + <div class="flexbox"> + <div class="a"></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 40px"></div> + <div class="b" style="margin-top: 80px"><div class="fixedSizeChild"></div></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 20px"></div> + <div class="b" style="margin-top: 40px"><div class="fixedSizeChild"></div></div> + <div class="c" style="margin-top: 40px"></div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-align-content-vert-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-align-content-vert-001-ref.htm new file mode 100644 index 00000000000..48c14850dfa --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-align-content-vert-001-ref.htm @@ -0,0 +1,131 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html> + <head> + <title>CSS Reftest Reference</title> + <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> + <div class="flexbox"> + <div class="a"></div> + <div class="b" style="margin-left:80px; width:110px"><div class="fixedSizeChild"></div></div> + </div> + <div class="flexbox"> + <div class="a"></div> + <div class="b" style="margin-left: 40px; width: 70px"><div class="fixedSizeChild"></div></div> + <div class="c"></div> + </div> + + <!-- flex-start --> + <div class="flexbox"> + <div class="a"></div> + </div> + <div class="flexbox"> + <div class="a"></div> + <div class="b"><div class="fixedSizeChild"></div></div> + </div> + <div class="flexbox"> + <div class="a"></div> + <div class="b"><div class="fixedSizeChild"></div></div> + <div class="c"></div> + </div> + + <!-- flex-end --> + <div class="flexbox"> + <div class="a"></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 160px"></div> + <div class="b"><div class="fixedSizeChild"></div></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 120px"></div> + <div class="b"><div class="fixedSizeChild"></div></div> + <div class="c"></div> + </div> + + <!-- center --> + <div class="flexbox"> + <div class="a"></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 80px"></div> + <div class="b"><div class="fixedSizeChild"></div></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 60px"></div> + <div class="b"><div class="fixedSizeChild"></div></div> + <div class="c"></div> + </div> + + <!-- space-between --> + <div class="flexbox"> + <div class="a"></div> + </div> + <div class="flexbox"> + <div class="a"></div> + <div class="b" style="margin-left: 160px"><div class="fixedSizeChild"></div></div> + </div> + <div class="flexbox"> + <div class="a"></div> + <div class="b" style="margin-left: 60px"><div class="fixedSizeChild"></div></div> + <div class="c" style="margin-left: 60px"></div> + </div> + + <!-- space-around --> + <div class="flexbox"> + <div class="a"></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 40px"></div> + <div class="b" style="margin-left: 80px"><div class="fixedSizeChild"></div></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 20px"></div> + <div class="b" style="margin-left: 40px"><div class="fixedSizeChild"></div></div> + <div class="c" style="margin-left: 40px"></div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-align-self-baseline-horiz-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-align-self-baseline-horiz-001-ref.htm new file mode 100644 index 00000000000..e016c47922f --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-align-self-baseline-horiz-001-ref.htm @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<!-- + 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> + <head> + <title>CSS Reftest Reference</title> + <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/html/reference/flexbox-align-self-baseline-horiz-002-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-align-self-baseline-horiz-002-ref.htm new file mode 100644 index 00000000000..d9ff484d9ba --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-align-self-baseline-horiz-002-ref.htm @@ -0,0 +1,81 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html> + <head> + <title>CSS Reftest Reference</title> + <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/html/reference/flexbox-align-self-baseline-horiz-003-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-align-self-baseline-horiz-003-ref.htm new file mode 100644 index 00000000000..58016d1ca17 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-align-self-baseline-horiz-003-ref.htm @@ -0,0 +1,81 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html> + <head> + <title>CSS Reftest Reference</title> + <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/html/reference/flexbox-align-self-baseline-horiz-004-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-align-self-baseline-horiz-004-ref.htm new file mode 100644 index 00000000000..d5bdf7383ad --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-align-self-baseline-horiz-004-ref.htm @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- + 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> + <head> + <title>CSS Reftest Reference</title> + <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/html/reference/flexbox-align-self-baseline-horiz-005-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-align-self-baseline-horiz-005-ref.htm new file mode 100644 index 00000000000..9dc4fbedf46 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-align-self-baseline-horiz-005-ref.htm @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<!-- + 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> + <head> + <title>CSS Reftest Reference</title> + <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/html/reference/flexbox-align-self-horiz-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-align-self-horiz-001-ref.htm new file mode 100644 index 00000000000..8c216dce434 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-align-self-horiz-001-ref.htm @@ -0,0 +1,86 @@ +<!DOCTYPE html> +<!-- + 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> + <head> + <title>CSS Reftest Reference</title> + <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/html/reference/flexbox-align-self-horiz-002-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-align-self-horiz-002-ref.htm new file mode 100644 index 00000000000..ec92ddd421a --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-align-self-horiz-002-ref.htm @@ -0,0 +1,80 @@ +<!DOCTYPE html> +<!-- + 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> + <head> + <title>CSS Reftest Reference</title> + <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/html/reference/flexbox-align-self-horiz-003-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-align-self-horiz-003-ref.htm new file mode 100644 index 00000000000..33572b3282f --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-align-self-horiz-003-ref.htm @@ -0,0 +1,88 @@ +<!DOCTYPE html> +<!-- + 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> + <head> + <title>CSS Reftest Reference</title> + <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/html/reference/flexbox-align-self-horiz-004-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-align-self-horiz-004-ref.htm new file mode 100644 index 00000000000..cb6e131e16c --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-align-self-horiz-004-ref.htm @@ -0,0 +1,84 @@ +<!DOCTYPE html> +<!-- + 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> + <head> + <title>CSS Reftest Reference</title> + <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/html/reference/flexbox-align-self-horiz-005-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-align-self-horiz-005-ref.htm new file mode 100644 index 00000000000..cd6e1c535a1 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-align-self-horiz-005-ref.htm @@ -0,0 +1,96 @@ +<!DOCTYPE html> +<!-- + 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> + <head> + <title>CSS Reftest Reference</title> + <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/html/reference/flexbox-align-self-stretch-vert-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-align-self-stretch-vert-001-ref.htm new file mode 100644 index 00000000000..d66ab2ef2dc --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-align-self-stretch-vert-001-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<!-- + 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><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/html/reference/flexbox-align-self-stretch-vert-002-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-align-self-stretch-vert-002-ref.htm new file mode 100644 index 00000000000..bfa5804dcf8 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-align-self-stretch-vert-002-ref.htm @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<!-- + 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><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/html/reference/flexbox-align-self-vert-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-align-self-vert-001-ref.htm new file mode 100644 index 00000000000..cdb74eaaf10 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-align-self-vert-001-ref.htm @@ -0,0 +1,107 @@ +<!DOCTYPE html> +<!-- + 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> + <head> + <title>CSS Reftest Reference</title> + <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/html/reference/flexbox-align-self-vert-002-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-align-self-vert-002-ref.htm new file mode 100644 index 00000000000..cd91a452cb7 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-align-self-vert-002-ref.htm @@ -0,0 +1,88 @@ +<!DOCTYPE html> +<!-- + 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> + <head> + <title>CSS Reftest Reference</title> + <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> + <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> + <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/html/reference/flexbox-align-self-vert-003-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-align-self-vert-003-ref.htm new file mode 100644 index 00000000000..a5af16887b8 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-align-self-vert-003-ref.htm @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<!-- + 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> + <head> + <title>CSS Reftest Reference</title> + <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/html/reference/flexbox-align-self-vert-004-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-align-self-vert-004-ref.htm new file mode 100644 index 00000000000..1e2469e2ff5 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-align-self-vert-004-ref.htm @@ -0,0 +1,94 @@ +<!DOCTYPE html> +<!-- + 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> + <head> + <title>CSS Reftest Reference</title> + <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> + <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/html/reference/flexbox-align-self-vert-rtl-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-align-self-vert-rtl-001-ref.htm new file mode 100644 index 00000000000..20371dffdd0 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-align-self-vert-rtl-001-ref.htm @@ -0,0 +1,110 @@ +<!DOCTYPE html> +<!-- + 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> + <head> + <title>CSS Reftest Reference</title> + <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/html/reference/flexbox-align-self-vert-rtl-002-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-align-self-vert-rtl-002-ref.htm new file mode 100644 index 00000000000..ae3610bd6e6 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-align-self-vert-rtl-002-ref.htm @@ -0,0 +1,91 @@ +<!DOCTYPE html> +<!-- + 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> + <head> + <title>CSS Reftest Reference</title> + <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> + <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> + <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/html/reference/flexbox-align-self-vert-rtl-003-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-align-self-vert-rtl-003-ref.htm new file mode 100644 index 00000000000..ff658f73a05 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-align-self-vert-rtl-003-ref.htm @@ -0,0 +1,80 @@ +<!DOCTYPE html> +<!-- + 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> + <head> + <title>CSS Reftest Reference</title> + <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/html/reference/flexbox-align-self-vert-rtl-004-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-align-self-vert-rtl-004-ref.htm new file mode 100644 index 00000000000..0c816d65719 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-align-self-vert-rtl-004-ref.htm @@ -0,0 +1,96 @@ +<!DOCTYPE html> +<!-- + 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> + <head> + <title>CSS Reftest Reference</title> + <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> + <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/html/reference/flexbox-anonymous-items-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-anonymous-items-001-ref.htm new file mode 100644 index 00000000000..482af4a787d --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-anonymous-items-001-ref.htm @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html><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/html/reference/flexbox-baseline-align-self-baseline-horiz-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-baseline-align-self-baseline-horiz-001-ref.htm new file mode 100644 index 00000000000..a72d1417258 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-baseline-align-self-baseline-horiz-001-ref.htm @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<!-- + 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><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/html/reference/flexbox-baseline-align-self-baseline-vert-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-baseline-align-self-baseline-vert-001-ref.htm new file mode 100644 index 00000000000..2295725f6b4 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-baseline-align-self-baseline-vert-001-ref.htm @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<!-- + 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><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/html/reference/flexbox-baseline-empty-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-baseline-empty-001-ref.htm new file mode 100644 index 00000000000..c7c182ae6dc --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-baseline-empty-001-ref.htm @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<!-- + 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><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/html/reference/flexbox-baseline-multi-item-horiz-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-baseline-multi-item-horiz-001-ref.htm new file mode 100644 index 00000000000..488d0ac2134 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-baseline-multi-item-horiz-001-ref.htm @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<!-- + 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><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/html/reference/flexbox-baseline-multi-item-vert-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-baseline-multi-item-vert-001-ref.htm new file mode 100644 index 00000000000..6bcac395e23 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-baseline-multi-item-vert-001-ref.htm @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<!-- + 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><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/html/reference/flexbox-baseline-multi-line-horiz-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-baseline-multi-line-horiz-001-ref.htm new file mode 100644 index 00000000000..f1d764b79cb --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-baseline-multi-line-horiz-001-ref.htm @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<!-- + 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><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/html/reference/flexbox-baseline-multi-line-horiz-002-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-baseline-multi-line-horiz-002-ref.htm new file mode 100644 index 00000000000..00d0d6a71df --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-baseline-multi-line-horiz-002-ref.htm @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<!-- + 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><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/html/reference/flexbox-baseline-multi-line-horiz-003-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-baseline-multi-line-horiz-003-ref.htm new file mode 100644 index 00000000000..f5dee3feddb --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-baseline-multi-line-horiz-003-ref.htm @@ -0,0 +1,84 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html><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/html/reference/flexbox-baseline-multi-line-horiz-004-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-baseline-multi-line-horiz-004-ref.htm new file mode 100644 index 00000000000..e7602e929c9 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-baseline-multi-line-horiz-004-ref.htm @@ -0,0 +1,84 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html><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/html/reference/flexbox-baseline-multi-line-vert-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-baseline-multi-line-vert-001-ref.htm new file mode 100644 index 00000000000..64c0d9848cc --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-baseline-multi-line-vert-001-ref.htm @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<!-- + 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><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/html/reference/flexbox-baseline-multi-line-vert-002-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-baseline-multi-line-vert-002-ref.htm new file mode 100644 index 00000000000..950275818ed --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-baseline-multi-line-vert-002-ref.htm @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<!-- + 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><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/html/reference/flexbox-baseline-single-item-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-baseline-single-item-001-ref.htm new file mode 100644 index 00000000000..b74d8a71b68 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-baseline-single-item-001-ref.htm @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<!-- + 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><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/html/reference/flexbox-basic-block-horiz-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-basic-block-horiz-001-ref.htm new file mode 100644 index 00000000000..11fb41d595a --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-basic-block-horiz-001-ref.htm @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html> + <head> + <title>CSS Reftest Reference</title> + <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><div class="b" style="width: 120px"></div> + </div> + <div class="flexbox"> + <div class="a" style="width: 62.5px"></div><div class="c" style="width: 137.5px"></div> + </div> + <div class="flexbox"> + <div class="a" style="width: 185px"></div><div class="auto"> + <div class="spacer" style="width: 15px"></div></div> + </div> + <div class="flexbox"> + <div class="b" style="width: 76px"></div><div class="c" style="width: 124px"></div> + </div> + <div class="flexbox"> + <div class="b" style="width: 170px"></div><div class="auto"> + <div class="spacer" style="width: 30px"></div></div> + </div> + <div class="flexbox"> + <div class="a" style="width: 45px"></div><div class="b" style="width: 50px"></div><div class="inflex" style="width: 20px"></div><div class="c" style="width: 85px"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-basic-block-vert-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-basic-block-vert-001-ref.htm new file mode 100644 index 00000000000..cf344b45e60 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-basic-block-vert-001-ref.htm @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html> + <head> + <title>CSS Reftest Reference</title> + <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><div class="b" style="height: 120px"></div> + </div> + <div class="flexbox"> + <div class="a" style="height: 62.5px"></div><div class="c" style="height: 137.5px"></div> + </div> + <div class="flexbox"> + <div class="a" style="height: 185px"></div><div class="auto"> + <div class="spacer" style="height: 15px"></div></div> + </div> + <div class="flexbox"> + <div class="b" style="height: 76px"></div><div class="c" style="height: 124px"></div> + </div> + <div class="flexbox"> + <div class="b" style="height: 170px"></div><div class="auto"> + <div class="spacer" style="height: 30px"></div></div> + </div> + <div class="flexbox"> + <div class="a" style="height: 45px"></div><div class="b" style="height: 50px"></div><div class="inflex" style="height: 20px"></div><div class="c" style="height: 85px"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-basic-canvas-horiz-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-basic-canvas-horiz-001-ref.htm new file mode 100644 index 00000000000..39aa168bc90 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-basic-canvas-horiz-001-ref.htm @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html> + <head> + <title>CSS Reftest Reference</title> + <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></canvas> + </div> + + <div class="flexbox" style="height: 22px"> + some words + <canvas style="float:right"></canvas> + </div> + + <div class="flexbox"> + <canvas style="width: 122.5px"></canvas><canvas style="width: 73.5px"></canvas> + </div> + + <div class="flexbox"> + <canvas style="width: 93px"></canvas><canvas style="width: 103px"></canvas> + </div> + + <div class="flexbox"> + <canvas style="width: 114px"></canvas><canvas style="width: 82px"></canvas> + </div> + + <div class="flexbox"> + <canvas style="width: 106px"></canvas><canvas style="width: 90px"></canvas> + </div> + + <div class="flexbox"> + <canvas style="width: 46px"></canvas><canvas style="width: 150px"></canvas> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-basic-canvas-vert-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-basic-canvas-vert-001-ref.htm new file mode 100644 index 00000000000..b2b7875b29c --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-basic-canvas-vert-001-ref.htm @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html> + <head> + <title>CSS Reftest Reference</title> + <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></canvas> + </div> + + <div class="flexbox"> + <div style="font: 8px monospace; height: 188px"> + a b + </div> + <canvas></canvas> + </div> + + <div class="flexbox"> + <canvas style="height: 122.5px"></canvas><canvas style="height: 73.5px"></canvas> + </div> + + <div class="flexbox"> + <canvas style="height: 93px"></canvas><canvas style="height: 103px"></canvas> + </div> + + <div class="flexbox"> + <canvas style="height: 114px"></canvas><canvas style="height: 82px"></canvas> + </div> + + <div class="flexbox"> + <canvas style="height: 106px"></canvas><canvas style="height: 90px"></canvas> + </div> + + <div class="flexbox"> + <canvas style="height: 46px"></canvas><canvas style="height: 150px"></canvas> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-basic-fieldset-horiz-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-basic-fieldset-horiz-001-ref.htm new file mode 100644 index 00000000000..ec71a5fef9e --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-basic-fieldset-horiz-001-ref.htm @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html> + <head> + <title>CSS Reftest Reference</title> + <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></fieldset> + </div> + + <div class="flexbox" style="height: 22px"> + some words + <fieldset style="float:right"></fieldset> + </div> + + <div class="flexbox"> + <fieldset style="width: 122.5px"></fieldset><fieldset style="width: 73.5px"></fieldset> + </div> + + <div class="flexbox"> + <fieldset style="width: 93px"></fieldset><fieldset style="width: 103px"></fieldset> + </div> + + <div class="flexbox"> + <fieldset style="width: 114px"></fieldset><fieldset style="width: 82px"></fieldset> + </div> + + <div class="flexbox"> + <fieldset style="width: 106px"></fieldset><fieldset style="width: 90px"></fieldset> + </div> + + <div class="flexbox"> + <fieldset style="width: 46px"></fieldset><fieldset style="width: 150px"></fieldset> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-basic-fieldset-vert-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-basic-fieldset-vert-001-ref.htm new file mode 100644 index 00000000000..8d64729e3fe --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-basic-fieldset-vert-001-ref.htm @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html> + <head> + <title>CSS Reftest Reference</title> + <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></fieldset> + </div> + + <div class="flexbox"> + <div style="font: 8px monospace; height: 188px"> + a b + </div> + <fieldset></fieldset> + </div> + + <div class="flexbox"> + <fieldset style="height: 122.5px"></fieldset><fieldset style="height: 73.5px"></fieldset> + </div> + + <div class="flexbox"> + <fieldset style="height: 93px"></fieldset><fieldset style="height: 103px"></fieldset> + </div> + + <div class="flexbox"> + <fieldset style="height: 114px"></fieldset><fieldset style="height: 82px"></fieldset> + </div> + + <div class="flexbox"> + <fieldset style="height: 106px"></fieldset><fieldset style="height: 90px"></fieldset> + </div> + + <div class="flexbox"> + <fieldset style="height: 46px"></fieldset><fieldset style="height: 150px"></fieldset> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-basic-iframe-horiz-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-basic-iframe-horiz-001-ref.htm new file mode 100644 index 00000000000..71dabeb1361 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-basic-iframe-horiz-001-ref.htm @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html> + <head> + <title>CSS Reftest Reference</title> + <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></iframe> + </div> + + <div class="flexbox" style="height: 22px"> + some words + <iframe style="float:right"></iframe> + </div> + + <div class="flexbox"> + <iframe style="width: 122.5px"></iframe><iframe style="width: 73.5px"></iframe> + </div> + + <div class="flexbox"> + <iframe style="width: 93px"></iframe><iframe style="width: 103px"></iframe> + </div> + + <div class="flexbox"> + <iframe style="width: 114px"></iframe><iframe style="width: 82px"></iframe> + </div> + + <div class="flexbox"> + <iframe style="width: 106px"></iframe><iframe style="width: 90px"></iframe> + </div> + + <div class="flexbox"> + <iframe style="width: 46px"></iframe><iframe style="width: 150px"></iframe> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-basic-iframe-vert-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-basic-iframe-vert-001-ref.htm new file mode 100644 index 00000000000..1bdbe19df4d --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-basic-iframe-vert-001-ref.htm @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html> + <head> + <title>CSS Reftest Reference</title> + <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></iframe> + </div> + + <div class="flexbox"> + <div style="font: 8px monospace; height: 188px"> + a b + </div> + <iframe></iframe> + </div> + + <div class="flexbox"> + <iframe style="height: 122.5px"></iframe><iframe style="height: 73.5px"></iframe> + </div> + + <div class="flexbox"> + <iframe style="height: 93px"></iframe><iframe style="height: 103px"></iframe> + </div> + + <div class="flexbox"> + <iframe style="height: 114px"></iframe><iframe style="height: 82px"></iframe> + </div> + + <div class="flexbox"> + <iframe style="height: 106px"></iframe><iframe style="height: 90px"></iframe> + </div> + + <div class="flexbox"> + <iframe style="height: 46px"></iframe><iframe style="height: 150px"></iframe> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-basic-img-horiz-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-basic-img-horiz-001-ref.htm new file mode 100644 index 00000000000..11d175c4127 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-basic-img-horiz-001-ref.htm @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html> + <head> + <title>CSS Reftest Reference</title> + <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/html/reference/flexbox-basic-img-vert-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-basic-img-vert-001-ref.htm new file mode 100644 index 00000000000..7551bb7ca16 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-basic-img-vert-001-ref.htm @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html> + <head> + <title>CSS Reftest Reference</title> + <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/html/reference/flexbox-basic-textarea-horiz-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-basic-textarea-horiz-001-ref.htm new file mode 100644 index 00000000000..df2f2e7ad8f --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-basic-textarea-horiz-001-ref.htm @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html> + <head> + <title>CSS Reftest Reference</title> + <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></textarea> + </div> + + <div class="flexbox" style="height: 24px"> + some words + <textarea style="float:right"></textarea> + </div> + + <div class="flexbox"> + <textarea style="width: 122.5px"></textarea><textarea style="width: 73.5px"></textarea> + </div> + + <div class="flexbox"> + <textarea style="width: 93px"></textarea><textarea style="width: 103px"></textarea> + </div> + + <div class="flexbox"> + <textarea style="width: 114px"></textarea><textarea style="width: 82px"></textarea> + </div> + + <div class="flexbox"> + <textarea style="width: 106px"></textarea><textarea style="width: 90px"></textarea> + </div> + + <div class="flexbox"> + <textarea style="width: 46px"></textarea><textarea style="width: 150px"></textarea> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-basic-textarea-vert-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-basic-textarea-vert-001-ref.htm new file mode 100644 index 00000000000..cb05967143d --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-basic-textarea-vert-001-ref.htm @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html> + <head> + <title>CSS Reftest Reference</title> + <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></textarea> + </div> + + <div class="flexbox"> + <div style="font: 8px monospace; height: 188px"> + a b + </div> + <textarea></textarea> + </div> + + <div class="flexbox"> + <textarea style="height: 122.5px"></textarea><textarea style="height: 73.5px"></textarea> + </div> + + <div class="flexbox"> + <textarea style="height: 93px"></textarea><textarea style="height: 103px"></textarea> + </div> + + <div class="flexbox"> + <textarea style="height: 114px"></textarea><textarea style="height: 82px"></textarea> + </div> + + <div class="flexbox"> + <textarea style="height: 106px"></textarea><textarea style="height: 90px"></textarea> + </div> + + <div class="flexbox"> + <textarea style="height: 46px"></textarea><textarea style="height: 150px"></textarea> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-basic-video-horiz-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-basic-video-horiz-001-ref.htm new file mode 100644 index 00000000000..c5a9a0cb1a6 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-basic-video-horiz-001-ref.htm @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html> + <head> + <title>CSS Reftest Reference</title> + <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></video> + </div> + + <div class="flexbox" style="height: 22px"> + some words + <video style="float:right"></video> + </div> + + <div class="flexbox"> + <video style="width: 122.5px"></video><video style="width: 73.5px"></video> + </div> + + <div class="flexbox"> + <video style="width: 93px"></video><video style="width: 103px"></video> + </div> + + <div class="flexbox"> + <video style="width: 114px"></video><video style="width: 82px"></video> + </div> + + <div class="flexbox"> + <video style="width: 106px"></video><video style="width: 90px"></video> + </div> + + <div class="flexbox"> + <video style="width: 46px"></video><video style="width: 150px"></video> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-basic-video-vert-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-basic-video-vert-001-ref.htm new file mode 100644 index 00000000000..1f874f6cef4 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-basic-video-vert-001-ref.htm @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html> + <head> + <title>CSS Reftest Reference</title> + <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></video> + </div> + + <div class="flexbox"> + <div style="font: 8px monospace; height: 188px"> + a b + </div> + <video></video> + </div> + + <div class="flexbox"> + <video style="height: 122.5px"></video><video style="height: 73.5px"></video> + </div> + + <div class="flexbox"> + <video style="height: 93px"></video><video style="height: 103px"></video> + </div> + + <div class="flexbox"> + <video style="height: 114px"></video><video style="height: 82px"></video> + </div> + + <div class="flexbox"> + <video style="height: 106px"></video><video style="height: 90px"></video> + </div> + + <div class="flexbox"> + <video style="height: 46px"></video><video style="height: 150px"></video> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-break-request-horiz-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-break-request-horiz-001-ref.htm new file mode 100644 index 00000000000..1875d088c02 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-break-request-horiz-001-ref.htm @@ -0,0 +1,97 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html><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/html/reference/flexbox-break-request-horiz-002-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-break-request-horiz-002-ref.htm new file mode 100644 index 00000000000..942e97ee59b --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-break-request-horiz-002-ref.htm @@ -0,0 +1,100 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html><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/html/reference/flexbox-break-request-vert-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-break-request-vert-001-ref.htm new file mode 100644 index 00000000000..f682ba8f705 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-break-request-vert-001-ref.htm @@ -0,0 +1,97 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html><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/html/reference/flexbox-break-request-vert-002-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-break-request-vert-002-ref.htm new file mode 100644 index 00000000000..2342936cf23 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-break-request-vert-002-ref.htm @@ -0,0 +1,100 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html><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/html/reference/flexbox-collapsed-item-baseline-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-collapsed-item-baseline-001-ref.htm new file mode 100644 index 00000000000..b6325c556e7 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-collapsed-item-baseline-001-ref.htm @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<!-- + 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><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/html/reference/flexbox-collapsed-item-horiz-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-collapsed-item-horiz-001-ref.htm new file mode 100644 index 00000000000..0aa02f611a6 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-collapsed-item-horiz-001-ref.htm @@ -0,0 +1,100 @@ +<!DOCTYPE html> +<!-- + 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><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/html/reference/flexbox-collapsed-item-horiz-002-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-collapsed-item-horiz-002-ref.htm new file mode 100644 index 00000000000..43c5e41a62b --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-collapsed-item-horiz-002-ref.htm @@ -0,0 +1,107 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html><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/html/reference/flexbox-collapsed-item-horiz-003-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-collapsed-item-horiz-003-ref.htm new file mode 100644 index 00000000000..3046ec14423 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-collapsed-item-horiz-003-ref.htm @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html><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/html/reference/flexbox-flex-direction-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-flex-direction-ref.htm new file mode 100644 index 00000000000..bd79973c526 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-flex-direction-ref.htm @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox-flex-flow-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-flex-flow-001-ref.htm new file mode 100644 index 00000000000..65bb4b91dbb --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-flex-flow-001-ref.htm @@ -0,0 +1,126 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html><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/html/reference/flexbox-flex-flow-002-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-flex-flow-002-ref.htm new file mode 100644 index 00000000000..983cce4c2c5 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-flex-flow-002-ref.htm @@ -0,0 +1,132 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html><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/html/reference/flexbox-flex-wrap-flexing-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-flex-wrap-flexing-ref.htm new file mode 100644 index 00000000000..16df1ee210a --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-flex-wrap-flexing-ref.htm @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox-flex-wrap-horiz-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-flex-wrap-horiz-001-ref.htm new file mode 100644 index 00000000000..52f93d08fa0 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-flex-wrap-horiz-001-ref.htm @@ -0,0 +1,98 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html><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/html/reference/flexbox-flex-wrap-horiz-002-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-flex-wrap-horiz-002-ref.htm new file mode 100644 index 00000000000..a80ef9eec9e --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-flex-wrap-horiz-002-ref.htm @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html><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/html/reference/flexbox-flex-wrap-nowrap-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-flex-wrap-nowrap-ref.htm new file mode 100644 index 00000000000..01cfd899c19 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-flex-wrap-nowrap-ref.htm @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox-flex-wrap-vert-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-flex-wrap-vert-001-ref.htm new file mode 100644 index 00000000000..30028044a67 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-flex-wrap-vert-001-ref.htm @@ -0,0 +1,99 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html><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/html/reference/flexbox-flex-wrap-vert-002-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-flex-wrap-vert-002-ref.htm new file mode 100644 index 00000000000..067cdb6be2b --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-flex-wrap-vert-002-ref.htm @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html><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/html/reference/flexbox-items-as-stacking-contexts-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-items-as-stacking-contexts-001-ref.htm new file mode 100644 index 00000000000..b2d62634ef7 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-items-as-stacking-contexts-001-ref.htm @@ -0,0 +1,113 @@ +<!DOCTYPE html> +<!-- + 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> + <head> + <title>CSS Reftest Reference</title> + <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> + <div class="b"><div class="bKid"></div></div> + </div> + + <!-- Various "z-index" just on the first item --> + <div class="flexbox"> + <div class="a zn1"><div class="aKid"></div></div> + <div class="b"><div class="bKid"></div></div> + + <div class="a z0"><div class="aKid"></div></div> + <div class="b"><div class="bKid"></div></div> + + <div class="a z1"><div class="aKid"></div></div> + <div class="b"><div class="bKid"></div></div> + </div> + + <!-- Various "z-index" just on the second item --> + <div class="flexbox"> + <div class="a"><div class="aKid"></div></div> + <div class="b zn1"><div class="bKid"></div></div> + + <div class="a"><div class="aKid"></div></div> + <div class="b z0"><div class="bKid"></div></div> + + <div class="a"><div class="aKid"></div></div> + <div class="b z1"><div class="bKid"></div></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> + <div class="b z0"><div class="bKid"></div></div> + + <div class="a z0"><div class="aKid"></div></div> + <div class="b z0"><div class="bKid"></div></div> + + <div class="a z1"><div class="aKid"></div></div> + <div class="b z0"><div class="bKid"></div></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> + <div class="b zn1"><div class="bKid"></div></div> + + <div class="a z0"><div class="aKid"></div></div> + <div class="b z0"><div class="bKid"></div></div> + + <div class="a z0"><div class="aKid"></div></div> + <div class="b z1"><div class="bKid"></div></div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-items-as-stacking-contexts-002-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-items-as-stacking-contexts-002-ref.htm new file mode 100644 index 00000000000..00539316cbf --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-items-as-stacking-contexts-002-ref.htm @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html><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/html/reference/flexbox-items-as-stacking-contexts-003-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-items-as-stacking-contexts-003-ref.htm new file mode 100644 index 00000000000..735f5a3e8dc --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-items-as-stacking-contexts-003-ref.htm @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html><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/html/reference/flexbox-justify-content-horiz-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-justify-content-horiz-001-ref.htm new file mode 100644 index 00000000000..f4ad9b26e84 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-justify-content-horiz-001-ref.htm @@ -0,0 +1,103 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html> + <head> + <title>CSS Reftest Reference</title> + <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> + <div class="flexbox"> + <div class="a"></div><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a"></div><div class="b"></div><div class="c"></div> + </div> + + <!-- flex-start --> + <div class="flexbox"> + <div class="a"></div> + </div> + <div class="flexbox"> + <div class="a"></div><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a"></div><div class="b"></div><div class="c"></div> + </div> + + <!-- flex-end --> + <div class="flexbox"> + <div class="a" style="margin-left: 190px"></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 140px"></div><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 40px"></div><div class="b"></div><div class="c"></div> + </div> + + <!-- center --> + <div class="flexbox"> + <div class="a" style="margin-left: 95px"></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 70px"></div><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 20px"></div><div class="b"></div><div class="c"></div> + </div> + + <!-- space-between --> + <div class="flexbox"> + <div class="a"></div> + </div> + <div class="flexbox"> + <div class="a"></div><div class="b" style="margin-left: 140px"></div> + </div> + <div class="flexbox"> + <div class="a"></div><div class="b" style="margin-left: 20px"></div><div class="c" style="margin-left: 20px"></div> + </div> + + <!-- space-around --> + <div class="flexbox"> + <div class="a" style="margin-left: 95px"></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 35px"></div><div class="b" style="margin-left: 70px"></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: calc(40px / 6)"></div><div class="b" style="margin-left: calc(40px / 3)"></div><div class="c" style="margin-left: calc(40px / 3)"></div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-justify-content-horiz-002-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-justify-content-horiz-002-ref.htm new file mode 100644 index 00000000000..4203c8bd45a --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-justify-content-horiz-002-ref.htm @@ -0,0 +1,117 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html> + <head> + <title>CSS Reftest Reference</title> + <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> + <div class="flexbox"> + <div class="a"></div><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a"></div><div class="b"></div><div class="c"></div> + </div> + + <!-- flex-start --> + <div class="flexbox"> + <div class="a"></div> + </div> + <div class="flexbox"> + <div class="a"></div><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a"></div><div class="b"></div><div class="c"></div> + </div> + + <!-- flex-end --> + <div class="flexbox"> + <div class="a" style="margin-left: 180px"></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 118px"></div><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 8px"></div><div class="b"></div><div class="c"></div> + </div> + + <!-- center --> + <div class="flexbox"> + <div class="a" style="margin-left: 90px"></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 59px"></div><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 4px"></div><div class="b"></div><div class="c"></div> + </div> + + <!-- space-between --> + <div class="flexbox"> + <div class="a"></div> + </div> + <div class="flexbox"> + <div class="a"></div><div style="margin-left: 118px"><div class="b"></div></div> + </div> + <div class="flexbox"> + <div class="a"></div><div style="margin-left: 4px"><div class="b"></div></div><div style="margin-left: 4px"><div class="c"></div></div> + </div> + + <!-- space-around --> + <div class="flexbox"> + <div class="a" style="margin-left: 90px"></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: 29.5px"></div><div style="margin-left: 59px"><div class="b"></div></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-left: calc(8px / 6)"></div><div style="margin-left: calc(8px / 3)"><div class="b"></div></div><div style="margin-left: calc(8px / 3)"><div class="c"></div></div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-justify-content-horiz-003-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-justify-content-horiz-003-ref.htm new file mode 100644 index 00000000000..bdc9730d303 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-justify-content-horiz-003-ref.htm @@ -0,0 +1,104 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html> + <head> + <title>CSS Reftest Reference</title> + <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> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"></div><div class="b"></div> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"></div><div class="b"></div><div class="c"></div> + </div> + + <!-- flex-start --> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"></div> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"></div><div class="b"></div> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"></div><div class="b"></div><div class="c"></div> + </div> + + <!-- flex-end --> + <div class="flexbox" style="margin-left: 95px"> + <div class="a"></div> + </div> + <div class="flexbox" style="margin-left: 55px"> + <div class="a"></div><div class="b"></div> + </div> + <div class="flexbox" style="margin-left: 10px"> + <div class="a"></div><div class="b"></div><div class="c"></div> + </div> + + <!-- center --> + <div class="flexbox" style="margin-left: 97.5px"> + <div class="a"></div> + </div> + <div class="flexbox" style="margin-left: 77.5px"> + <div class="a"></div><div class="b"></div> + </div> + <div class="flexbox" style="margin-left: 55px"> + <div class="a"></div><div class="b"></div><div class="c"></div> + </div> + + <!-- space-between --> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"></div> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"></div><div class="b"></div> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"></div><div class="b"></div><div class="c"></div> + </div> + + <!-- space-around --> + <div class="flexbox" style="margin-left: 97.5px"> + <div class="a"></div> + </div> + <div class="flexbox" style="margin-left: 77.5px"> + <div class="a"></div><div class="b"></div> + </div> + <div class="flexbox" style="margin-left: 55px"> + <div class="a"></div><div class="b"></div><div class="c"></div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-justify-content-horiz-004-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-justify-content-horiz-004-ref.htm new file mode 100644 index 00000000000..d21b4c53d81 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-justify-content-horiz-004-ref.htm @@ -0,0 +1,116 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html> + <head> + <title>CSS Reftest Reference</title> + <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> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"></div><div class="b"></div> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"></div><div class="b"></div><div class="c"></div> + </div> + + <!-- flex-start --> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"></div> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"></div><div class="b"></div> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"></div><div class="b"></div><div class="c"></div> + </div> + + <!-- flex-end --> + <div class="flexbox" style="margin-left: 85px"> + <div class="a"></div> + </div> + <div class="flexbox" style="margin-left: 33px"> + <div class="a"></div><div class="b"></div> + </div> + <div class="flexbox" style="margin-left: -22px"> + <div class="a"></div><div class="b"></div><div class="c"></div> + </div> + + <!-- center --> + <div class="flexbox" style="margin-left: 92.5px"> + <div class="a"></div> + </div> + <div class="flexbox" style="margin-left: 66.5px"> + <div class="a"></div><div class="b"></div> + </div> + <div class="flexbox" style="margin-left: 39px"> + <div class="a"></div><div class="b"></div><div class="c"></div> + </div> + + <!-- space-between --> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"></div> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"></div><div class="b"></div> + </div> + <div class="flexbox" style="margin-left: 100px"> + <div class="a"></div><div class="b"></div><div class="c"></div> + </div> + + <!-- space-around --> + <div class="flexbox" style="margin-left: 92.5px"> + <div class="a"></div> + </div> + <div class="flexbox" style="margin-left: 66.5px"> + <div class="a"></div><div class="b"></div> + </div> + <div class="flexbox" style="margin-left: 39px"> + <div class="a"></div><div class="b"></div><div class="c"></div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-justify-content-horiz-005-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-justify-content-horiz-005-ref.htm new file mode 100644 index 00000000000..ba6865ed487 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-justify-content-horiz-005-ref.htm @@ -0,0 +1,137 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html> + <head> + <title>CSS Reftest Reference</title> + <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> + <div class="flexbox"> + <div class="a"></div><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a"></div><div class="b"></div><div class="c"></div> + </div> + + <!-- flex-start --> + <div class="flexbox"> + <div class="a"></div> + </div> + <div class="flexbox"> + <div class="a"></div><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a"></div><div class="b"></div><div class="c"></div> + </div> + + <!-- flex-end --> + <div class="flexbox" style="float:right; clear:right;"> + <div class="a"></div> + </div> + <div class="flexbox" style="float:right; clear:right;"> + <div class="a"></div><div class="b"></div> + </div> + <div class="flexbox" style="float:right; clear:right;"> + <div class="a"></div><div class="b"></div><div class="c"></div> + </div> + <div style="clear:right;"></div> + + <!-- center --> + <div class="centerParent"> + <div class="flexbox center"> + <div class="a"></div> + </div> + </div> + <div class="centerParent"> + <div class="flexbox center"> + <div class="a"></div><div class="b"></div> + </div> + </div> + <div class="centerParent"> + <div class="flexbox center"> + <div class="a"></div><div class="b"></div><div class="c"></div> + </div> + </div> + + <!-- space-between --> + <div class="flexbox"> + <div class="a"></div> + </div> + <div class="flexbox"> + <div class="a"></div><div class="b" style="float: right"></div> + </div> + <div class="flexbox"> + <div class="a" style="display:block; float: left"></div> + <div class="c" style="float:right"></div> + <!-- 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> + </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> + </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> + <div class="a"></div> + <div style="flex: 1"></div> + <div class="b"></div> + <div style="flex: 0.5"></div> + </div> + <div class="flexbox" style="display: flex"> + <div style="flex: 0.5"></div> + <div class="a"></div> + <div style="flex: 1"></div> + <div class="b"></div> + <div style="flex: 1"></div> + <div class="c"></div> + <div style="flex: 0.5"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-justify-content-vert-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-justify-content-vert-001-ref.htm new file mode 100644 index 00000000000..1cb953f2d63 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-justify-content-vert-001-ref.htm @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html> + <head> + <title>CSS Reftest Reference</title> + <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> + <div class="flexbox"> + <div class="a"></div><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a"></div><div class="b"></div><div class="c"></div> + </div> + + <!-- flex-start --> + <div class="flexbox"> + <div class="a"></div> + </div> + <div class="flexbox"> + <div class="a"></div><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a"></div><div class="b"></div><div class="c"></div> + </div> + + <!-- flex-end --> + <div class="flexbox"> + <div class="a" style="margin-top: 190px"></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 140px"></div><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 40px"></div><div class="b"></div><div class="c"></div> + </div> + + <!-- center --> + <div class="flexbox"> + <div class="a" style="margin-top: 95px"></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 70px"></div><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 20px"></div><div class="b"></div><div class="c"></div> + </div> + + <!-- space-between --> + <div class="flexbox"> + <div class="a"></div> + </div> + <div class="flexbox"> + <div class="a"></div><div class="b" style="margin-top: 140px"></div> + </div> + <div class="flexbox"> + <div class="a"></div><div class="b" style="margin-top: 20px"></div><div class="c" style="margin-top: 20px"></div> + </div> + + <!-- space-around --> + <div class="flexbox"> + <div class="a" style="margin-top: 95px"></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 35px"></div><div class="b" style="margin-top: 70px"></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: calc(40px / 6)"></div><div class="b" style="margin-top: calc(40px / 3)"></div><div class="c" style="margin-top: calc(40px / 3)"></div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-justify-content-vert-002-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-justify-content-vert-002-ref.htm new file mode 100644 index 00000000000..877e7c500b3 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-justify-content-vert-002-ref.htm @@ -0,0 +1,114 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html> + <head> + <title>CSS Reftest Reference</title> + <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> + <div class="flexbox"> + <div class="a"></div><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a"></div><div class="b"></div><div class="c"></div> + </div> + + <!-- flex-start --> + <div class="flexbox"> + <div class="a"></div> + </div> + <div class="flexbox"> + <div class="a"></div><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a"></div><div class="b"></div><div class="c"></div> + </div> + + <!-- flex-end --> + <div class="flexbox"> + <div class="a" style="margin-top: 180px"></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 118px"></div><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 8px"></div><div class="b"></div><div class="c"></div> + </div> + + <!-- center --> + <div class="flexbox"> + <div class="a" style="margin-top: 90px"></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 59px"></div><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 4px"></div><div class="b"></div><div class="c"></div> + </div> + + <!-- space-between --> + <div class="flexbox"> + <div class="a"></div> + </div> + <div class="flexbox"> + <div class="a"></div><div style="margin-top: 123px"><div class="b"></div></div> + </div> + <div class="flexbox"> + <div class="a"></div><div style="margin-top: 9px"><div class="b"></div></div><div style="margin-top: 10px"><div class="c"></div></div> + </div> + + <!-- space-around --> + <div class="flexbox"> + <div class="a" style="margin-top: 90px"></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: 29.5px"></div><div style="margin-top: 64px"><div class="b"></div></div> + </div> + <div class="flexbox"> + <div class="a" style="margin-top: calc(8px / 6)"></div><div style="margin-top: calc(5px + 8px / 3)"><div class="b"></div></div><div style="margin-top: calc(6px + 8px / 3)"><div class="c"></div></div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-justify-content-vert-003-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-justify-content-vert-003-ref.htm new file mode 100644 index 00000000000..b1d51c21ca7 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-justify-content-vert-003-ref.htm @@ -0,0 +1,102 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html> + <head> + <title>CSS Reftest Reference</title> + <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> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"></div><div class="b"></div> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"></div><div class="b"></div><div class="c"></div> + </div> + + <!-- flex-start --> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"></div> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"></div><div class="b"></div> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"></div><div class="b"></div><div class="c"></div> + </div> + + <!-- flex-end --> + <div class="flexbox" style="margin-top: 95px"> + <div class="a"></div> + </div> + <div class="flexbox" style="margin-top: 55px"> + <div class="a"></div><div class="b"></div> + </div> + <div class="flexbox" style="margin-top: 10px"> + <div class="a"></div><div class="b"></div><div class="c"></div> + </div> + + <!-- center --> + <div class="flexbox" style="margin-top: 97.5px"> + <div class="a"></div> + </div> + <div class="flexbox" style="margin-top: 77.5px"> + <div class="a"></div><div class="b"></div> + </div> + <div class="flexbox" style="margin-top: 55px"> + <div class="a"></div><div class="b"></div><div class="c"></div> + </div> + + <!-- space-between --> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"></div> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"></div><div class="b"></div> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"></div><div class="b"></div><div class="c"></div> + </div> + + <!-- space-around --> + <div class="flexbox" style="margin-top: 97.5px"> + <div class="a"></div> + </div> + <div class="flexbox" style="margin-top: 77.5px"> + <div class="a"></div><div class="b"></div> + </div> + <div class="flexbox" style="margin-top: 55px"> + <div class="a"></div><div class="b"></div><div class="c"></div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-justify-content-vert-004-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-justify-content-vert-004-ref.htm new file mode 100644 index 00000000000..ca6cb10c35f --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-justify-content-vert-004-ref.htm @@ -0,0 +1,113 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html> + <head> + <title>CSS Reftest Reference</title> + <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> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"></div><div class="b"></div> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"></div><div class="b"></div><div class="c"></div> + </div> + + <!-- flex-start --> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"></div> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"></div><div class="b"></div> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"></div><div class="b"></div><div class="c"></div> + </div> + + <!-- flex-end --> + <div class="flexbox" style="margin-top: 85px"> + <div class="a"></div> + </div> + <div class="flexbox" style="margin-top: 33px"> + <div class="a"></div><div class="b"></div> + </div> + <div class="flexbox" style="margin-top: -22px"> + <div class="a"></div><div class="b"></div><div class="c"></div> + </div> + + <!-- center --> + <div class="flexbox" style="margin-top: 92.5px"> + <div class="a"></div> + </div> + <div class="flexbox" style="margin-top: 66.5px"> + <div class="a"></div><div class="b"></div> + </div> + <div class="flexbox" style="margin-top: 39px"> + <div class="a"></div><div class="b"></div><div class="c"></div> + </div> + + <!-- space-between --> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"></div> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"></div><div class="b"></div> + </div> + <div class="flexbox" style="margin-top: 100px"> + <div class="a"></div><div class="b"></div><div class="c"></div> + </div> + + <!-- space-around --> + <div class="flexbox" style="margin-top: 92.5px"> + <div class="a"></div> + </div> + <div class="flexbox" style="margin-top: 66.5px"> + <div class="a"></div><div class="b"></div> + </div> + <div class="flexbox" style="margin-top: 39px"> + <div class="a"></div><div class="b"></div><div class="c"></div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-justify-content-vert-005-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-justify-content-vert-005-ref.htm new file mode 100644 index 00000000000..37d4508288f --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-justify-content-vert-005-ref.htm @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html> + <head> + <title>CSS Reftest Reference</title> + <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> + <div class="flexbox"> + <div class="a"></div><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a"></div><div class="b"></div><div class="c"></div> + </div> + + <!-- flex-start --> + <div class="flexbox"> + <div class="a"></div> + </div> + <div class="flexbox"> + <div class="a"></div><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a"></div><div class="b"></div><div class="c"></div> + </div> + + <!-- flex-end --> + <div class="flexbox"> + <div class="a"></div> + </div> + <div class="flexbox"> + <div class="a"></div><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a"></div><div class="b"></div><div class="c"></div> + </div> + + <!-- center --> + <div class="flexbox"> + <div class="a"></div> + </div> + <div class="flexbox"> + <div class="a"></div><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a"></div><div class="b"></div><div class="c"></div> + </div> + + <!-- space-between --> + <div class="flexbox"> + <div class="a"></div> + </div> + <div class="flexbox"> + <div class="a"></div><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a"></div><div class="b"></div><div class="c"></div> + </div> + + <!-- space-around --> + <div class="flexbox"> + <div class="a"></div> + </div> + <div class="flexbox"> + <div class="a"></div><div class="b"></div> + </div> + <div class="flexbox"> + <div class="a"></div><div class="b"></div><div class="c"></div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-margin-auto-horiz-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-margin-auto-horiz-001-ref.htm new file mode 100644 index 00000000000..c7f80e27f7f --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-margin-auto-horiz-001-ref.htm @@ -0,0 +1,86 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html> + <head> + <title>CSS Reftest Reference</title> + <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> + <div class="flexbox"> + <div class="b l90"></div> + </div> + <div class="flexbox"> + <div class="c"></div> + </div> + + <!-- Two items --> + <div class="flexbox"> + <div class="a l53"></div><div class="b l53"></div> + </div> + <div class="flexbox"> + <div class="a l80"></div><div class="c"></div> + </div> + <div class="flexbox"> + <div class="b l53"></div><div class="c l53"></div> + </div> + + <!-- Three items --> + <div class="flexbox"> + <div class="a l35"></div><div class="b l35"></div><div class="c l35"></div> + </div> + <div class="flexbox"> + <div class="a l35"></div><div class="c"></div><div class="b l70"></div> + </div> + <div class="flexbox"> + <div class="b l35"></div><div class="a l70"></div><div class="c"></div> + </div> + <div class="flexbox"> + <div class="b l35"></div><div class="c l35"></div><div class="a l70"></div> + </div> + <div class="flexbox"> + <div class="c"></div><div class="a l70"></div><div class="b l35"></div> + </div> + <div class="flexbox"> + <div class="c"></div><div class="b l70"></div><div class="a l70"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-margin-auto-horiz-002-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-margin-auto-horiz-002-ref.htm new file mode 100644 index 00000000000..84b53ee7b53 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-margin-auto-horiz-002-ref.htm @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<!-- + 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> + <head> + <title>CSS Reftest Reference</title> + <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> + <div class="fixedSize pink"></div> + <div class="fixedSize blue" style="margin-top: 40px"></div> + </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> + <div class="fixedSize pink" style="margin-top: 10px"></div> + </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> + <div class="fixedSize pink"></div> + <div class="fixedSize blue" style="margin-top: 15px"></div> + <div class="gray" style="width: 10px; height: 30px; margin-top: 10px"></div> + </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> + <div class="fixedSize pink" style="margin-top: 10px"></div> + <div class="gray" style="width: 10px; height: 30px; margin-top: 10px"></div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-mbp-horiz-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-mbp-horiz-001-ref.htm new file mode 100644 index 00000000000..1bbc922518d --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-mbp-horiz-001-ref.htm @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html> + <head> + <title>CSS Reftest Reference</title> + <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><div class="b" style="width: 110px"></div> + </div> + <div class="flexbox"> + <div class="a" style="width: 56.5px"></div><div class="c" style="width: 137.5px"></div> + </div> + <div class="flexbox"> + <div class="a" style="width: 179px"></div><div class="flexNone"> + <div class="spacer" style="width: 15px"></div></div> + </div> + <div class="flexbox"> + <div class="b" style="width: 66px"></div><div class="c" style="width: 124px"></div> + </div> + <div class="flexbox"> + <div class="b" style="width: 160px"></div><div class="flexNone"> + <div class="spacer" style="width: 30px"></div></div> + </div> + <div class="flexbox"> + <div class="a" style="width: 39px"></div><div class="b" style="width: 40px"></div><div class="flexBasis" style="width: 20px"></div><div class="c" style="width: 85px"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-mbp-horiz-001-reverse-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-mbp-horiz-001-reverse-ref.htm new file mode 100644 index 00000000000..ac38d41e1aa --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-mbp-horiz-001-reverse-ref.htm @@ -0,0 +1,68 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html> + <head> + <title>CSS Reftest Reference</title> + <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><div class="a" style="width: 74px"></div> + </div> + <div class="flexbox"> + <div class="c" style="width: 137.5px"></div><div class="a" style="width: 56.5px"></div> + </div> + <div class="flexbox"> + <div class="flexNone"><div class="spacer" style="width: 15px"></div> + </div><div class="a" style="width: 179px"></div> + </div> + <div class="flexbox"> + <div class="c" style="width: 124px"></div><div class="b" style="width: 66px"></div> + </div> + <div class="flexbox"> + <div class="flexNone"><div class="spacer" style="width: 30px"></div> + </div><div class="b" style="width: 160px"></div> + </div> + <div class="flexbox"> + <div class="c" style="width: 85px"></div><div class="flexBasis" style="width: 20px"></div><div class="b" style="width: 40px"></div><div class="a" style="width: 39px"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-mbp-horiz-002-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-mbp-horiz-002-ref.htm new file mode 100644 index 00000000000..4cf1a8dcbb5 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-mbp-horiz-002-ref.htm @@ -0,0 +1,72 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html> + <head> + <title>CSS Reftest Reference</title> + <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><div class="b" style="width: 104px"></div> + </div> + <div class="flexbox"> + <div class="a" style="width: 52.5px"></div><div class="c" style="width: 137.5px"></div> + </div> + <div class="flexbox"> + <div class="a" style="width: 175px"></div><div class="flexNone"> + <div class="spacer" style="width: 15px"></div></div> + </div> + <div class="flexbox"> + <div class="b" style="width: 60px"></div><div class="c" style="width: 124px"></div> + </div> + <div class="flexbox"> + <div class="b" style="width: 154px"></div><div class="flexNone"> + <div class="spacer" style="width: 30px"></div></div> + </div> + <div class="flexbox"> + <div class="a" style="width: 35px"></div><div class="b" style="width: 34px"></div><div class="flexBasis" style="width: 20px"></div><div class="c" style="width: 85px"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-mbp-horiz-003-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-mbp-horiz-003-ref.htm new file mode 100644 index 00000000000..91ebab44289 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-mbp-horiz-003-ref.htm @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html> + <head> + <title>CSS Reftest Reference</title> + <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><div class="child2"></div></div> + <div class="flexbox borderA paddingA"><div class="child1"></div><div class="child2"></div></div> + <div class="flexbox borderA paddingB"><div class="child1"></div><div class="child2"></div></div> + <div class="flexbox borderB"><div class="child1"></div><div class="child2"></div></div> + <div class="flexbox borderB paddingA"><div class="child1"></div><div class="child2"></div></div> + <div class="flexbox borderB paddingB"><div class="child1"></div><div class="child2"></div></div> + <div class="flexbox paddingA"><div class="child1"></div><div class="child2"></div></div> + <div class="flexbox paddingB"><div class="child1"></div><div class="child2"></div></div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-mbp-horiz-003-reverse-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-mbp-horiz-003-reverse-ref.htm new file mode 100644 index 00000000000..31d3f78e8cd --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-mbp-horiz-003-reverse-ref.htm @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html> + <head> + <title>CSS Reftest Reference</title> + <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><div class="child1"></div></div> + <div class="flexbox borderA paddingA"><div class="child2"></div><div class="child1"></div></div> + <div class="flexbox borderA paddingB"><div class="child2"></div><div class="child1"></div></div> + <div class="flexbox borderB"><div class="child2"></div><div class="child1"></div></div> + <div class="flexbox borderB paddingA"><div class="child2"></div><div class="child1"></div></div> + <div class="flexbox borderB paddingB"><div class="child2"></div><div class="child1"></div></div> + <div class="flexbox paddingA"><div class="child2"></div><div class="child1"></div></div> + <div class="flexbox paddingB"><div class="child2"></div><div class="child1"></div></div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-mbp-horiz-004-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-mbp-horiz-004-ref.htm new file mode 100644 index 00000000000..0f3d25ae404 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-mbp-horiz-004-ref.htm @@ -0,0 +1,75 @@ +<!DOCTYPE html> +<!-- + 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> + <head> + <title>CSS Reftest Reference</title> + <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><div class="child2 paddingB"><div class="filler"></div></div><div class="child1 marginA"></div><div class="child2 marginB"></div></div> + + <div class="flexbox height50"><div class="child1 paddingA"><div class="filler"></div></div><div class="child2 paddingB"><div class="filler"></div></div><div class="child1 marginA"></div><div class="child2 marginB"></div></div> + + <div class="flexbox height50" style="align-items: flex-end"><div class="child1 paddingA"><div class="filler"></div></div><div class="child2 paddingB"><div class="filler"></div></div><div class="child1 marginA"></div><div class="child2 marginB"></div></div> + + <div class="flexbox height50"><div class="child1 paddingA marginA"><div class="filler"></div></div><div class="child2 paddingB marginB"><div class="filler"></div></div></div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-min-height-auto-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-min-height-auto-001-ref.htm new file mode 100644 index 00000000000..f5d303b4535 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-min-height-auto-001-ref.htm @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html><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/html/reference/flexbox-min-height-auto-002-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-min-height-auto-002-ref.htm new file mode 100644 index 00000000000..73dc412c919 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-min-height-auto-002-ref.htm @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html><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/html/reference/flexbox-min-height-auto-003-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-min-height-auto-003-ref.htm new file mode 100644 index 00000000000..720f185c5e8 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-min-height-auto-003-ref.htm @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html><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/html/reference/flexbox-min-height-auto-004-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-min-height-auto-004-ref.htm new file mode 100644 index 00000000000..bf1aab59289 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-min-height-auto-004-ref.htm @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html><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/html/reference/flexbox-min-width-auto-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-min-width-auto-001-ref.htm new file mode 100644 index 00000000000..2ec8905c443 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-min-width-auto-001-ref.htm @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html><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/html/reference/flexbox-min-width-auto-002-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-min-width-auto-002-ref.htm new file mode 100644 index 00000000000..23f5dbb5721 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-min-width-auto-002-ref.htm @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html><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/html/reference/flexbox-min-width-auto-003-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-min-width-auto-003-ref.htm new file mode 100644 index 00000000000..2f50436835e --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-min-width-auto-003-ref.htm @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html><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/html/reference/flexbox-min-width-auto-004-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-min-width-auto-004-ref.htm new file mode 100644 index 00000000000..0d0c18e0816 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-min-width-auto-004-ref.htm @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html><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/html/reference/flexbox-overflow-horiz-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-overflow-horiz-001-ref.htm new file mode 100644 index 00000000000..46a850580cb --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-overflow-horiz-001-ref.htm @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html><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/html/reference/flexbox-overflow-horiz-002-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-overflow-horiz-002-ref.htm new file mode 100644 index 00000000000..a9645a05596 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-overflow-horiz-002-ref.htm @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html><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/html/reference/flexbox-overflow-horiz-003-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-overflow-horiz-003-ref.htm new file mode 100644 index 00000000000..bd43cef419b --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-overflow-horiz-003-ref.htm @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html><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/html/reference/flexbox-overflow-horiz-004-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-overflow-horiz-004-ref.htm new file mode 100644 index 00000000000..76c52482ebc --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-overflow-horiz-004-ref.htm @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html><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/html/reference/flexbox-overflow-horiz-005-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-overflow-horiz-005-ref.htm new file mode 100644 index 00000000000..ccde1414d46 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-overflow-horiz-005-ref.htm @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html><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/html/reference/flexbox-overflow-vert-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-overflow-vert-001-ref.htm new file mode 100644 index 00000000000..26bd2b99e49 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-overflow-vert-001-ref.htm @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html><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/html/reference/flexbox-overflow-vert-002-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-overflow-vert-002-ref.htm new file mode 100644 index 00000000000..72fec02a89c --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-overflow-vert-002-ref.htm @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html><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/html/reference/flexbox-overflow-vert-003-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-overflow-vert-003-ref.htm new file mode 100644 index 00000000000..f25e47be537 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-overflow-vert-003-ref.htm @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html><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/html/reference/flexbox-overflow-vert-004-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-overflow-vert-004-ref.htm new file mode 100644 index 00000000000..17f9194b29a --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-overflow-vert-004-ref.htm @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html><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/html/reference/flexbox-overflow-vert-005-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-overflow-vert-005-ref.htm new file mode 100644 index 00000000000..e8969f4c938 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-overflow-vert-005-ref.htm @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html><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/html/reference/flexbox-paint-ordering-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-paint-ordering-001-ref.htm new file mode 100644 index 00000000000..75b30a9c77e --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-paint-ordering-001-ref.htm @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html> + <head> + <title>CSS Reftest Reference</title> + <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> + <div class="b"></div> + </div> + + <div class="container"> + <div class="a"><div class="aKid"></div></div> + <div class="b"></div> + </div> + + <div class="container"> + <div class="a"><div class="aKid"></div></div> + <div class="b"></div> + </div> + + <div class="container"> + <div class="a"><div class="aKid"></div></div> + <div class="b"></div> + </div> + + <div class="container"> + <div class="a"><div class="aKid"></div></div> + <div class="b"></div> + </div> + + <div class="container" style="position: fixed"> + <div class="a"><div class="aKid"></div></div> + <div class="b"></div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-paint-ordering-002-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-paint-ordering-002-ref.htm new file mode 100644 index 00000000000..12ed4d6abf6 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-paint-ordering-002-ref.htm @@ -0,0 +1,154 @@ +<!DOCTYPE html> +<!-- + 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> + <head> + <title>CSS Reftest Reference</title> + <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> + <div class="b"><div class="bKid"></div></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> + <div class="b"><div class="bKid"></div></div> + </div><div class="flexbox"> + <div class="a"><div class="aKid"></div></div> + <div class="b"><div class="bKid"></div></div> + </div><div class="flexbox"> + <div class="a"><div class="aKid"></div></div> + <div class="b"><div class="bKid"></div></div> + </div><div class="flexbox"> + <div class="a"><div class="aKid"></div></div> + <div class="b"><div class="bKid"></div></div> + </div><div class="flexbox"> + <div class="a"><div class="aKid"></div></div> + <div class="b"><div class="bKid"></div></div> + </div><div class="flexbox"> + <div class="a"><div class="aKid"></div></div> + <div class="b"><div class="bKid"></div></div> + </div> + + <br> + + <!-- order set to reverse of content-order: --> + <div class="flexbox"> + <div class="b"><div class="bKid"></div></div> + <div class="a"><div class="aKid"></div></div> + </div><div class="flexbox"> + <div class="b"><div class="bKid"></div></div> + <div class="a"><div class="aKid"></div></div> + </div><div class="flexbox"> + <div class="b"><div class="bKid"></div></div> + <div class="a"><div class="aKid"></div></div> + </div><div class="flexbox"> + <div class="b"><div class="bKid"></div></div> + <div class="a"><div class="aKid"></div></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> + <div class="a"><div class="aKid"></div></div> + </div><div class="flexbox"> + <div class="b"><div class="bKid"></div></div> + <div class="a"><div class="aKid"></div></div> + </div><div class="flexbox"> + <div class="b"><div class="bKid"></div></div> + <div class="a"><div class="aKid"></div></div> + </div><div class="flexbox"> + <div class="b"><div class="bKid"></div></div> + <div class="a"><div class="aKid"></div></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> + <div class="a zn1"><div class="aKid"></div></div> + </div><div class="flexbox"> + <!-- 'a' and 'b' are both behind the container's border --> + <div class="b zn1"><div class="bKid"></div></div> + <div class="a zn1"><div class="aKid"></div></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> + <div class="a zn2"><div class="aKid"></div></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> + <div class="a z0"><div class="aKid"></div></div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-root-node-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-root-node-001-ref.htm new file mode 100644 index 00000000000..b167f608cb9 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-root-node-001-ref.htm @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html style="display: flex; justify-content: center"><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/html/reference/flexbox-sizing-horiz-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-sizing-horiz-001-ref.htm new file mode 100644 index 00000000000..cf36f0eb75a --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-sizing-horiz-001-ref.htm @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html> + <head> + <title>CSS Reftest Reference</title> + <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> + <div class="b" style="width: 60px"></div> + <div class="c" style="width: 60px"></div> + </div> + + <div class="flexbox"> + <div class="a" style="width: 60px"></div> + <div class="b" style="width: 60px"></div> + <div class="c" style="width: 60px"></div> + </div> + + <div class="flexbox" style="width: 300px"> + <div class="a" style="width: 60px"></div> + <div class="b" style="width: 60px"></div> + <div class="c" style="width: 60px"></div> + </div> + + <div class="flexbox" style="width: 70px"> + <div class="a" style="width: 10px"></div> + <div class="b"></div> + <div class="c" style="width: 20px"></div> + </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> + <div class="c" style="width: 10px"></div> + </div> + </div> + + <div class="flexbox" style="width: 58px"> + <div class="a" style="width: 6px"></div> + <div class="b"></div> + <div class="c" style="width: 12px"></div> + </div> + + <div class="flexbox" style="width: 140px"> + <div class="a" style="width: 40px"></div> + <div class="b" style="width: 40px"></div> + <div class="c" style="width: 60px"></div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-sizing-horiz-002-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-sizing-horiz-002-ref.htm new file mode 100644 index 00000000000..67085a1d21b --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-sizing-horiz-002-ref.htm @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html> + <head> + <title>CSS Reftest Reference</title> + <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/html/reference/flexbox-sizing-vert-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-sizing-vert-001-ref.htm new file mode 100644 index 00000000000..8b320b3109c --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-sizing-vert-001-ref.htm @@ -0,0 +1,80 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html> + <head> + <title>CSS Reftest Reference</title> + <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><div class="b"></div><div class="c"></div> + </div> + + <div class="flexbox"> + <div class="a"></div><div class="b"></div><div class="c"></div> + </div> + + <div class="flexbox"> + <div class="a"></div><div class="b"></div><div class="c"></div> + </div> + + <div class="flexbox"> + <div class="a" style="height: 30px"></div> + <div class="b"></div> + <div class="c" style="height: 50px"></div> + </div> + + <div class="flexbox" style="height: 200px"> + <div class="a" style="height: 60px"></div> + <div class="b" style="height: 60px"></div> + <div class="c" style="height: 60px"></div> + </div> + + <div class="flexbox"> + <div class="a" style="height: 10px"></div> + <div class="b"></div> + <div class="c" style="height: 20px"></div> + </div> + + <div class="flexbox" style="height: 20px"> + <div class="b"></div> + <div class="c" style="height: 10px"></div> + </div> + + <div class="flexbox"> + <div class="a" style="height: 6px"></div> + <div class="b"></div> + <div class="c" style="height: 12px"></div> + </div> + + <div class="flexbox"> + <div class="a" style="height: 40px"></div> + <div class="b" style="height: 40px"></div> + <div class="c" style="height: 60px"></div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-sizing-vert-002-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-sizing-vert-002-ref.htm new file mode 100644 index 00000000000..5606f2d90e2 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-sizing-vert-002-ref.htm @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--><html> + <head> + <title>CSS Reftest Reference</title> + <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/html/reference/flexbox-table-fixup-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-table-fixup-001-ref.htm new file mode 100644 index 00000000000..e9ba478711b --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-table-fixup-001-ref.htm @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<!-- + 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> + <head> + <title>CSS Reftest Reference</title> + <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/html/reference/flexbox-whitespace-handling-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-whitespace-handling-001-ref.htm new file mode 100644 index 00000000000..d128af1ca80 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-whitespace-handling-001-ref.htm @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<!-- + 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> + <head> + <title>CSS Reftest Reference</title> + <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> + + <div class="flexbox"> + <div class="a" style="margin-left: 37.5px"></div><div class="b" style="margin-left: 75px"></div> + </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/html/reference/flexbox-whitespace-handling-002-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-whitespace-handling-002-ref.htm new file mode 100644 index 00000000000..8963a783c05 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-whitespace-handling-002-ref.htm @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<!-- + 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> + <head> + <title>CSS Reftest Reference</title> + <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> + <div class="flexbox"><div>abc </div><div class="a"></div></div> + <div class="flexbox"><div> abc </div><div class="a"></div></div> + + <!-- spaces around inline content at the end of flexbox --> + <div class="flexbox"><div class="a"></div><div> abc</div></div> + <div class="flexbox"><div class="a"></div><div>abc </div></div> + <div class="flexbox"><div class="a"></div><div> abc </div></div> + + <!-- whitespace around inline content in between flex items --> + <div class="flexbox"><div class="a"></div><div> abc</div><div class="b"></div></div> + <div class="flexbox"><div class="a"></div><div>abc </div><div class="b"></div></div> + <div class="flexbox"><div class="a"></div><div> abc </div><div class="b"></div></div> + </body> +</html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-with-pseudo-elements-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-with-pseudo-elements-001-ref.htm new file mode 100644 index 00000000000..3f691e40d15 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-with-pseudo-elements-001-ref.htm @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<!-- + 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><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/html/reference/flexbox-with-pseudo-elements-002-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-with-pseudo-elements-002-ref.htm new file mode 100644 index 00000000000..fb67a2553c5 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-with-pseudo-elements-002-ref.htm @@ -0,0 +1,83 @@ +<!DOCTYPE html> +<!-- + 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><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/html/reference/flexbox-with-pseudo-elements-003-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-with-pseudo-elements-003-ref.htm new file mode 100644 index 00000000000..3e7bbaa5f99 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox-with-pseudo-elements-003-ref.htm @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<!-- + 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><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/html/reference/flexbox_absolute-atomic-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_absolute-atomic-ref.htm new file mode 100644 index 00000000000..06329aa02d6 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_absolute-atomic-ref.htm @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_align-content-center-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_align-content-center-ref.htm new file mode 100644 index 00000000000..593699eb3da --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_align-content-center-ref.htm @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_align-content-flexend-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_align-content-flexend-ref.htm new file mode 100644 index 00000000000..1144cc30468 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_align-content-flexend-ref.htm @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_align-content-flexstart-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_align-content-flexstart-ref.htm new file mode 100644 index 00000000000..486de82ae2e --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_align-content-flexstart-ref.htm @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_align-content-spacearound-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_align-content-spacearound-ref.htm new file mode 100644 index 00000000000..8d4c32fb3d5 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_align-content-spacearound-ref.htm @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_align-content-spacebetween-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_align-content-spacebetween-ref.htm new file mode 100644 index 00000000000..26e01f25c1d --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_align-content-spacebetween-ref.htm @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_align-content-stretch-2-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_align-content-stretch-2-ref.htm new file mode 100644 index 00000000000..c05a21794f1 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_align-content-stretch-2-ref.htm @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_align-content-stretch-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_align-content-stretch-ref.htm new file mode 100644 index 00000000000..3d234910441 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_align-content-stretch-ref.htm @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_align-items-baseline-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_align-items-baseline-ref.htm new file mode 100644 index 00000000000..2bdda5a98ad --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_align-items-baseline-ref.htm @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_align-items-center-2-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_align-items-center-2-ref.htm new file mode 100644 index 00000000000..bae174919cc --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_align-items-center-2-ref.htm @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_align-items-center-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_align-items-center-ref.htm new file mode 100644 index 00000000000..a2bb142fe1f --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_align-items-center-ref.htm @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_align-items-flexend-2-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_align-items-flexend-2-ref.htm new file mode 100644 index 00000000000..1d6eb039ea0 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_align-items-flexend-2-ref.htm @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_align-items-flexend-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_align-items-flexend-ref.htm new file mode 100644 index 00000000000..3335e963b2f --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_align-items-flexend-ref.htm @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_align-items-flexstart-2-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_align-items-flexstart-2-ref.htm new file mode 100644 index 00000000000..9979fd26bdb --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_align-items-flexstart-2-ref.htm @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_align-items-flexstart-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_align-items-flexstart-ref.htm new file mode 100644 index 00000000000..fcaa178ba1e --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_align-items-flexstart-ref.htm @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_align-items-stretch-2-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_align-items-stretch-2-ref.htm new file mode 100644 index 00000000000..90b764c2a7e --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_align-items-stretch-2-ref.htm @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_align-items-stretch-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_align-items-stretch-ref.htm new file mode 100644 index 00000000000..be4a6c83324 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_align-items-stretch-ref.htm @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_align-self-auto-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_align-self-auto-ref.htm new file mode 100644 index 00000000000..8a6f07900d0 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_align-self-auto-ref.htm @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_align-self-baseline-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_align-self-baseline-ref.htm new file mode 100644 index 00000000000..f7c1b5d4430 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_align-self-baseline-ref.htm @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_align-self-center-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_align-self-center-ref.htm new file mode 100644 index 00000000000..6b4b8715a30 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_align-self-center-ref.htm @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_align-self-flexend-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_align-self-flexend-ref.htm new file mode 100644 index 00000000000..07aaaf0b6dc --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_align-self-flexend-ref.htm @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_align-self-flexstart-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_align-self-flexstart-ref.htm new file mode 100644 index 00000000000..c72c8f6b789 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_align-self-flexstart-ref.htm @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_align-self-stretch-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_align-self-stretch-ref.htm new file mode 100644 index 00000000000..60863d83af6 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_align-self-stretch-ref.htm @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_box-clear-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_box-clear-ref.htm new file mode 100644 index 00000000000..14b3362b3b3 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_box-clear-ref.htm @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_columns-flexitems-2-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_columns-flexitems-2-ref.htm new file mode 100644 index 00000000000..bd3a367a430 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_columns-flexitems-2-ref.htm @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_columns-flexitems-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_columns-flexitems-ref.htm new file mode 100644 index 00000000000..99eafcec3ed --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_columns-flexitems-ref.htm @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_columns-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_columns-ref.htm new file mode 100644 index 00000000000..d730f1606a2 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_columns-ref.htm @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_direction-column-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_direction-column-ref.htm new file mode 100644 index 00000000000..5ba51523b8f --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_direction-column-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_direction-column-reverse-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_direction-column-reverse-ref.htm new file mode 100644 index 00000000000..260fec627ec --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_direction-column-reverse-ref.htm @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_direction-row-reverse-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_direction-row-reverse-ref.htm new file mode 100644 index 00000000000..0955501f602 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_direction-row-reverse-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_display-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_display-ref.htm new file mode 100644 index 00000000000..ad85bd22ea7 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_display-ref.htm @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_empty-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_empty-ref.htm new file mode 100644 index 00000000000..e8dd59f2d8e --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_empty-ref.htm @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<!-- intentionallly left blank --><html><head></head><body></body></html>
\ No newline at end of file diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_fbfc-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_fbfc-ref.htm new file mode 100644 index 00000000000..4a11ce41543 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_fbfc-ref.htm @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_fbfc2-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_fbfc2-ref.htm new file mode 100644 index 00000000000..a21e2852f86 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_fbfc2-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_first-line-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_first-line-ref.htm new file mode 100644 index 00000000000..e09af5a600c --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_first-line-ref.htm @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-0-0-0-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-0-0-0-ref.htm new file mode 100644 index 00000000000..54b27074a1f --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-0-0-0-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-0-0-N-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-0-0-N-ref.htm new file mode 100644 index 00000000000..1fb50aeda62 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-0-0-N-ref.htm @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-0-0-N-shrink-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-0-0-N-shrink-ref.htm new file mode 100644 index 00000000000..2471adc1f0a --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-0-0-N-shrink-ref.htm @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-0-0-Npercent-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-0-0-Npercent-ref.htm new file mode 100644 index 00000000000..7026d7c06fd --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-0-0-Npercent-ref.htm @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-0-0-Npercent-shrink-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-0-0-Npercent-shrink-ref.htm new file mode 100644 index 00000000000..8c242e077e6 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-0-0-Npercent-shrink-ref.htm @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-0-0-auto-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-0-0-auto-ref.htm new file mode 100644 index 00000000000..5189a7deeec --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-0-0-auto-ref.htm @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-0-0-auto-shrink-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-0-0-auto-shrink-ref.htm new file mode 100644 index 00000000000..e6f8bfcdff2 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-0-0-auto-shrink-ref.htm @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-0-1-0-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-0-1-0-ref.htm new file mode 100644 index 00000000000..52ec2cbac00 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-0-1-0-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-0-1-N-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-0-1-N-ref.htm new file mode 100644 index 00000000000..e2e397cdd7a --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-0-1-N-ref.htm @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-0-1-N-shrink-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-0-1-N-shrink-ref.htm new file mode 100644 index 00000000000..be5edc12f19 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-0-1-N-shrink-ref.htm @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-0-1-Npercent-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-0-1-Npercent-ref.htm new file mode 100644 index 00000000000..b7af5d8ba6e --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-0-1-Npercent-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-0-1-Npercent-shrink-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-0-1-Npercent-shrink-ref.htm new file mode 100644 index 00000000000..c33bfc52720 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-0-1-Npercent-shrink-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-0-1-auto-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-0-1-auto-ref.htm new file mode 100644 index 00000000000..0c2985a539e --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-0-1-auto-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-0-1-auto-shrink-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-0-1-auto-shrink-ref.htm new file mode 100644 index 00000000000..42a9505294d --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-0-1-auto-shrink-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-0-N-0-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-0-N-0-ref.htm new file mode 100644 index 00000000000..b82623ebd0a --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-0-N-0-ref.htm @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-0-N-N-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-0-N-N-ref.htm new file mode 100644 index 00000000000..06adcdccc91 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-0-N-N-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-0-N-N-shrink-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-0-N-N-shrink-ref.htm new file mode 100644 index 00000000000..f9ea341c933 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-0-N-N-shrink-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-0-N-Npercent-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-0-N-Npercent-ref.htm new file mode 100644 index 00000000000..ed51e01508c --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-0-N-Npercent-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-0-N-Npercent-shrink-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-0-N-Npercent-shrink-ref.htm new file mode 100644 index 00000000000..b4be3de35b8 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-0-N-Npercent-shrink-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-0-N-auto-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-0-N-auto-ref.htm new file mode 100644 index 00000000000..42c3ed49590 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-0-N-auto-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-0-N-auto-shrink-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-0-N-auto-shrink-ref.htm new file mode 100644 index 00000000000..30cc2770e31 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-0-N-auto-shrink-ref.htm @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-1-0-0-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-1-0-0-ref.htm new file mode 100644 index 00000000000..18498c4d3e2 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-1-0-0-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-1-0-N-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-1-0-N-ref.htm new file mode 100644 index 00000000000..df7ae84b4d8 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-1-0-N-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-1-0-N-shrink-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-1-0-N-shrink-ref.htm new file mode 100644 index 00000000000..bc4b4f264ce --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-1-0-N-shrink-ref.htm @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-1-0-Npercent-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-1-0-Npercent-ref.htm new file mode 100644 index 00000000000..b7f696744bd --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-1-0-Npercent-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-1-0-Npercent-shrink-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-1-0-Npercent-shrink-ref.htm new file mode 100644 index 00000000000..f3430ccb248 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-1-0-Npercent-shrink-ref.htm @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-1-0-auto-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-1-0-auto-ref.htm new file mode 100644 index 00000000000..48c52d6b7e3 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-1-0-auto-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-1-0-auto-shrink-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-1-0-auto-shrink-ref.htm new file mode 100644 index 00000000000..df78cb70745 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-1-0-auto-shrink-ref.htm @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-1-1-0-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-1-1-0-ref.htm new file mode 100644 index 00000000000..d9855a96f4e --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-1-1-0-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-1-1-N-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-1-1-N-ref.htm new file mode 100644 index 00000000000..f69b823314f --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-1-1-N-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-1-1-N-shrink-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-1-1-N-shrink-ref.htm new file mode 100644 index 00000000000..9cfeb5b0a9f --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-1-1-N-shrink-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-1-1-Npercent-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-1-1-Npercent-ref.htm new file mode 100644 index 00000000000..28d2c492721 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-1-1-Npercent-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-1-1-Npercent-shrink-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-1-1-Npercent-shrink-ref.htm new file mode 100644 index 00000000000..090910a0005 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-1-1-Npercent-shrink-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-1-1-auto-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-1-1-auto-ref.htm new file mode 100644 index 00000000000..b288515d83d --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-1-1-auto-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-1-1-auto-shrink-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-1-1-auto-shrink-ref.htm new file mode 100644 index 00000000000..aba78ad9299 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-1-1-auto-shrink-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-1-N-0-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-1-N-0-ref.htm new file mode 100644 index 00000000000..70b7872fbda --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-1-N-0-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-1-N-N-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-1-N-N-ref.htm new file mode 100644 index 00000000000..f89710326cf --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-1-N-N-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-1-N-N-shrink-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-1-N-N-shrink-ref.htm new file mode 100644 index 00000000000..b4fc6d293a0 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-1-N-N-shrink-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-1-N-Npercent-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-1-N-Npercent-ref.htm new file mode 100644 index 00000000000..eb0b15ff165 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-1-N-Npercent-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-1-N-Npercent-shrink-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-1-N-Npercent-shrink-ref.htm new file mode 100644 index 00000000000..b17bbdf19f1 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-1-N-Npercent-shrink-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-1-N-auto-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-1-N-auto-ref.htm new file mode 100644 index 00000000000..a6cad7267b7 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-1-N-auto-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-1-N-auto-shrink-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-1-N-auto-shrink-ref.htm new file mode 100644 index 00000000000..770970190e1 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-1-N-auto-shrink-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-N-0-0-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-N-0-0-ref.htm new file mode 100644 index 00000000000..64e01402f69 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-N-0-0-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-N-0-N-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-N-0-N-ref.htm new file mode 100644 index 00000000000..a6fbaa9e398 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-N-0-N-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-N-0-N-shrink-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-N-0-N-shrink-ref.htm new file mode 100644 index 00000000000..ccd93aaabc3 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-N-0-N-shrink-ref.htm @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-N-0-Npercent-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-N-0-Npercent-ref.htm new file mode 100644 index 00000000000..3c33f88879d --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-N-0-Npercent-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-N-0-Npercent-shrink-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-N-0-Npercent-shrink-ref.htm new file mode 100644 index 00000000000..d9973b4938f --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-N-0-Npercent-shrink-ref.htm @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-N-0-auto-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-N-0-auto-ref.htm new file mode 100644 index 00000000000..e805fc7716c --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-N-0-auto-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-N-0-auto-shrink-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-N-0-auto-shrink-ref.htm new file mode 100644 index 00000000000..dbfe72522fe --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-N-0-auto-shrink-ref.htm @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-N-1-0-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-N-1-0-ref.htm new file mode 100644 index 00000000000..69e466e8030 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-N-1-0-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-N-1-N-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-N-1-N-ref.htm new file mode 100644 index 00000000000..c75b44643cc --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-N-1-N-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-N-1-N-shrink-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-N-1-N-shrink-ref.htm new file mode 100644 index 00000000000..10a82d19ef4 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-N-1-N-shrink-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-N-1-Npercent-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-N-1-Npercent-ref.htm new file mode 100644 index 00000000000..4a9c4bda287 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-N-1-Npercent-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-N-1-Npercent-shrink-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-N-1-Npercent-shrink-ref.htm new file mode 100644 index 00000000000..50a3acb7892 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-N-1-Npercent-shrink-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-N-1-auto-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-N-1-auto-ref.htm new file mode 100644 index 00000000000..ecf6f6d0173 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-N-1-auto-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-N-1-auto-shrink-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-N-1-auto-shrink-ref.htm new file mode 100644 index 00000000000..714b2d5cfcb --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-N-1-auto-shrink-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-N-N-0-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-N-N-0-ref.htm new file mode 100644 index 00000000000..9ba9ad75c1b --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-N-N-0-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-N-N-N-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-N-N-N-ref.htm new file mode 100644 index 00000000000..ee6271e2fbe --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-N-N-N-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-N-N-N-shrink-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-N-N-N-shrink-ref.htm new file mode 100644 index 00000000000..c4d7c454f20 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-N-N-N-shrink-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-N-N-Npercent-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-N-N-Npercent-ref.htm new file mode 100644 index 00000000000..7b9df99c406 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-N-N-Npercent-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-N-N-Npercent-shrink-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-N-N-Npercent-shrink-ref.htm new file mode 100644 index 00000000000..27a3c91d136 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-N-N-Npercent-shrink-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-N-N-auto-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-N-N-auto-ref.htm new file mode 100644 index 00000000000..ca0b014dd72 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-N-N-auto-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-N-N-auto-shrink-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-N-N-auto-shrink-ref.htm new file mode 100644 index 00000000000..b776f12fb8a --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-N-N-auto-shrink-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-auto-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-auto-ref.htm new file mode 100644 index 00000000000..0aa97640e5e --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-auto-ref.htm @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-basis-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-basis-ref.htm new file mode 100644 index 00000000000..22f9f0bd1ff --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-basis-ref.htm @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-basis-shrink-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-basis-shrink-ref.htm new file mode 100644 index 00000000000..bf05f830826 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-basis-shrink-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-formatting-interop-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-formatting-interop-ref.htm new file mode 100644 index 00000000000..ca3d577339c --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-formatting-interop-ref.htm @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-initial-2-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-initial-2-ref.htm new file mode 100644 index 00000000000..40049ff787f --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-initial-2-ref.htm @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-initial-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-initial-ref.htm new file mode 100644 index 00000000000..5e768915d43 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-initial-ref.htm @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-natural-mixed-basis-auto-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-natural-mixed-basis-auto-ref.htm new file mode 100644 index 00000000000..115390dbb5e --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-natural-mixed-basis-auto-ref.htm @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-natural-mixed-basis-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-natural-mixed-basis-ref.htm new file mode 100644 index 00000000000..f0c6c2ebfa8 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-natural-mixed-basis-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-natural-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-natural-ref.htm new file mode 100644 index 00000000000..2458bccfe8a --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-natural-ref.htm @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-natural-variable-auto-basis-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-natural-variable-auto-basis-ref.htm new file mode 100644 index 00000000000..d6e874bf569 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-natural-variable-auto-basis-ref.htm @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-natural-variable-zero-basis-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-natural-variable-zero-basis-ref.htm new file mode 100644 index 00000000000..2e501d0b5b5 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-natural-variable-zero-basis-ref.htm @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-none-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-none-ref.htm new file mode 100644 index 00000000000..e81b1c3a92c --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-none-ref.htm @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flex-unitless-basis-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-unitless-basis-ref.htm new file mode 100644 index 00000000000..ea8cbabaab5 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flex-unitless-basis-ref.htm @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flow-column-reverse-wrap-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flow-column-reverse-wrap-ref.htm new file mode 100644 index 00000000000..f1fbf68a590 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flow-column-reverse-wrap-ref.htm @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flow-column-reverse-wrap-reverse-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flow-column-reverse-wrap-reverse-ref.htm new file mode 100644 index 00000000000..422a881eb57 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flow-column-reverse-wrap-reverse-ref.htm @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flow-column-wrap-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flow-column-wrap-ref.htm new file mode 100644 index 00000000000..0cbb8142ce2 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flow-column-wrap-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flow-column-wrap-reverse-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flow-column-wrap-reverse-ref.htm new file mode 100644 index 00000000000..f05c2306a1d --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flow-column-wrap-reverse-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flow-row-wrap-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flow-row-wrap-ref.htm new file mode 100644 index 00000000000..eaf2a17dec5 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flow-row-wrap-ref.htm @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_flow-row-wrap-reverse-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flow-row-wrap-reverse-ref.htm new file mode 100644 index 00000000000..dbd3ab9001c --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_flow-row-wrap-reverse-ref.htm @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_generated-container-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_generated-container-ref.htm new file mode 100644 index 00000000000..8da8b47ade0 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_generated-container-ref.htm @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_generated-flex-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_generated-flex-ref.htm new file mode 100644 index 00000000000..10199949958 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_generated-flex-ref.htm @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_generated-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_generated-ref.htm new file mode 100644 index 00000000000..b439ba1ce3e --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_generated-ref.htm @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_inline-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_inline-ref.htm new file mode 100644 index 00000000000..0c16d2ca6db --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_inline-ref.htm @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_item-bottom-float-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_item-bottom-float-ref.htm new file mode 100644 index 00000000000..47fd805d32f --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_item-bottom-float-ref.htm @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_item-clear-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_item-clear-ref.htm new file mode 100644 index 00000000000..fc324137801 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_item-clear-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_item-float-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_item-float-ref.htm new file mode 100644 index 00000000000..6357dd0a55c --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_item-float-ref.htm @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_item-top-float-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_item-top-float-ref.htm new file mode 100644 index 00000000000..2156ea31c28 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_item-top-float-ref.htm @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_item-vertical-align-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_item-vertical-align-ref.htm new file mode 100644 index 00000000000..8bfa37cd8d7 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_item-vertical-align-ref.htm @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_justifycontent-center-overflow-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_justifycontent-center-overflow-ref.htm new file mode 100644 index 00000000000..f87f2f0f5a3 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_justifycontent-center-overflow-ref.htm @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_justifycontent-center-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_justifycontent-center-ref.htm new file mode 100644 index 00000000000..627042f0695 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_justifycontent-center-ref.htm @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_justifycontent-flex-end-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_justifycontent-flex-end-ref.htm new file mode 100644 index 00000000000..454ccc7c4cd --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_justifycontent-flex-end-ref.htm @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_justifycontent-flex-start-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_justifycontent-flex-start-ref.htm new file mode 100644 index 00000000000..b044dd9360e --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_justifycontent-flex-start-ref.htm @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_justifycontent-spacearound-negative-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_justifycontent-spacearound-negative-ref.htm new file mode 100644 index 00000000000..a973969338f --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_justifycontent-spacearound-negative-ref.htm @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_justifycontent-spacearound-only-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_justifycontent-spacearound-only-ref.htm new file mode 100644 index 00000000000..3da21863e22 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_justifycontent-spacearound-only-ref.htm @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_justifycontent-spacearound-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_justifycontent-spacearound-ref.htm new file mode 100644 index 00000000000..c10e2327541 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_justifycontent-spacearound-ref.htm @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_justifycontent-spacebetween-negative-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_justifycontent-spacebetween-negative-ref.htm new file mode 100644 index 00000000000..9ca683f40ed --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_justifycontent-spacebetween-negative-ref.htm @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_justifycontent-spacebetween-only-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_justifycontent-spacebetween-only-ref.htm new file mode 100644 index 00000000000..7e929fd2a3c --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_justifycontent-spacebetween-only-ref.htm @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_justifycontent-spacebetween-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_justifycontent-spacebetween-ref.htm new file mode 100644 index 00000000000..f65dcd3be59 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_justifycontent-spacebetween-ref.htm @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_margin-auto-overflow-2-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_margin-auto-overflow-2-ref.htm new file mode 100644 index 00000000000..6d064de7de5 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_margin-auto-overflow-2-ref.htm @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_margin-auto-overflow-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_margin-auto-overflow-ref.htm new file mode 100644 index 00000000000..226c9e7a3d4 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_margin-auto-overflow-ref.htm @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_margin-auto-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_margin-auto-ref.htm new file mode 100644 index 00000000000..a4746806fec --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_margin-auto-ref.htm @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_margin-collapse-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_margin-collapse-ref.htm new file mode 100644 index 00000000000..6312dcded2a --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_margin-collapse-ref.htm @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_margin-left-ex-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_margin-left-ex-ref.htm new file mode 100644 index 00000000000..fbb938fd065 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_margin-left-ex-ref.htm @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_margin-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_margin-ref.htm new file mode 100644 index 00000000000..28982fb4d0e --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_margin-ref.htm @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_min-height-auto-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_min-height-auto-ref.htm new file mode 100644 index 00000000000..dedac10a36f --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_min-height-auto-ref.htm @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_min-width-auto-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_min-width-auto-ref.htm new file mode 100644 index 00000000000..a18b3b851fc --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_min-width-auto-ref.htm @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_object-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_object-ref.htm new file mode 100644 index 00000000000..8c5487bf187 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_object-ref.htm @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_order-abspos-space-around-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_order-abspos-space-around-ref.htm new file mode 100644 index 00000000000..d788e498b8f --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_order-abspos-space-around-ref.htm @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_order-box-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_order-box-ref.htm new file mode 100644 index 00000000000..5da1dd81160 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_order-box-ref.htm @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_order-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_order-ref.htm new file mode 100644 index 00000000000..474a07c288a --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_order-ref.htm @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_rowspan-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_rowspan-ref.htm new file mode 100644 index 00000000000..171804acea4 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_rowspan-ref.htm @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_rtl-direction-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_rtl-direction-ref.htm new file mode 100644 index 00000000000..4cd4fcfb945 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_rtl-direction-ref.htm @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_rtl-flow-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_rtl-flow-ref.htm new file mode 100644 index 00000000000..2508fb2a293 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_rtl-flow-ref.htm @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_rtl-flow-reverse-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_rtl-flow-reverse-ref.htm new file mode 100644 index 00000000000..6629ccc0fd0 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_rtl-flow-reverse-ref.htm @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_rtl-order-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_rtl-order-ref.htm new file mode 100644 index 00000000000..7773686d3eb --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_rtl-order-ref.htm @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_stf-table-singleline-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_stf-table-singleline-ref.htm new file mode 100644 index 00000000000..8db98f6140f --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_stf-table-singleline-ref.htm @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_visibility-collapse-line-wrapping-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_visibility-collapse-line-wrapping-ref.htm new file mode 100644 index 00000000000..7abf4650733 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_visibility-collapse-line-wrapping-ref.htm @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_visibility-collapse-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_visibility-collapse-ref.htm new file mode 100644 index 00000000000..10e34dbd613 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_visibility-collapse-ref.htm @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_wrap-long-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_wrap-long-ref.htm new file mode 100644 index 00000000000..0c50393df02 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_wrap-long-ref.htm @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_wrap-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_wrap-ref.htm new file mode 100644 index 00000000000..d990b941f6d --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_wrap-ref.htm @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_wrap-reverse-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_wrap-reverse-ref.htm new file mode 100644 index 00000000000..a84d11cf586 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_wrap-reverse-ref.htm @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html><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/html/reference/flexbox_writing_mode_vertical_lays_out_contents_from_top_to_bottom-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_writing_mode_vertical_lays_out_contents_from_top_to_bottom-ref.htm new file mode 100644 index 00000000000..9614d00dc5a --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/flexbox_writing_mode_vertical_lays_out_contents_from_top_to_bottom-ref.htm @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<html><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/html/reference/justify-content-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/justify-content-001-ref.htm new file mode 100644 index 00000000000..a8cde55b53c --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/justify-content-001-ref.htm @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html><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/html/reference/multi-line-wrap-reverse-column-reverse-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/multi-line-wrap-reverse-column-reverse-ref.htm new file mode 100644 index 00000000000..98a051c3d1b --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/multi-line-wrap-reverse-column-reverse-ref.htm @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<html><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/html/reference/multi-line-wrap-reverse-row-reverse-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/multi-line-wrap-reverse-row-reverse-ref.htm new file mode 100644 index 00000000000..e8378e4664e --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/multi-line-wrap-reverse-row-reverse-ref.htm @@ -0,0 +1,73 @@ +<!DOCTYPE html> +<html><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/html/reference/multi-line-wrap-with-column-reverse-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/multi-line-wrap-with-column-reverse-ref.htm new file mode 100644 index 00000000000..9d6fe9bb02a --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/multi-line-wrap-with-column-reverse-ref.htm @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<html><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/html/reference/multi-line-wrap-with-row-reverse-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/multi-line-wrap-with-row-reverse-ref.htm new file mode 100644 index 00000000000..d9c77d2b6a1 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/multi-line-wrap-with-row-reverse-ref.htm @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html><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/html/reference/order-with-column-reverse-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/order-with-column-reverse-ref.htm new file mode 100644 index 00000000000..883e8805a5c --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/order-with-column-reverse-ref.htm @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html><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/html/reference/order-with-row-reverse-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/order-with-row-reverse-ref.htm new file mode 100644 index 00000000000..885be82017b --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/order-with-row-reverse-ref.htm @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html><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/html/reference/ref-filled-green-100px-square.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/ref-filled-green-100px-square.htm new file mode 100644 index 00000000000..04df34eb50c --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/ref-filled-green-100px-square.htm @@ -0,0 +1,19 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <style type="text/css"> + 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/html/reference/regions-flexbox-001-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/regions-flexbox-001-ref.htm new file mode 100644 index 00000000000..e838ccaf917 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/regions-flexbox-001-ref.htm @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html><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/html/reference/regions-flexbox-002-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/regions-flexbox-002-ref.htm new file mode 100644 index 00000000000..fd8ffe8c91e --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/regions-flexbox-002-ref.htm @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html><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/html/reference/row-flexbox-break-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/row-flexbox-break-ref.htm new file mode 100644 index 00000000000..e0263acaacd --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/row-flexbox-break-ref.htm @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html><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/html/reference/support/1x1-green.png b/tests/wpt/css-tests/css-flexbox-1_dev/html/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/html/reference/support/1x1-green.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/support/1x1-lime.png b/tests/wpt/css-tests/css-flexbox-1_dev/html/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/html/reference/support/1x1-lime.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/support/1x1-maroon.png b/tests/wpt/css-tests/css-flexbox-1_dev/html/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/html/reference/support/1x1-maroon.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/support/1x1-navy.png b/tests/wpt/css-tests/css-flexbox-1_dev/html/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/html/reference/support/1x1-navy.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/support/1x1-red.png b/tests/wpt/css-tests/css-flexbox-1_dev/html/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/html/reference/support/1x1-red.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/support/1x1-white.png b/tests/wpt/css-tests/css-flexbox-1_dev/html/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/html/reference/support/1x1-white.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/support/60x60-gg-rr.png b/tests/wpt/css-tests/css-flexbox-1_dev/html/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/html/reference/support/60x60-gg-rr.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/support/60x60-green.png b/tests/wpt/css-tests/css-flexbox-1_dev/html/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/html/reference/support/60x60-green.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/support/60x60-red.png b/tests/wpt/css-tests/css-flexbox-1_dev/html/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/html/reference/support/60x60-red.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/support/README b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/support/README new file mode 100644 index 00000000000..69d1737bead --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/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/html/reference/support/a-green.css b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/support/a-green.css new file mode 100644 index 00000000000..b0dbb071d5b --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/support/a-green.css @@ -0,0 +1 @@ +.a { color: green; } diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/support/ahem.css b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/support/ahem.css new file mode 100644 index 00000000000..0d4bcedc21b --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/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/html/reference/support/b-green.css b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/support/b-green.css new file mode 100644 index 00000000000..a0473f5ca26 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/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/html/reference/support/c-red.css b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/support/c-red.css new file mode 100644 index 00000000000..d4ba5c64e95 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/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/html/reference/support/cat.png b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/support/cat.png Binary files differnew file mode 100644 index 00000000000..85dd7324815 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/support/cat.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/support/import-green.css b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/support/import-green.css new file mode 100644 index 00000000000..537104e6633 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/support/import-green.css @@ -0,0 +1 @@ +.import { color: green; } diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/support/import-red.css b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/support/import-red.css new file mode 100644 index 00000000000..9945ef47114 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/support/import-red.css @@ -0,0 +1 @@ +.import { color: red; } diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/support/pattern-gg-gr.png b/tests/wpt/css-tests/css-flexbox-1_dev/html/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/html/reference/support/pattern-gg-gr.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/support/pattern-grg-rgr-grg.png b/tests/wpt/css-tests/css-flexbox-1_dev/html/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/html/reference/support/pattern-grg-rgr-grg.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/support/pattern-grg-rrg-rgg.png b/tests/wpt/css-tests/css-flexbox-1_dev/html/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/html/reference/support/pattern-grg-rrg-rgg.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/support/pattern-rgr-grg-rgr.png b/tests/wpt/css-tests/css-flexbox-1_dev/html/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/html/reference/support/pattern-rgr-grg-rgr.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/support/pattern-tr.png b/tests/wpt/css-tests/css-flexbox-1_dev/html/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/html/reference/support/pattern-tr.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/support/ruler-h-50%.png b/tests/wpt/css-tests/css-flexbox-1_dev/html/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/html/reference/support/ruler-h-50%.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/support/ruler-h-50px.png b/tests/wpt/css-tests/css-flexbox-1_dev/html/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/html/reference/support/ruler-h-50px.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/support/ruler-v-100px.png b/tests/wpt/css-tests/css-flexbox-1_dev/html/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/html/reference/support/ruler-v-100px.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/support/ruler-v-50px.png b/tests/wpt/css-tests/css-flexbox-1_dev/html/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/html/reference/support/ruler-v-50px.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/support/solidblue.png b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/support/solidblue.png Binary files differnew file mode 100644 index 00000000000..8584a701a80 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/support/solidblue.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/support/square-purple.png b/tests/wpt/css-tests/css-flexbox-1_dev/html/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/html/reference/support/square-purple.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/support/square-teal.png b/tests/wpt/css-tests/css-flexbox-1_dev/html/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/html/reference/support/square-teal.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/support/square-white.png b/tests/wpt/css-tests/css-flexbox-1_dev/html/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/html/reference/support/square-white.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/support/swatch-blue.png b/tests/wpt/css-tests/css-flexbox-1_dev/html/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/html/reference/support/swatch-blue.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/support/swatch-green.png b/tests/wpt/css-tests/css-flexbox-1_dev/html/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/html/reference/support/swatch-green.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/support/swatch-lime.png b/tests/wpt/css-tests/css-flexbox-1_dev/html/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/html/reference/support/swatch-lime.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/support/swatch-orange.png b/tests/wpt/css-tests/css-flexbox-1_dev/html/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/html/reference/support/swatch-orange.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/support/swatch-red.png b/tests/wpt/css-tests/css-flexbox-1_dev/html/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/html/reference/support/swatch-red.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/support/swatch-teal.png b/tests/wpt/css-tests/css-flexbox-1_dev/html/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/html/reference/support/swatch-teal.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/support/swatch-white.png b/tests/wpt/css-tests/css-flexbox-1_dev/html/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/html/reference/support/swatch-white.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/support/swatch-yellow.png b/tests/wpt/css-tests/css-flexbox-1_dev/html/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/html/reference/support/swatch-yellow.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/support/test-bl.png b/tests/wpt/css-tests/css-flexbox-1_dev/html/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/html/reference/support/test-bl.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/support/test-br.png b/tests/wpt/css-tests/css-flexbox-1_dev/html/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/html/reference/support/test-br.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/support/test-inner-half-size.png b/tests/wpt/css-tests/css-flexbox-1_dev/html/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/html/reference/support/test-inner-half-size.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/support/test-outer.png b/tests/wpt/css-tests/css-flexbox-1_dev/html/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/html/reference/support/test-outer.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/support/test-style.css b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/support/test-style.css new file mode 100644 index 00000000000..f2ffea039b1 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/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/html/reference/support/test-tl.png b/tests/wpt/css-tests/css-flexbox-1_dev/html/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/html/reference/support/test-tl.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/support/test-tr.png b/tests/wpt/css-tests/css-flexbox-1_dev/html/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/html/reference/support/test-tr.png diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/ttwf-reftest-flex-align-content-center-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/ttwf-reftest-flex-align-content-center-ref.htm new file mode 100644 index 00000000000..7be0d724035 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/ttwf-reftest-flex-align-content-center-ref.htm @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html><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/html/reference/ttwf-reftest-flex-align-content-end-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/ttwf-reftest-flex-align-content-end-ref.htm new file mode 100644 index 00000000000..065be45c30a --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/ttwf-reftest-flex-align-content-end-ref.htm @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html><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/html/reference/ttwf-reftest-flex-base-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/ttwf-reftest-flex-base-ref.htm new file mode 100644 index 00000000000..45ef984917a --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/ttwf-reftest-flex-base-ref.htm @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html><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/html/reference/ttwf-reftest-flex-direction-column-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/ttwf-reftest-flex-direction-column-ref.htm new file mode 100644 index 00000000000..ad659763054 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/ttwf-reftest-flex-direction-column-ref.htm @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html><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/html/reference/ttwf-reftest-flex-direction-row-reverse-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/ttwf-reftest-flex-direction-row-reverse-ref.htm new file mode 100644 index 00000000000..f77e64aa25a --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/ttwf-reftest-flex-direction-row-reverse-ref.htm @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html><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/html/reference/ttwf-reftest-flex-inline-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/ttwf-reftest-flex-inline-ref.htm new file mode 100644 index 00000000000..486357b487e --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/ttwf-reftest-flex-inline-ref.htm @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html><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/html/reference/ttwf-reftest-flex-order-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/ttwf-reftest-flex-order-ref.htm new file mode 100644 index 00000000000..16bcbbe5dfe --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/ttwf-reftest-flex-order-ref.htm @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html><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/html/reference/ttwf-reftest-flex-wrap-reverse-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/ttwf-reftest-flex-wrap-reverse-ref.htm new file mode 100644 index 00000000000..85ac0a564a8 --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/ttwf-reftest-flex-wrap-reverse-ref.htm @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html><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/html/reference/visibility-regions-in-flexbox-ref.htm b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/visibility-regions-in-flexbox-ref.htm new file mode 100644 index 00000000000..ccd3b51f60b --- /dev/null +++ b/tests/wpt/css-tests/css-flexbox-1_dev/html/reference/visibility-regions-in-flexbox-ref.htm @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html><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 |
