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>
---
 .../background-clip/clip-border-box.html           | 71 +++++++++++++++++++++
 .../clip-border-box_with_position.html             | 72 ++++++++++++++++++++++
 .../clip-border-box_with_radius.html               | 72 ++++++++++++++++++++++
 .../background-clip/clip-border-box_with_size.html | 71 +++++++++++++++++++++
 .../background-clip/clip-content-box.html          | 71 +++++++++++++++++++++
 .../clip-content-box_with_position.html            | 72 ++++++++++++++++++++++
 .../clip-content-box_with_radius.html              | 72 ++++++++++++++++++++++
 .../clip-content-box_with_size.html                | 70 +++++++++++++++++++++
 .../background-clip/clip-padding-box.html          | 72 ++++++++++++++++++++++
 .../clip-padding-box_with_position.html            | 71 +++++++++++++++++++++
 .../clip-padding-box_with_radius.html              | 71 +++++++++++++++++++++
 .../clip-padding-box_with_size.html                | 71 +++++++++++++++++++++
 .../background-clip/clip-rounded-corner-ref.html   | 26 ++++++++
 .../background-clip/clip-rounded-corner.html       | 28 +++++++++
 .../background-clip/clip-text-dynamic-2-ref.html   | 23 +++++++
 .../background-clip/clip-text-dynamic-2.html       | 39 ++++++++++++
 .../background-clip/clip-text-flex-ref.html        | 16 +++++
 .../background-clip/clip-text-flex.html            | 21 +++++++
 .../background-clip/clip-text-multi-line-ref.html  | 22 +++++++
 .../background-clip/clip-text-multi-line.html      | 40 ++++++++++++
 .../css/css-backgrounds/background-clip/list.txt   | 12 ++++
 21 files changed, 1083 insertions(+)
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/background-clip/clip-border-box.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/background-clip/clip-border-box_with_position.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/background-clip/clip-border-box_with_radius.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/background-clip/clip-border-box_with_size.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/background-clip/clip-content-box.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/background-clip/clip-content-box_with_position.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/background-clip/clip-content-box_with_radius.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/background-clip/clip-content-box_with_size.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/background-clip/clip-padding-box.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/background-clip/clip-padding-box_with_position.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/background-clip/clip-padding-box_with_radius.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/background-clip/clip-padding-box_with_size.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/background-clip/clip-rounded-corner-ref.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/background-clip/clip-rounded-corner.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/background-clip/clip-text-dynamic-2-ref.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/background-clip/clip-text-dynamic-2.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/background-clip/clip-text-flex-ref.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/background-clip/clip-text-flex.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/background-clip/clip-text-multi-line-ref.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/background-clip/clip-text-multi-line.html
 create mode 100644 testing/web-platform/tests/css/css-backgrounds/background-clip/list.txt

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

diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-border-box.html b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-border-box.html
new file mode 100644
index 0000000000..12763856c6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-border-box.html
@@ -0,0 +1,71 @@
+
+<!doctype html>
+<html>
+<head>
+  <title>CSS Backgrounds Test:  background-clip:border-box</title>
+  <link rel="author" title="finscn" href="mailto:finscn@gmail.com" >
+  <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" >
+  <meta name="flags" content="image">
+  <meta name="assert" content="border-box : The background is painted within (clipped to) the border box." >
+
+  <meta charset="utf-8">
+
+<style type="text/css">
+
+  .infomation {
+    padding : 10px;
+    font-size : 16pt;
+    margin : 5px;
+  }
+
+  .test-case {
+    padding : 5px;
+    margin : 5px;
+  }
+
+  .view {
+    border : 30px solid rgba(60,150,255,0.4);
+    width : 320px;
+    height : 240px;
+    padding : 30px;
+    margin : 10px;
+    font-size : 16pt;
+    color : #ff9933;
+    background-image : url("../support/css3.png");
+  }
+
+  .no-repeat {
+    background-repeat : no-repeat;
+  }
+
+  .case {
+    background-clip : border-box;
+  }
+
+
+</style>
+
+
+</head>
+<body>
+
+<div class="infomation">
+Test Passed If : The background is clipped. The clip area includes the area covered by border , and the area surrounded by border.<br>
+</div>
+
+<div class="test-case">
+
+  <div class="view case no-repeat" >
+      Test background-clip
+  </div>
+
+  <div class="view case" >
+      Test background-clip
+  </div>
+
+
+</div>
+
+</body>
+
+</html>
diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-border-box_with_position.html b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-border-box_with_position.html
new file mode 100644
index 0000000000..300554754a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-border-box_with_position.html
@@ -0,0 +1,72 @@
+
+<!doctype html>
+<html>
+<head>
+  <title>CSS Backgrounds Test:  background-clip:border-box & background-position</title>
+  <link rel="author" title="finscn" href="mailto:finscn@gmail.com" >
+  <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" >
+  <meta name="flags" content="image">
+  <meta name="assert" content="border-box : The background is painted within (clipped to) the border box." >
+
+  <meta charset="utf-8">
+
+<style type="text/css">
+
+  .infomation {
+    padding : 10px;
+    font-size : 16pt;
+    margin : 5px;
+  }
+
+  .test-case {
+    padding : 5px;
+    margin : 5px;
+  }
+
+  .view {
+    border : 30px solid rgba(60,150,255,0.4);
+    width : 320px;
+    height : 240px;
+    padding : 30px;
+    margin : 10px;
+    font-size : 16pt;
+    color : #ff9933;
+    background-image : url("../support/css3.png");
+  }
+
+  .no-repeat {
+    background-repeat : no-repeat;
+  }
+
+  .case {
+    background-clip : border-box;
+    background-position: -15px -15px;
+  }
+
+
+ </style>
+
+</head>
+<body>
+
+<div class="infomation">
+Test Passed If : The background is clipped. The clip area includes the area covered by border , and the area surrounded by border.<br>
+When background-position is enabled, the browser should clip the background correctly.
+</div>
+
+<div class="test-case">
+
+  <div class="view case no-repeat" >
+      Test background-clip:
+  </div>
+
+  <div class="view case" >
+      Test background-clip:
+  </div>
+
+
+</div>
+
+</body>
+
+</html>
diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-border-box_with_radius.html b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-border-box_with_radius.html
new file mode 100644
index 0000000000..f01d5e69ef
--- /dev/null
+++ b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-border-box_with_radius.html
@@ -0,0 +1,72 @@
+
+<!doctype html>
+<html>
+<head>
+  <title>CSS Backgrounds Test:  background-clip:border-box & border-radius</title>
+  <link rel="author" title="finscn" href="mailto:finscn@gmail.com" >
+  <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" >
+  <meta name="flags" content="image">
+  <meta name="assert" content="border-box : The background is painted within (clipped to) the border box." >
+
+  <meta charset="utf-8">
+
+<style type="text/css">
+
+  .infomation {
+    padding : 10px;
+    font-size : 16pt;
+    margin : 5px;
+  }
+
+  .test-case {
+    padding : 5px;
+    margin : 5px;
+  }
+
+  .view {
+    border : 30px solid rgba(60,150,255,0.4);
+    width : 320px;
+    height : 240px;
+    padding : 30px;
+    margin : 10px;
+    font-size : 16pt;
+    color : #ff9933;
+    background-image : url("../support/css3.png");
+  }
+
+  .no-repeat {
+    background-repeat : no-repeat;
+  }
+
+  .case {
+    background-clip : border-box;
+    border-radius: 60px;
+  }
+
+
+ </style>
+
+</head>
+<body>
+
+<div class="infomation">
+Test Passed If : The background is clipped. The clip area includes the area covered by border , and the area surrounded by border.<br>
+When border-radius is enabled, the browser should clip the background correctly.
+</div>
+
+<div class="test-case">
+
+  <div id="border-box" class="view case no-repeat" >
+      Test background-clip:
+  </div>
+
+  <div id="border-box" class="view case" >
+      Test background-clip:
+  </div>
+
+
+</div>
+
+</body>
+
+</html>
diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-border-box_with_size.html b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-border-box_with_size.html
new file mode 100644
index 0000000000..13617d3899
--- /dev/null
+++ b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-border-box_with_size.html
@@ -0,0 +1,71 @@
+
+<!doctype html>
+<html>
+<head>
+  <title>CSS Backgrounds Test:  background-clip:border-box & background-size</title>
+  <link rel="author" title="finscn" href="mailto:finscn@gmail.com" >
+  <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" >
+  <meta name="flags" content="image">
+  <meta name="assert" content="border-box : The background is painted within (clipped to) the border box." >
+
+  <meta charset="utf-8">
+
+<style type="text/css">
+
+  .infomation {
+    padding : 10px;
+    font-size : 16pt;
+    margin : 5px;
+  }
+
+  .test-case {
+    padding : 5px;
+    margin : 5px;
+  }
+
+  .view {
+    border : 30px solid rgba(60,150,255,0.4);
+    width : 320px;
+    height : 240px;
+    padding : 30px;
+    margin : 10px;
+    font-size : 16pt;
+    color : #ff9933;
+    background-image : url("../support/css3.png");
+  }
+
+  .no-repeat {
+    background-repeat : no-repeat;
+  }
+
+  .case {
+    background-clip : border-box;
+    background-size : 50%;
+  }
+
+
+ </style>
+
+</head>
+<body>
+
+<div class="infomation">
+Test Passed If : The background is clipped. The clip area includes the area covered by border , and the area surrounded by border.<br>
+When background-size is enabled, the browser should clip the background correctly.
+</div>
+
+<div class="test-case">
+
+  <div id="border-box" class="view case no-repeat" >
+      Test background-clip:
+  </div>
+
+  <div id="border-box" class="view case" >
+      Test background-clip:
+  </div>
+
+</div>
+
+</body>
+
+</html>
diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-content-box.html b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-content-box.html
new file mode 100644
index 0000000000..94fe5c1e1c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-content-box.html
@@ -0,0 +1,71 @@
+
+<!doctype html>
+<html>
+<head>
+  <title>CSS Backgrounds Test:  background-clip:content-box</title>
+  <link rel="author" title="finscn" href="mailto:finscn@gmail.com" >
+  <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" >
+  <meta name="flags" content="image">
+  <meta name="assert" content="content-box : The background is painted within (clipped to) the content box." >
+
+  <meta charset="utf-8">
+
+
+<style type="text/css">
+
+  .infomation {
+    padding : 10px;
+    font-size : 16pt;
+    margin : 5px;
+  }
+
+  .test-case {
+    padding : 5px;
+    margin : 5px;
+  }
+
+  .view {
+    border : 30px solid rgba(60,150,255,0.4);
+    width : 320px;
+    height : 240px;
+    padding : 30px;
+    margin : 10px;
+    font-size : 16pt;
+    color : #ff9933;
+    background-image : url("../support/css3.png");
+  }
+
+  .no-repeat {
+    background-repeat : no-repeat;
+  }
+
+  .case {
+    background-clip : content-box;
+  }
+
+
+</style>
+
+
+</head>
+<body>
+
+<div class="infomation">
+Test Passed If : The background is clipped. The clip area is the content-area(excludes padding-area ) of the DIV.<br>
+</div>
+
+<div class="test-case">
+
+  <div class="view case no-repeat" >
+      Test background-clip
+  </div>
+
+  <div class="view case" >
+      Test background-clip
+  </div>
+
+</div>
+
+</body>
+
+</html>
diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-content-box_with_position.html b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-content-box_with_position.html
new file mode 100644
index 0000000000..7f1cc4d556
--- /dev/null
+++ b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-content-box_with_position.html
@@ -0,0 +1,72 @@
+
+<!doctype html>
+<html>
+<head>
+  <title>CSS Backgrounds Test:  background-clip:content-box & background-position</title>
+  <link rel="author" title="finscn" href="mailto:finscn@gmail.com" >
+  <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" >
+  <meta name="flags" content="image">
+  <meta name="assert" content="content-box : The background is painted within (clipped to) the content box." >
+
+  <meta charset="utf-8">
+
+
+<style type="text/css">
+
+  .infomation {
+    padding : 10px;
+    font-size : 16pt;
+    margin : 5px;
+  }
+
+  .test-case {
+    padding : 5px;
+    margin : 5px;
+  }
+
+  .view {
+    border : 30px solid rgba(60,150,255,0.4);
+    width : 320px;
+    height : 240px;
+    padding : 30px;
+    margin : 10px;
+    font-size : 16pt;
+    color : #ff9933;
+    background-image : url("../support/css3.png");
+  }
+
+  .no-repeat {
+    background-repeat : no-repeat;
+  }
+
+  .case {
+    background-clip : content-box;
+    background-position: -15px -15px;
+  }
+
+
+ </style>
+
+</head>
+<body>
+
+<div class="infomation">
+Test Passed If : The background is clipped. The clip area is the content-area(excludes padding-area ) of the DIV.<br>
+When background-position is enabled, the browser should clip the background correctly.
+</div>
+
+<div class="test-case">
+
+  <div class="view case no-repeat" >
+      Test background-clip
+  </div>
+
+  <div class="view case" >
+      Test background-clip
+  </div>
+
+</div>
+
+</body>
+
+</html>
diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-content-box_with_radius.html b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-content-box_with_radius.html
new file mode 100644
index 0000000000..0aea268973
--- /dev/null
+++ b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-content-box_with_radius.html
@@ -0,0 +1,72 @@
+
+<!doctype html>
+<html>
+<head>
+  <title>CSS Backgrounds Test:  background-clip:content-box & border-radius</title>
+  <link rel="author" title="finscn" href="mailto:finscn@gmail.com" >
+  <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" >
+  <meta name="flags" content="image">
+  <meta name="assert" content="content-box : The background is painted within (clipped to) the content box." >
+
+  <meta charset="utf-8">
+
+
+<style type="text/css">
+
+  .infomation {
+    padding : 10px;
+    font-size : 16pt;
+    margin : 5px;
+  }
+
+  .test-case {
+    padding : 5px;
+    margin : 5px;
+  }
+
+  .view {
+    border : 30px solid rgba(60,150,255,0.4);
+    width : 320px;
+    height : 240px;
+    padding : 30px;
+    margin : 10px;
+    font-size : 16pt;
+    color : #ff9933;
+    background-image : url("../support/css3.png");
+  }
+
+  .no-repeat {
+    background-repeat : no-repeat;
+  }
+
+  .case {
+    background-clip : content-box;
+    border-radius: 60px;
+  }
+
+
+ </style>
+
+</head>
+<body>
+
+<div class="infomation">
+Test Passed If : The background is clipped. The clip area is the content-area(excludes padding-area ) of the DIV.<br>
+When border-radius is enabled, the browser should clip the background correctly.
+</div>
+
+<div class="test-case">
+
+  <div class="view case no-repeat" >
+      Test background-clip
+  </div>
+
+  <div class="view case" >
+      Test background-clip
+  </div>
+
+</div>
+
+</body>
+
+</html>
diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-content-box_with_size.html b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-content-box_with_size.html
new file mode 100644
index 0000000000..efe2eda39e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-content-box_with_size.html
@@ -0,0 +1,70 @@
+
+<!doctype html>
+<html>
+<head>
+  <title>CSS Backgrounds Test:  background-clip:content-box & background-size</title>
+  <link rel="author" title="finscn" href="mailto:finscn@gmail.com" >
+  <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" >
+  <meta name="flags" content="image">
+  <meta name="assert" content="content-box : The background is painted within (clipped to) the content box." >
+
+  <meta charset="utf-8">
+
+
+<style type="text/css">
+
+  .infomation {
+    padding : 10px;
+    font-size : 16pt;
+    margin : 5px;
+  }
+
+  .test-case {
+    padding : 5px;
+    margin : 5px;
+  }
+
+  .view {
+    border : 30px solid rgba(60,150,255,0.4);
+    width : 320px;
+    height : 240px;
+    padding : 30px;
+    margin : 10px;
+    font-size : 16pt;
+    color : #ff9933;
+    background-image : url("../support/css3.png");
+  }
+
+  .no-repeat {
+    background-repeat : no-repeat;
+  }
+
+  .case {
+    background-clip : content-box;
+    background-size : 50%;
+  }
+
+ </style>
+
+</head>
+<body>
+<div class="infomation">
+Test Passed If : The background is clipped. The clip area is the content-area(excludes padding-area ) of the DIV.<br>
+When background-size is enabled, the browser should clip the background correctly.
+</div>
+
+<div class="test-case">
+
+  <div class="view case no-repeat" >
+      Test background-clip
+  </div>
+
+  <div class="view case" >
+      Test background-clip
+  </div>
+
+</div>
+
+</body>
+
+</html>
diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-padding-box.html b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-padding-box.html
new file mode 100644
index 0000000000..eb5c44fcad
--- /dev/null
+++ b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-padding-box.html
@@ -0,0 +1,72 @@
+
+<!doctype html>
+<html>
+<head>
+  <title>CSS Backgrounds Test:  background-clip:padding-box</title>
+  <link rel="author" title="finscn" href="mailto:finscn@gmail.com" >
+  <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" >
+  <meta name="flags" content="image">
+  <meta name="assert" content="padding-box : The background is painted within (clipped to) the padding box" >
+
+  <meta charset="utf-8">
+
+
+<style type="text/css">
+
+  .infomation {
+    padding : 10px;
+    font-size : 16pt;
+    margin : 5px;
+  }
+
+  .test-case {
+    padding : 5px;
+    margin : 5px;
+  }
+
+  .view {
+    border : 30px solid rgba(60,150,255,0.4);
+    width : 320px;
+    height : 240px;
+    padding : 30px;
+    margin : 10px;
+    font-size : 16pt;
+    color : #ff9933;
+    background-image : url("../support/css3.png");
+  }
+
+  .no-repeat {
+    background-repeat : no-repeat;
+  }
+
+  .case {
+    background-clip : padding-box;
+  }
+
+
+</style>
+
+
+</head>
+<body>
+
+<div class="infomation">
+Test Passed If : The background is clipped. The clip area is the area covered by border(includes padding-area ).
+</div>
+
+<div class="test-case">
+
+
+  <div class="view case no-repeat" >
+      Test background-clip
+  </div>
+
+  <div class="view case" >
+      Test background-clip
+  </div>
+
+</div>
+
+</body>
+
+</html>
diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-padding-box_with_position.html b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-padding-box_with_position.html
new file mode 100644
index 0000000000..912d804227
--- /dev/null
+++ b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-padding-box_with_position.html
@@ -0,0 +1,71 @@
+
+<!doctype html>
+<html>
+<head>
+  <title>CSS Backgrounds Test:  background-clip:padding-box & background-position</title>
+  <link rel="author" title="finscn" href="mailto:finscn@gmail.com" >
+  <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" >
+  <meta name="flags" content="image">
+  <meta name="assert" content="padding-box : The background is painted within (clipped to) the padding box" >
+
+  <meta charset="utf-8">
+
+
+<style type="text/css">
+
+  .infomation {
+    padding : 10px;
+    font-size : 16pt;
+    margin : 5px;
+  }
+
+  .test-case {
+    padding : 5px;
+    margin : 5px;
+  }
+
+  .view {
+    border : 30px solid rgba(60,150,255,0.4);
+    width : 320px;
+    height : 240px;
+    padding : 30px;
+    margin : 10px;
+    font-size : 16pt;
+    color : #ff9933;
+    background-image : url("../support/css3.png");
+  }
+
+  .no-repeat {
+    background-repeat : no-repeat;
+  }
+
+  .case {
+    background-clip : padding-box;
+    background-position: -15px -15px;
+  }
+
+ </style>
+
+</head>
+<body>
+
+<div class="infomation">
+Test Passed If : The background is clipped. The clip area is the area covered by border(includes padding-area ).<br>
+When background-position is enabled, the browser should clip the background correctly.
+</div>
+
+<div class="test-case">
+
+  <div class="view case no-repeat" >
+      Test background-clip
+  </div>
+
+  <div class="view case" >
+      Test background-clip
+  </div>
+
+</div>
+
+</body>
+
+</html>
diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-padding-box_with_radius.html b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-padding-box_with_radius.html
new file mode 100644
index 0000000000..8e8a56cf69
--- /dev/null
+++ b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-padding-box_with_radius.html
@@ -0,0 +1,71 @@
+
+<!doctype html>
+<html>
+<head>
+  <title>CSS Backgrounds Test:  background-clip:padding-box & border-radius</title>
+  <link rel="author" title="finscn" href="mailto:finscn@gmail.com" >
+  <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" >
+  <meta name="flags" content="image">
+  <meta name="assert" content="padding-box : The background is painted within (clipped to) the padding box" >
+
+  <meta charset="utf-8">
+
+
+<style type="text/css">
+
+  .infomation {
+    padding : 10px;
+    font-size : 16pt;
+    margin : 5px;
+  }
+
+  .test-case {
+    padding : 5px;
+    margin : 5px;
+  }
+
+  .view {
+    border : 30px solid rgba(60,150,255,0.4);
+    width : 320px;
+    height : 240px;
+    padding : 30px;
+    margin : 10px;
+    font-size : 16pt;
+    color : #ff9933;
+    background-image : url("../support/css3.png");
+  }
+
+  .no-repeat {
+    background-repeat : no-repeat;
+  }
+
+  .case {
+    background-clip : padding-box;
+    border-radius: 60px;
+  }
+
+ </style>
+
+</head>
+<body>
+
+<div class="infomation">
+Test Passed If : The background is clipped. The clip area is the area covered by border(includes padding-area ).<br>
+When border-radius is enabled, the browser should clip the background correctly.
+</div>
+
+<div class="test-case">
+
+  <div class="view case no-repeat" >
+      Test background-clip
+  </div>
+
+  <div class="view case" >
+      Test background-clip
+  </div>
+
+</div>
+
+</body>
+
+</html>
diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-padding-box_with_size.html b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-padding-box_with_size.html
new file mode 100644
index 0000000000..c163043ad0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-padding-box_with_size.html
@@ -0,0 +1,71 @@
+
+<!doctype html>
+<html>
+<head>
+  <title>CSS Backgrounds Test:  background-clip:padding-box & background-size</title>
+  <link rel="author" title="finscn" href="mailto:finscn@gmail.com" >
+  <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" >
+  <meta name="flags" content="image">
+  <meta name="assert" content="padding-box : The background is painted within (clipped to) the padding box" >
+
+  <meta charset="utf-8">
+
+
+<style type="text/css">
+
+  .infomation {
+    padding : 10px;
+    font-size : 16pt;
+    margin : 5px;
+  }
+
+  .test-case {
+    padding : 5px;
+    margin : 5px;
+  }
+
+  .view {
+    border : 30px solid rgba(60,150,255,0.4);
+    width : 320px;
+    height : 240px;
+    padding : 30px;
+    margin : 10px;
+    font-size : 16pt;
+    color : #ff9933;
+    background-image : url("../support/css3.png");
+  }
+
+  .no-repeat {
+    background-repeat : no-repeat;
+  }
+
+  .case {
+    background-clip : padding-box;
+    background-size : 50%;
+  }
+
+ </style>
+
+</head>
+<body>
+
+<div class="infomation">
+Test Passed If : The background is clipped. The clip area is the area covered by border(includes padding-area ).<br>
+When background-size is enabled, the browser should clip the background correctly.
+</div>
+
+<div class="test-case">
+
+  <div class="view case no-repeat" >
+      Test background-clip
+  </div>
+
+  <div class="view case" >
+      Test background-clip
+  </div>
+
+</div>
+
+</body>
+
+</html>
diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-rounded-corner-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-rounded-corner-ref.html
new file mode 100644
index 0000000000..379ad36992
--- /dev/null
+++ b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-rounded-corner-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Filled Background with Rounded Corner</title>
+<style>
+    #a {
+        width: 100px;
+        height: 80px;
+        border: 20px blue solid;
+        border-top-right-radius: 20px;
+        background-color: green;
+        background-clip: border-box;
+    }
+    #shield {
+        position: absolute;
+        width: 30px;
+        height: 30px;
+        left: 120px;
+        top: 5px;
+        background-color: black;
+    }
+</style>
+<body>
+    <div id="a"></div>
+    <!-- Hide the curved outside border to deal with imprecise rendering. -->
+    <div id="shield"></div>
+</body>
diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-rounded-corner.html b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-rounded-corner.html
new file mode 100644
index 0000000000..3453c5bc8f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-rounded-corner.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Filled Background with Rounded Corner</title>
+<link rel="match" href="clip-rounded-corner-ref.html">
+<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#corner-clipping">
+<style>
+    #b {
+        width: 100px;
+        height: 80px;
+        border: 20px blue solid;
+        border-top-right-radius: 20px;
+        background-color: green;
+        background-clip: content-box;
+    }
+    #shield {
+        position: absolute;
+        width: 30px;
+        height: 30px;
+        left: 120px;
+        top: 5px;
+        background-color: black;
+    }
+</style>
+<body>
+    <div id="b"></div>
+    <!-- Hide the curved outside border to deal with imprecise rendering. -->
+    <div id="shield"></div>
+</body>
diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-text-dynamic-2-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-text-dynamic-2-ref.html
new file mode 100644
index 0000000000..2619a196d7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-text-dynamic-2-ref.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<title>CSS Test Reference</title>
+<style>
+  .text {
+    background-color: blue;
+    color: transparent;
+    font: 50px/1 monospace;
+    background-clip: text;
+    height: 200px;
+  }
+  .prev {
+    height: 100px;
+  }
+  p {
+    color: transparent;
+  }
+</style>
+<div class="text">
+  <div class="prev"></div>
+  <div class="inner">
+    <p>XxX</p>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-text-dynamic-2.html b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-text-dynamic-2.html
new file mode 100644
index 0000000000..ee6b45c2dd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-text-dynamic-2.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html class="reftest-wait">
+<title>CSS Test: background-clip: text is invalidated properly on text position changes</title>
+<link rel="help" href="https://drafts.csswg.org/css-backgrounds-4/#valdef-background-clip-text">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1525372">
+<link rel="author" href="mailto:mwoodrow@mozilla.com" title="Matt Woodrow">
+<link rel="author" href="https://mozilla.org" title="Mozilla">
+<link rel="match" href="clip-text-dynamic-2-ref.html">
+<style>
+  .text {
+    background-color: blue;
+    color: transparent;
+    font: 50px/1 monospace;
+    background-clip: text;
+    height: 200px;
+  }
+  .prev {
+    height: 10px;
+  }
+  p {
+    color: transparent;
+  }
+</style>
+<div class="text">
+  <div class="prev"></div>
+  <div class="inner">
+    <p>XxX</p>
+  </div>
+</div>
+<script>
+onload = () => {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      document.querySelector(".prev").style.height = "100px";
+      document.documentElement.className = "";
+    })
+  })
+}
+</script>
diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-text-flex-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-text-flex-ref.html
new file mode 100644
index 0000000000..0bcbc0bc13
--- /dev/null
+++ b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-text-flex-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="/fonts/ahem.css">
+<style>
+.clip {
+  font-size: 80px;
+  color: green;
+}
+.flex {
+    display: flex;
+}
+.inline-flex {
+    display: inline-flex;
+}
+</style>
+<div class="clip flex">flex</div>
+<div class="clip inline-flex">inline-flex</div>
diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-text-flex.html b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-text-flex.html
new file mode 100644
index 0000000000..618c8c1dbc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-text-flex.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<title>background-clip:text with display:flex</title>
+<link rel="help" href="https://drafts.csswg.org/css-backgrounds-4/#valdef-background-clip-text">
+<link rel="match" href="clip-text-flex-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<style>
+.clip {
+  font-size: 80px;
+  color: transparent;
+  background-color: green;
+  background-clip: text;
+}
+.flex {
+    display: flex;
+}
+.inline-flex {
+    display: inline-flex;
+}
+</style>
+<div class="clip flex">flex</div>
+<div class="clip inline-flex">inline-flex</div>
diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-text-multi-line-ref.html b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-text-multi-line-ref.html
new file mode 100644
index 0000000000..455daa7aea
--- /dev/null
+++ b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-text-multi-line-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS test reference</title>
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="stylesheet" href="/fonts/ahem.css">
+
+  <style>
+  div
+    {
+      color: green;
+      font-size: 30px;
+      font-family: Ahem;
+      line-height: 1.5;
+    }
+  </style>
+
+  <p>Test passes if there are 2 green stripes and if the top stripe is half the width of the bottom stripe.
+
+  <div>12345<br>1234567890</div>
diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-text-multi-line.html b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-text-multi-line.html
new file mode 100644
index 0000000000..88ad111eb8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-text-multi-line.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+
+  <meta charset="UTF-8">
+
+  <title>CSS Backgrounds Test: 'background-clip: text' and painting of multi-line text</title>
+
+  <!--
+
+  Inspired by
+
+  http://wpt.live/css/css-backgrounds/background-clip/clip-text-multi-line.html
+
+  For more info, see
+
+  https://github.com/web-platform-tests/wpt/pull/30812#issuecomment-1314514987
+
+  -->
+
+  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+  <link rel="author" href="mailto:mmaxfield@apple.com" title="Myles C. Maxfield">
+  <link rel="help" href="https://drafts.csswg.org/css-backgrounds-4/#valdef-background-clip-text">
+  <link rel="match" href="clip-text-multi-line-ref.html">
+  <link rel="stylesheet" href="/fonts/ahem.css">
+  <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-5846" />
+  <style>
+  div
+    {
+      background-clip: text;
+      background-color: red;
+      background-image: linear-gradient(green, green);
+      color: transparent;
+      font-family: Ahem;
+      font-size: 30px;
+      line-height: 1.5;
+    }
+  </style>
+
+  <p>Test passes if there are 2 green stripes and if the top stripe is half the width of the bottom stripe.
+
+  <div>12345<br>1234567890</div>
diff --git a/testing/web-platform/tests/css/css-backgrounds/background-clip/list.txt b/testing/web-platform/tests/css/css-backgrounds/background-clip/list.txt
new file mode 100644
index 0000000000..52c47ebba9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-backgrounds/background-clip/list.txt
@@ -0,0 +1,12 @@
+background-clip/border-box.html
+background-clip/border-box_with_position.html
+background-clip/border-box_with_radius.html
+background-clip/border-box_with_size.html
+background-clip/content-box.html
+background-clip/content-box_with_position.html
+background-clip/content-box_with_radius.html
+background-clip/content-box_with_size.html
+background-clip/padding-box.html
+background-clip/padding-box_with_position.html
+background-clip/padding-box_with_radius.html
+background-clip/padding-box_with_size.html
-- 
cgit v1.2.3