diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
| commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
| tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/css-backgrounds/background-clip | |
| parent | Initial commit. (diff) | |
| download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip | |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-backgrounds/background-clip')
21 files changed, 1083 insertions, 0 deletions
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 |