Files
firefox/testing/web-platform/tests/css/css-paint-api/paint-function-arguments-var.https.html
Anders Hartvoll Ruud ee37e32edc Bug 1725169 [wpt PR 29990] - Support var() resolution in paint() arguments, a=testonly
Automatic update from web-platform-tests
Support var() resolution in paint() arguments

Our var() support in the CSS parser relies on the fact that
property parser functions do not succeed parsing when var() exists
in the token sequence [1]. However, the parser for the paint()
currently allows *any* token sequence, also token sequences with
var(). This results in var() functions not working at all inside
paint() function arguments.

This CL changes the paint() parser to use CSSVariableParser to
check if any var() references are found, and if so, fail parsing,
thus ultimately producing a CSSVariableReferenceValue (as it should)
via [1].

Also added a DCHECK in CSSPaintValue::ParseInputArguments which
verifies that we don't have any unresolved references. Although this
DCHECK would pass on current 'main' as well, since the paint() parser
basically lied and set this flag to 'false' unconditionally.

Note that this CL only affects code behind the CSSPaintAPIArguments
flag (status:experimental).

[1] See CSSPropertyParser::ParseValueStart

Change-Id: Id4ef6a7774ffbbb9fe38fb6a5506f744b40ec02e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3087449
Reviewed-by: Xiaocheng Hu <[email protected]>
Commit-Queue: Anders Hartvoll Ruud <[email protected]>
Cr-Commit-Position: refs/heads/master@{#912104}

--

wpt-commits: 96cb77dc71e7dc0b7b04085e72bd9bd11a882b31
wpt-pr: 29990
2021-09-02 10:29:04 +00:00

57 lines
1.3 KiB
HTML

<!DOCTYPE html>
<html class="reftest-wait">
<link rel="help" href="https://drafts.css-houdini.org/css-paint-api/">
<link rel="match" href="paint-function-arguments-ref.html">
<style>
:root {
--color1:rgb(50, 100, 150);
--color2:rgb(150, 100, 50);
--length1:50px;
}
.container {
width: 200px;
height: 200px;
}
#canvas-box-1 {
background-image: paint(box, var(--color1), var(--length1));
}
#canvas-box-2 {
background-image: paint(box, var(--color2), 100px);
}
#background {
background-color: yellow;
display: inline-block;
}
</style>
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<body>
<div id="background">
<div id="canvas-box-1" class="container"></div>
<div id="canvas-box-2" class="container"></div>
</div>
<script id="code" type="text/worklet">
registerPaint('box', class {
static get contextOptions() { return {alpha: true}; }
static get inputArguments() { return ['<color>', '<length>']; }
paint(ctx, geom, properties, args) {
ctx.fillStyle = args[0].toString();
let size = parseInt(args[1].toString());
ctx.fillRect(40, 40, size, size);
}
});
</script>
<script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.paintWorklet, document.getElementById('code').textContent);
</script>
</body>
</html>