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-masking/mask-image/reference | |
| 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-masking/mask-image/reference')
6 files changed, 73 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-masking/mask-image/reference/1x1-black-30-alpha.png b/testing/web-platform/tests/css/css-masking/mask-image/reference/1x1-black-30-alpha.png Binary files differnew file mode 100644 index 0000000000..e334f44a03 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/reference/1x1-black-30-alpha.png diff --git a/testing/web-platform/tests/css/css-masking/mask-image/reference/mask-image-data-url-image-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/reference/mask-image-data-url-image-ref.html new file mode 100644 index 0000000000..c2e88b3657 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/reference/mask-image-data-url-image-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<title>Reference: mask-image: url(data:...)</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +#back { + position: absolute; + box-sizing: border-box; + width: 200px; + height: 200px; + border: 60px solid green; + background: blue; +} +#front { + position: absolute; + box-sizing: border-box; + width: 200px; + height: 200px; + border: 40px solid blue; + background: green; + mask-image: url(1x1-black-30-alpha.png); /* 1x1 black with 30% transparency */ +} +</style> +<p>The test passes if there is a blue-ish square with a 20px green border around it and a 40px blue-green-ish border around that.</p> +<div id="back"></div><div id="front"></div> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/reference/mask-image-ib-split-2-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/reference/mask-image-ib-split-2-ref.html new file mode 100644 index 0000000000..ee28190878 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/reference/mask-image-ib-split-2-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>CSS Test: mask-image on a fragmented inline</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> + columns { + display: block; + columns: 5; + column-fill: auto; + column-gap: 10px; + height: 30px; + background: pink; + } + div { background: grey; height: 50px; } + x { + background: grey; + mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAABqklEQVRYhdXZMa6DMAwAUCOxcQAEF0BIzgG6MTEiJcfhItys1yhrl/oP8AvFScP/BJJUYmlR8mo7BgKAgw9JHEiJkRQ+Pw8xksTBxRzHYBJfJPFFStDXYznvGjhJHHbB9sHdg6cI4tMJco2dxnQDJol3OxB7kuJGqi6ozTNq84xUXUzfYb8juveDSPH4imvzjAAS6zgAyYT/gpbi4RiJPTWQ/mtQAKAGUiP4r1gjsqvKPRG0jg+QUFeVh7Ak8e46isa5TNG11ay+/WDvIorGOQEShrW1r/lq8vnvTogkm7eBVJPFp/5kXTS7qjwb+Z5/W7OmqF6dcja/oQS2yMFHyhlWVwLrqJIS4zaaVyMXC+sC4/LjNu1tnnmDtnlmTD+DXlibDAqQaKG8Pv2l/fejWVQDr08pbt6hUtxYnfImXxfeoaouWPNnUI8L6Q3dLqi4oeGmPpbFFEt7Aoik4WuhwV5CI7opieM2b8aGf+M8Q+N4FAGI5OEOIKLH5Rkb/gbEgo1gS8eKDWmTzI6dwSFsOy7YCDZyV9jwt8YZOOSXDVpwyK9vrPATX4j9ALzDM3y+40zWAAAAAElFTkSuQmCC); + } + .end { mask-position:100% 100%; mask-repeat: no-repeat; } +</style> +<body><columns><x style="display:block"><div></div></x></columns><columns><x style="display:block; background: grey; height: 50px;" class="end"></x></columns></body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/reference/mask-image-ib-split-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/reference/mask-image-ib-split-ref.html new file mode 100644 index 0000000000..e5c09f9449 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/reference/mask-image-ib-split-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>CSS Reference: mask-image on an inline with a block inside split by a columnset</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> + body { column-width: 40px; column-gap: 0; } + div { padding-inline-start: 40px; margin: 1em 0; border-bottom-style: solid; } + span { margin-inline-end: -2px; } + div { mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGDwAQAAUQBNt+pgmgAAAABJRU5ErkJggg==); } +</style> +<body><x><span></span><div></div></x></body> +</html> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/reference/mask-image-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/reference/mask-image-ref.html new file mode 100644 index 0000000000..4e121163f9 --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/reference/mask-image-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<title>CSS Reference: mask-image</title> +<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org"> +<style> +#ref { + position: absolute; + width: 200px; + height: 200px; + background: green; +} +</style> +<p>The test passes if there is a green square and no red below.</p> +<div id="ref"></div> diff --git a/testing/web-platform/tests/css/css-masking/mask-image/reference/mask-image-svg-child-will-change-ref.html b/testing/web-platform/tests/css/css-masking/mask-image/reference/mask-image-svg-child-will-change-ref.html new file mode 100644 index 0000000000..722879303d --- /dev/null +++ b/testing/web-platform/tests/css/css-masking/mask-image/reference/mask-image-svg-child-will-change-ref.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<p>The test passes if there is a green square and no red below.</p> +<div style="width: 100px; height: 100px; background: green; position: relative; top: 50px; left: 50px"></div> |
