diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
| commit | 43a97878ce14b72f0981164f87f2e35e14151312 (patch) | |
| tree | 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/css-backgrounds/background-clip | |
| parent | Initial commit. (diff) | |
| download | firefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip | |
Adding upstream version 110.0.1.upstream/110.0.1upstream
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, 1099 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..6a4ef234b0 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-text-dynamic-2-ref.html @@ -0,0 +1,24 @@ +<!doctype html> +<title>CSS Test Reference</title> +<style> + .text { + background-color: blue; + color: transparent; + font: 50px/1 monospace; + -webkit-background-clip: text; + 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..57a31266be --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-text-dynamic-2.html @@ -0,0 +1,40 @@ +<!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; + -webkit-background-clip: text; + 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..3b45e919ad --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-text-multi-line-ref.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS test reference: background-clip: text paints multi-line text in the wrong place</title> +<link rel="author" href="mailto:mmaxfield@apple.com" title="Myles C. Maxfield"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +#container { + position: relative; + padding: 3px; +} + +span { + color: green; + font: 48px "Ahem"; +} + +div.cover { + position: absolute; + background: green; +} +</style> +</head> +<body> +<p>This test makes sure that multi-line elements with <code>background-clip: text</code> are placed correctly. The test passes if the top rectangle is (roughly) half as wide as the bottom rectangle.</p> +<div id="container"> +<span>AAA<br>AAAAAA</span> +<div class="cover" style="left: 0px; top: 0px; width: calc(48px * 3 + 3px); height: 3px;"></div> +<div class="cover" style="left: 0px; top: 48px; width: calc(48px * 6 + 3px); height: 6px;"></div> +<div class="cover" style="left: 0px; top: calc(48px * 2); width: calc(48px * 6 + 3px); height: 3px;"></div> +<div class="cover" style="left: 0px; top: 0px; width: 3px; height: calc(48px * 2);"></div> +<div class="cover" style="left: calc(48px * 3); top: 0px; width: 3px; height: 48px;"></div> +<div class="cover" style="left: calc(48px * 6); top: 48px; width: 3px; height: 48px;"></div> +</body> +</html> 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..cd51b2ea07 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-clip/clip-text-multi-line.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Test: background-clip: text paints multi-line text in the wrong place</title> +<link rel="help" href="https://drafts.csswg.org/css-backgrounds-4/#valdef-background-clip-text"> +<link rel="help" href="https://drafts.fxtf.org/fill-stroke-3/#propdef-fill-color"> +<link rel="author" href="mailto:mmaxfield@apple.com" title="Myles C. Maxfield"> +<link rel="match" href="clip-text-multi-line-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +#container { + position: relative; + padding: 3px; +} + +span { + font: 48px "Ahem"; + background-clip: text; + fill-color: rgba(0, 0, 0, 0); + background-image: linear-gradient(0deg, green 0%, green 100%); +} + +div.cover { + position: absolute; + background: green; +} +</style> +</head> +<body> +<p>This test makes sure that multi-line elements with <code>background-clip: text</code> are placed correctly. The test passes if the top rectangle is (roughly) half as wide as the bottom rectangle.</p> +<div id="container"> +<span>AAA<br>AAAAAA</span> +<div class="cover" style="left: 0px; top: 0px; width: calc(48px * 3 + 3px); height: 3px;"></div> +<div class="cover" style="left: 0px; top: 48px; width: calc(48px * 6 + 3px); height: 6px;"></div> +<div class="cover" style="left: 0px; top: calc(48px * 2); width: calc(48px * 6 + 3px); height: 3px;"></div> +<div class="cover" style="left: 0px; top: 0px; width: 3px; height: calc(48px * 2);"></div> +<div class="cover" style="left: calc(48px * 3); top: 0px; width: 3px; height: 48px;"></div> +<div class="cover" style="left: calc(48px * 6); top: 48px; width: 3px; height: 48px;"></div> +</div> +</body> +</html> 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 |