blob: 679bcf50ec2535f6c4cc2c7cebf9e480f4eedd98 [file] [log] [blame]
<!DOCTYPE html><!-- webkit-test-runner [ experimental:CSSPaintingAPIEnabled=true ] -->
<meta name="author" title="Justin Michaud" href="mailto:justin_michaud@webkit.org">
<meta name="assert" content="Test paint worklet input properties and arguments">
<link rel="help" content="https://drafts.css-houdini.org/css-paint-api-1/">
<script src="resources/testharness.js"></script>
<style>
.paint {
background-image: paint(my-paint,150px,helloworld1,helloworld2);
width: 150px;
height: 150px;
--my-prop:helloworld1;
--my-registered-prop:helloworld2;
}
.paint2 {
background-image: paint(my-paint,150px,helloworld1,initialValueProp);
width: 150px;
height: 150px;
--my-prop:helloworld1;
}
</style>
<div class="paint"></div>
<div class="paint2"></div>
<script id="code" type="text/worklet">
class MyPaint {
static get inputProperties() { return ['height', '--my-prop', '--my-registered-prop', "--never-specified"]; }
static get inputArguments() { return ['*', '*', '*']; }
constructor() { this.myAttribute = 42; }
testThis() { return this.myAttribute; }
paint(ctx, geom, properties, args) {
assert_true(properties instanceof StylePropertyMapReadOnly);
assert_equals(properties.get('height').toString(), args[0].toString());
assert_equals(properties.get('height').value, 150);
assert_equals(properties.get('height').unit, 'px');
assert_equals(properties.get('--my-prop').toString(), args[1].toString());
assert_equals(properties.get('--my-registered-prop').toString(), args[2].toString());
assert_equals(properties.get('width'), null);
assert_equals(properties.get('--never-specified').toString(), '');
assert_equals(this.testThis(), 42);
for (var i = 0; i < 6; i++){
for (var j = 0; j < 6; j++){
ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ',' +
Math.floor(255 - 42.5 * j) + ',0)';
ctx.fillRect(j * 25, i * 25, 25, 25);
}
}
}
}
registerPaint('my-paint', MyPaint);
</script>
<script>
importWorklet(CSS.paintWorklet, document.getElementById('code').textContent);
CSS.registerProperty({
name: '--my-registered-prop',
syntax: '*',
initialValue: 'initialValueProp',
inherits: false
});
</script>