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/filter-effects/reference | |
| 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 '')
54 files changed, 718 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/filter-effects/reference-filter-update-on-attribute-change-001.html b/testing/web-platform/tests/css/filter-effects/reference-filter-update-on-attribute-change-001.html new file mode 100644 index 0000000000..cc5ac7c65d --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/reference-filter-update-on-attribute-change-001.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<title>SVG Filters: Invalidation of SVG filter attributes on HTML</title> +<link rel="help" href="https://drafts.fxtf.org/filter-effects/#FilterProperty"> +<link rel="help" href="https://drafts.fxtf.org/filter-effects/#feColorMatrixElement"> +<link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=105635"> +<link rel="match" href="reference/reference-filter-update-on-attribute-change-001-ref.html"> +<meta name="assert" content="Dynamically adding an attribute of a filter primitive"/> +<head> + <script> + function run() { + document.getElementById('color').setAttribute('values', '90'); + } + </script> +</head> +<body onload="run()"> + <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" version="1.1"> + <defs> + <filter id="MyFilter"> + <fecolormatrix id="color" type="hueRotate"></fecolormatrix> + </filter> + </defs> + </svg> + <div style="filter: url(#MyFilter); width:100px; height:100px; background-color:red;"></div> +</body> diff --git a/testing/web-platform/tests/css/filter-effects/reference/backdrop-filter-plus-will-change-opacity-ref.html b/testing/web-platform/tests/css/filter-effects/reference/backdrop-filter-plus-will-change-opacity-ref.html new file mode 100644 index 0000000000..56c6243809 --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/reference/backdrop-filter-plus-will-change-opacity-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<p>Expected: A black box.</p> +<div id="blackbox"></div> +<style> + #blackbox { + width: 100px; + height: 100px; + background-color: black; + } +</style> diff --git a/testing/web-platform/tests/css/filter-effects/reference/backdrop-filter-svg-ref.html b/testing/web-platform/tests/css/filter-effects/reference/backdrop-filter-svg-ref.html new file mode 100644 index 0000000000..3d5853ac66 --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/reference/backdrop-filter-svg-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<div class="fuchsiabox"></div> +<div class="filter"></div> + +<style> +.fuchsiabox { + position: absolute; + background: fuchsia; + width: 100px; + height: 100px; + top: 100px; + left: 60px; +} +.filter { + position: absolute; + width: 100px; + height: 100px; + top: 100px; + left: 60px; + backdrop-filter: invert(1); +} +</style> diff --git a/testing/web-platform/tests/css/filter-effects/reference/backdrop-filters-grayscale-001-ref.html b/testing/web-platform/tests/css/filter-effects/reference/backdrop-filters-grayscale-001-ref.html new file mode 100644 index 0000000000..ba01ac6bd0 --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/reference/backdrop-filters-grayscale-001-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title>CSS Backdrop Filters Animation: Grayscale</title> +<link rel="author" href="mailto:masonf@chromium.org"> + + +<style> + .square { + position: absolute; + width: 100px; + height: 100px; + top: 100px; + left: 100px; + background: blue; + filter: grayscale(50%); + } + .filt { + position: absolute; + width: 200px; + height: 200px; + top: 50px; + left: 50px; + background: white; + filter: grayscale(50%); + } + .greenbox { + position: absolute; + width: 50px; + height: 50px; + top: 125px; + left: 125px; + background: green; + } +</style> +<p>You should see a dark blue rectangle with a green box.</p> +<div class="filt"></div> +<div class="square"></div> +<div class="greenbox"></div> diff --git a/testing/web-platform/tests/css/filter-effects/reference/backdrop-filters-grayscale-002-ref.html b/testing/web-platform/tests/css/filter-effects/reference/backdrop-filters-grayscale-002-ref.html new file mode 100644 index 0000000000..b241017d17 --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/reference/backdrop-filters-grayscale-002-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> +<style> +div { + width: 100px; + height: 100px; + position: absolute; +} + +.background_object { + left: 10px; + top: 10px; + background: orange; +} + +.grayscale { + left: 60px; + top: 60px; + width: 50px; + height: 50px; + background: #ACACAC; +} +</style> +</head> +<body> + <div class="background_object"></div> + <div class="grayscale"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/filter-effects/reference/backdrop-filters-grayscale-003-ref.html b/testing/web-platform/tests/css/filter-effects/reference/backdrop-filters-grayscale-003-ref.html new file mode 100644 index 0000000000..9ce975c1ef --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/reference/backdrop-filters-grayscale-003-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> +<style> +div { + width: 100px; + height: 100px; + position: absolute; +} + +.background_object { + left: 10px; + top: 10px; + background: orange; +} + +.grayscale { + left: 60px; + top: 60px; + width: 50px; + height: 50px; + background: #ACACAC; +} +</style> +</head> +<body> + <div class="background_object"></div> + <div class="grayscale"></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/filter-effects/reference/background-image-blur-repaint-ref.html b/testing/web-platform/tests/css/filter-effects/reference/background-image-blur-repaint-ref.html new file mode 100644 index 0000000000..bf16d1fa28 --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/reference/background-image-blur-repaint-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> +<style> +.bg { + position: absolute; + left: 200px; + top: 0px; + width: 400px; + height: 300px; + background-image: url(../support/color-palette.png); + filter: blur(8px); +} +.box { + position: absolute; + left: 300px; + top: 50px; + width: 50px; + height: 50px; + background-color: green; +} +</style> +</head> +<body> +<div class="bg"></div> +<div class="box"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/filter-effects/reference/clip-under-filter-001-ref.html b/testing/web-platform/tests/css/filter-effects/reference/clip-under-filter-001-ref.html new file mode 100644 index 0000000000..60c2c33634 --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/reference/clip-under-filter-001-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<div style="filter: blur(10px)"> + <div style="width: 100px; height: 100px; background: blue"> + <div style="position: relative; left: 50px; width: 50px; height: 100px; background: green"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/filter-effects/reference/clip-under-filter-002-ref.html b/testing/web-platform/tests/css/filter-effects/reference/clip-under-filter-002-ref.html new file mode 100644 index 0000000000..60c2c33634 --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/reference/clip-under-filter-002-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<div style="filter: blur(10px)"> + <div style="width: 100px; height: 100px; background: blue"> + <div style="position: relative; left: 50px; width: 50px; height: 100px; background: green"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/filter-effects/reference/clip-under-filter-003-ref.html b/testing/web-platform/tests/css/filter-effects/reference/clip-under-filter-003-ref.html new file mode 100644 index 0000000000..e60456b305 --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/reference/clip-under-filter-003-ref.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<div style="width:100px; height:100px; border:5px dashed black; background:green;"> +</div> +This test verifies overflow clip correctly applies to children in the presence of a filter on the same element.<br/> +It succeeds if a green box with dashed black border is shown. No red border should be visible. diff --git a/testing/web-platform/tests/css/filter-effects/reference/drop-shadow-clipped-001-ref.html b/testing/web-platform/tests/css/filter-effects/reference/drop-shadow-clipped-001-ref.html new file mode 100644 index 0000000000..305b1d2233 --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/reference/drop-shadow-clipped-001-ref.html @@ -0,0 +1,2 @@ +<!doctype HTML> +<div style="width: 50px; height: 50px; background: green"></div> diff --git a/testing/web-platform/tests/css/filter-effects/reference/dynamic-filter-changes-001-ref.html b/testing/web-platform/tests/css/filter-effects/reference/dynamic-filter-changes-001-ref.html new file mode 100644 index 0000000000..699d57c2a8 --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/reference/dynamic-filter-changes-001-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<style> + .filter { + transform: translateZ(0); + filter: invert(100%); + } +</style> + +<!-- There should be a bright pink box on this page --> +<body> + <img class="filter" src="/images/green-256x256.png"> +</body> + +</html> diff --git a/testing/web-platform/tests/css/filter-effects/reference/effect-reference-add-hw-001-ref.html b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-add-hw-001-ref.html new file mode 100644 index 0000000000..79a1522361 --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-add-hw-001-ref.html @@ -0,0 +1,2 @@ +<!doctype html> +<div style="width: 100px; height: 100px; background-color: rgb(0, 255, 0); will-change: transform"></div> diff --git a/testing/web-platform/tests/css/filter-effects/reference/effect-reference-after-001-ref.html b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-after-001-ref.html new file mode 100644 index 0000000000..45192b1345 --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-after-001-ref.html @@ -0,0 +1,12 @@ +<!doctype html> +<html> + <body> + <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="0px" height="0px"> + <defs> + <filter id="MyFilter"> + <feColorMatrix type="hueRotate" values="180"/> + </filter> + </defs> + </svg><img style="filter: url(#MyFilter);" src="../support/color-palette.png"> + </body> +</html> diff --git a/testing/web-platform/tests/css/filter-effects/reference/effect-reference-delete-ref.html b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-delete-ref.html new file mode 100644 index 0000000000..918715265f --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-delete-ref.html @@ -0,0 +1,5 @@ +<html> + <body> + <img src="../support/color-palette.png"> + </body> +</html> diff --git a/testing/web-platform/tests/css/filter-effects/reference/effect-reference-displacement-negative-scale-001-ref.html b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-displacement-negative-scale-001-ref.html new file mode 100644 index 0000000000..f718ea6abf --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-displacement-negative-scale-001-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<div style="width: 100px; height: 100px; background-color: green"></div> diff --git a/testing/web-platform/tests/css/filter-effects/reference/effect-reference-feimage-001-ref.html b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-feimage-001-ref.html new file mode 100644 index 0000000000..9b982b3cfb --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-feimage-001-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<img src="../support/color-palette.png"> diff --git a/testing/web-platform/tests/css/filter-effects/reference/effect-reference-feimage-002-ref.html b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-feimage-002-ref.html new file mode 100644 index 0000000000..72250a1cf8 --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-feimage-002-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<img src="../support/color-palette.png" style="will-change: transform;"> diff --git a/testing/web-platform/tests/css/filter-effects/reference/effect-reference-feimage-003-ref.html b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-feimage-003-ref.html new file mode 100644 index 0000000000..9b982b3cfb --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-feimage-003-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<img src="../support/color-palette.png"> diff --git a/testing/web-platform/tests/css/filter-effects/reference/effect-reference-feimage-004-ref.html b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-feimage-004-ref.html new file mode 100644 index 0000000000..0aa3378e59 --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-feimage-004-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<img src="../support/color-palette.png" style="will-change: filter;"> diff --git a/testing/web-platform/tests/css/filter-effects/reference/effect-reference-lighting-no-light.tentative-ref.html b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-lighting-no-light.tentative-ref.html new file mode 100644 index 0000000000..e863a6703b --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-lighting-no-light.tentative-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<style> +.target { + display: inline-block; + width: 100px; + height: 100px; + background-color: green; +} +</style> +<div class="target"></div> +<div class="target"></div> diff --git a/testing/web-platform/tests/css/filter-effects/reference/effect-reference-local-url-with-base-001-ref.html b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-local-url-with-base-001-ref.html new file mode 100644 index 0000000000..f718ea6abf --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-local-url-with-base-001-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<div style="width: 100px; height: 100px; background-color: green"></div> diff --git a/testing/web-platform/tests/css/filter-effects/reference/effect-reference-merge-no-inputs.tentative-ref.html b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-merge-no-inputs.tentative-ref.html new file mode 100644 index 0000000000..5743e0c3de --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-merge-no-inputs.tentative-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<div style="width: 100px; height: 100px; background-color: lime"></div> diff --git a/testing/web-platform/tests/css/filter-effects/reference/effect-reference-obb-dimensions-ref.html b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-obb-dimensions-ref.html new file mode 100644 index 0000000000..f460c439aa --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-obb-dimensions-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<style> +body { + margin: 0; + padding: 0; +} +#target { + position: absolute; + left: 20px; + top: 20px; + width: 100px; + height: 100px; + background-color: green; +} +</style> +<div id="target"></div> diff --git a/testing/web-platform/tests/css/filter-effects/reference/effect-reference-on-span-ref.html b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-on-span-ref.html new file mode 100644 index 0000000000..76a7953831 --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-on-span-ref.html @@ -0,0 +1,5 @@ +<html> +<body> +<span style="background-color: blue;">This text's background should be blue.</span> +</body> +</html> diff --git a/testing/web-platform/tests/css/filter-effects/reference/effect-reference-on-transparent-element-ref.html b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-on-transparent-element-ref.html new file mode 100644 index 0000000000..6e27519825 --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-on-transparent-element-ref.html @@ -0,0 +1,8 @@ +<style> +.box { + width: 100px; + height: 100px; + background-color: rgb(0, 255, 0); +} +</style> +<div class="box"></div> diff --git a/testing/web-platform/tests/css/filter-effects/reference/effect-reference-rename-001-ref.html b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-rename-001-ref.html new file mode 100644 index 0000000000..fe3beae2d4 --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-rename-001-ref.html @@ -0,0 +1,12 @@ +<html> +<body> +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="0" height="0"> + <defs> + <filter id="MyFilter"> + <feColorMatrix type="hueRotate" values="180"/> + </filter> + </defs> +</svg> +<img style="filter: url(#MyFilter);" src="../support/color-palette.png"> +</body> +</html> diff --git a/testing/web-platform/tests/css/filter-effects/reference/effect-reference-rename-002-ref.html b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-rename-002-ref.html new file mode 100644 index 0000000000..d8719aa43a --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-rename-002-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<svg height="0"> + <filter id="MyFilter"> + <feColorMatrix type="hueRotate" values="90"/> + </filter> +</svg> +<div style="width: 100px; height: 100px; background-color: red; filter: url(#MyFilter);"></div> diff --git a/testing/web-platform/tests/css/filter-effects/reference/effect-reference-source-alpha-001-ref.html b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-source-alpha-001-ref.html new file mode 100644 index 0000000000..f718ea6abf --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-source-alpha-001-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<div style="width: 100px; height: 100px; background-color: green"></div> diff --git a/testing/web-platform/tests/css/filter-effects/reference/effect-reference-source-alpha-002-ref.html b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-source-alpha-002-ref.html new file mode 100644 index 0000000000..eb106f327a --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/reference/effect-reference-source-alpha-002-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<style> +.rect { + background-color: black; + width: 100px; + height: 100px; + will-change: transform; +} +</style> +<div class="rect"></div> diff --git a/testing/web-platform/tests/css/filter-effects/reference/empty-element-with-filter-ref.html b/testing/web-platform/tests/css/filter-effects/reference/empty-element-with-filter-ref.html new file mode 100644 index 0000000000..cf2c997f6c --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/reference/empty-element-with-filter-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<style> + .turbulent { + width: 160px; + height: 90px; + margin: 10px; + filter: url(#turbulence); + } + + .visibleContent { + background-color: red; + } +</style> +<div class="turbulent"></div> +<div class="turbulent visibleContent"></div> + +This test passes if both divs look the same. + +<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" version="1.1"> + <defs> + <filter id="turbulence" color-interpolation-filters="sRGB"> + <feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2"/> + </filter> + </defs> +</svg> diff --git a/testing/web-platform/tests/css/filter-effects/reference/fecomposite-non-zero-inoffset-001-ref.html b/testing/web-platform/tests/css/filter-effects/reference/fecomposite-non-zero-inoffset-001-ref.html new file mode 100644 index 0000000000..e4900ad047 --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/reference/fecomposite-non-zero-inoffset-001-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<body> + <div style="width: 100px; height: 100px; background-color: green;"></div> +</body> diff --git a/testing/web-platform/tests/css/filter-effects/reference/filter-effect-remove-unattached-ref.html b/testing/web-platform/tests/css/filter-effects/reference/filter-effect-remove-unattached-ref.html new file mode 100644 index 0000000000..5f9f7a76ec --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/reference/filter-effect-remove-unattached-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> + <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" version="1.1"> + <defs id="svgDefs" style="display:none"> + <filter id="blurY" color-interpolation-filters="sRGB"> + </filter> + </defs> + </svg> + +<img src="../resources/reference.png" style="filter: url(#blurY);"> + +<div id="other" style="width: 10px; height: 10px; background-color: blue;"></div> diff --git a/testing/web-platform/tests/css/filter-effects/reference/filter-region-negative-positioned-child-001-ref.html b/testing/web-platform/tests/css/filter-effects/reference/filter-region-negative-positioned-child-001-ref.html new file mode 100644 index 0000000000..c9da47b1b4 --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/reference/filter-region-negative-positioned-child-001-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" version="1.1"> + <defs> + <filter id="f1" color-interpolation-filters="sRGB"> + <feColorMatrix type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"/> + </filter> + </defs> +</svg> +<style> +.box { + width: 100px; + height: 100px; + position: absolute; +} +.green { + background-color: green; +} +.blue { + background-color: blue; +} +.below { + top: 100px; +} +.parent { + filter: url(#f1); + background-color: white; + position: relative; +} +</style> +<div class="parent"> +<div class="blue box"></div> +<div class="green box below"></div> +</div> diff --git a/testing/web-platform/tests/css/filter-effects/reference/filter-region-transformed-child-001-ref.html b/testing/web-platform/tests/css/filter-effects/reference/filter-region-transformed-child-001-ref.html new file mode 100644 index 0000000000..bcf6494119 --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/reference/filter-region-transformed-child-001-ref.html @@ -0,0 +1,23 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="0" height="0"> + <defs> + <filter id="filter" x="25%" y="0%" width="50%" height="100%"> + <feComponentTransfer> + <feFuncR type="linear" intercept="0" slope="1"/> + <feFuncG type="linear" intercept="0" slope="0"/> + <feFuncB type="linear" intercept="0" slope="0"/> + <feFuncA type="linear" intercept="0" slope="1"/> + </feComponentTransfer> + </filter> + </defs> +</svg> +<style> +div { + display: inline-block; + filter: url(#filter); + background-color: gray; + width: 50px; + height: 50px; + transform: translate(25px, 25px) scale(2); +} +</style> +<div></div> diff --git a/testing/web-platform/tests/css/filter-effects/reference/filter-region-transformed-composited-child-001-ref.html b/testing/web-platform/tests/css/filter-effects/reference/filter-region-transformed-composited-child-001-ref.html new file mode 100644 index 0000000000..1a8ab40d20 --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/reference/filter-region-transformed-composited-child-001-ref.html @@ -0,0 +1,34 @@ +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="0" height="0"> + <defs> + <filter id="filter" x="25%" y="0%" width="50%" height="100%"> + <feComponentTransfer> + <feFuncR type="linear" intercept="0" slope="1"/> + <feFuncG type="linear" intercept="0" slope="0"/> + <feFuncB type="linear" intercept="0" slope="0"/> + <feFuncA type="linear" intercept="0" slope="1"/> + </feComponentTransfer> + </filter> + </defs> +</svg> +<style> +div { + position: absolute; + filter: url(#filter); + background-color: gray; + width: 50px; + height: 50px; + will-change: transform; +} +.p1 { + left: 50px; + top: 50px; + transform: translate(0px, 25px); +} +.p2 { + left: 150px; + top: 50px; + transform: translate(0px, -25px); +} +</style> +<div class="p1"></div> +<div class="p2"></div> diff --git a/testing/web-platform/tests/css/filter-effects/reference/filter-turbulence-invalid-001-ref.html b/testing/web-platform/tests/css/filter-effects/reference/filter-turbulence-invalid-001-ref.html new file mode 100644 index 0000000000..afd3facc10 --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/reference/filter-turbulence-invalid-001-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<style> +.target { + display: inline-block; + width: 100px; + height: 100px; + background-color: green; +} +</style> +<div class="target"></div> +<div class="target"></div> +<div class="target"></div> +<div class="target"></div> diff --git a/testing/web-platform/tests/css/filter-effects/reference/filter-url-to-non-existent-filter-001-ref.html b/testing/web-platform/tests/css/filter-effects/reference/filter-url-to-non-existent-filter-001-ref.html new file mode 100644 index 0000000000..c1aeed8c44 --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/reference/filter-url-to-non-existent-filter-001-ref.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<marquee> + <li style="color: white"></li> +</marquee> +<p>PASS</p> diff --git a/testing/web-platform/tests/css/filter-effects/reference/filters-drop-shadow-001-ref.html b/testing/web-platform/tests/css/filter-effects/reference/filters-drop-shadow-001-ref.html new file mode 100644 index 0000000000..3776a00609 --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/reference/filters-drop-shadow-001-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Jun Ichikawa" href="mailto:jun1ka0@gmail.com"> + <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <style type="text/css"> + #box { + position: absolute; + top: 100px; + left:0px; + width: 200px; + height: 200px; + background-color: rgb(0, 255,0); + } + #box_shadow { + position: absolute; + top: 110px; + left:20px; + width: 200px; + height: 200px; + background-color: rgb(0, 255, 0); + } + </style> +</head> +<body> + <p>You should see two green overlapping rectangles and no red.</p> + <div id="box_shadow"></div> + <div id="box"></div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/filter-effects/reference/filters-drop-shadow-002-ref.html b/testing/web-platform/tests/css/filter-effects/reference/filters-drop-shadow-002-ref.html new file mode 100644 index 0000000000..4227e8cb14 --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/reference/filters-drop-shadow-002-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<style> +.container { + filter: drop-shadow(5px 5px 5px black); +} +.circle-mask { + border-radius: 80px; + overflow: hidden; + width: 100px; + height: 100px; +} +.green-box { + width: 100px; + height: 100px; + background-color: green; +} +</style> +<div class="container"> + <div class="circle-mask"> + <div class="green-box"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/filter-effects/reference/filters-drop-shadow-003-ref.html b/testing/web-platform/tests/css/filter-effects/reference/filters-drop-shadow-003-ref.html new file mode 100644 index 0000000000..94c265066b --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/reference/filters-drop-shadow-003-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<style> +div { + width: 300px; + height: 300px; + background-color: green; +} +</style> +You should see a green box. +<div></div> diff --git a/testing/web-platform/tests/css/filter-effects/reference/filters-opacity-001-ref.html b/testing/web-platform/tests/css/filter-effects/reference/filters-opacity-001-ref.html new file mode 100644 index 0000000000..17d891ee70 --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/reference/filters-opacity-001-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Filter Opacity Reference If the value is 0</title> + <link rel="author" title="Naohiro Nakajima" href="mailto:nakajima.jmg@gmail.com"> + <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <style type="text/css"> + + div { + width: 200px; + height: 200px; + background-color: green; + } + + </style> +</head> +<body> +<p>Test opacity CSS shorthand.You should see a green box.</p> + + <div></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/filter-effects/reference/filters-opacity-002-ref.html b/testing/web-platform/tests/css/filter-effects/reference/filters-opacity-002-ref.html new file mode 100644 index 0000000000..cfd8029223 --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/reference/filters-opacity-002-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Filter Opacity Reference with value 0</title> + <link rel="author" title="Naohiro Nakajima" href="mailto:nakajima.jmg@gmail.com"> + <link rel="reviewer" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <style type="text/css"> + + div { + width: 200px; + height:200px; + background:green; + } + + </style> +</head> +<body> + <p>Test filter opacity CSS shorthand. You should see a green box.</p> + <div></div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/filter-effects/reference/green-100x100.html b/testing/web-platform/tests/css/filter-effects/reference/green-100x100.html new file mode 100644 index 0000000000..f718ea6abf --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/reference/green-100x100.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<div style="width: 100px; height: 100px; background-color: green"></div> diff --git a/testing/web-platform/tests/css/filter-effects/reference/green-blue-stripe-100x100.html b/testing/web-platform/tests/css/filter-effects/reference/green-blue-stripe-100x100.html new file mode 100644 index 0000000000..01546f115d --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/reference/green-blue-stripe-100x100.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<div style="width: 50px; height: 100px; background-color: blue; border-left: 50px solid green"></div> diff --git a/testing/web-platform/tests/css/filter-effects/reference/reference-filter-update-on-attribute-change-001-ref.html b/testing/web-platform/tests/css/filter-effects/reference/reference-filter-update-on-attribute-change-001-ref.html new file mode 100644 index 0000000000..91326ef585 --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/reference/reference-filter-update-on-attribute-change-001-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<body> + <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" version="1.1"> + <defs> + <filter id="MyFilter"> + <fecolormatrix id="color" type="hueRotate" values="90"></fecolormatrix> + </filter> + </defs> + </svg> + <div style="filter: url(#MyFilter); width:100px; height:100px; background-color:red;"></div> +</body> diff --git a/testing/web-platform/tests/css/filter-effects/reference/remove-filter-repaint-ref.html b/testing/web-platform/tests/css/filter-effects/reference/remove-filter-repaint-ref.html new file mode 100644 index 0000000000..bde2a93360 --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/reference/remove-filter-repaint-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Filters: Repaint a compositing layer</title> + <style> + .backdrop { + position: absolute; + top: 0; + left: 0; + height: 100px; + width: 100px; + background-color: silver; + } + + .overlay { + position: absolute; + top: 50px; + left: 50px; + width: 400px; + height: 100px; + background: gray; + box-shadow: 0 0 4px black; + } + + .play { + font-size: 36pt; + background-color: navy; + color: white; + } + .composited { + will-change: transform; + } + </style> +</head> +<body> + <div class="composited backdrop"></div> + <div class="overlay"> + <span id="play" class="play changed">this should be visible</span> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/filter-effects/reference/repaint-added-backdrop-filter-ref.html b/testing/web-platform/tests/css/filter-effects/reference/repaint-added-backdrop-filter-ref.html new file mode 100644 index 0000000000..caaa3061ed --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/reference/repaint-added-backdrop-filter-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<p>Expected: A black box.</p> +<div id="filter"></div> +<style> + #filter { + width: 100px; + height: 100px; + background-color: black; + } +</style> diff --git a/testing/web-platform/tests/css/filter-effects/reference/root-element-with-opacity-filter-001-ref.html b/testing/web-platform/tests/css/filter-effects/reference/root-element-with-opacity-filter-001-ref.html new file mode 100644 index 0000000000..cd16e54c8e --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/reference/root-element-with-opacity-filter-001-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<html> +<body style="filter: opacity(0.501)"> +This test ensures we properly paint the root element when an opacity filter is applied. diff --git a/testing/web-platform/tests/css/filter-effects/reference/svg-feflood-ref.html b/testing/web-platform/tests/css/filter-effects/reference/svg-feflood-ref.html new file mode 100644 index 0000000000..5623b08ecd --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/reference/svg-feflood-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <meta name="flags" content="svg"> + <style type="text/css"> + svg { + width: 500px; + height: 500px; + } + </style> +</head> +<body> + <p>The test passes if you see a black square and no red.</p> + <svg> + <rect width="300" height="300" fill="black"/> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/filter-effects/reference/svg-feimage-ref.html b/testing/web-platform/tests/css/filter-effects/reference/svg-feimage-ref.html new file mode 100644 index 0000000000..5623b08ecd --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/reference/svg-feimage-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <meta name="flags" content="svg"> + <style type="text/css"> + svg { + width: 500px; + height: 500px; + } + </style> +</head> +<body> + <p>The test passes if you see a black square and no red.</p> + <svg> + <rect width="300" height="300" fill="black"/> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/filter-effects/reference/svg-feoffset-ref.html b/testing/web-platform/tests/css/filter-effects/reference/svg-feoffset-ref.html new file mode 100644 index 0000000000..5623b08ecd --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/reference/svg-feoffset-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Reftest Reference</title> + <link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com"> + <meta name="flags" content="svg"> + <style type="text/css"> + svg { + width: 500px; + height: 500px; + } + </style> +</head> +<body> + <p>The test passes if you see a black square and no red.</p> + <svg> + <rect width="300" height="300" fill="black"/> + </svg> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/filter-effects/reference/svg-relative-urls-001-ref.html b/testing/web-platform/tests/css/filter-effects/reference/svg-relative-urls-001-ref.html new file mode 100644 index 0000000000..82f301f5f6 --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/reference/svg-relative-urls-001-ref.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<div style="width: 100px; height: 100px; background-color: red; filter: url(../support/hueRotate.svg#MyFilter)"></div> +<div style="width: 100px; height: 100px; background-color: red; filter: url(../support/hueRotate.svg#MyFilter)"></div> diff --git a/testing/web-platform/tests/css/filter-effects/reference/svg-relative-urls-002-ref.html b/testing/web-platform/tests/css/filter-effects/reference/svg-relative-urls-002-ref.html new file mode 100644 index 0000000000..344ee53e03 --- /dev/null +++ b/testing/web-platform/tests/css/filter-effects/reference/svg-relative-urls-002-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<style> +img { + margin: 10px; +} +</style> +<img style="filter: url(../support/hueRotate.svg#MyFilter)" src="../support/color-palette.png"> |