Fix the fundamental compositing bug for canvas
Compositing should not affect the paint order of canvas. This patch
changes LayoutHTMLCanvas to not force a PaintLayer, which caused
canvas to draw after non-stacked siblings. PaintLayer is now
primarily used for stacking contexts. A PaintLayer was previously
required to support accelerated canvas. CompositeAfterPaint changed
the compositing algorithm to work based on display items and property
trees, rather than PaintLayer, which lets us fix this longstanding
bug.
The following new WPT test demonstrates the progression:
wpt/css/CSS2/normal-flow/canvas-paint-order.html
Bug: 370604
Change-Id: I70cbb9bb206770f5e24bbe2d2ff8ebaf0f4f6051
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3358180
Reviewed-by: Xianzhu Wang <wangxianzhu@chromium.org>
Reviewed-by: Aaron Krajeski <aaronhk@chromium.org>
Commit-Queue: Philip Rogers <pdr@chromium.org>
Cr-Commit-Position: refs/heads/main@{#955379}
diff --git a/css/CSS2/normal-flow/canvas-paint-order-ref.html b/css/CSS2/normal-flow/canvas-paint-order-ref.html
new file mode 100644
index 0000000..3baa038
--- /dev/null
+++ b/css/CSS2/normal-flow/canvas-paint-order-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<style>
+ #canvas {
+ width: 95px;
+ height: 95px;
+ }
+ #negative-margin {
+ display: inline-block;
+ width: 100px;
+ height: 100px;
+ background: green;
+ margin-left: -100px;
+ }
+</style>
+<canvas id="canvas"></canvas>
+<div id="negative-margin"></div>
diff --git a/css/CSS2/normal-flow/canvas-paint-order.html b/css/CSS2/normal-flow/canvas-paint-order.html
new file mode 100644
index 0000000..64b3e3f
--- /dev/null
+++ b/css/CSS2/normal-flow/canvas-paint-order.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<title>Canvas paint order</title>
+<link rel="author" title="Philip Rogers" href="pdr@chromium.org">
+<link rel="help" href="https://www.w3.org/TR/CSS2/zindex.html">
+<link rel="match" href="canvas-paint-order-ref.html">
+<style>
+ #canvas {
+ background: red;
+ width: 95px;
+ height: 95px;
+ }
+ #negative-margin {
+ display: inline-block;
+ width: 100px;
+ height: 100px;
+ background: green;
+ margin-left: -100px;
+ }
+</style>
+<canvas id="canvas"></canvas>
+<!-- #negative-margin should paint fully on top of the canvas. -->
+<div id="negative-margin"></div>
+<script>
+ onload = function() {
+ var context = canvas.getContext("2d");
+ context.save();
+ context.fillStyle = "red";
+ context.fillRect(0, 0, 500, 500);
+ context.restore();
+ };
+</script>
