From 0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Fri, 19 Apr 2024 03:47:29 +0200
Subject: Adding upstream version 115.8.0esr.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 .../web-platform/tests/css/css-exclusions/META.yml |  3 +
 .../exclusions-wrap-flow-01-ref.xht                | 47 +++++++++++++
 .../css3-exclusions/exclusions-wrap-flow-01.xht    | 60 +++++++++++++++++
 .../exclusions-wrap-flow-02-ref.xht                | 68 +++++++++++++++++++
 .../css3-exclusions/exclusions-wrap-flow-02.xht    | 76 +++++++++++++++++++++
 .../exclusions-wrap-flow-03-ref.xht                | 66 +++++++++++++++++++
 .../css3-exclusions/exclusions-wrap-flow-03.xht    | 77 ++++++++++++++++++++++
 .../exclusions-wrap-flow-04-ref.xht                | 58 ++++++++++++++++
 .../css3-exclusions/exclusions-wrap-flow-04.xht    | 76 +++++++++++++++++++++
 .../tests/css/css-exclusions/inheritance.html      | 22 +++++++
 .../tests/css/css-exclusions/resources/helper.js   | 14 ++++
 .../tests/css/css-exclusions/wrap-flow-001.html    | 52 +++++++++++++++
 .../tests/css/css-exclusions/wrap-flow-002.html    | 58 ++++++++++++++++
 .../tests/css/css-exclusions/wrap-flow-003.html    | 59 +++++++++++++++++
 .../tests/css/css-exclusions/wrap-flow-004.html    | 70 ++++++++++++++++++++
 .../tests/css/css-exclusions/wrap-flow-005.html    | 70 ++++++++++++++++++++
 .../tests/css/css-exclusions/wrap-flow-006.html    | 66 +++++++++++++++++++
 .../tests/css/css-exclusions/wrap-through-001.html | 73 ++++++++++++++++++++
 18 files changed, 1015 insertions(+)
 create mode 100644 testing/web-platform/tests/css/css-exclusions/META.yml
 create mode 100644 testing/web-platform/tests/css/css-exclusions/css3-exclusions/exclusions-wrap-flow-01-ref.xht
 create mode 100644 testing/web-platform/tests/css/css-exclusions/css3-exclusions/exclusions-wrap-flow-01.xht
 create mode 100644 testing/web-platform/tests/css/css-exclusions/css3-exclusions/exclusions-wrap-flow-02-ref.xht
 create mode 100644 testing/web-platform/tests/css/css-exclusions/css3-exclusions/exclusions-wrap-flow-02.xht
 create mode 100644 testing/web-platform/tests/css/css-exclusions/css3-exclusions/exclusions-wrap-flow-03-ref.xht
 create mode 100644 testing/web-platform/tests/css/css-exclusions/css3-exclusions/exclusions-wrap-flow-03.xht
 create mode 100644 testing/web-platform/tests/css/css-exclusions/css3-exclusions/exclusions-wrap-flow-04-ref.xht
 create mode 100644 testing/web-platform/tests/css/css-exclusions/css3-exclusions/exclusions-wrap-flow-04.xht
 create mode 100644 testing/web-platform/tests/css/css-exclusions/inheritance.html
 create mode 100644 testing/web-platform/tests/css/css-exclusions/resources/helper.js
 create mode 100644 testing/web-platform/tests/css/css-exclusions/wrap-flow-001.html
 create mode 100644 testing/web-platform/tests/css/css-exclusions/wrap-flow-002.html
 create mode 100644 testing/web-platform/tests/css/css-exclusions/wrap-flow-003.html
 create mode 100644 testing/web-platform/tests/css/css-exclusions/wrap-flow-004.html
 create mode 100644 testing/web-platform/tests/css/css-exclusions/wrap-flow-005.html
 create mode 100644 testing/web-platform/tests/css/css-exclusions/wrap-flow-006.html
 create mode 100644 testing/web-platform/tests/css/css-exclusions/wrap-through-001.html

(limited to 'testing/web-platform/tests/css/css-exclusions')

