[css-houdini-drafts] [css-paint-api] Cannot get custom properties defined in body element

animabear has just created a new issue for https://github.com/w3c/css-houdini-drafts:

== [css-paint-api] Cannot get custom properties defined in body element ==
This is a demo:

```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            width: 100vw;
            height: 100vh;
            --rect-size: 32;
            background-image: paint(test);
        }
    </style>
    <script>
        CSS.paintWorklet.addModule('paint.js');
    </script>
</head>

<body>
    hello css paint
    <div></div>
</body>

</html>
```

`paint.js`
```javascript
class MyPainter {
    static get inputProperties() {
        return ['--rect-size']
    }

    paint(ctx, geom, properties) {
        const size = parseInt(properties.get('--rect-size').toString());
        console.log(size)
        const colors = ['red', 'green', 'blue'];
        for (let y = 0; y < geom.height / size; y++) {
            for (let x = 0; x < geom.width / size; x++) {
                const color = colors[(x + y) % colors.length];
                ctx.beginPath();
                ctx.fillStyle = color;
                ctx.rect(x * size, y * size, size, size);
                ctx.fill();
            }
        }
    }
}

registerPaint('test', MyPainter);
```

the size will be `NaN`. But it will be ok if I apply it for div element:

```html
div {
    width: 100vw;
    height: 100vh;
    --rect-size: 32;
    background-image: paint(test);
}
```

My browser version is:  66.0.3336.5  chrome canary (64 bits)

Please view or discuss this issue at https://github.com/w3c/css-houdini-drafts/issues/627 using your GitHub account

Received on Saturday, 3 February 2018 07:32:57 UTC