aboutsummaryrefslogtreecommitdiffstats
path: root/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference
diff options
context:
space:
mode:
authorMs2ger <Ms2ger@gmail.com>2017-02-06 11:06:12 +0100
committerMs2ger <Ms2ger@gmail.com>2017-02-06 22:38:29 +0100
commit296fa2512ba2fbc8f1d6b7e82e30ad3b5d2a9a20 (patch)
tree95ac50cd05fa8a22d1c0fa12016ee0d2012a165c /tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference
parentfb4f421c8b9cbf80a86c9c5eb88395d7008b27a1 (diff)
downloadservo-296fa2512ba2fbc8f1d6b7e82e30ad3b5d2a9a20.tar.gz
servo-296fa2512ba2fbc8f1d6b7e82e30ad3b5d2a9a20.zip
Update web-platform-tests and CSS tests.
- Update CSS tests to revision e05bfd5e30ed662c2f8a353577003f8eed230180. - Update web-platform-tests to revision a052787dd5c069a340031011196b73affbd68cd9.
Diffstat (limited to 'tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference')
-rw-r--r--tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/css-box-justify-content-ref.xht2
-rw-r--r--tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-align-content-horiz-001-ref.xht48
-rw-r--r--tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-align-content-vert-001-ref.xht48
-rw-r--r--tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-align-self-baseline-horiz-001-ref.xht3
-rw-r--r--tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-align-self-baseline-horiz-006-ref.xht42
-rw-r--r--tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-align-self-baseline-horiz-007-ref.xht35
-rw-r--r--tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-align-self-horiz-001-ref.xht10
-rw-r--r--tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-align-self-vert-001-ref.xht16
-rw-r--r--tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-align-self-vert-rtl-001-ref.xht16
-rw-r--r--tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-baseline-empty-001-ref.xht25
-rw-r--r--tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-baseline-single-item-001-ref.xht17
-rw-r--r--tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-basic-textarea-horiz-001-ref.xht3
-rw-r--r--tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-justify-content-horiz-001-ref.xht33
-rw-r--r--tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-justify-content-horiz-002-ref.xht33
-rw-r--r--tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-justify-content-horiz-003-ref.xht33
-rw-r--r--tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-justify-content-horiz-004-ref.xht33
-rw-r--r--tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-justify-content-horiz-005-ref.xht51
-rw-r--r--tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-justify-content-vert-001-ref.xht33
-rw-r--r--tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-justify-content-vert-002-ref.xht33
-rw-r--r--tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-justify-content-vert-003-ref.xht33
-rw-r--r--tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-justify-content-vert-004-ref.xht33
-rw-r--r--tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-justify-content-vert-005-ref.xht33
-rw-r--r--tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-single-line-clamp-1-ref.xht26
-rw-r--r--tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-single-line-clamp-2-ref.xht26
-rw-r--r--tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-single-line-clamp-3-ref.xht30
-rw-r--r--tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-whitespace-handling-001-ref.xht2
-rw-r--r--tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/layout-algorithm_algo-cross-line-001-ref.xht28
-rw-r--r--tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/layout-algorithm_algo-cross-line-002-ref.xht27
-rw-r--r--tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/negative-margins-001-ref.xht19
-rw-r--r--tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/order-with-row-reverse-ref.xht4
-rw-r--r--tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/ref-pass-body.xht8
-rw-r--r--tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/support/100x50-green.pngbin0 -> 207 bytes
-rw-r--r--tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/support/50x100-green.pngbin0 -> 202 bytes
-rw-r--r--tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/support/ortho-htb-alongside-vrl-floats-002-exp-res.pngbin0 -> 3501 bytes
-rw-r--r--tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/support/text-orientation-012.pngbin0 -> 5113 bytes
-rw-r--r--tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/support/wm-propagation-body-003-exp-res.pngbin0 -> 4379 bytes
36 files changed, 737 insertions, 46 deletions
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/css-box-justify-content-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/css-box-justify-content-ref.xht
index 7848d9623c0..09b0d3a1e6c 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/css-box-justify-content-ref.xht
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/css-box-justify-content-ref.xht
@@ -1,6 +1,6 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>flexbox |css-box-justify-content</title>
-<link href="ava656094@gmail.com" rel="author" title="xiaoxia" />
+<link href="mailto:ava656094@gmail.com" rel="author" title="xiaoxia" />
<style>
#flexbox {
background: green;
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-align-content-horiz-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-align-content-horiz-001-ref.xht
index bfd358635ba..8e24d507dc3 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-align-content-horiz-001-ref.xht
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-align-content-horiz-001-ref.xht
@@ -69,7 +69,7 @@
<!-- flex-end -->
<div class="flexbox">
- <div class="a"/>
+ <div class="a" style="margin-top: 190px"/>
</div>
<div class="flexbox">
<div class="a" style="margin-top: 160px"/>
@@ -83,7 +83,7 @@
<!-- center -->
<div class="flexbox">
- <div class="a"/>
+ <div class="a" style="margin-top: 95px"/>
</div>
<div class="flexbox">
<div class="a" style="margin-top: 80px"/>
@@ -111,7 +111,7 @@
<!-- space-around -->
<div class="flexbox">
- <div class="a"/>
+ <div class="a" style="margin-top: 95px"/>
</div>
<div class="flexbox">
<div class="a" style="margin-top: 40px"/>
@@ -123,5 +123,47 @@
<div class="c" style="margin-top: 40px"/>
</div>
+ <!-- space-evenly -->
+ <div class="flexbox">
+ <div class="a" style="margin-top: 95px"/>
+ </div>
+ <div class="flexbox">
+ <div class="a" style="margin-top: calc(160px / 3)"/>
+ <div class="b" style="margin-top: calc(160px / 3)"><div class="fixedSizeChild"/></div>
+ </div>
+ <div class="flexbox">
+ <div class="a" style="margin-top: 30px"/>
+ <div class="b" style="margin-top: 30px"><div class="fixedSizeChild"/></div>
+ <div class="c" style="margin-top: 30px"/>
+ </div>
+
+ <!-- left -->
+ <div class="flexbox">
+ <div class="a"/>
+ </div>
+ <div class="flexbox">
+ <div class="a"/>
+ <div class="b"><div class="fixedSizeChild"/></div>
+ </div>
+ <div class="flexbox">
+ <div class="a"/>
+ <div class="b"><div class="fixedSizeChild"/></div>
+ <div class="c"/>
+ </div>
+
+ <!-- right -->
+ <div class="flexbox">
+ <div class="a"/>
+ </div>
+ <div class="flexbox">
+ <div class="a"/>
+ <div class="b"><div class="fixedSizeChild"/></div>
+ </div>
+ <div class="flexbox">
+ <div class="a"/>
+ <div class="b"><div class="fixedSizeChild"/></div>
+ <div class="c"/>
+ </div>
+
</body>
</html> \ No newline at end of file
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-align-content-vert-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-align-content-vert-001-ref.xht
index 316e9a7e3e5..1a6d1c2ec09 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-align-content-vert-001-ref.xht
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-align-content-vert-001-ref.xht
@@ -72,7 +72,7 @@
<!-- flex-end -->
<div class="flexbox">
- <div class="a"/>
+ <div class="a" style="margin-left: 190px"/>
</div>
<div class="flexbox">
<div class="a" style="margin-left: 160px"/>
@@ -86,7 +86,7 @@
<!-- center -->
<div class="flexbox">
- <div class="a"/>
+ <div class="a" style="margin-left: 95px"/>
</div>
<div class="flexbox">
<div class="a" style="margin-left: 80px"/>
@@ -114,7 +114,7 @@
<!-- space-around -->
<div class="flexbox">
- <div class="a"/>
+ <div class="a" style="margin-left: 95px"/>
</div>
<div class="flexbox">
<div class="a" style="margin-left: 40px"/>
@@ -126,5 +126,47 @@
<div class="c" style="margin-left: 40px"/>
</div>
+ <!-- space-evenly -->
+ <div class="flexbox">
+ <div class="a" style="margin-left: 95px"/>
+ </div>
+ <div class="flexbox">
+ <div class="a" style="margin-left: calc(160px / 3)"/>
+ <div class="b" style="margin-left: calc(160px / 3)"><div class="fixedSizeChild"/></div>
+ </div>
+ <div class="flexbox">
+ <div class="a" style="margin-left: 30px"/>
+ <div class="b" style="margin-left: 30px"><div class="fixedSizeChild"/></div>
+ <div class="c" style="margin-left: 30px"/>
+ </div>
+
+ <!-- left -->
+ <div class="flexbox">
+ <div class="a"/>
+ </div>
+ <div class="flexbox">
+ <div class="a"/>
+ <div class="b"><div class="fixedSizeChild"/></div>
+ </div>
+ <div class="flexbox">
+ <div class="a"/>
+ <div class="b"><div class="fixedSizeChild"/></div>
+ <div class="c"/>
+ </div>
+
+ <!-- right -->
+ <div class="flexbox">
+ <div class="a" style="margin-left: 190px"/>
+ </div>
+ <div class="flexbox">
+ <div class="a" style="margin-left: 160px"/>
+ <div class="b"><div class="fixedSizeChild"/></div>
+ </div>
+ <div class="flexbox">
+ <div class="a" style="margin-left: 120px"/>
+ <div class="b"><div class="fixedSizeChild"/></div>
+ <div class="c"/>
+ </div>
+
</body>
</html> \ No newline at end of file
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-align-self-baseline-horiz-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-align-self-baseline-horiz-001-ref.xht
index 827c5fc55e1..d114f9ae50b 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-align-self-baseline-horiz-001-ref.xht
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-align-self-baseline-horiz-001-ref.xht
@@ -51,5 +51,8 @@
<i>ital<br/>ic</i>
</table>
</div>
+ <div class="flexbox">
+ <div class="lime">blk_1line</div><div class="yellow">blk<br/>2lines</div><div class="orange"><span class="super">super</span></div><div class="pink"><span class="sub">sub</span></div><div class="aqua big">big<br/>text<br/>3lines</div><div class="tan"><i>ital<br/>ic</i></div>
+ </div>
</body>
</html> \ No newline at end of file
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-align-self-baseline-horiz-006-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-align-self-baseline-horiz-006-ref.xht
new file mode 100644
index 00000000000..5d70a4335f2
--- /dev/null
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-align-self-baseline-horiz-006-ref.xht
@@ -0,0 +1,42 @@
+<!--
+ 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 when tested against content with an orthogonal writing-mode.
+--><html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/>
+ <style>
+ .container {
+ display: flex;
+ border: 1px dashed blue;
+ font: 14px sans-serif;
+ height: 50px;
+ }
+
+ .ortho { writing-mode: vertical-rl;
+ width: 17px;
+ height: 40px;
+ float: left; }
+ .offset { margin-top: 10px;
+ margin-bottom: 3px; }
+
+ .start { align-self: flex-start; }
+ .end { align-self: flex-end; }
+
+ .lime { background: lime; }
+ .yellow { background: yellow; }
+ .orange { background: orange; }
+ .pink { background: pink; }
+ </style>
+ </head>
+ <body>
+ <div class="container">
+ <div class="lime ortho start">ortho</div><div class="yellow offset start">one line</div><div class="orange offset start">two<br/>lines</div><div class="pink offset start">offset</div>
+ </div>
+ <div class="container">
+ <div class="lime ortho end">ortho</div><div class="yellow offset end">one line</div><div class="orange offset end">two<br/>lines</div><div class="pink offset end">offset</div>
+ </div>
+ </body>
+</html> \ No newline at end of file
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-align-self-baseline-horiz-007-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-align-self-baseline-horiz-007-ref.xht
new file mode 100644
index 00000000000..528fae4ccaa
--- /dev/null
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-align-self-baseline-horiz-007-ref.xht
@@ -0,0 +1,35 @@
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+--><!-- Reference case for behavior of 'baseline' and 'last baseline' values
+ for align-items and align-self.
+--><html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <title>CSS Reftest Reference</title>
+ <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/>
+ <style>
+ .container {
+ display: flex;
+ border: 1px dashed blue;
+ font: 14px sans-serif;
+ height: 50px;
+ }
+
+ .start { align-self: flex-start; }
+ .end { align-self: flex-end; }
+
+ .offset { margin-top: 10px;
+ margin-bottom: 3px; }
+
+ .lime { background: lime; }
+ .yellow { background: yellow; }
+ .orange { background: orange; }
+ .pink { background: pink; }
+ </style>
+ </head>
+ <body>
+ <div class="container">
+ <div class="lime offset start">one line (first)</div><div class="yellow offset end">one line (last)</div><div class="orange offset end">two<br/>lines and offset (last)</div><div class="pink offset start">offset (first)</div>
+ </div>
+ </body>
+</html> \ No newline at end of file
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-align-self-horiz-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-align-self-horiz-001-ref.xht
index 997c6ab6141..384d7bda4ba 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-align-self-horiz-001-ref.xht
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-align-self-horiz-001-ref.xht
@@ -11,7 +11,7 @@
.flexbox {
border: 1px dashed blue;
height: 200px;
- width: 560px;
+ width: 640px;
font-size: 10px;
line-height: 10px;
}
@@ -55,6 +55,12 @@
.inherit {
background: violet;
}
+ .left {
+ background: tan;
+ }
+ .right {
+ background: brown;
+ }
</style>
</head>
<body>
@@ -80,6 +86,8 @@
<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 class="left">left</div>
+ <div class="right">right</div>
</div>
</body>
</html> \ No newline at end of file
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-align-self-vert-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-align-self-vert-001-ref.xht
index 42ee5d3c0e2..7d702276669 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-align-self-vert-001-ref.xht
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-align-self-vert-001-ref.xht
@@ -60,6 +60,14 @@
background: violet;
float: right;
}
+ .left {
+ background: tan;
+ float: left;
+ }
+ .right {
+ background: brown;
+ 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
@@ -97,10 +105,12 @@
<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
+ <div class="left">left</div>
+ <div class="right">right</div>
+ <!-- Since the last three divs are floated, the container doesn't include
+ their heights 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>
+ <span style="visibility:hidden">hacky text<br/>(line 2)<br/>(line 3)</span>
</div>
</body>
</html> \ No newline at end of file
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-align-self-vert-rtl-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-align-self-vert-rtl-001-ref.xht
index 684735704d4..88b6762027d 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-align-self-vert-rtl-001-ref.xht
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-align-self-vert-rtl-001-ref.xht
@@ -63,6 +63,14 @@
background: violet;
float: left;
}
+ .left {
+ background: tan;
+ float: left;
+ }
+ .right {
+ background: brown;
+ 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
@@ -100,10 +108,12 @@
<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
+ <div class="left">left</div>
+ <div class="right">right</div>
+ <!-- Since the last three divs are floated, the container doesn't include
+ their heights 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>
+ <span style="visibility:hidden">hacky text<br/>(line 2)<br/>(line 3)</span>
</div>
</body>
</html> \ No newline at end of file
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-baseline-empty-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-baseline-empty-001-ref.xht
index 4cb1edc6c63..5261dd57cd4 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-baseline-empty-001-ref.xht
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-baseline-empty-001-ref.xht
@@ -3,9 +3,7 @@
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
--><!-- In this reference case, we have inline-blocks instead of inline
- flex containers. We stick an Ahem whitespace character in each
- inline-block, with a customized line-height to make the baseline
- end up at the bottom of the inline-block's content-box. --><html xmlns="http://www.w3.org/1999/xhtml"><head>
+ flex containers. Otherwise it's the same. --><html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Reftest Reference</title>
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" />
<meta charset="utf-8" />
@@ -18,13 +16,6 @@
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.) */
@@ -33,14 +24,12 @@
</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">&#xA0;</div>
- <div style="padding-bottom: 20px" class="flexContainer">&#xA0;</div>
- <div style="padding: 10px" class="flexContainer">&#xA0;</div>
- <div style="border-width: 3px" class="flexContainer">&#xA0;</div>
- <div style="border-bottom-width: 4px" class="flexContainer">&#xA0;</div>
+ <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>
+ <div style="border-bottom-width: 4px; margin: 2px" class="flexContainer"></div>
</body></html> \ No newline at end of file
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-baseline-single-item-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-baseline-single-item-001-ref.xht
index 93c783c4261..858a3d2506e 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-baseline-single-item-001-ref.xht
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-baseline-single-item-001-ref.xht
@@ -7,14 +7,22 @@
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert" />
<meta charset="utf-8" />
<style>
+ body {
+ font: 14px serif;
+ }
.flexContainer {
display: inline-block;
height: 16px;
width: 16px;
- background: purple;
+ background: pink;
border: 0px dotted black;
/* (Elements that want a border will set their border-width.) */
}
+ .abs {
+ position: absolute;
+ top: 0;
+ font-size: 8px;
+ }
</style>
</head>
<body>
@@ -24,6 +32,11 @@
<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>
+ <div style="padding: 4px" class="flexContainer">
+ <!-- (An abspos child shouldn't prevent us from getting our baseline from
+ the first flex item, which happens to be the second child.) -->
+ <div class="abs">abs</div>
+ <div style="font: 26px serif">a</div>
-</body></html> \ No newline at end of file
+</div></body></html> \ No newline at end of file
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-basic-textarea-horiz-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-basic-textarea-horiz-001-ref.xht
index 7a6934989d2..eefc09c08bc 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-basic-textarea-horiz-001-ref.xht
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-basic-textarea-horiz-001-ref.xht
@@ -19,6 +19,7 @@
border-radius: 0;
border: 1px dotted green;
padding: 0;
+ margin: 0;
}
</style>
</head>
@@ -27,7 +28,7 @@
<textarea/>
</div>
- <div class="flexbox" style="height: 24px">
+ <div class="flexbox" style="height: 22px"><!-- height of textarea's border-box -->
some words
<textarea style="float:right"/>
</div>
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-justify-content-horiz-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-justify-content-horiz-001-ref.xht
index 5077b96babd..bff4e5112e1 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-justify-content-horiz-001-ref.xht
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-justify-content-horiz-001-ref.xht
@@ -98,5 +98,38 @@
<div class="a" style="margin-left: calc(40px / 6)"/><div class="b" style="margin-left: calc(40px / 3)"/><div class="c" style="margin-left: calc(40px / 3)"/>
</div>
+ <!-- space-evenly -->
+ <div class="flexbox">
+ <div class="a" style="margin-left: 95px"/>
+ </div>
+ <div class="flexbox">
+ <div class="a" style="margin-left: calc(140px / 3)"/><div class="b" style="margin-left: calc(140px / 3)"/>
+ </div>
+ <div class="flexbox">
+ <div class="a" style="margin-left: 10px"/><div class="b" style="margin-left: 10px"/><div class="c" style="margin-left: 10px"/>
+ </div>
+
+ <!-- left -->
+ <div class="flexbox">
+ <div class="a"/>
+ </div>
+ <div class="flexbox">
+ <div class="a"/><div class="b"/>
+ </div>
+ <div class="flexbox">
+ <div class="a"/><div class="b"/><div class="c"/>
+ </div>
+
+ <!-- right -->
+ <div class="flexbox">
+ <div class="a" style="margin-left: 190px"/>
+ </div>
+ <div class="flexbox">
+ <div class="a" style="margin-left: 140px"/><div class="b"/>
+ </div>
+ <div class="flexbox">
+ <div class="a" style="margin-left: 40px"/><div class="b"/><div class="c"/>
+ </div>
+
</body>
</html> \ No newline at end of file
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-justify-content-horiz-002-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-justify-content-horiz-002-ref.xht
index 29c388b6d3d..267962379ae 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-justify-content-horiz-002-ref.xht
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-justify-content-horiz-002-ref.xht
@@ -112,5 +112,38 @@
<div class="a" style="margin-left: calc(8px / 6)"/><div style="margin-left: calc(8px / 3)"><div class="b"/></div><div style="margin-left: calc(8px / 3)"><div class="c"/></div>
</div>
+ <!-- space-evenly -->
+ <div class="flexbox">
+ <div class="a" style="margin-left: 90px"/>
+ </div>
+ <div class="flexbox">
+ <div class="a" style="margin-left: calc(118px / 3)"/><div style="margin-left: calc(118px / 3)"><div class="b"/></div>
+ </div>
+ <div class="flexbox">
+ <div class="a" style="margin-left: 2px"/><div style="margin-left: 2px"><div class="b"/></div><div style="margin-left: 2px"><div class="c"/></div>
+ </div>
+
+ <!-- left -->
+ <div class="flexbox">
+ <div class="a"/>
+ </div>
+ <div class="flexbox">
+ <div class="a"/><div class="b"/>
+ </div>
+ <div class="flexbox">
+ <div class="a"/><div class="b"/><div class="c"/>
+ </div>
+
+ <!-- right -->
+ <div class="flexbox">
+ <div class="a" style="margin-left: 180px"/>
+ </div>
+ <div class="flexbox">
+ <div class="a" style="margin-left: 118px"/><div class="b"/>
+ </div>
+ <div class="flexbox">
+ <div class="a" style="margin-left: 8px"/><div class="b"/><div class="c"/>
+ </div>
+
</body>
</html> \ No newline at end of file
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-justify-content-horiz-003-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-justify-content-horiz-003-ref.xht
index 982225d5e39..6c45ed374a2 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-justify-content-horiz-003-ref.xht
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-justify-content-horiz-003-ref.xht
@@ -99,5 +99,38 @@
<div class="a"/><div class="b"/><div class="c"/>
</div>
+ <!-- space-evenly -->
+ <div class="flexbox" style="margin-left: 97.5px">
+ <div class="a"/>
+ </div>
+ <div class="flexbox" style="margin-left: 77.5px">
+ <div class="a"/><div class="b"/>
+ </div>
+ <div class="flexbox" style="margin-left: 55px">
+ <div class="a"/><div class="b"/><div class="c"/>
+ </div>
+
+ <!-- left -->
+ <div class="flexbox" style="margin-left: 100px">
+ <div class="a"/>
+ </div>
+ <div class="flexbox" style="margin-left: 100px">
+ <div class="a"/><div class="b"/>
+ </div>
+ <div class="flexbox" style="margin-left: 100px">
+ <div class="a"/><div class="b"/><div class="c"/>
+ </div>
+
+ <!-- right -->
+ <div class="flexbox" style="margin-left: 95px">
+ <div class="a"/>
+ </div>
+ <div class="flexbox" style="margin-left: 55px">
+ <div class="a"/><div class="b"/>
+ </div>
+ <div class="flexbox" style="margin-left: 10px">
+ <div class="a"/><div class="b"/><div class="c"/>
+ </div>
+
</body>
</html> \ No newline at end of file
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-justify-content-horiz-004-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-justify-content-horiz-004-ref.xht
index 4cb78411aba..a7f20063bdd 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-justify-content-horiz-004-ref.xht
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-justify-content-horiz-004-ref.xht
@@ -111,5 +111,38 @@
<div class="a"/><div class="b"/><div class="c"/>
</div>
+ <!-- space-evenly -->
+ <div class="flexbox" style="margin-left: 92.5px">
+ <div class="a"/>
+ </div>
+ <div class="flexbox" style="margin-left: 66.5px">
+ <div class="a"/><div class="b"/>
+ </div>
+ <div class="flexbox" style="margin-left: 39px">
+ <div class="a"/><div class="b"/><div class="c"/>
+ </div>
+
+ <!-- left -->
+ <div class="flexbox" style="margin-left: 100px">
+ <div class="a"/>
+ </div>
+ <div class="flexbox" style="margin-left: 100px">
+ <div class="a"/><div class="b"/>
+ </div>
+ <div class="flexbox" style="margin-left: 100px">
+ <div class="a"/><div class="b"/><div class="c"/>
+ </div>
+
+ <!-- right -->
+ <div class="flexbox" style="margin-left: 85px">
+ <div class="a"/>
+ </div>
+ <div class="flexbox" style="margin-left: 33px">
+ <div class="a"/><div class="b"/>
+ </div>
+ <div class="flexbox" style="margin-left: -22px">
+ <div class="a"/><div class="b"/><div class="c"/>
+ </div>
+
</body>
</html> \ No newline at end of file
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-justify-content-horiz-005-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-justify-content-horiz-005-ref.xht
index 83636c6081c..0fd33212b95 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-justify-content-horiz-005-ref.xht
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-justify-content-horiz-005-ref.xht
@@ -132,5 +132,56 @@
<div class="c"/>
<div style="flex: 0.5"/>
</div>
+
+ <!-- space-evenly -->
+ <!-- Center "a" here just as we did above in the "center" case. -->
+ <div class="centerParent">
+ <div class="flexbox center">
+ <div class="a"/>
+ </div>
+ </div>
+ <!-- As above with space-around, we'll use a flex container with invisible
+ flexible items instead of packing space. -->
+ <div class="flexbox" style="display: flex">
+ <div style="flex: 1"/>
+ <div class="a"/>
+ <div style="flex: 1"/>
+ <div class="b"/>
+ <div style="flex: 1"/>
+ </div>
+ <div class="flexbox" style="display: flex">
+ <div style="flex: 1"/>
+ <div class="a"/>
+ <div style="flex: 1"/>
+ <div class="b"/>
+ <div style="flex: 1"/>
+ <div class="c"/>
+ <div style="flex: 1"/>
+ </div>
+
+
+ <!-- left -->
+ <div class="flexbox">
+ <div class="a"/>
+ </div>
+ <div class="flexbox">
+ <div class="a"/><div class="b"/>
+ </div>
+ <div class="flexbox">
+ <div class="a"/><div class="b"/><div class="c"/>
+ </div>
+
+ <!-- right -->
+ <div class="flexbox" style="float:right; clear:right;">
+ <div class="a"/>
+ </div>
+ <div class="flexbox" style="float:right; clear:right;">
+ <div class="a"/><div class="b"/>
+ </div>
+ <div class="flexbox" style="float:right; clear:right;">
+ <div class="a"/><div class="b"/><div class="c"/>
+ </div>
+ <div style="clear:right;"/>
+
</body>
</html> \ No newline at end of file
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-justify-content-vert-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-justify-content-vert-001-ref.xht
index 0a5f945df84..f097c1b5ca7 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-justify-content-vert-001-ref.xht
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-justify-content-vert-001-ref.xht
@@ -96,5 +96,38 @@
<div class="a" style="margin-top: calc(40px / 6)"/><div class="b" style="margin-top: calc(40px / 3)"/><div class="c" style="margin-top: calc(40px / 3)"/>
</div>
+ <!-- space-evenly -->
+ <div class="flexbox">
+ <div class="a" style="margin-top: 95px"/>
+ </div>
+ <div class="flexbox">
+ <div class="a" style="margin-top: calc(140px / 3)"/><div class="b" style="margin-top: calc(140px / 3)"/>
+ </div>
+ <div class="flexbox">
+ <div class="a" style="margin-top: 10px"/><div class="b" style="margin-top: 10px"/><div class="c" style="margin-top: 10px"/>
+ </div>
+
+ <!-- left -->
+ <div class="flexbox">
+ <div class="a"/>
+ </div>
+ <div class="flexbox">
+ <div class="a"/><div class="b"/>
+ </div>
+ <div class="flexbox">
+ <div class="a"/><div class="b"/><div class="c"/>
+ </div>
+
+ <!-- right -->
+ <div class="flexbox">
+ <div class="a"/>
+ </div>
+ <div class="flexbox">
+ <div class="a"/><div class="b"/>
+ </div>
+ <div class="flexbox">
+ <div class="a"/><div class="b"/><div class="c"/>
+ </div>
+
</body>
</html> \ No newline at end of file
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-justify-content-vert-002-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-justify-content-vert-002-ref.xht
index 01327b2e7c3..ad760e74993 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-justify-content-vert-002-ref.xht
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-justify-content-vert-002-ref.xht
@@ -109,5 +109,38 @@
<div class="a" style="margin-top: calc(8px / 6)"/><div style="margin-top: calc(5px + 8px / 3)"><div class="b"/></div><div style="margin-top: calc(6px + 8px / 3)"><div class="c"/></div>
</div>
+ <!-- space-evenly -->
+ <div class="flexbox">
+ <div class="a" style="margin-top: 90px"/>
+ </div>
+ <div class="flexbox">
+ <div class="a" style="margin-top: calc(118px / 3)"/><div style="margin-top: calc(5px + 118px / 3)"><div class="b"/></div>
+ </div>
+ <div class="flexbox">
+ <div class="a" style="margin-top: 2px"/><div style="margin-top: 7px"><div class="b"/></div><div style="margin-top: 8px"><div class="c"/></div>
+ </div>
+
+ <!-- left -->
+ <div class="flexbox">
+ <div class="a"/>
+ </div>
+ <div class="flexbox">
+ <div class="a"/><div class="b"/>
+ </div>
+ <div class="flexbox">
+ <div class="a"/><div class="b"/><div class="c"/>
+ </div>
+
+ <!-- right -->
+ <div class="flexbox">
+ <div class="a"/>
+ </div>
+ <div class="flexbox">
+ <div class="a"/><div class="b"/>
+ </div>
+ <div class="flexbox">
+ <div class="a"/><div class="b"/><div class="c"/>
+ </div>
+
</body>
</html> \ No newline at end of file
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-justify-content-vert-003-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-justify-content-vert-003-ref.xht
index 51a1051ebc6..cfe535b7c9d 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-justify-content-vert-003-ref.xht
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-justify-content-vert-003-ref.xht
@@ -97,5 +97,38 @@
<div class="a"/><div class="b"/><div class="c"/>
</div>
+ <!-- space-evenly -->
+ <div class="flexbox" style="margin-top: 97.5px">
+ <div class="a"/>
+ </div>
+ <div class="flexbox" style="margin-top: 77.5px">
+ <div class="a"/><div class="b"/>
+ </div>
+ <div class="flexbox" style="margin-top: 55px">
+ <div class="a"/><div class="b"/><div class="c"/>
+ </div>
+
+ <!-- left -->
+ <div class="flexbox" style="margin-top: 100px">
+ <div class="a"/>
+ </div>
+ <div class="flexbox" style="margin-top: 100px">
+ <div class="a"/><div class="b"/>
+ </div>
+ <div class="flexbox" style="margin-top: 100px">
+ <div class="a"/><div class="b"/><div class="c"/>
+ </div>
+
+ <!-- right -->
+ <div class="flexbox" style="margin-top: 100px">
+ <div class="a"/>
+ </div>
+ <div class="flexbox" style="margin-top: 100px">
+ <div class="a"/><div class="b"/>
+ </div>
+ <div class="flexbox" style="margin-top: 100px">
+ <div class="a"/><div class="b"/><div class="c"/>
+ </div>
+
</body>
</html> \ No newline at end of file
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-justify-content-vert-004-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-justify-content-vert-004-ref.xht
index c0980b635a9..870a1d5fe9d 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-justify-content-vert-004-ref.xht
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-justify-content-vert-004-ref.xht
@@ -108,5 +108,38 @@
<div class="a"/><div class="b"/><div class="c"/>
</div>
+ <!-- space-evenly -->
+ <div class="flexbox" style="margin-top: 92.5px">
+ <div class="a"/>
+ </div>
+ <div class="flexbox" style="margin-top: 66.5px">
+ <div class="a"/><div class="b"/>
+ </div>
+ <div class="flexbox" style="margin-top: 39px">
+ <div class="a"/><div class="b"/><div class="c"/>
+ </div>
+
+ <!-- left -->
+ <div class="flexbox" style="margin-top: 100px">
+ <div class="a"/>
+ </div>
+ <div class="flexbox" style="margin-top: 100px">
+ <div class="a"/><div class="b"/>
+ </div>
+ <div class="flexbox" style="margin-top: 100px">
+ <div class="a"/><div class="b"/><div class="c"/>
+ </div>
+
+ <!-- right -->
+ <div class="flexbox" style="margin-top: 100px">
+ <div class="a"/>
+ </div>
+ <div class="flexbox" style="margin-top: 100px">
+ <div class="a"/><div class="b"/>
+ </div>
+ <div class="flexbox" style="margin-top: 100px">
+ <div class="a"/><div class="b"/><div class="c"/>
+ </div>
+
</body>
</html> \ No newline at end of file
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-justify-content-vert-005-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-justify-content-vert-005-ref.xht
index 01b250c2fe3..4a70c6d16c0 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-justify-content-vert-005-ref.xht
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-justify-content-vert-005-ref.xht
@@ -96,5 +96,38 @@
<div class="a"/><div class="b"/><div class="c"/>
</div>
+ <!-- space-evenly -->
+ <div class="flexbox">
+ <div class="a"/>
+ </div>
+ <div class="flexbox">
+ <div class="a"/><div class="b"/>
+ </div>
+ <div class="flexbox">
+ <div class="a"/><div class="b"/><div class="c"/>
+ </div>
+
+ <!-- left -->
+ <div class="flexbox">
+ <div class="a"/>
+ </div>
+ <div class="flexbox">
+ <div class="a"/><div class="b"/>
+ </div>
+ <div class="flexbox">
+ <div class="a"/><div class="b"/><div class="c"/>
+ </div>
+
+ <!-- right -->
+ <div class="flexbox">
+ <div class="a"/>
+ </div>
+ <div class="flexbox">
+ <div class="a"/><div class="b"/>
+ </div>
+ <div class="flexbox">
+ <div class="a"/><div class="b"/><div class="c"/>
+ </div>
+
</body>
</html> \ No newline at end of file
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-single-line-clamp-1-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-single-line-clamp-1-ref.xht
new file mode 100644
index 00000000000..2d93f2db3ef
--- /dev/null
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-single-line-clamp-1-ref.xht
@@ -0,0 +1,26 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+--><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Test Reference</title>
+<link href="mailto:ecoal95@gmail.com" rel="author" title="Emilio Cobos Álvarez" />
+<style>
+.container {
+ display: block;
+ background: gray;
+ max-height: 200px;
+}
+.panel {
+ background: lightblue;
+ width: 150px;
+ height: 200px;
+ border: 1px solid purple;
+ box-sizing: border-box;
+}
+</style>
+</head><body><div class="container">
+ <div class="panel">
+ </div>
+</div>
+</body></html> \ No newline at end of file
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-single-line-clamp-2-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-single-line-clamp-2-ref.xht
new file mode 100644
index 00000000000..41589ee7e79
--- /dev/null
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-single-line-clamp-2-ref.xht
@@ -0,0 +1,26 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+--><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Test Reference</title>
+<link href="mailto:ecoal95@gmail.com" rel="author" title="Emilio Cobos Álvarez" />
+<style>
+.container {
+ background: gray;
+ height: 500px;
+ width: 250px;
+}
+.panel {
+ background: lightblue;
+ border: 1px solid purple;
+ height: 100px;
+}
+</style>
+</head><body><div class="container">
+ <div class="panel">
+ </div>
+ <div class="panel">
+ </div>
+</div>
+</body></html> \ No newline at end of file
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-single-line-clamp-3-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-single-line-clamp-3-ref.xht
new file mode 100644
index 00000000000..5e7226ae615
--- /dev/null
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-single-line-clamp-3-ref.xht
@@ -0,0 +1,30 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<!--
+ Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/
+--><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>CSS Test Reference</title>
+<link href="mailto:ecoal95@gmail.com" rel="author" title="Emilio Cobos Álvarez" />
+<style>
+.container {
+ background: gray;
+ height: 80px;
+}
+.panel {
+ background: lightblue;
+ width: 150px;
+ height: 80px;
+}
+.contents {
+ height: 10px;
+ width: 10px;
+ background: purple;
+}
+</style>
+</head>
+<body><div class="container">
+ <div class="panel">
+ <div class="contents"></div>
+ </div>
+</div>
+</body></html> \ No newline at end of file
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-whitespace-handling-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-whitespace-handling-001-ref.xht
index 029ba4b05b6..9846a59c901 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-whitespace-handling-001-ref.xht
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/flexbox-whitespace-handling-001-ref.xht
@@ -40,7 +40,7 @@
</div>
<div class="flexbox">
- <img src="solidblue.png" style="margin-left: 30px"/><img src="solidblue.png" style="margin-left: 60px"/>
+ <img src="support/solidblue.png" style="margin-left: 30px"/><img src="support/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/xhtml1/reference/layout-algorithm_algo-cross-line-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/layout-algorithm_algo-cross-line-001-ref.xht
new file mode 100644
index 00000000000..c81bf109b8a
--- /dev/null
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/layout-algorithm_algo-cross-line-001-ref.xht
@@ -0,0 +1,28 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head>
+ <title>CSS Flex-basis Test</title>
+ <link href="mailto:tomalecpub+github@gmail.com" rel="author" title="Tomek Wytrebowicz" />
+ <style type="text/css">
+ .flex {
+ width: 200px;
+ height: 200px;
+ }
+
+ .flex &gt; * {
+ background: green;
+ height: 200px;
+ width: 100px;
+ overflow: scroll;
+ display: inline-block;
+ }
+ </style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square with scrollbars and <strong>no red</strong>.</p>
+
+ <div class="flex">
+ <div></div><div></div>
+ </div>
+
+
+</body></html> \ No newline at end of file
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/layout-algorithm_algo-cross-line-002-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/layout-algorithm_algo-cross-line-002-ref.xht
new file mode 100644
index 00000000000..628fcfac735
--- /dev/null
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/layout-algorithm_algo-cross-line-002-ref.xht
@@ -0,0 +1,27 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head>
+ <title>CSS Flex-basis Test</title>
+ <link href="mailto:tomalecpub+github@gmail.com" rel="author" title="Tomek Wytrebowicz" />
+ <style type="text/css">
+ .flex {
+ width: 200px;
+ height: 200px;
+ }
+
+ .flex &gt; * {
+ background: green;
+ height: 100px;
+ width: 200px;
+ overflow: scroll;
+ }
+ </style>
+ </head>
+ <body>
+ <p>Test passes if there is a filled green square with scrollbars and <strong>no red</strong>.</p>
+
+ <div class="flex">
+ <div></div><div></div>
+ </div>
+
+
+</body></html> \ No newline at end of file
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/negative-margins-001-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/negative-margins-001-ref.xht
new file mode 100644
index 00000000000..64b0c38ae82
--- /dev/null
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/negative-margins-001-ref.xht
@@ -0,0 +1,19 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
+<title>Reference for negative margins</title>
+<link href="https://www.google.com/" rel="author" title="Google Inc." />
+<style>
+ .container {
+ width: 60px;
+ height: 10px;
+ background-color: green;
+ border: 3px black solid;
+ }
+</style>
+</head><body>
+ <p>You should see a green rectangle with a black border, 60px wide. You should see 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/xhtml1/reference/order-with-row-reverse-ref.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/order-with-row-reverse-ref.xht
index 8f7495ece4a..4c285b5d481 100644
--- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/order-with-row-reverse-ref.xht
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/order-with-row-reverse-ref.xht
@@ -1,8 +1,8 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS Test Reference: flex container layout lowest order with row-reverse direction</title>
- <link href="tmtysk@gmail.com" rel="author" title="tmtysk" />
- <link href="jackalmage@gmail.com" rel="reviewer" title="Tab Atkins, Jr." />
+ <link href="mailto:tmtysk@gmail.com" rel="author" title="tmtysk" />
+ <link href="mailto:jackalmage@gmail.com" rel="reviewer" title="Tab Atkins, Jr." />
<style>
#leftmost {
float: right;
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/ref-pass-body.xht b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/ref-pass-body.xht
deleted file mode 100644
index 6c0a6058a79..00000000000
--- a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/ref-pass-body.xht
+++ /dev/null
@@ -1,8 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml"><head><title>PASS in body, black</title>
-<link href="mailto:me@gsnedders.com" rel="author" title="Geoffrey Sneddon" />
-<style>
-.PASS {color: black;}
-</style>
-</head><body class="PASS">PASS
-</body></html> \ No newline at end of file
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/support/100x50-green.png b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/support/100x50-green.png
new file mode 100644
index 00000000000..9dae3116bbf
--- /dev/null
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/support/100x50-green.png
Binary files differ
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/support/50x100-green.png b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/support/50x100-green.png
new file mode 100644
index 00000000000..28546987889
--- /dev/null
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/support/50x100-green.png
Binary files differ
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/support/ortho-htb-alongside-vrl-floats-002-exp-res.png b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/support/ortho-htb-alongside-vrl-floats-002-exp-res.png
new file mode 100644
index 00000000000..54d35eb05e9
--- /dev/null
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/support/ortho-htb-alongside-vrl-floats-002-exp-res.png
Binary files differ
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/support/text-orientation-012.png b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/support/text-orientation-012.png
new file mode 100644
index 00000000000..7d5e9a4e24f
--- /dev/null
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/support/text-orientation-012.png
Binary files differ
diff --git a/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/support/wm-propagation-body-003-exp-res.png b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/support/wm-propagation-body-003-exp-res.png
new file mode 100644
index 00000000000..b437e8fb8d7
--- /dev/null
+++ b/tests/wpt/css-tests/css-flexbox-1_dev/xhtml1/reference/support/wm-propagation-body-003-exp-res.png
Binary files differ