diff --git a/testing/web-platform/tests/css/css-exclusions/META.yml b/testing/web-platform/tests/css/css-exclusions/META.yml
new file mode 100644
index 0000000000..32410e6918
--- /dev/null
+++ b/testing/web-platform/tests/css/css-exclusions/META.yml
@@ -0,0 +1,3 @@
+spec: https://drafts.csswg.org/css-exclusions/
+suggested_reviewers:
+  - astearns
diff --git a/testing/web-platform/tests/css/css-exclusions/css3-exclusions/exclusions-wrap-flow-01-ref.xht b/testing/web-platform/tests/css/css-exclusions/css3-exclusions/exclusions-wrap-flow-01-ref.xht
new file mode 100644
index 0000000000..1d202b224d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-exclusions/css3-exclusions/exclusions-wrap-flow-01-ref.xht
@@ -0,0 +1,47 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <title>CSS Test: wrap-flow:none</title>
+    <link rel="author" title="Vincent Hardy, Adobe Systems" href="mailto:vhardy@adobe.com"/>
+    <style>
+    /*<![CDATA[*/
+
+#containing-block {
+    position: relative;
+    width: 400px;
+    height: 400px;
+    border: 1px solid #e0e0e0;
+    font-size: 0px; /* collapses the 'strut' on each line, see CSS 2.1 section 10.8.1 */
+}
+
+#top-fragment, #left-fragment, #right-fragment, #bottom-fragment {
+    display: inline-block;
+    background: black;
+}
+
+#top-fragment, #bottom-fragment {
+    width: 400px;
+    height: 150px;
+}
+
+#left-fragment, #right-fragment {
+    width: 150px;
+    height: 100px;
+}
+
+#exclusion {
+    display: inline-block;
+    width: 100px;
+    height: 100px;
+    background: #0f0;
+}
+
+
+/*]]>*/
+</style>
+</head>
+<body>
+    <p>You should see a green square in a solid 400px by 400px black background. You should not see any red background.</p>
+    <div id="containing-block"><div id="top-fragment"></div><div id="left-fragment"></div><div id="exclusion"></div><div id="right-fragment"></div><div id="bottom-fragment"></div></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-exclusions/css3-exclusions/exclusions-wrap-flow-01.xht b/testing/web-platform/tests/css/css-exclusions/css3-exclusions/exclusions-wrap-flow-01.xht
new file mode 100644
index 0000000000..45f3d1a1c6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-exclusions/css3-exclusions/exclusions-wrap-flow-01.xht
@@ -0,0 +1,60 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <title>CSS Test: wrap-flow:none</title>
+    <link rel="author" title="Vincent Hardy, Adobe Systems" href="mailto:vhardy@adobe.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css3-exclusions/#wrap-flow-property"/>
+    <link rel="match" href="exclusions-wrap-flow-01-ref.xht"/>
+    <meta name="assert" content=
+    "Tests that wrap-flow:both is implemented. The inline boxes defined in the container
+     with the exclusion element should wrap around the margin edges of the exclusion. Inline boxes
+     are flowing to the left and right of the exclusion element."/>
+    <style>
+    /*<![CDATA[*/
+
+#containing-block {
+    position: relative;
+    width: 400px;
+    height: 400px;
+    border: 1px solid #e0e0e0;
+    background: red;
+    font-size: 0px; /* collapses the 'strut' on each line, see CSS 2.1 section 10.8.1 */
+}
+
+#exclusion {
+    wrap-flow: both;
+}
+
+#top-fragment, #left-fragment, #right-fragment, #bottom-fragment {
+    display: inline-block;
+    background: black;
+}
+
+#top-fragment, #bottom-fragment {
+    width: 400px;
+    height: 150px;
+}
+
+#left-fragment, #right-fragment {
+    width: 150px;
+    height: 100px;
+}
+
+#exclusion {
+    position: absolute;
+    top: 150px;
+    left: 150px;
+    width: 100px;
+    height: 100px;
+    background: #0f0;
+}
+
+
+/*]]>*/
+</style>
+</head>
+<body>
+    <p>You should see a green square in a solid 400px by 400px black background. You should not see any red background.</p>
+    <div id="containing-block"><div id="exclusion"></div><div id="top-fragment"></div><div id="left-fragment"></div><div id="right-fragment"></div><div id="bottom-fragment"></div></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-exclusions/css3-exclusions/exclusions-wrap-flow-02-ref.xht b/testing/web-platform/tests/css/css-exclusions/css3-exclusions/exclusions-wrap-flow-02-ref.xht
new file mode 100644
index 0000000000..24e490c47e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-exclusions/css3-exclusions/exclusions-wrap-flow-02-ref.xht
@@ -0,0 +1,68 @@
+<!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: wrap-flow:none</title>
+    <link rel="author" title="Vincent Hardy, Adobe Systems" href="mailto:vhardy@adobe.com"/>
+        <style>
+        /*<![CDATA[*/
+
+    #containing-block {
+        position: relative;
+        width: 400px;
+        background: red;
+        font-size: 0px; /* collapses the 'strut' on each line, see CSS 2.1 section 10.8.1 */
+    }
+
+    #top-fragment, #left-fragment, #right-fragment, #bottom-fragment-a, #bottom-fragment-b {
+        display: inline-block;
+        background: black;
+    }
+
+    #top-fragment {
+        width: 400px;
+        height: 150px;
+    }
+
+    #bottom-fragment-a {
+        width: 150px;
+        height:150px;
+    }
+
+    #bottom-fragment-b {
+        width: 250px;
+        height: 150px;
+    }
+
+    #left-fragment {
+        width: 150px;
+        height: 100px;
+    }
+
+    #exclusion {
+        display: inline-block;
+        top: 150px;
+        left: 150px;
+        width: 100px;
+        height: 100px;
+        background: #0f0;
+    }
+
+    #clear-area {
+        display: inline-block;
+        background: #080;
+        top: 150px;
+        left: 250px;
+        width: 150px;
+        height: 100px;
+    }
+
+
+    /*]]>*/
+    </style>
+    </head>
+    <body>
+        <p>You should see a light green square centered in a solid 400px by 400px black background with a darker green area extending to the
+            right of the light green area and to the edge of the black background container. You should not see any red background.</p>
+        <div id="containing-block"><div id="top-fragment"></div><div id="left-fragment"></div><div id="exclusion"></div><div id="clear-area"></div><div id="bottom-fragment-a"></div><div id="bottom-fragment-b"></div></div>
+    </body>
+    </html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-exclusions/css3-exclusions/exclusions-wrap-flow-02.xht b/testing/web-platform/tests/css/css-exclusions/css3-exclusions/exclusions-wrap-flow-02.xht
new file mode 100644
index 0000000000..4ff8cc4e98
--- /dev/null
+++ b/testing/web-platform/tests/css/css-exclusions/css3-exclusions/exclusions-wrap-flow-02.xht
@@ -0,0 +1,76 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <title>CSS Test: wrap-flow:none</title>
+    <link rel="author" title="Vincent Hardy, Adobe Systems" href="mailto:vhardy@adobe.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css3-exclusions/#wrap-flow-property"/>
+    <link rel="match" href="exclusions-wrap-flow-01-ref.xht"/>
+    <meta name="assert" content=
+    "Tests that wrap-flow:start is implemented. The inline boxes defined in the container
+     with the exclusion element should wrap around the left margin edge of the exclusion but
+     not to the right. Inline boxes
+     are flowing to the left of the exclusion element only."/>
+         <style>
+         /*<![CDATA[*/
+
+     #containing-block {
+         position: relative;
+         width: 400px;
+         background: red;
+         font-size: 0px; /* collapses the 'strut' on each line, see CSS 2.1 section 10.8.1 */
+     }
+
+     #top-fragment, #left-fragment, #right-fragment, #bottom-fragment-a, #bottom-fragment-b {
+         display: inline-block;
+         background: black;
+     }
+
+     #top-fragment {
+         width: 400px;
+         height: 150px;
+     }
+
+     #bottom-fragment-a {
+         width: 150px;
+         height:150px;
+     }
+
+     #bottom-fragment-b {
+         width: 250px;
+         height: 150px;
+     }
+
+     #left-fragment {
+         width: 150px;
+         height: 100px;
+     }
+
+     #exclusion {
+         position: absolute;
+         wrap-flow: start;
+         top: 150px;
+         left: 150px;
+         width: 100px;
+         height: 100px;
+         background: #0f0;
+     }
+
+     #clear-area {
+         position: absolute;
+         background: #080;
+         top: 150px;
+         left: 250px;
+         width: 150px;
+         height: 100px;
+     }
+
+
+     /*]]>*/
+     </style>
+     </head>
+     <body>
+         <p>You should see a light green square centered in a solid 400px by 400px black background with a darker green area extending to the
+             right of the light green area and to the edge of the black background container. You should not see any red background.</p>
+         <div id="containing-block"><div id="top-fragment"></div><div id="left-fragment"></div><div id="exclusion"></div><div id="clear-area"></div><div id="bottom-fragment-a"></div><div id="bottom-fragment-b"></div></div>
+     </body>
+     </html>
diff --git a/testing/web-platform/tests/css/css-exclusions/css3-exclusions/exclusions-wrap-flow-03-ref.xht b/testing/web-platform/tests/css/css-exclusions/css3-exclusions/exclusions-wrap-flow-03-ref.xht
new file mode 100644
index 0000000000..88f921a3c3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-exclusions/css3-exclusions/exclusions-wrap-flow-03-ref.xht
@@ -0,0 +1,66 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <title>CSS Test: wrap-flow:none</title>
+    <link rel="author" title="Vincent Hardy, Adobe Systems" href="mailto:vhardy@adobe.com"/>
+        <style>
+        /*<![CDATA[*/
+
+    #containing-block {
+        position: relative;
+        width: 400px;
+        background: red;
+        font-size: 0px; /* collapses the 'strut' on each line, see CSS 2.1 section 10.8.1 */
+    }
+
+    #top-fragment, #left-fragment, #right-fragment, #bottom-fragment-a, #bottom-fragment-b {
+        display: inline-block;
+        background: black;
+    }
+
+    #top-fragment {
+        width: 400px;
+        height: 150px;
+    }
+
+    #bottom-fragment-a {
+        width: 150px;
+        height:150px;
+    }
+
+    #bottom-fragment-b {
+        width: 250px;
+        height: 150px;
+    }
+
+    #left-fragment {
+        width: 150px;
+        height: 100px;
+    }
+
+    #exclusion {
+        display: inline-block;
+        top: 150px;
+        left: 150px;
+        width: 100px;
+        height: 100px;
+        background: #0f0;
+    }
+
+    #clear-area {
+        display: inline-block;
+        background: #080;
+        width: 150px;
+        height: 100px;
+    }
+
+
+    /*]]>*/
+    </style>
+    </head>
+    <body>
+        <p>You should see a light green square centered in a solid 400px by 400px black background with a darker green area extending to the
+            left of the light green area and to the edge of the black background container. You should not see any red background.</p>
+        <div id="containing-block"><div id="top-fragment"></div><div id="clear-area"></div><div id="exclusion"></div><div id="left-fragment"></div><div id="bottom-fragment-a"></div><div id="bottom-fragment-b"></div></div>
+    </body>
+    </html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-exclusions/css3-exclusions/exclusions-wrap-flow-03.xht b/testing/web-platform/tests/css/css-exclusions/css3-exclusions/exclusions-wrap-flow-03.xht
new file mode 100644
index 0000000000..48802eac21
--- /dev/null
+++ b/testing/web-platform/tests/css/css-exclusions/css3-exclusions/exclusions-wrap-flow-03.xht
@@ -0,0 +1,77 @@
+<!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: wrap-flow:none</title>
+    <link rel="author" title="Vincent Hardy, Adobe Systems" href="mailto:vhardy@adobe.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css3-exclusions/#wrap-flow-property"/>
+    <link rel="match" href="exclusions-wrap-flow-01-ref.xht"/>
+    <meta name="assert" content=
+    "Tests that wrap-flow:start is implemented. The inline boxes defined in the container
+     with the exclusion element should wrap around the left margin edge of the exclusion but
+     not to the right. Inline boxes
+     are flowing to the left of the exclusion element only."/>
+         <style>
+         /*<![CDATA[*/
+
+     #containing-block {
+         position: relative;
+         width: 400px;
+         background: red;
+         font-size: 0px; /* collapses the 'strut' on each line, see CSS 2.1 section 10.8.1 */
+     }
+
+     #top-fragment, #left-fragment, #right-fragment, #bottom-fragment-a, #bottom-fragment-b {
+         display: inline-block;
+         background: black;
+     }
+
+     #top-fragment {
+         width: 400px;
+         height: 150px;
+     }
+
+     #bottom-fragment-a {
+         width: 150px;
+         height:150px;
+     }
+
+     #bottom-fragment-b {
+         width: 250px;
+         height: 150px;
+     }
+
+     #left-fragment {
+         width: 150px;
+         height: 100px;
+     }
+
+     #exclusion {
+         position: absolute;
+         wrap-flow: end;
+         top: 150px;
+         left: 150px;
+         width: 100px;
+         height: 100px;
+         background: #0f0;
+     }
+
+     #clear-area {
+         position: absolute;
+         background: #080;
+         top: 150px;
+         left: 0px;
+         width: 150px;
+         height: 100px;
+         z-index: -1;
+     }
+
+
+     /*]]>*/
+     </style>
+     </head>
+     <body>
+         <p>You should see a light green square centered in a solid 400px by 400px black background with a darker green area extending to the
+             left of the light green area and to the edge of the black background container. You should not see any red background.</p>
+         <div id="containing-block"><div id="top-fragment"></div><div id="left-fragment"></div><div id="exclusion"></div><div id="clear-area"></div><div id="bottom-fragment-a"></div><div id="bottom-fragment-b"></div></div>
+     </body>
+     </html>
diff --git a/testing/web-platform/tests/css/css-exclusions/css3-exclusions/exclusions-wrap-flow-04-ref.xht b/testing/web-platform/tests/css/css-exclusions/css3-exclusions/exclusions-wrap-flow-04-ref.xht
new file mode 100644
index 0000000000..840d0b2634
--- /dev/null
+++ b/testing/web-platform/tests/css/css-exclusions/css3-exclusions/exclusions-wrap-flow-04-ref.xht
@@ -0,0 +1,58 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <title>CSS Test: wrap-flow:none</title>
+    <link rel="author" title="Vincent Hardy, Adobe Systems" href="mailto:vhardy@adobe.com"/>
+        <style>
+        /*<![CDATA[*/
+
+    #containing-block {
+        position: relative;
+        width: 400px;
+        background: red;
+        font-size: 0px; /* collapses the 'strut' on each line, see CSS 2.1 section 10.8.1 */
+    }
+
+    #top-fragment, #left-fragment, #right-fragment, #bottom-fragment-a, #bottom-fragment-b {
+        display: inline-block;
+        background: black;
+    }
+
+    #top-fragment {
+        width: 400px;
+        height: 150px;
+    }
+
+    #bottom-fragment-a {
+        width: 150px;
+        height:150px;
+    }
+
+    #bottom-fragment-b {
+        width: 250px;
+        height: 150px;
+    }
+
+    #exclusion {
+        display: inline-block;
+        top: 150px;
+        left: 150px;
+        width: 100px;
+        height: 100px;
+        background: #0f0;
+    }
+
+    #clear-area-a, #clear-area-b {
+        display: inline-block;
+        background: #080;
+        width: 150px;
+        height: 100px;
+    }
+    /*]]>*/
+    </style>
+    </head>
+    <body>
+        <p>You should see a light green square centered in a solid dark green 100px high dark green stripe on top of a 400px by 400px black background. You should not see any red background.</p>
+        <div id="containing-block"><div id="top-fragment"></div><div id="clear-area-a"></div><div id="exclusion"></div><div id="clear-area-b"></div><div id="bottom-fragment-a"></div><div id="bottom-fragment-b"></div></div>
+    </body>
+    </html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-exclusions/css3-exclusions/exclusions-wrap-flow-04.xht b/testing/web-platform/tests/css/css-exclusions/css3-exclusions/exclusions-wrap-flow-04.xht
new file mode 100644
index 0000000000..ca2c7e35de
--- /dev/null
+++ b/testing/web-platform/tests/css/css-exclusions/css3-exclusions/exclusions-wrap-flow-04.xht
@@ -0,0 +1,76 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <title>CSS Test: wrap-flow:none</title>
+    <link rel="author" title="Vincent Hardy, Adobe Systems" href="mailto:vhardy@adobe.com"/>
+    <link rel="help" href="http://www.w3.org/TR/css3-exclusions/#wrap-flow-property"/>
+    <link rel="match" href="exclusions-wrap-flow-01-ref.xht"/>
+    <meta name="assert" content=
+    "Tests that wrap-flow:start is implemented. The inline boxes defined in the container
+     with the exclusion element should wrap around the left margin edge of the exclusion but
+     not to the right. Inline boxes
+     are flowing to the left of the exclusion element only."/>
+         <style>
+         /*<![CDATA[*/
+
+     #containing-block {
+         position: relative;
+         width: 400px;
+         background: red;
+         font-size: 0px; /* collapses the 'strut' on each line, see CSS 2.1 section 10.8.1 */
+     }
+
+     #top-fragment, #left-fragment, #right-fragment, #bottom-fragment-a, #bottom-fragment-b {
+         display: inline-block;
+         background: black;
+     }
+
+     #top-fragment {
+         width: 400px;
+         height: 150px;
+     }
+
+     #bottom-fragment-a {
+         width: 150px;
+         height:150px;
+     }
+
+     #bottom-fragment-b {
+         width: 250px;
+         height: 150px;
+     }
+
+     #exclusion {
+         position: absolute;
+         wrap-flow: clear;
+         top: 150px;
+         left: 150px;
+         width: 100px;
+         height: 100px;
+         background: #0f0;
+     }
+
+     #clear-area-a, #clear-area-b {
+         position: absolute;
+         background: #080;
+         width: 150px;
+         height: 100px;
+         top: 150px;
+     }
+
+     #clear-area-a {
+         left: 0px;
+     }
+
+     #clear-area-b {
+         left: 250px;
+     }
+
+     /*]]>*/
+     </style>
+     </head>
+     <body>
+         <p>You should see a light green square centered in a solid dark green 100px high dark green stripe on top of a 400px by 400px black background. You should not see any red background.</p>
+         <div id="containing-block"><div id="exclusion"></div><div id="clear-area-a"></div><div id="clear-area-b"></div><div id="top-fragment"></div><div id="bottom-fragment-a"></div><div id="bottom-fragment-b"></div></div>
+     </body>
+     </html>
diff --git a/testing/web-platform/tests/css/css-exclusions/inheritance.html b/testing/web-platform/tests/css/css-exclusions/inheritance.html
new file mode 100644
index 0000000000..b083ed8a50
--- /dev/null
+++ b/testing/web-platform/tests/css/css-exclusions/inheritance.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Inheritance of CSS Exclusions properties</title>
+<link rel="help" href="https://drafts.csswg.org/css-exclusions/#property-index">
+<meta name="assert" content="Properties do not inherit.">
+<meta name="assert" content="Properties have initial values according to the spec.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/inheritance-testcommon.js"></script>
+</head>
+<body>
+<div id="container">
+  <div id="target"></div>
+</div>
+<script>
+assert_not_inherited('wrap-flow', 'auto', 'both');
+assert_not_inherited('wrap-through', 'wrap', 'none');
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-exclusions/resources/helper.js b/testing/web-platform/tests/css/css-exclusions/resources/helper.js
new file mode 100644
index 0000000000..6cd9ffddc4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-exclusions/resources/helper.js
@@ -0,0 +1,14 @@
+function checkLinePos(spanID,expectedPos,coordToCheck) {
+    if(coordToCheck == "top")
+        var spanToCheck = document.getElementById(spanID).getBoundingClientRect().top;
+    else if(coordToCheck == "right")
+        var spanToCheck = document.getElementById(spanID).getBoundingClientRect().right;
+    else if(coordToCheck == "left")
+        var spanToCheck = document.getElementById(spanID).getBoundingClientRect().left;
+    else
+        var spanToCheck = document.getElementById(spanID).getBoundingClientRect().bottom;
+
+    /* Verify that the span appears where expected. It should be at expectedPos
+        Test will allow 1/4 line height (3px) of leeway for minor spacing differences */
+    return( (spanToCheck >= expectedPos) && (spanToCheck <= (expectedPos+3)) )
+}
diff --git a/testing/web-platform/tests/css/css-exclusions/wrap-flow-001.html b/testing/web-platform/tests/css/css-exclusions/wrap-flow-001.html
new file mode 100644
index 0000000000..f87c5baf8b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-exclusions/wrap-flow-001.html
@@ -0,0 +1,52 @@
+<!DOCTYPE HTML>
+<html>
+    <head>
+        <title>CSS Exclusions Test: wrap-flow property set to clear</title>
+        <link rel="author" title="Jacob Goldstein" href="mailto:jacobg@adobe.com">
+        <link rel="help" href="http://www.w3.org/TR/css3-exclusions/#wrap-flow-property">
+        <meta name="flags" content="ahem dom">
+        <meta name="assert" content="The text should flow above and below the exclusion, and not on either side">
+        <script src="/resources/testharness.js"></script>
+        <script src="/resources/testharnessreport.js"></script>
+        <script src="resources/helper.js"></script>
+        <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+        <style>
+            * {
+                margin: 0px;
+                padding: 0px;
+            }
+            .exclusion {
+                wrap-flow: clear;
+                position: absolute;
+                top: 40px;
+                left: 50px;
+                width: 110px;
+                height: 110px;
+                background: blue;
+            }
+            #content {
+                width: 400px;
+                height: 200px;
+                line-height: 12px;
+                font: 12px Ahem;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="exclusion"></div>
+
+        <div id="content"><span id="linesAbove">A<BR>B<BR>C<BR></span><span id="linesBelow">D<BR>E</span>
+        </div>
+
+        <div id="log"></div>
+
+        <script type="text/javascript">
+            setup({ explicit_done: true });
+
+            document.fonts.ready.then(() => {
+                test(function() {assert_equals(checkLinePos("linesBelow",150,"top"), true)}, "Verify top of the 'linesBelow' span is positioned correctly");
+                done();
+            });
+        </script>
+    </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-exclusions/wrap-flow-002.html b/testing/web-platform/tests/css/css-exclusions/wrap-flow-002.html
new file mode 100644
index 0000000000..4f56a99a24
--- /dev/null
+++ b/testing/web-platform/tests/css/css-exclusions/wrap-flow-002.html
@@ -0,0 +1,58 @@
+<!DOCTYPE HTML>
+<html>
+    <head>
+        <title>CSS Exclusions Test: wrap-flow property set to start</title>
+        <link rel="author" title="Jacob Goldstein" href="mailto:jacobg@adobe.com">
+        <link rel="help" href="http://www.w3.org/TR/css3-exclusions/#wrap-flow-property">
+        <meta name="flags" content="ahem dom">
+        <meta name="assert" content="Text should flow from the beginning of the line to the exclusion, as well as above and below">
+        <script src="/resources/testharness.js"></script>
+        <script src="/resources/testharnessreport.js"></script>
+        <script src="resources/helper.js"></script>
+        <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+        <style>
+            * {
+                margin: 0px;
+                padding: 0px;
+            }
+            .exclusion {
+                wrap-flow: start;
+                position: absolute;
+                top: 40px;
+                left: 40px;
+                width: 60px;
+                height: 25px;
+                background: blue;
+            }
+            #content {
+                width: 400px;
+                line-height: 12px;
+                font: 12px Ahem;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="exclusion"></div>
+
+        <div id="content">
+            <span id="linesAbove">ethical<BR>beer<BR>craft<BR></span>
+            <span id="lineLeft1">foo</span>
+            <span id="lineLeft2">sed</span>
+            <span id="linesBelow">Vegan<BR>cliche<BR>retro</span>
+        </div>
+
+        <div id="log"></div>
+
+        <script type="text/javascript">
+            setup({ explicit_done: true });
+
+            document.fonts.ready.then(() => {
+                test(function() {assert_equals(checkLinePos("lineLeft1",36,"top"), true)}, "Verify top of the 'lineLeft1' span is positioned correctly");
+                test(function() {assert_equals(checkLinePos("lineLeft2",48,"top"), true)}, "Verify top of the 'lineLeft2' span is positioned correctly");
+                test(function() {assert_equals(checkLinePos("lineLeft2",36,"right"), true)}, "Verify right of the 'lineLeft2' span is positioned correctly");
+                test(function() {assert_equals(checkLinePos("linesBelow",65,"top"), true)}, "Verify top of the 'linesBelow' span is positioned correctly");
+                done();
+            });
+        </script>
+    </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-exclusions/wrap-flow-003.html b/testing/web-platform/tests/css/css-exclusions/wrap-flow-003.html
new file mode 100644
index 0000000000..f48d8a8fbb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-exclusions/wrap-flow-003.html
@@ -0,0 +1,59 @@
+<!DOCTYPE HTML>
+<html>
+    <head>
+        <title>CSS Exclusions Test: wrap-flow property set to auto</title>
+        <link rel="author" title="Jacob Goldstein" href="mailto:jacobg@adobe.com">
+        <link rel="help" href="http://www.w3.org/TR/css3-exclusions/#wrap-flow-property">
+        <meta name="flags" content="ahem dom">
+        <meta name="assert" content="No exclusion should be created">
+        <script src="/resources/testharness.js"></script>
+        <script src="/resources/testharnessreport.js"></script>
+        <script src="resources/helper.js"></script>
+        <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+        <style>
+            * {
+                margin: 0px;
+                padding: 0px;
+            }
+            .exclusion {
+                wrap-flow: auto;
+                position: absolute;
+                top: 10px;
+                left: 20px;
+                width: 60px;
+                height: 25px;
+                background: blue;
+            }
+            #content {
+                width: 400px;
+                line-height: 12px;
+                font: 12px Ahem;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="exclusion"></div>
+
+        <div id="content">
+            <span id="line1">ethical beer craft</span><BR>
+            <span id="line2">Fixie pork belly</span><BR>
+            <span id="line3">food truck in marfa</span><BR>
+            <span id="line4">american apparel squid</span>
+        </div>
+
+        <div id="log"></div>
+
+        <script type="text/javascript">
+            setup({ explicit_done: true });
+
+            document.fonts.ready.then(() => {
+                test(function() {assert_equals(checkLinePos("line1",216,"right"), true)}, "Verify right of the 'line1' span is positioned correctly");
+                test(function() {assert_equals(checkLinePos("line2",192,"right"), true)}, "Verify right of the 'line2' span is positioned correctly");
+                test(function() {assert_equals(checkLinePos("line3",228,"right"), true)}, "Verify right of the 'line3' span is positioned correctly");
+                test(function() {assert_equals(checkLinePos("line4",36,"top"), true)}, "Verify top of the 'line4' span is positioned correctly");
+                test(function() {assert_equals(checkLinePos("line4",264,"right"), true)}, "Verify right of the 'line4' span is positioned correctly");
+                done();
+            });
+        </script>
+    </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-exclusions/wrap-flow-004.html b/testing/web-platform/tests/css/css-exclusions/wrap-flow-004.html
new file mode 100644
index 0000000000..c2369a12ee
--- /dev/null
+++ b/testing/web-platform/tests/css/css-exclusions/wrap-flow-004.html
@@ -0,0 +1,70 @@
+<!DOCTYPE HTML>
+<html>
+    <head>
+        <title>CSS Exclusions Test: wrap-flow property set to both</title>
+        <link rel="author" title="Jacob Goldstein" href="mailto:jacobg@adobe.com">
+        <link rel="help" href="http://www.w3.org/TR/css3-exclusions/#wrap-flow-property">
+        <meta name="flags" content="ahem dom">
+        <meta name="assert" content="Text should flow on both the left and right side of the exclusion, in addition to above and below">
+        <script src="/resources/testharness.js"></script>
+        <script src="/resources/testharnessreport.js"></script>
+        <script src="resources/helper.js"></script>
+        <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+        <style>
+            * {
+                margin: 0px;
+                padding: 0px;
+            }
+            .exclusion {
+                wrap-flow: both;
+                position: absolute;
+                top: 15px;
+                left: 70px;
+                width: 60px;
+                height: 25px;
+                background: blue;
+            }
+            #content {
+                width: 400px;
+                line-height: 12px;
+                font: 12px Ahem;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="exclusion"></div>
+
+        <div id="content">
+            <span id="line1">ethical beer craft</span><BR>
+            <span id="line2Left">jean </span><span id="line2Right">vegan</span><BR>
+            <span id="line3Left">fund </span><span id="line3Right">selvage</span><BR>
+            <span id="line4Left">swags </span><span id="line4Right">unami</span><BR>
+            <span id="line5">american apparel squid</span>
+        </div>
+
+        <div id="log"></div>
+
+        <script type="text/javascript">
+            setup({ explicit_done: true });
+
+            document.fonts.ready.then(() => {
+                /* Line 1 */
+                test(function() {assert_equals(checkLinePos("line1",0,"top"), true)}, "Verify top of the 'line1' span is positioned correctly");
+                test(function() {assert_equals(checkLinePos("line1",0,"left"), true)}, "Verify right of the 'line1' span is positioned correctly");
+                /* Line 2 */
+                test(function() {assert_equals(checkLinePos("line2Left",12,"top"), true)}, "Verify top of the 'line2' span is positioned correctly");
+                test(function() {assert_equals(checkLinePos("line2Right",130,"left"), true)}, "Verify left of the 'line2' span is positioned correctly");
+                /* Line 3 */
+                test(function() {assert_equals(checkLinePos("line3Left",24,"top"), true)}, "Verify top of the 'line3' span is positioned correctly");
+                test(function() {assert_equals(checkLinePos("line3Right",130,"left"), true)}, "Verify left of the 'line3' span is positioned correctly");
+                /* Line 4 */
+                test(function() {assert_equals(checkLinePos("line4Left",36,"top"), true)}, "Verify top of the 'line4' span is positioned correctly");
+                test(function() {assert_equals(checkLinePos("line4Right",130,"left"), true)}, "Verify left of the 'line4' span is positioned correctly");
+                /* Line 5 */
+                test(function() {assert_equals(checkLinePos("line5",48,"top"), true)}, "Verify top of the 'line5' span is positioned correctly");
+                test(function() {assert_equals(checkLinePos("line5",0,"left"), true)}, "Verify right of the 'line5' span is positioned correctly");
+                done();
+            });
+        </script>
+    </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-exclusions/wrap-flow-005.html b/testing/web-platform/tests/css/css-exclusions/wrap-flow-005.html
new file mode 100644
index 0000000000..d16c8479ca
--- /dev/null
+++ b/testing/web-platform/tests/css/css-exclusions/wrap-flow-005.html
@@ -0,0 +1,70 @@
+<!DOCTYPE HTML>
+<html>
+    <head>
+        <title>CSS Exclusions Test: wrap-flow property set to end</title>
+        <link rel="author" title="Jacob Goldstein" href="mailto:jacobg@adobe.com">
+        <link rel="help" href="http://www.w3.org/TR/css3-exclusions/#wrap-flow-property">
+        <meta name="flags" content="ahem dom">
+        <meta name="assert" content="Text should flow on the right side of the exclusion, as well as above and below">
+        <script src="/resources/testharness.js"></script>
+        <script src="/resources/testharnessreport.js"></script>
+        <script src="resources/helper.js"></script>
+        <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+        <style>
+            * {
+                margin: 0px;
+                padding: 0px;
+            }
+            .exclusion {
+                wrap-flow: end;
+                position: absolute;
+                top: 15px;
+                left: 70px;
+                width: 60px;
+                height: 25px;
+                background: blue;
+            }
+            #content {
+                width: 400px;
+                line-height: 12px;
+                font: 12px Ahem;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="exclusion"></div>
+
+        <div id="content">
+            <span id="line1">ethical beer craft</span><BR>
+            <span id="line2">jean</span><BR>
+            <span id="line3">fun</span><BR>
+            <span id="line4">swags</span><BR>
+            <span id="line5">american apparel squid</span>
+        </div>
+
+        <div id="log"></div>
+
+        <script type="text/javascript">
+            setup({ explicit_done: true });
+
+            document.fonts.ready.then(() => {
+                /* Line 1 */
+                test(function() {assert_equals(checkLinePos("line1",0,"top"), true)}, "Verify top of the 'line1' span is positioned correctly");
+                test(function() {assert_equals(checkLinePos("line1",0,"left"), true)}, "Verify left of the 'line1' span is positioned correctly");
+                /* Line 2 */
+                test(function() {assert_equals(checkLinePos("line2",12,"top"), true)}, "Verify top of the 'line2' span is positioned correctly");
+                test(function() {assert_equals(checkLinePos("line2",130,"left"), true)}, "Verify left of the 'line2' span is positioned correctly");
+                /* Line 3 */
+                test(function() {assert_equals(checkLinePos("line3",24,"top"), true)}, "Verify top of the 'line3' span is positioned correctly");
+                test(function() {assert_equals(checkLinePos("line3",130,"left"), true)}, "Verify left of the 'line3' span is positioned correctly");
+                /* Line 4 */
+                test(function() {assert_equals(checkLinePos("line4",36,"top"), true)}, "Verify top of the 'line4' span is positioned correctly");
+                test(function() {assert_equals(checkLinePos("line4",130,"left"), true)}, "Verify left of the 'line4' span is positioned correctly");
+                /* Line 5 */
+                test(function() {assert_equals(checkLinePos("line5",48,"top"), true)}, "Verify top of the 'line5' span is positioned correctly");
+                test(function() {assert_equals(checkLinePos("line5",0,"left"), true)}, "Verify left of the 'line5' span is positioned correctly");
+                done();
+            });
+        </script>
+    </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-exclusions/wrap-flow-006.html b/testing/web-platform/tests/css/css-exclusions/wrap-flow-006.html
new file mode 100644
index 0000000000..d9c107ae75
--- /dev/null
+++ b/testing/web-platform/tests/css/css-exclusions/wrap-flow-006.html
@@ -0,0 +1,66 @@
+<!DOCTYPE HTML>
+<html>
+    <head>
+        <title>CSS Exclusions Test: wrap-flow property set to maximum</title>
+        <link rel="author" title="Jacob Goldstein" href="mailto:jacobg@adobe.com">
+        <link rel="help" href="http://www.w3.org/TR/css3-exclusions/#wrap-flow-property">
+        <meta name="flags" content="ahem dom">
+        <meta name="assert" content="Text should flow in the left OR right side of the exclusion depending on which has more space, as well as above and below">
+        <script src="/resources/testharness.js"></script>
+        <script src="/resources/testharnessreport.js"></script>
+        <script src="resources/helper.js"></script>
+        <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+        <style>
+            * {
+                margin: 0px;
+                padding: 0px;
+            }
+            .exclusion {
+                wrap-flow: maximum;
+                position: absolute;
+                top: 40px;
+                left: 40px;
+                width: 60px;
+                height: 25px;
+                background: blue;
+            }
+            #content {
+                width: 400px;
+                line-height: 12px;
+                font: 12px Ahem;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="exclusion"></div>
+
+        <div id="content">
+            <span id="line1">ethical<BR>beer<BR>craft<BR></span>
+            <span id="line2">foo</span>
+            <span id="line3">sed</span>
+            <span id="line4">Vegan<BR>cliche<BR>retro</span>
+        </div>
+
+        <div id="log"></div>
+
+        <script type="text/javascript">
+            setup({ explicit_done: true });
+
+            document.fonts.ready.then(() => {
+                /*Line 1*/
+                test(function() {assert_equals(checkLinePos("line1",0,"top"), true)}, "Verify top of the 'line1' span is positioned correctly");
+                test(function() {assert_equals(checkLinePos("line1",0,"left"), true)}, "Verify left of the 'line1' span is positioned correctly");
+                /*Line 2*/
+                test(function() {assert_equals(checkLinePos("line2",36,"top"), true)}, "Verify top of the 'line2' span is positioned correctly");
+                test(function() {assert_equals(checkLinePos("line2",100,"left"), true)}, "Verify left of the 'line2' span is positioned correctly");
+                /*Line 3*/
+                test(function() {assert_equals(checkLinePos("line3",48,"top"), true)}, "Verify top of the 'line3' span is positioned correctly");
+                test(function() {assert_equals(checkLinePos("line3",100,"left"), true)}, "Verify left of the 'line3' span is positioned correctly");
+                /*Line 4*/
+                test(function() {assert_equals(checkLinePos("line4",65,"top"), true)}, "Verify top of the 'line4' span is positioned correctly");
+                test(function() {assert_equals(checkLinePos("line4",0,"left"), true)}, "Verify left of the 'line4' span is positioned correctly");
+                done();
+            });
+        </script>
+    </body>
+</html>
diff --git a/testing/web-platform/tests/css/css-exclusions/wrap-through-001.html b/testing/web-platform/tests/css/css-exclusions/wrap-through-001.html
new file mode 100644
index 0000000000..8c2f9d797b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-exclusions/wrap-through-001.html
@@ -0,0 +1,73 @@
+<!DOCTYPE HTML>
+<html>
+    <head>
+        <title>CSS Exclusions Test: wrap-through property set to none</title>
+        <link rel="author" title="Jacob Goldstein" href="mailto:jacobg@adobe.com">
+        <link rel="help" href="http://www.w3.org/TR/css3-exclusions/#wrap-through-property">
+        <meta name="flags" content="ahem dom">
+        <meta name="assert" content="The wrapping context should not be inheritted from the parent node when wrap-through is set to none">
+        <script src="/resources/testharness.js"></script>
+        <script src="/resources/testharnessreport.js"></script>
+        <script src="resources/helper.js"></script>
+        <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+        <style>
+            * {
+                margin: 0px;
+                padding: 0px;
+            }
+            .exclusion {
+                wrap-flow: both;
+                position: absolute;
+                top: 15px;
+                left: 70px;
+                width: 60px;
+                height: 36px;
+                background: blue;
+            }
+            #content1, #content2 {
+                width: 400px;
+                line-height: 12px;
+                font: 12px Ahem;
+            }
+            #content2 {
+                wrap-through: none;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="myContainer">
+            <div class="exclusion"></div>
+
+            <div id="content1">
+                <span id="line1">ethical beer craft</span><BR>
+                <span id="line2Left">jean </span><span id="line2Right">vegan</span><BR>
+                <span id="line3Left">fund </span><span id="line3Right">selvage</span><BR>
+            </div>
+            <div id="content2">
+                <span id="line4Left">swags </span><span id="line4Right">unami</span>
+            </div>
+        </div>
+
+        <div id="log"></div>
+
+        <script type="text/javascript">
+            setup({ explicit_done: true });
+
+            document.fonts.ready.then(() => {
+                /* Line 1 */
+                test(function() {assert_equals(checkLinePos("line1",0,"top"), true)}, "Verify top of the first line above the exclusion");
+                test(function() {assert_equals(checkLinePos("line1",0,"left"), true)}, "Verify left of the first line above the exclusion");
+                /* Line 2 */
+                test(function() {assert_equals(checkLinePos("line2Left",12,"top"), true)}, "Verify top of the second line on the left of the exclusion");
+                test(function() {assert_equals(checkLinePos("line2Right",130,"left"), true)}, "Verify left of the second line on the right of the exclusion");
+                /* Line 3 */
+                test(function() {assert_equals(checkLinePos("line3Left",24,"top"), true)}, "Verify top of the third line on the left of the exclusion");
+                test(function() {assert_equals(checkLinePos("line3Right",130,"left"), true)}, "Verify left of the third line on the right of the exclusion");
+                /* Line 4 */
+                test(function() {assert_equals(checkLinePos("line4Left",36,"top"), true)}, "Verify top of the fourth line with no wrapping-through = none");
+                test(function() {assert_equals(checkLinePos("line4Right",72,"left"), true)}, "Verify left of the fourth line with wrapping-through = none");
+                done();
+            });
+        </script>
+    </body>
+</html>
-- 
cgit v1.2.3