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-origin | |
| parent | Initial commit. (diff) | |
| download | firefox-upstream.tar.xz firefox-upstream.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-origin')
13 files changed, 870 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-backgrounds/background-origin/list.txt b/testing/web-platform/tests/css/css-backgrounds/background-origin/list.txt new file mode 100644 index 0000000000..a6fdedde54 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-origin/list.txt @@ -0,0 +1,12 @@ +background-origin/border-box.html +background-origin/border-box_with_position.html +background-origin/border-box_with_radius.html +background-origin/border-box_with_size.html +background-origin/content-box.html +background-origin/content-box_with_position.html +background-origin/content-box_with_radius.html +background-origin/content-box_with_size.html +background-origin/padding-box.html +background-origin/padding-box_with_position.html +background-origin/padding-box_with_radius.html +background-origin/padding-box_with_size.html diff --git a/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-border-box.html b/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-border-box.html new file mode 100644 index 0000000000..518f61e27b --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-border-box.html @@ -0,0 +1,69 @@ +<!doctype html> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Backgrounds Test: background-origin: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-origin" > + <meta name="flags" content="image"> + <meta name="assert" content="border-box : The position is relative to the border box." > + + + +<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-origin : border-box; + } + +</style> + +</head> +<body> + +<div class="infomation"> +Test Passed If : The background is painted. The paint 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-origin + </div> + + <div class="view case" > + Test background-origin + </div> + + +</div> + +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-border-box_with_position.html b/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-border-box_with_position.html new file mode 100644 index 0000000000..792e54d6dc --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-border-box_with_position.html @@ -0,0 +1,73 @@ + +<!doctype html> +<html> +<head> + <title>CSS Backgrounds Test: background-origin: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-origin" > + <meta name="flags" content="image"> + <meta name="assert" content="border-box : The position is relative 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-origin : border-box; + background-position: -15px -15px; + } + + + </style> + +</head> +<body> + +<div class="infomation"> +Test Passed If : The background is painted. The paint area includes the area covered by border , and the area surrounded by border.<br> +When background-position is enabled, the browser should paint the background correctly. +</div> + +<div class="test-case"> + + <div class="view case no-repeat" > + Test background-origin: + </div> + + <div class="view case" > + Test background-origin: + </div> + + +</div> + +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-border-box_with_radius.html b/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-border-box_with_radius.html new file mode 100644 index 0000000000..2a7fca0fc5 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-border-box_with_radius.html @@ -0,0 +1,73 @@ + +<!doctype html> +<html> +<head> + <title>CSS Backgrounds Test: background-origin: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-origin" > + <meta name="flags" content="image"> + <meta name="assert" content="border-box : The position is relative 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-origin : border-box; + border-radius: 60px; + } + + + </style> + +</head> +<body> + +<div class="infomation"> +Test Passed If : The background is painted. The paint area includes the area covered by border , and the area surrounded by border.<br> +When border-radius is enabled, the browser should paint the background correctly. +</div> + +<div class="test-case"> + + <div id="border-box" class="view case no-repeat" > + Test background-origin: + </div> + + <div id="border-box" class="view case" > + Test background-origin: + </div> + + +</div> + +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-border-box_with_size.html b/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-border-box_with_size.html new file mode 100644 index 0000000000..c0d76e5e5f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-border-box_with_size.html @@ -0,0 +1,72 @@ + +<!doctype html> +<html> +<head> + <title>CSS Backgrounds Test: background-origin: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-origin" > + <meta name="flags" content="image"> + <meta name="assert" content="border-box : The position is relative 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-origin : border-box; + background-size : 50%; + } + + + </style> + +</head> +<body> + +<div class="infomation"> +Test Passed If : The background is painted. The paint area includes the area covered by border , and the area surrounded by border.<br> +When background-size is enabled, the browser should paint the background correctly. +</div> + +<div class="test-case"> + + <div id="border-box" class="view case no-repeat" > + Test background-origin: + </div> + + <div id="border-box" class="view case" > + Test background-origin: + </div> + +</div> + +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-content-box.html b/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-content-box.html new file mode 100644 index 0000000000..1d467f1966 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-content-box.html @@ -0,0 +1,71 @@ + +<!doctype html> +<html> +<head> + <title>CSS Backgrounds Test: background-origin: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-origin" > + <meta name="flags" content="image"> + <meta name="assert" content="content-box : The position is relative 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-origin : content-box; + } + + +</style> + + +</head> +<body> + +<div class="infomation"> +Test Passed If : The background is painted. The paint area is the content-area(excludes padding-area ) of the DIV. +</div> + +<div class="test-case"> + + <div class="view case no-repeat" > + Test background-origin + </div> + + <div class="view case" > + Test background-origin + </div> + +</div> + +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-content-box_with_position.html b/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-content-box_with_position.html new file mode 100644 index 0000000000..24d64f111f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-content-box_with_position.html @@ -0,0 +1,74 @@ + +<!doctype html> +<html> +<head> + <title>CSS Backgrounds Test: background-origin: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-origin" > + <meta name="flags" content="image"> + <meta name="assert" content="content-box : The position is relative 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-origin : content-box; + background-position: -15px -15px; + } + + + </style> + +</head> +<body> + +<div class="infomation"> + + +Test Passed If : The background is painted. The paint area is the content-area(excludes padding-area ) of the DIV.<br> +When background-position is enabled, the browser should paint the background correctly. +</div> + +<div class="test-case"> + + <div class="view case no-repeat" > + Test background-origin + </div> + + <div class="view case" > + Test background-origin + </div> + +</div> + +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-content-box_with_radius.html b/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-content-box_with_radius.html new file mode 100644 index 0000000000..f19c7604c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-content-box_with_radius.html @@ -0,0 +1,72 @@ + +<!doctype html> +<html> +<head> + <title>CSS Backgrounds Test: background-origin: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-origin" > + <meta name="flags" content="image"> + <meta name="assert" content="content-box : The position is relative 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-origin : content-box; + border-radius: 60px; + } + + + </style> + +</head> +<body> + +<div class="infomation"> +Test Passed If : The background is painted. The paint area is the content-area(excludes padding-area ) of the DIV.<br> +When border-radius is enabled, the browser should paint the background correctly. +</div> + +<div class="test-case"> + + <div class="view case no-repeat" > + Test background-origin + </div> + + <div class="view case" > + Test background-origin + </div> + +</div> + +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-content-box_with_size.html b/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-content-box_with_size.html new file mode 100644 index 0000000000..d33dd286d3 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-content-box_with_size.html @@ -0,0 +1,70 @@ + +<!doctype html> +<html> +<head> + <title>CSS Backgrounds Test: background-origin: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-origin" > + <meta name="flags" content="image"> + <meta name="assert" content="content-box : The position is relative 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-origin : content-box; + background-size : 50%; + } + + </style> + +</head> +<body> +<div class="infomation"> +Test Passed If : The background is painted. The paint area is the content-area(excludes padding-area ) of the DIV.<br> +When background-size is enabled, the browser should paint the background correctly. +</div> + +<div class="test-case"> + + <div class="view case no-repeat" > + Test background-origin + </div> + + <div class="view case" > + Test background-origin + </div> + +</div> + +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-padding-box.html b/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-padding-box.html new file mode 100644 index 0000000000..369d04239f --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-padding-box.html @@ -0,0 +1,71 @@ +<!doctype html> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Backgrounds Test: background-origin: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-origin" > + <meta name="flags" content="image"> + <meta name="assert" content="padding-box : The position is relative to the padding box. (For single boxes ‘0 0’ is the upper left corner of the padding edge, ‘100% 100%’ is the lower right corner.)" > + + + +<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-origin : padding-box; + } + + +</style> + + +</head> +<body> + +<div class="infomation"> +Test Passed If : The background is painted. The paint area is the area covered by border(includes padding-area ). +</div> + +<div class="test-case"> + + + <div class="view case no-repeat" > + Test background-origin + </div> + + <div class="view case" > + Test background-origin + </div> + +</div> + +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-padding-box_with_position.html b/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-padding-box_with_position.html new file mode 100644 index 0000000000..ef54949e32 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-padding-box_with_position.html @@ -0,0 +1,71 @@ + +<!doctype html> +<html> +<head> + <title>CSS Backgrounds Test: background-origin: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-origin" > + <meta name="flags" content="image"> + <meta name="assert" content="padding-box : The position is relative to the padding box. (For single boxes ‘0 0’ is the upper left corner of the padding edge, ‘100% 100%’ is the lower right corner.)" > + + <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-origin : padding-box; + background-position: -15px -15px; + } + + </style> + +</head> +<body> + +<div class="infomation"> +Test Passed If : The background is painted. The paint area is the area covered by border(includes padding-area ).<br> +When background-position is enabled, the browser should paint the background correctly. +</div> + +<div class="test-case"> + + <div class="view case no-repeat" > + Test background-origin + </div> + + <div class="view case" > + Test background-origin + </div> + +</div> + +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-padding-box_with_radius.html b/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-padding-box_with_radius.html new file mode 100644 index 0000000000..97cd80dd46 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-padding-box_with_radius.html @@ -0,0 +1,71 @@ + +<!doctype html> +<html> +<head> + <title>CSS Backgrounds Test: background-origin: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-origin" > + <meta name="flags" content="image"> + <meta name="assert" content="padding-box : The position is relative to the padding box. (For single boxes ‘0 0’ is the upper left corner of the padding edge, ‘100% 100%’ is the lower right corner.)" > + + <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-origin : padding-box; + border-radius: 60px; + } + + </style> + +</head> +<body> + +<div class="infomation"> +Test Passed If : The background is painted. The paint area is the area covered by border(includes padding-area ).<br> +When border-radius is enabled, the browser should paint the background correctly. +</div> + +<div class="test-case"> + + <div class="view case no-repeat" > + Test background-origin + </div> + + <div class="view case" > + Test background-origin + </div> + +</div> + +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-padding-box_with_size.html b/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-padding-box_with_size.html new file mode 100644 index 0000000000..f8d7acfc60 --- /dev/null +++ b/testing/web-platform/tests/css/css-backgrounds/background-origin/origin-padding-box_with_size.html @@ -0,0 +1,71 @@ + +<!doctype html> +<html> +<head> + <title>CSS Backgrounds Test: background-origin: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-origin" > + <meta name="flags" content="image"> + <meta name="assert" content="padding-box : The position is relative to the padding box. (For single boxes ‘0 0’ is the upper left corner of the padding edge, ‘100% 100%’ is the lower right corner.)" > + + <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-origin : padding-box; + background-size : 50%; + } + + </style> + +</head> +<body> + +<div class="infomation"> +Test Passed If : The background is painted. The paint area is the area covered by border(includes padding-area ).<br> +When background-size is enabled, the browser should paint the background correctly. +</div> + +<div class="test-case"> + + <div class="view case no-repeat" > + Test background-origin + </div> + + <div class="view case" > + Test background-origin + </div> + +</div> + +</body> + +</html> |