diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-paint-api/paint2d-filter.https.html')
-rw-r--r-- | testing/web-platform/tests/css/css-paint-api/paint2d-filter.https.html | 108 |
1 files changed, 108 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-paint-api/paint2d-filter.https.html b/testing/web-platform/tests/css/css-paint-api/paint2d-filter.https.html new file mode 100644 index 0000000000..a53fff986c --- /dev/null +++ b/testing/web-platform/tests/css/css-paint-api/paint2d-filter.https.html @@ -0,0 +1,108 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="help" href="https://drafts.css-houdini.org/css-paint-api/"> +<link rel="match" href="paint2d-filter-ref.html"> +<style> + div { + display: inline-block; + width: 100px; + height: 100px; + } + #filter-none { background-image: paint(filter-none); } + #filter-blur-10px { background-image: paint(filter-blur-10px); } + #filter-blur-50vh { background-image: paint(filter-blur-50vh); } + #filter-blur-1em { background-image: paint(filter-blur-1em); } + #filter-blur-2percent { background-image: paint(filter-blur-2percent); } + #filter-brightness { background-image: paint(filter-brightness); } + #filter-contrast { background-image: paint(filter-contrast); } + #filter-drop-shadow { background-image: paint(filter-drop-shadow); } + #filter-grayscale { background-image: paint(filter-grayscale); } + #filter-invert { background-image: paint(filter-invert); } + #filter-opacity { background-image: paint(filter-opacity); } + #filter-saturate { background-image: paint(filter-saturate); } + #filter-sepia { background-image: paint(filter-sepia); } + #filter-hue-rotate { background-image: paint(filter-hue-rotate); } + #filter-url { background-image: paint(filter-url); } +</style> +<script src="/common/reftest-wait.js"></script> +<script src="/common/worklet-reftest.js"></script> +<body> +<div id="filter-none"></div> +<div id="filter-blur-10px"></div> +<div id="filter-blur-50vh"></div> +<div id="filter-blur-1em"></div> +<div id="filter-blur-2percent"></div> +<br> +<div id="filter-brightness"></div> +<div id="filter-contrast"></div> +<div id="filter-drop-shadow"></div> +<div id="filter-grayscale"></div> +<div id="filter-invert"></div> +<br> +<div id="filter-opacity"></div> +<div id="filter-saturate"></div> +<div id="filter-sepia"></div> +<div id="filter-hue-rotate"></div> +<div id="filter-url"></div> + +<script id="code" type="text/worklet"> +var paintNames = [ + 'filter-none', + 'filter-blur-10px', + 'filter-blur-50vh', + 'filter-blur-1em', + 'filter-blur-2percent', + 'filter-brightness', + 'filter-contrast', + 'filter-drop-shadow', + 'filter-grayscale', + 'filter-invert', + 'filter-opacity', + 'filter-saturate', + 'filter-sepia', + 'filter-hue-rotate', + 'filter-url' +]; + +var filterOps = [ + 'none', + 'blur(10px)', + 'blur(50vh)', + 'blur(1em)', + 'blur(2%)', + 'brightness(40%)', + 'contrast(20%)', + 'drop-shadow(0 0 5px green)', + 'grayscale(100%)', + 'invert(100%)', + 'opacity(50%)', + 'saturate(20%)', + 'sepia(100%)', + 'sepia(1) hue-rotate(200deg)', + 'url(#url)' +]; + +function doPaint(ctx, op) { + ctx.filter = op; + ctx.fillStyle = '#A00'; + ctx.fillRect(0, 0, 15, 15); + ctx.fillStyle = '#0A0'; + ctx.fillRect(15, 0, 15, 15); + ctx.fillStyle = '#00A'; + ctx.fillRect(0, 15, 15, 15); + ctx.fillStyle = "#AA0"; + ctx.fillRect(15, 15, 15, 15); +}; + +for (var i = 0; i < filterOps.length; i++) { + let op = filterOps[i]; + registerPaint(paintNames[i], class { paint(ctx, geom) { doPaint(ctx, op); } }); +} +</script> + +<script> + importWorkletAndTerminateTestAfterAsyncPaint(CSS.paintWorklet, document.getElementById('code').textContent); +</script> +</body> +</html> + |