diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-06-12 05:35:37 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-06-12 05:35:37 +0000 |
| commit | a90a5cba08fdf6c0ceb95101c275108a152a3aed (patch) | |
| tree | 532507288f3defd7f4dcf1af49698bcb76034855 /testing/web-platform/tests/css/filter-effects | |
| parent | Adding debian version 126.0.1-1. (diff) | |
| download | firefox-a90a5cba08fdf6c0ceb95101c275108a152a3aed.tar.xz firefox-a90a5cba08fdf6c0ceb95101c275108a152a3aed.zip | |
Merging upstream version 127.0.
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/filter-effects')
13 files changed, 218 insertions, 96 deletions
diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-backdrop-filter.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-backdrop-filter.html new file mode 100644 index 0000000000..6be85d5cf2 --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-backdrop-filter.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>backdrop-filter: The backdrop root concept</title> +<link rel="author" href="mailto:masonf@chromium.org"> +<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropRoot"> +<link rel=stylesheet href="resources/backdrop-filter-backdrop-root.css"> +<link rel="match" href="backdrop-filter-backdrop-root-ref.html"> + +<!-- A Backdrop Root is formed, anywhere in the document, by: + - An element with a backdrop-filter value other than "none". + - An element with a will-change value specifying any property that would create a Backdrop Root on non-initial value. --> +<div class=container> + <div class=testcase> + <div style="backdrop-filter: invert(0);"><div></div></div> + </div> + <div class=testcase> + <div style="will-change:backdrop-filter;"><div></div></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-clip-path-ref.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-clip-path-ref.html new file mode 100644 index 0000000000..08a2ad4fc5 --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-clip-path-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel=stylesheet href="resources/backdrop-filter-backdrop-root.css"> + +<div class=container> + <div class=testcase style="clip-path: xywh(5px 5px 40px 40px);"> + <div></div> + <div class="box2" style="background: #00ffff;"></div> + </div> + <div class=testcase> + <div></div> + <div class="box2" style="background: #00ffff;"></div> + </div> +</div> + +<style> +.box2 { + top:-50px; + left: 50px; + border: 1px solid black; +} +</style> diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-clip-path.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-clip-path.html new file mode 100644 index 0000000000..172d07be93 --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-clip-path.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>backdrop-filter: The backdrop root concept</title> +<link rel="author" href="mailto:masonf@chromium.org"> +<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropRoot"> +<link rel=stylesheet href="resources/backdrop-filter-backdrop-root.css"> +<link rel="match" href="backdrop-filter-backdrop-root-clip-path-ref.html"> + +<!-- A Backdrop Root is formed, anywhere in the document, by: + - An element with mask, mask-image, mask-border, or clip-path properties with values other than “none”. + - An element with a will-change value specifying any property that would create a Backdrop Root on non-initial value. --> +<div class=container> + <div class=testcase> + <div style="clip-path: inset(10%);"><div></div></div> + </div> + <div class=testcase> + <div style="will-change:clip-path;"><div></div></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-filter-ref.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-filter-ref.html new file mode 100644 index 0000000000..ffa4dfcf0e --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-filter-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel=stylesheet href="resources/backdrop-filter-backdrop-root.css"> + +<div class=container> + <div class=testcase> + <div style="filter: invert(0.1)"></div> + <div class="box2" style="border-color: #1A1A1A; background: #00ffff;"></div> + </div> + <div class=testcase> + <div></div> + <div class="box2" style="background: #00ffff;"></div> + </div> +</div> + +<style> +.box2 { + top:-50px; + left: 50px; + border: 1px solid black; +} +</style> diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-filter.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-filter.html new file mode 100644 index 0000000000..e988b479ce --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-filter.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>backdrop-filter: The backdrop root concept</title> +<link rel="author" href="mailto:masonf@chromium.org"> +<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropRoot"> +<link rel=stylesheet href="resources/backdrop-filter-backdrop-root.css"> +<link rel="match" href="backdrop-filter-backdrop-root-filter-ref.html"> +<meta name="fuzzy" content="maxDifference=0-5;totalPixels=0-500"> + +<!-- A Backdrop Root is formed, anywhere in the document, by: + - An element with a filter property other than "none". + - An element with a will-change value specifying any property that would create a Backdrop Root on non-initial value. --> +<div class=container> + <div class=testcase> + <div style="filter: invert(0.1);"><div></div></div> + </div> + <div class=testcase> + <div style="will-change:filter;"><div></div></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-mix-blend-mode.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-mix-blend-mode.html new file mode 100644 index 0000000000..2d77b61b84 --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-mix-blend-mode.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>backdrop-filter: The backdrop root concept</title> +<link rel="author" href="mailto:masonf@chromium.org"> +<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropRoot"> +<link rel=stylesheet href="resources/backdrop-filter-backdrop-root.css"> +<link rel="match" href="backdrop-filter-backdrop-root-ref.html"> + +<!-- A Backdrop Root is formed, anywhere in the document, by: + - An element with a mix-blend-mode value other than "normal". + - An element with a will-change value specifying any property that would create a Backdrop Root on non-initial value. --> +<div class=container> + <div class=testcase> + <div style="mix-blend-mode:darken;"><div></div></div> + </div> + <div class=testcase> + <div style="will-change:mix-blend-mode;"><div></div></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-opacity-ref.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-opacity-ref.html new file mode 100644 index 0000000000..76d4854df6 --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-opacity-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel=stylesheet href="resources/backdrop-filter-backdrop-root.css"> + +<div class=container> + <div class=testcase> + <div style="opacity:0.9"></div> + <div class="box2" style="border-color: #021919; background: #00ffff;"></div> + </div> + <div class=testcase> + <div></div> + <div class="box2" style="background: #00ffff;"></div> + </div> +</div> + +<style> +.box2 { + top:-50px; + left: 50px; + border: 1px solid black; +} +</style> + diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-opacity.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-opacity.html new file mode 100644 index 0000000000..b11d064cb3 --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-opacity.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>backdrop-filter: The backdrop root concept</title> +<link rel="author" href="mailto:masonf@chromium.org"> +<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropRoot"> +<link rel=stylesheet href="resources/backdrop-filter-backdrop-root.css"> +<link rel="match" href="backdrop-filter-backdrop-root-opacity-ref.html"> +<meta name="fuzzy" content="maxDifference=0-5;totalPixels=0-500"> + +<!-- A Backdrop Root is formed, anywhere in the document, by: + - An element with an opacity value less than 1. + - An element with a will-change value specifying any property that would create a Backdrop Root on non-initial value. --> +<div class=container> + <div class=testcase> + <div style="opacity: 0.9;"><div></div></div> + </div> + <div class=testcase> + <div style="will-change:opacity;"><div></div></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-ref.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-ref.html new file mode 100644 index 0000000000..934e08acb9 --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/backdrop-filter-backdrop-root-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel=stylesheet href="resources/backdrop-filter-backdrop-root.css"> + +<div class=container> + <div class=testcase> + <div></div> + <div class="box2" style="background: #00ffff;"></div> + </div> + <div class=testcase> + <div></div> + <div class="box2" style="background: #00ffff;"></div> + </div> +</div> + +<style> +.box2 { + top:-50px; + left: 50px; + border: 1px solid black; +} +</style> + diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-isolation-ref.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-isolation-ref.html deleted file mode 100644 index fc2bccc36c..0000000000 --- a/testing/web-platform/tests/css/filter-effects/backdrop-filter-isolation-ref.html +++ /dev/null @@ -1,51 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>backdrop-filter: Should not filter outside parent stacking context.</title> -<link rel="author" href="mailto:masonf@chromium.org"> - - - -<div> - <p>Expected: Two green boxes overlapped by a yellow box. The overlapped region<br> - of the right-hand box ONLY should be inverted (pink).</p> -</div> -<div class="box outside"> - <div class="box stacking-context"> - <div class="box filter"> - </div> - </div> -</div> -<div class="box overlay"></div> -<style> -.box { - position: absolute; - width: 100px; - height: 100px; - background: green; -} -.outside { - top: 110px; - left: 10px; -} -.stacking-context { - will-change: transform; - top: 0px; - left: 120px; -} -.filter { - width: 160px; - height: 160px; - top: 30px; - left: -90px; - will-change: transform; - background: #ff08; -} -.overlay { - background:#ffc377; - width:70px; - height:70px; - top:140px; - left:130px; -} -</style> - diff --git a/testing/web-platform/tests/css/filter-effects/backdrop-filter-isolation.html b/testing/web-platform/tests/css/filter-effects/backdrop-filter-isolation.html deleted file mode 100644 index 06791f73d2..0000000000 --- a/testing/web-platform/tests/css/filter-effects/backdrop-filter-isolation.html +++ /dev/null @@ -1,44 +0,0 @@ -<!DOCTYPE html> -<meta charset="utf-8"> -<title>backdrop-filter: Should not filter outside parent stacking context.</title> -<link rel="author" href="mailto:masonf@chromium.org"> -<link rel="help" href="https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty"> -<link rel="match" href="backdrop-filter-isolation-ref.html"> - -<div> - <p>Expected: Two green boxes overlapped by a yellow box. The overlapped region<br> - of the right-hand box ONLY should be inverted (pink).</p> -</div> -<div class="box outside"> - <div class="box stacking-context"> - <div class="box filter"> - </div> - </div> -</div> - -<style> -.box { - position: absolute; - width: 100px; - height: 100px; - background: green; -} -.outside { - top: 110px; - left: 10px; -} -.stacking-context { - opacity: 0.9999; - top: 0px; - left: 120px; -} -.filter { - width: 160px; - height: 160px; - top: 30px; - left: -90px; - backdrop-filter: invert(1); - background: #ff08; -} -</style> - diff --git a/testing/web-platform/tests/css/filter-effects/resources/backdrop-filter-backdrop-root.css b/testing/web-platform/tests/css/filter-effects/resources/backdrop-filter-backdrop-root.css new file mode 100644 index 0000000000..635e497cdf --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/resources/backdrop-filter-backdrop-root.css @@ -0,0 +1,30 @@ +.container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 250px; + height: 100px; + align-content: flex-start; + background:#00ffff; +} +.testcase { + width: 100px; + height: 50px; +} +.testcase div { + width: 50px; + height: 50px; + position: relative; +} +.testcase>div { + background: green; +} +.testcase>div>div { + left: 50px; + backdrop-filter: invert(1); + background: transparent; + border: 1px solid black; +} +* { + box-sizing: border-box; +} diff --git a/testing/web-platform/tests/css/filter-effects/support/hueRotate.svg b/testing/web-platform/tests/css/filter-effects/support/hueRotate.svg index ed294041e1..0ddcb37d70 100644 --- a/testing/web-platform/tests/css/filter-effects/support/hueRotate.svg +++ b/testing/web-platform/tests/css/filter-effects/support/hueRotate.svg @@ -1,6 +1,6 @@ <svg width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> - <filter id="MyFilter"> + <filter id="MyFilter" color-interpolation-filters="sRGB"> <feColorMatrix type="hueRotate" values="90"/> </filter> </defs> |
