Skip to content

Commit 688f174

Browse files
progerschromium-wpt-export-bot
progers
authored and
chromium-wpt-export-bot
committed
[html-in-canvas] Fix missing background color on nested canvases
When a layer exists for canvas, CSS background colors were set on the layer. This did not work for nested html-in-canvas where the background needs to be painted into the parent. This bug was only present after calling ctx.reset() because on the initial render, a cc layer does not yet exist for the nested canvas, so DrawsBackgroundOntoContentLayer returned false. Fixed: 536346616 Change-Id: If90fd1ff95438e49e75960996c696fdea2135502 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/8149499 Reviewed-by: Stefan Zager <szager@chromium.org> Commit-Queue: Philip Rogers <pdr@chromium.org> Cr-Commit-Position: refs/heads/main@{#1668735}
1 parent 5059bfe commit 688f174

2 files changed

Lines changed: 38 additions & 0 deletions

File tree

‎html/canvas/element/manual/draw-element-image/nested-canvas-reset-ref.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<!DOCTYPE html>
2+
<div style="width: 200px; height: 200px;">
3+
<div style="width: 100px; height: 100px; background-color: green;"></div>
4+
</div>

‎html/canvas/element/manual/draw-element-image/nested-canvas-reset.tentative.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html class="reftest-wait">
3+
<title>Canvas.drawElementImage: outer_ctx.reset() should not clear nested canvas background color</title>
4+
<link rel="help" href="https://github.com/WICG/html-in-canvas">
5+
<link rel="match" href="nested-canvas-reset-ref.html">
6+
<script src="/common/reftest-wait.js"></script>
7+
<script src="/html/canvas/resources/wait-for-canvas-paint.js"></script>
8+
9+
<canvas id="outer" width="200" height="200" layoutsubtree>
10+
<div id="outer_target">
11+
<canvas id="inner" width="100" height="100" style="background-color: green;" layoutsubtree>
12+
<div id="inner_target" style="width: 50px; height: 50px;"></div>
13+
</canvas>
14+
</div>
15+
</canvas>
16+
17+
<script>
18+
inner.onpaint = () => {
19+
const inner_ctx = inner.getContext('2d');
20+
inner_ctx.reset();
21+
inner_ctx.drawElementImage(inner_target, 0, 0);
22+
};
23+
outer.onpaint = () => {
24+
const outer_ctx = outer.getContext('2d');
25+
outer_ctx.reset();
26+
outer_ctx.drawElementImage(outer_target, 0, 0);
27+
};
28+
29+
onload = async function() {
30+
await waitForCanvasPaint(outer);
31+
takeScreenshot();
32+
};
33+
</script>
34+
</html>

0 commit comments

Comments
 (0)