From 26a029d407be480d791972afb5975cf62c9360a6 Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Fri, 19 Apr 2024 02:47:55 +0200
Subject: Adding upstream version 124.0.1.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 .../clip/clip-absolute-positioned-001.html         | 18 ++++++++++
 .../clip/clip-absolute-positioned-002.html         | 18 ++++++++++
 .../css-masking/clip/clip-filter-order-ref.html    | 24 ++++++++++++++
 .../css/css-masking/clip/clip-filter-order.html    | 28 ++++++++++++++++
 ...lip-fixed-pos-transform-descendant-001-ref.html | 11 +++++++
 .../clip-fixed-pos-transform-descendant-001.html   | 38 ++++++++++++++++++++++
 .../css-masking/clip/clip-negative-values-001.html | 19 +++++++++++
 .../css-masking/clip/clip-negative-values-002.html | 19 +++++++++++
 .../css-masking/clip/clip-negative-values-003.html | 17 ++++++++++
 .../css-masking/clip/clip-negative-values-004.html | 17 ++++++++++
 .../css/css-masking/clip/clip-no-clipping-001.html | 16 +++++++++
 .../css/css-masking/clip/clip-no-clipping-002.html | 20 ++++++++++++
 .../clip/clip-no-stacking-context-ref.html         |  4 +++
 .../css-masking/clip/clip-no-stacking-context.html | 36 ++++++++++++++++++++
 .../clip/clip-not-absolute-positioned-001.html     | 18 ++++++++++
 .../clip/clip-not-absolute-positioned-002.html     | 19 +++++++++++
 .../clip/clip-not-absolute-positioned-003.html     | 19 +++++++++++
 .../clip/clip-not-absolute-positioned-004.html     | 18 ++++++++++
 .../css/css-masking/clip/clip-rect-auto-001.html   | 20 ++++++++++++
 .../css/css-masking/clip/clip-rect-auto-002.html   | 18 ++++++++++
 .../css/css-masking/clip/clip-rect-auto-003.html   | 17 ++++++++++
 .../css/css-masking/clip/clip-rect-auto-004.html   | 18 ++++++++++
 .../css/css-masking/clip/clip-rect-auto-005.html   | 18 ++++++++++
 .../css/css-masking/clip/clip-rect-auto-006.html   | 18 ++++++++++
 .../css/css-masking/clip/clip-rect-comma-001.html  | 17 ++++++++++
 .../css/css-masking/clip/clip-rect-comma-002.html  | 17 ++++++++++
 .../css/css-masking/clip/clip-rect-comma-003.html  | 17 ++++++++++
 .../css/css-masking/clip/clip-rect-comma-004.html  | 17 ++++++++++
 .../css/css-masking/clip/clip-rect-scroll.html     | 24 ++++++++++++++
 .../css-masking/clip/clip-transform-order-2.html   | 30 +++++++++++++++++
 .../css/css-masking/clip/clip-transform-order.html | 28 ++++++++++++++++
 .../reference/clip-absolute-positioned-ref.html    | 11 +++++++
 .../css-masking/clip/reference/clip-full-ref.html  | 11 +++++++
 .../clip/reference/clip-horizontal-stripe-ref.html | 11 +++++++
 .../clip/reference/clip-no-clipping-ref.html       | 11 +++++++
 .../clip/reference/clip-overflow-hidden-ref.html   | 13 ++++++++
 .../clip/reference/clip-rect-bottom-ref.html       | 13 ++++++++
 .../clip/reference/clip-rect-left-ref.html         | 13 ++++++++
 .../clip/reference/clip-rect-right-ref.html        | 13 ++++++++
 .../clip/reference/clip-rect-scroll-ref.html       |  5 +++
 .../clip/reference/clip-rect-top-ref.html          | 13 ++++++++
 .../clip/reference/clip-vertical-stripe-ref.html   | 11 +++++++
 42 files changed, 743 insertions(+)
 create mode 100644 testing/web-platform/tests/css/css-masking/clip/clip-absolute-positioned-001.html
 create mode 100644 testing/web-platform/tests/css/css-masking/clip/clip-absolute-positioned-002.html
 create mode 100644 testing/web-platform/tests/css/css-masking/clip/clip-filter-order-ref.html
 create mode 100644 testing/web-platform/tests/css/css-masking/clip/clip-filter-order.html
 create mode 100644 testing/web-platform/tests/css/css-masking/clip/clip-fixed-pos-transform-descendant-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-masking/clip/clip-fixed-pos-transform-descendant-001.html
 create mode 100644 testing/web-platform/tests/css/css-masking/clip/clip-negative-values-001.html
 create mode 100644 testing/web-platform/tests/css/css-masking/clip/clip-negative-values-002.html
 create mode 100644 testing/web-platform/tests/css/css-masking/clip/clip-negative-values-003.html
 create mode 100644 testing/web-platform/tests/css/css-masking/clip/clip-negative-values-004.html
 create mode 100644 testing/web-platform/tests/css/css-masking/clip/clip-no-clipping-001.html
 create mode 100644 testing/web-platform/tests/css/css-masking/clip/clip-no-clipping-002.html
 create mode 100644 testing/web-platform/tests/css/css-masking/clip/clip-no-stacking-context-ref.html
 create mode 100644 testing/web-platform/tests/css/css-masking/clip/clip-no-stacking-context.html
 create mode 100644 testing/web-platform/tests/css/css-masking/clip/clip-not-absolute-positioned-001.html
 create mode 100644 testing/web-platform/tests/css/css-masking/clip/clip-not-absolute-positioned-002.html
 create mode 100644 testing/web-platform/tests/css/css-masking/clip/clip-not-absolute-positioned-003.html
 create mode 100644 testing/web-platform/tests/css/css-masking/clip/clip-not-absolute-positioned-004.html
 create mode 100644 testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-001.html
 create mode 100644 testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-002.html
 create mode 100644 testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-003.html
 create mode 100644 testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-004.html
 create mode 100644 testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-005.html
 create mode 100644 testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-006.html
 create mode 100644 testing/web-platform/tests/css/css-masking/clip/clip-rect-comma-001.html
 create mode 100644 testing/web-platform/tests/css/css-masking/clip/clip-rect-comma-002.html
 create mode 100644 testing/web-platform/tests/css/css-masking/clip/clip-rect-comma-003.html
 create mode 100644 testing/web-platform/tests/css/css-masking/clip/clip-rect-comma-004.html
 create mode 100644 testing/web-platform/tests/css/css-masking/clip/clip-rect-scroll.html
 create mode 100644 testing/web-platform/tests/css/css-masking/clip/clip-transform-order-2.html
 create mode 100644 testing/web-platform/tests/css/css-masking/clip/clip-transform-order.html
 create mode 100644 testing/web-platform/tests/css/css-masking/clip/reference/clip-absolute-positioned-ref.html
 create mode 100644 testing/web-platform/tests/css/css-masking/clip/reference/clip-full-ref.html
 create mode 100644 testing/web-platform/tests/css/css-masking/clip/reference/clip-horizontal-stripe-ref.html
 create mode 100644 testing/web-platform/tests/css/css-masking/clip/reference/clip-no-clipping-ref.html
 create mode 100644 testing/web-platform/tests/css/css-masking/clip/reference/clip-overflow-hidden-ref.html
 create mode 100644 testing/web-platform/tests/css/css-masking/clip/reference/clip-rect-bottom-ref.html
 create mode 100644 testing/web-platform/tests/css/css-masking/clip/reference/clip-rect-left-ref.html
 create mode 100644 testing/web-platform/tests/css/css-masking/clip/reference/clip-rect-right-ref.html
 create mode 100644 testing/web-platform/tests/css/css-masking/clip/reference/clip-rect-scroll-ref.html
 create mode 100644 testing/web-platform/tests/css/css-masking/clip/reference/clip-rect-top-ref.html
 create mode 100644 testing/web-platform/tests/css/css-masking/clip/reference/clip-vertical-stripe-ref.html

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

diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-absolute-positioned-001.html b/testing/web-platform/tests/css/css-masking/clip/clip-absolute-positioned-001.html
new file mode 100644
index 0000000000..c5b0d9001c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip/clip-absolute-positioned-001.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Masking: Test clip property and rect function on div with position: absolute</title>
+    <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clip-property">
+    <link rel="match" href="reference/clip-absolute-positioned-ref.html">
+    <meta name="assert" content="The clip property should clip elements whose
+    layout are governed by the CSS box model and that are abolutely positioned
+    with 'position: absolute;'. On pass you should see a green square and no
+    red.">
+</head>
+<body>
+    <p>The test passes if there is a green square and no red.</p>
+    <div style="width: 100px; height: 100px; border: solid red 50px; position: absolute; background-color: green; clip: rect(50px, 150px, 150px, 50px);"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-absolute-positioned-002.html b/testing/web-platform/tests/css/css-masking/clip/clip-absolute-positioned-002.html
new file mode 100644
index 0000000000..53b2517a27
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip/clip-absolute-positioned-002.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Masking: Test clip property and rect function on div with position: fixed</title>
+    <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clip-property">
+    <link rel="match" href="reference/clip-absolute-positioned-ref.html">
+    <meta name="assert" content="The clip property should clip elements whose
+    layout are governed by the CSS box model and that are abolutely positioned
+    with 'position: fixed;'. On pass you should see a green square and no
+    red.">
+</head>
+<body>
+    <p>The test passes if there is a green square and no red.</p>
+    <div style="width: 100px; height: 100px; border: solid red 50px; position: fixed; background-color: green; clip: rect(50px, 150px, 150px, 50px);"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-filter-order-ref.html b/testing/web-platform/tests/css/css-masking/clip/clip-filter-order-ref.html
new file mode 100644
index 0000000000..fe9511a8df
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip/clip-filter-order-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Clip should be applied after filtering</title>
+<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org">
+
+<style>
+  body { margin: 0 }
+  #testcase {
+    position: absolute;
+    left: 10px;
+    width: 200px;
+    height: 200px;
+    background: green;
+    will-change: transform;
+  }
+</style>
+
+<div>
+  <p>Expected: A green box.<br>
+  There should be no red visible.<br>
+  There should be a crisp, clipped edge around the green box (no blurring).</p>
+</div>
+
+<div id="testcase"></div>
diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-filter-order.html b/testing/web-platform/tests/css/css-masking/clip/clip-filter-order.html
new file mode 100644
index 0000000000..0570d02b85
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip/clip-filter-order.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Clip should be applied after filtering</title>
+<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org">
+<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#placement">
+<link rel="match" href="clip-filter-order-ref.html">
+
+<style>
+  body { margin: 0 }
+  #testcase {
+    position: absolute;
+    left: 10px;
+    width: 400px;
+    height: 400px;
+    background: green;
+    will-change: transform;
+    filter: drop-shadow(16px 16px 20px red);
+    clip: rect(0px, 200px, 200px, 0px);
+  }
+</style>
+
+<div>
+  <p>Expected: A green box.<br>
+  There should be no red visible.<br>
+  There should be a crisp, clipped edge around the green box (no blurring).</p>
+</div>
+
+<div id="testcase"></div>
diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-fixed-pos-transform-descendant-001-ref.html b/testing/web-platform/tests/css/css-masking/clip/clip-fixed-pos-transform-descendant-001-ref.html
new file mode 100644
index 0000000000..ed78cb7338
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip/clip-fixed-pos-transform-descendant-001-ref.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<title>CSS Test Reference</title>
+<style>
+  html, body { margin: 0 }
+  div {
+    width: 100px;
+    height: 100px;
+    background: lime;
+  }
+</style>
+<div></div>
diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-fixed-pos-transform-descendant-001.html b/testing/web-platform/tests/css/css-masking/clip/clip-fixed-pos-transform-descendant-001.html
new file mode 100644
index 0000000000..395b0bc964
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip/clip-fixed-pos-transform-descendant-001.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<title>CSS Masking: Transformed descendants of a fixed pos element under a clipped element get properly clipped</title>
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="match" href="clip-fixed-pos-transform-descendant-001-ref.html">
+<link rel="help" href="https://drafts.fxtf.org/css-masking/#clip-property">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1495791">
+<style>
+html, body { margin: 0; }
+
+#clip {
+  height: 100px;
+  width: 100px;
+  background: lime;
+  clip: rect(0, auto, auto, 0);
+  position: absolute;
+}
+
+#fixed {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100px;
+  height: 100px;
+}
+
+#clipped {
+  height: 100px;
+  width: 100px;
+  background: red;
+  transform: translateY(100px);
+}
+</style>
+<div id="clip">
+  <div id="fixed">
+    <div id="clipped"></div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-negative-values-001.html b/testing/web-platform/tests/css/css-masking/clip/clip-negative-values-001.html
new file mode 100644
index 0000000000..b295c89ba3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip/clip-negative-values-001.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Masking: Test clip property does not clip on with negative values - 1</title>
+    <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clip-property">
+    <link rel="match" href="reference/clip-full-ref.html">
+    <meta name="assert" content="Negative values are permitted on rect function
+    for clip. Test that whole element is clipped if bottom edge is before top
+    edge. On pass you should see a green square and no red.">
+</head>
+<body>
+    <p>The test passes if there is a green square and no red.</p>
+    <div style="background-color: green; width: 200px; height: 200px;">
+        <div style="width: 200px; height: 200px; background-color: red; position: absolute; clip: rect(0, -50px, 200px, 50px);"></div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-negative-values-002.html b/testing/web-platform/tests/css/css-masking/clip/clip-negative-values-002.html
new file mode 100644
index 0000000000..dd92e5b774
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip/clip-negative-values-002.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Masking: Test clip property does not clip on with negative values - 2</title>
+    <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clip-property">
+    <link rel="match" href="reference/clip-full-ref.html">
+    <meta name="assert" content="Negative values are permitted on rect function
+    for clip. Test that whole element is clipped if right edge is before left
+    edge. On pass you should see a green square and no red.">
+</head>
+<body>
+    <p>The test passes if there is a green square and no red.</p>
+    <div style="background-color: green; width: 200px; height: 200px;">
+        <div style="width: 200px; height: 200px; background-color: red; position: absolute; clip: rect(50px, 200px, -50px, 0);"></div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-negative-values-003.html b/testing/web-platform/tests/css/css-masking/clip/clip-negative-values-003.html
new file mode 100644
index 0000000000..5118135345
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip/clip-negative-values-003.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Masking: Test clip property does not clip on with negative values - 3</title>
+    <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clip-property">
+    <link rel="match" href="reference/clip-vertical-stripe-ref.html">
+    <meta name="assert" content="Negative values are permited on rect function
+    for clip. Test that left edge can be negative. On pass you should see a
+    vertical blue stripe.">
+</head>
+<body>
+    <p>The test passes if there is only a vertical blue stripe.</p>
+    <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; position: absolute; clip: rect(0, 50px, 200px, -50px);"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-negative-values-004.html b/testing/web-platform/tests/css/css-masking/clip/clip-negative-values-004.html
new file mode 100644
index 0000000000..1fb5add9da
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip/clip-negative-values-004.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Masking: Test clip property does not clip on with negative values - 4</title>
+    <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clip-property">
+    <link rel="match" href="reference/clip-horizontal-stripe-ref.html">
+    <meta name="assert" content="Negative values are permited on rect function
+    for clip. Test that top edge can be negative. On pass you should see a
+    horizontal blue stripe.">
+</head>
+<body>
+    <p>The test passes if there is only a horizontal blue stripe.</p>
+    <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; position: absolute; clip: rect(-50px, 200px, 50px, 0);"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-no-clipping-001.html b/testing/web-platform/tests/css/css-masking/clip/clip-no-clipping-001.html
new file mode 100644
index 0000000000..3a63c2ca71
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip/clip-no-clipping-001.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Masking: Test clip property does not clip on 'auto'</title>
+    <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clip-property">
+    <link rel="match" href="reference/clip-no-clipping-ref.html">
+    <meta name="assert" content="The clip property should on 'auto'. On pass
+    you should see a green box with a blue border.">
+</head>
+<body>
+    <p>The test passes if there is a green square with a blue border.</p>
+    <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; position: absolute; clip: auto"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-no-clipping-002.html b/testing/web-platform/tests/css/css-masking/clip/clip-no-clipping-002.html
new file mode 100644
index 0000000000..a09e6a0a85
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip/clip-no-clipping-002.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Masking: Test clip property does not clip overflowing content on 'auto'.</title>
+    <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clip-property">
+    <link rel="match" href="reference/clip-no-clipping-ref.html">
+    <meta name="assert" content="The clip property should not clip overflowing
+    content of elements whose layout are governed by the CSS box model, the
+    position is absolute and the clip value is 'auto'. On pass you should see a
+    a green square with a blue border.">
+</head>
+<body>
+    <p>The test passes if there is a green square with a blue border.</p>
+    <div style="width: 100px; height: 100px; position: absolute; clip: auto;">
+        <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green;"></div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-no-stacking-context-ref.html b/testing/web-platform/tests/css/css-masking/clip/clip-no-stacking-context-ref.html
new file mode 100644
index 0000000000..056af22375
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip/clip-no-stacking-context-ref.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<p>Expected: A green box with no red visible.</p>
+<div style="width: 100px; height: 100px; background: green;"></div>
diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-no-stacking-context.html b/testing/web-platform/tests/css/css-masking/clip/clip-no-stacking-context.html
new file mode 100644
index 0000000000..cbd07ee638
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip/clip-no-stacking-context.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Clip does not create a stacking context</title>
+<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#propdef-clip">
+<link rel="match" href="clip-no-stacking-context-ref.html">
+<link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org">
+
+<style>
+  #bottom {
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    background: red;
+    z-index: 1;
+  }
+  #clip {
+    position: absolute;
+    clip: rect(0px, 100px, 100px, 0px);
+  }
+  #top {
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    background: green;
+    z-index: 3;
+  }
+</style>
+
+<p>Expected: A green box with no red visible.</p>
+<div id="bottom"></div>
+<!-- If #clip creates a stacking context, it will be below #bottom (which has a
+     higher z-index) which will force #top to be below #bottom as well. This
+     should not happen because #clip should not create a stacking context. -->
+<div id="clip">
+  <div id="top"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-not-absolute-positioned-001.html b/testing/web-platform/tests/css/css-masking/clip/clip-not-absolute-positioned-001.html
new file mode 100644
index 0000000000..613f6afebc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip/clip-not-absolute-positioned-001.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Masking: Test clip property and rect function on not absolutely positioned div - 1</title>
+    <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clip-property">
+    <link rel="match" href="reference/clip-no-clipping-ref.html">
+    <meta name="assert" content="The clip property should be ignored on
+    elements whose layout are governed by the CSS box model and are not
+    abolutely positioned. On pass you should see a green square with a blue
+    border.">
+</head>
+<body>
+    <p>The test passes if there is a green square with a blue border.</p>
+    <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; clip: rect(50px, 150px, 150px, 50px);"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-not-absolute-positioned-002.html b/testing/web-platform/tests/css/css-masking/clip/clip-not-absolute-positioned-002.html
new file mode 100644
index 0000000000..4d071323f0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip/clip-not-absolute-positioned-002.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Masking: Test clip property and rect function on not absolutely positioned div - 2</title>
+    <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clip-property">
+    <link rel="match" href="reference/clip-no-clipping-ref.html">
+    <meta name="assert" content="The clip property should be ignored on
+    elements whose layout are governed by the CSS box model and are not
+    abolutely positioned. Creating a stacking context with z-index does not
+    influence clipping behavior. On pass you should see a green box square with
+    a blue border.">
+</head>
+<body>
+    <p>The test passes if there is a green square with a blue border.</p>
+    <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; z-index: 10; clip: rect(50px, 150px, 150px, 50px);"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-not-absolute-positioned-003.html b/testing/web-platform/tests/css/css-masking/clip/clip-not-absolute-positioned-003.html
new file mode 100644
index 0000000000..ee3765db7a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip/clip-not-absolute-positioned-003.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Masking: Test clip property and rect function on not absolutely positioned div - 3</title>
+    <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clip-property">
+    <link rel="match" href="reference/clip-no-clipping-ref.html">
+    <meta name="assert" content="The clip property should be ignored on
+    elements whose layout are governed by the CSS box model and are not
+    abolutely positioned. Creating a 3d rednering context does not influence
+    clipping behavior. On pass you should see a green square with a blue
+    border.">
+</head>
+<body style="perspective: 400px;">
+    <p>The test passes if there is a green square with a blue border.</p>
+    <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; transform-style: preserve-3d; transform: translate3d(0, 0, 0); clip: rect(50px, 150px, 150px, 50px);"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-not-absolute-positioned-004.html b/testing/web-platform/tests/css/css-masking/clip/clip-not-absolute-positioned-004.html
new file mode 100644
index 0000000000..56825d10f6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip/clip-not-absolute-positioned-004.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Masking: Test clip property and rect function on not absolutely positioned div - 4</title>
+    <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clip-property">
+    <link rel="match" href="reference/clip-no-clipping-ref.html">
+    <meta name="assert" content="The clip property should be ignored on
+    elements whose layout are governed by the CSS box model and are not
+    abolutely positioned. position: relative does not influence clipping
+    behavior. On pass you should see a green square with a blue border.">
+</head>
+<body>
+    <p>The test passes if there is a green square with a blue border.</p>
+    <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; position: relative; clip: rect(50px, 150px, 150px, 50px);"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-001.html b/testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-001.html
new file mode 100644
index 0000000000..6a1a064059
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-001.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Masking: Test clip property with rect function and auto values clip to border box - 1</title>
+    <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clip-property">
+    <link rel="match" href="reference/clip-overflow-hidden-ref.html">
+    <meta name="assert" content="A value of 'auto' in the rect function is
+    equal to the certain edge of the border box. The content should be clipped
+    to the border box. On pass you see a blue square and a smaller green square
+    in the bottom right corner of the blue square.">
+</head>
+<body>
+    <p>The test passes if there is a blue square and a smaller green square in the bottom right corner of the blue square.</p>
+    <div style="position: absolute; clip: rect(auto, auto, auto, auto); width: 100px; height: 100px;">
+        <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green;"></div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-002.html b/testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-002.html
new file mode 100644
index 0000000000..0ee45183b8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-002.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Masking: Test clip property with rect function and auto values clip to border box - 2</title>
+    <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clip-property">
+    <link rel="match" href="reference/clip-no-clipping-ref.html">
+    <meta name="assert" content="A value of 'auto' in the rect function is
+    equal to the certain edge of the border box. The box shadow should be
+    clipped, since it is painted outside the border box. On pass you should see
+    a green square with a blue border.">
+</head>
+<body>
+    <p>The test passes if there is a green square with a blue border.</p>
+    <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; position: absolute; clip: rect(auto, auto, auto, auto); box-shadow: 0 0 10px red;"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-003.html b/testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-003.html
new file mode 100644
index 0000000000..5f12ae4863
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-003.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Masking: Test clip property with rect function and auto value for top value</title>
+    <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clip-property">
+    <link rel="match" href="reference/clip-rect-top-ref.html">
+    <meta name="assert" content="A value of 'auto' for 'top' in the rect
+    function is equal to the top edge of the border box. The box shadow should
+    be clipped, since it is painted outside the border box. On pass you should see a horizontal green stripe under a horizontal blue stripe.">
+</head>
+<body>
+    <p>The test passes if there is a horizontal green stripe under a horizontal blue stripe.</p>
+    <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; position: absolute; clip: rect(auto, 150px, 100px, 50px); box-shadow: 0 0 10px red;"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-004.html b/testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-004.html
new file mode 100644
index 0000000000..d5d5ce9b31
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-004.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Masking: Test clip property with rect function and auto value for right value</title>
+    <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clip-property">
+    <link rel="match" href="reference/clip-rect-right-ref.html">
+    <meta name="assert" content="A value of 'auto' for 'right' in the rect
+    function is equal to the top edge of the border box. The box shadow should
+    be clipped, since it is painted outside the border box. On pass you should
+    see a vertical blue stripe on the right side of a vertical green stripe.">
+</head>
+<body>
+    <p>The test passes if there is a vertical blue stripe on the right side of a vertical green stripe.</p>
+    <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; position: absolute; clip: rect(50px, auto, 150px, 100px); box-shadow: 0 0 10px red;"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-005.html b/testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-005.html
new file mode 100644
index 0000000000..b2b3b13a49
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-005.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Masking: Test clip property with rect function and auto value for bottom value</title>
+    <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clip-property">
+    <link rel="match" href="reference/clip-rect-bottom-ref.html">
+    <meta name="assert" content="A value of 'auto' for 'bottom' in the rect
+    function is equal to the top edge of the border box. The box shadow should
+    be clipped, since it is painted outside the border box. On pass you should
+    see a horizontal blue stripe under a horizontal green stripe.">
+</head>
+<body>
+    <p>The test passes if there is a horizontal blue stripe under a horizontal green stripe.</p>
+    <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; position: absolute; clip: rect(100px, 150px, auto, 50px); box-shadow: 0 0 10px red;"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-006.html b/testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-006.html
new file mode 100644
index 0000000000..410b93d28b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip/clip-rect-auto-006.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Masking: Test clip property with rect function and auto value for left value</title>
+    <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
+    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clip-property">
+    <link rel="match" href="reference/clip-rect-left-ref.html">
+    <meta name="assert" content="A value of 'auto' for 'left' in the rect
+    function is equal to the top edge of the border box. The box shadow should
+    be clipped, since it is painted outside the border box. On pass you should
+    see a vertical green stripe on the right side of a vertical blue stripe.">
+</head>
+<body>
+    <p>The test passes if there is a vertical green stripe on the right side of a vertical blue stripe.</p>
+    <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; position: absolute; clip: rect(50px, 100px, 150px, auto); box-shadow: 0 0 10px red;"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-rect-comma-001.html b/testing/web-platform/tests/css/css-masking/clip/clip-rect-comma-001.html
new file mode 100644
index 0000000000..d15b324a4f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip/clip-rect-comma-001.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Masking: Test comma separation of rect function on clip - no commas</title>
+    <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clip-property">
+    <link rel="match" href="reference/clip-absolute-positioned-ref.html">
+    <meta name="assert" content="Values for rect function on clip can be white
+    space or comma separated, but not both. Otherwise the property setting gets
+    ignored. Testing rect function with white space separation. On pass you
+    should see a green square and no red.">
+</head>
+<body>
+    <p>The test passes if there is a green square and no red.</p>
+    <div style="width: 100px; height: 100px; border: solid red 50px; background-color: green; position: absolute; clip: rect(50px 150px 150px 50px);"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-rect-comma-002.html b/testing/web-platform/tests/css/css-masking/clip/clip-rect-comma-002.html
new file mode 100644
index 0000000000..aad2aebe67
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip/clip-rect-comma-002.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Masking: Test comma separation of rect function on clip - no comma between 1st and 2nd value</title>
+    <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clip-property">
+    <link rel="match" href="reference/clip-no-clipping-ref.html">
+    <meta name="assert" content="Values for rect function on clip can be white
+    space or comma separated, but not both. Otherwise the property setting gets
+    ignored. Testing rect function without comma separation between 1st and 2nd
+    value. On pass you should see a green square with a blue border.">
+</head>
+<body>
+    <p>The test passes if there is a green square with a blue border.</p>
+    <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; position: absolute; clip: rect(50px 150px, 150px, 50px);"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-rect-comma-003.html b/testing/web-platform/tests/css/css-masking/clip/clip-rect-comma-003.html
new file mode 100644
index 0000000000..875e97173e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip/clip-rect-comma-003.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Masking: Test comma separation of rect function on clip - no comma between 2nd and 3rd value</title>
+    <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clip-property">
+    <link rel="match" href="reference/clip-no-clipping-ref.html">
+    <meta name="assert" content="Values for rect function on clip can be white
+    space or comma separated, but not both. Otherwise the property setting gets
+    ignored. Testing rect function without comma separation between 2nd and 3rd
+    value. On pass you should see a green square with a blue border.">
+</head>
+<body>
+    <p>The test passes if there is a green square with a blue border.</p>
+    <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; position: absolute; clip: rect(50px, 150px 150px, 50px);"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-rect-comma-004.html b/testing/web-platform/tests/css/css-masking/clip/clip-rect-comma-004.html
new file mode 100644
index 0000000000..2a8b9305df
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip/clip-rect-comma-004.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Masking: Test comma separation of rect function on clip - no comma between 3rd and 4th value</title>
+    <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+    <link rel="help" href="http://www.w3.org/TR/css-masking-1/#clip-property">
+    <link rel="match" href="reference/clip-no-clipping-ref.html">
+    <meta name="assert" content="Values for rect function on clip can be white
+    space or comma separated, but not both. Otherwise the property setting gets
+    ignored. Testing rect function without comma separation between 3rd and 4th
+    value. On pass you should see a green square with a blue border.">
+</head>
+<body>
+    <p>The test passes if there is a green square with a blue border.</p>
+    <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green; position: absolute; clip: rect(50px, 150px, 150px 50px);"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-rect-scroll.html b/testing/web-platform/tests/css/css-masking/clip/clip-rect-scroll.html
new file mode 100644
index 0000000000..0c84ee299a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip/clip-rect-scroll.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<title>CSS Masking: Test clip property with rect function with overflow:scroll</title>
+<link rel="help" href="http://www.w3.org/TR/css-masking-1/#clip-property">
+<link rel="match" href="reference/clip-rect-scroll-ref.html">
+<html class="reftest-wait">
+<p>The test passes if there is a green square containing text (which can be scrolled
+with mouse wheel or touch). No scrollbars should be seen.</p>
+<div id="target" style="position: absolute; clip: rect(10px,100px,100px,10px);
+            width: 200px; height: 200px; overflow: scroll; background: red">
+  <div style="position: relative; top: 100px;
+              width: 100px; height: 100px; background: green">
+  </div>
+  <div style="height: 1000px"></div>
+</div>
+<script>
+requestAnimationFrame(() => {
+  requestAnimationFrame(() => {
+    target.scrollTop = 100;
+    document.documentElement.classList.remove("reftest-wait");
+  });
+});
+</script>
+</html>
+
diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-transform-order-2.html b/testing/web-platform/tests/css/css-masking/clip/clip-transform-order-2.html
new file mode 100644
index 0000000000..bd8e909d76
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip/clip-transform-order-2.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<title>Clips should be applied before transforms (when fixed positioned too)</title>
+<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#placement">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1524966">
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="match" href="clip-filter-order-ref.html">
+
+<style>
+  body { margin: 0; overflow: hidden; }
+  #testcase {
+    position: fixed;
+    left: -100px;
+    width: 400px;
+    height: 400px;
+    background: green;
+    transform: translateX(110px);
+    clip: rect(0px, 200px, 200px, 0px);
+  }
+</style>
+
+<div>
+  <p>Expected: A green box.<br>
+  There should be no red visible.<br>
+  There should be a crisp, clipped edge around the green box (no blurring).</p>
+</div>
+
+<div id="testcase"><div></div></div>
+
+<div id="padding" style="height: 100vh"></div>
diff --git a/testing/web-platform/tests/css/css-masking/clip/clip-transform-order.html b/testing/web-platform/tests/css/css-masking/clip/clip-transform-order.html
new file mode 100644
index 0000000000..1f24864bc9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip/clip-transform-order.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<title>Clips should be applied before transforms</title>
+<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#placement">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1524966">
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<link rel="match" href="clip-filter-order-ref.html">
+
+<style>
+  body { margin: 0 }
+  #testcase {
+    position: absolute;
+    left: -100px;
+    width: 400px;
+    height: 400px;
+    background: green;
+    transform: translateX(110px);
+    clip: rect(0px, 200px, 200px, 0px);
+  }
+</style>
+
+<div>
+  <p>Expected: A green box.<br>
+  There should be no red visible.<br>
+  There should be a crisp, clipped edge around the green box (no blurring).</p>
+</div>
+
+<div id="testcase"><div></div></div>
diff --git a/testing/web-platform/tests/css/css-masking/clip/reference/clip-absolute-positioned-ref.html b/testing/web-platform/tests/css/css-masking/clip/reference/clip-absolute-positioned-ref.html
new file mode 100644
index 0000000000..2a9a49fd3a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip/reference/clip-absolute-positioned-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+</head>
+<body>
+    <p>The test passes if there is a green square and no red.</p>
+    <div style="width: 100px; height: 100px; border: 50px solid white; background-color: green;"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip/reference/clip-full-ref.html b/testing/web-platform/tests/css/css-masking/clip/reference/clip-full-ref.html
new file mode 100644
index 0000000000..f556d5f12a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip/reference/clip-full-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+</head>
+<body>
+    <p>The test passes if there is a green square and no red.</p>
+    <div style="width: 200px; height: 200px; background-color: green;"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip/reference/clip-horizontal-stripe-ref.html b/testing/web-platform/tests/css/css-masking/clip/reference/clip-horizontal-stripe-ref.html
new file mode 100644
index 0000000000..fccb18318d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip/reference/clip-horizontal-stripe-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+</head>
+<body>
+    <p>The test passes if there is only a horizontal blue stripe.</p>
+    <div style="width: 200px; height: 50px; background-color: blue;"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip/reference/clip-no-clipping-ref.html b/testing/web-platform/tests/css/css-masking/clip/reference/clip-no-clipping-ref.html
new file mode 100644
index 0000000000..724f8c5194
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip/reference/clip-no-clipping-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+</head>
+<body>
+    <p>The test passes if there is a green square with a blue border.</p>
+    <div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green;"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip/reference/clip-overflow-hidden-ref.html b/testing/web-platform/tests/css/css-masking/clip/reference/clip-overflow-hidden-ref.html
new file mode 100644
index 0000000000..e6a6e125e8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip/reference/clip-overflow-hidden-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+</head>
+<body>
+    <p>The test passes if there is a blue square and a smaller green square in the bottom right corner of the blue square.</p>
+    <div style="overflow: hidden; width: 100px; height: 100px;">
+    	<div style="width: 100px; height: 100px; border: solid blue 50px; background-color: green;"></div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip/reference/clip-rect-bottom-ref.html b/testing/web-platform/tests/css/css-masking/clip/reference/clip-rect-bottom-ref.html
new file mode 100644
index 0000000000..9642435bf1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip/reference/clip-rect-bottom-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+</head>
+<body>
+    <p>The test passes if there is a horizontal blue stripe under a horizontal green stripe.</p>
+    <div style="background-color: blue; width: 100px; height: 100px; border-left: 50px solid white; border-top: 100px solid white">
+    	<div style="width: 100px; height: 50px; background-color: green;"></div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip/reference/clip-rect-left-ref.html b/testing/web-platform/tests/css/css-masking/clip/reference/clip-rect-left-ref.html
new file mode 100644
index 0000000000..b6dd6e0a48
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip/reference/clip-rect-left-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+</head>
+<body>
+    <p>The test passes if there is a vertical green stripe on the right side of a vertical blue stripe.</p>
+    <div style="background-color: green; width: 100px; height: 100px; border-top: 50px solid white;">
+    	<div style="width: 50px; height: 100px; background-color: blue;"></div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip/reference/clip-rect-right-ref.html b/testing/web-platform/tests/css/css-masking/clip/reference/clip-rect-right-ref.html
new file mode 100644
index 0000000000..09b90e7614
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip/reference/clip-rect-right-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+</head>
+<body>
+    <p>The test passes if there is a vertical blue stripe on the right side of a vertical green stripe.</p>
+    <div style="background-color: blue; width: 100px; height: 100px; border-left: 100px solid white; border-top: 50px solid white;">
+    	<div style="width: 50px; height: 100px; background-color: green;"></div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip/reference/clip-rect-scroll-ref.html b/testing/web-platform/tests/css/css-masking/clip/reference/clip-rect-scroll-ref.html
new file mode 100644
index 0000000000..a647e8a0c2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip/reference/clip-rect-scroll-ref.html
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<p>The test passes if there is a green square containing text (which can be scrolled
+with mouse wheel or touch). No scrollbars should be seen.</p>
+<div style="position: relative; top: 10px; left: 10px; width: 90px; height: 90px; background: green">
+</div>
diff --git a/testing/web-platform/tests/css/css-masking/clip/reference/clip-rect-top-ref.html b/testing/web-platform/tests/css/css-masking/clip/reference/clip-rect-top-ref.html
new file mode 100644
index 0000000000..5ec30181f2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip/reference/clip-rect-top-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+</head>
+<body>
+    <p>The test passes if there is a horizontal green stripe under a horizontal blue stripe.</p>
+    <div style="background-color: green; width: 100px; height: 100px; margin-left: 50px;">
+    	<div style="width: 100px; height: 50px; background-color: blue;"></div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/css/css-masking/clip/reference/clip-vertical-stripe-ref.html b/testing/web-platform/tests/css/css-masking/clip/reference/clip-vertical-stripe-ref.html
new file mode 100644
index 0000000000..96ccc2c19c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-masking/clip/reference/clip-vertical-stripe-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSS Reftest Reference</title>
+    <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+</head>
+<body>
+    <p>The test passes if there is only a vertical blue stripe.</p>
+    <div style="width: 50px; height: 200px; background-color: blue;"></div>
+</body>
+</html>
\ No newline at end of file
-- 
cgit v1.2.3