Blitz - WPT: paint2d-filter.https.html

wpt / css / css-paint-api / paint2d-filter.https.html

/css/css-paint-api/paint2d-filter.https.html

<!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">
<meta name="fuzzy" content="maxDifference=0-5;totalPixels=0-1000">
<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>

/css/css-paint-api/paint2d-filter-ref.html

<!DOCTYPE html>
<html>
<head>
<style>
    canvas { display: inline-block; }
</style>
</head>
<body>
<canvas id='output0' width='100' height='100'></canvas>
<canvas id='output1' width='100' height='100'></canvas>
<canvas id='output2' width='100' height='100'></canvas>
<canvas id='output3' width='100' height='100'></canvas>
<canvas id='output4' width='100' height='100'></canvas>
<br>
<canvas id='output5' width='100' height='100'></canvas>
<canvas id='output6' width='100' height='100'></canvas>
<canvas id='output7' width='100' height='100'></canvas>
<canvas id='output8' width='100' height='100'></canvas>
<canvas id='output9' width='100' height='100'></canvas>
<br>
<canvas id='output10' width='100' height='100'></canvas>
<canvas id='output11' width='100' height='100'></canvas>
<canvas id='output12' width='100' height='100'></canvas>
<canvas id='output13' width='100' height='100'></canvas>
<canvas id='output14' width='100' height='100'></canvas>

<script>
var paint = function(id, filter) {
  var c = document.getElementById(id);
  var ctx = c.getContext('2d');
  ctx.filter = filter;
  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);
  return ctx;
};

paint('output0', "none");
paint('output1', "blur(10px)");
paint('output2', "blur(0px)");
paint('output3', "blur(16px)");
paint('output4', "blur(0px)");
paint('output5', "brightness(40%)");
paint('output6', "contrast(20%)");
paint('output7', "drop-shadow(0 0 5px green)");
paint('output8', "grayscale(100%)");
paint('output9', "invert(100%)");
paint('output10', "opacity(50%)");
paint('output11', "saturate(20%)");
paint('output12', "sepia(100%)");
paint('output13', "sepia(1) hue-rotate(200deg)");
paint('output14', "url(#url)");
</script>
</body>
</html>