Skip to content

Commit

Permalink
De-fuzz the 2d.layer.global-states WPT tests
Browse files Browse the repository at this point in the history 
These tests were using shapes and colors that did not rasterize to
exact predictable values and therefore needed fuzzy matching. For
instance, the anti-aliased border of the circle was rendered
differently under certain configurations. Using squares avoids this
issue. Likewise, some color values used we not representable with
whole numbers after blending and compositing, leading to numerical
precision errors. These are unrelated with the behavior these tests
are about: these tests are about layer rendering, not antialiasing
or floating point color rounding precision.

Bug: 40257559
Change-Id: I8e749d7273f7b45516d4ba22bbedd54937a146e1
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5405421
Reviewed-by: Yi Xu <[email protected]>
Commit-Queue: Jean-Philippe Gravel <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1286079}
  • Loading branch information
@graveljp @chromium-wpt-export-bot
graveljp authored and chromium-wpt-export-bot committed Apr 11, 2024
1 parent f95204f commit 4275d57
Show file tree
Hide file tree
Showing 121 changed files with 1,290 additions and 1,949 deletions.
21 changes: 9 additions & 12 deletions html/canvas/element/layers/2d.layer.global-states.alpha-expected.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,29 +3,26 @@
<title>Canvas test: 2d.layer.global-states.alpha</title>
<h1>2d.layer.global-states.alpha</h1>
<p class="desc">Checks that layers correctly use global render states.</p>
<canvas id="canvas" width="200" height="200">
<canvas id="canvas" width="90" height="90">
<p class="fallback">FAIL (fallback content)</p>
</canvas>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'rgba(0, 0, 255, 1)';
ctx.fillStyle = 'rgba(128, 128, 128, 1)';
ctx.fillRect(20, 15, 50, 50);

var circle = new Path2D();
circle.arc(90, 90, 45, 0, 2 * Math.PI);
ctx.fill(circle);
ctx.globalAlpha = 0.75;

ctx.globalAlpha = 0.6;

canvas2 = document.createElement("canvas");
ctx2 = canvas2.getContext("2d");
const canvas2 = document.createElement("canvas");
const ctx2 = canvas2.getContext("2d");

ctx2.globalCompositeOperation = 'screen';
ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
ctx2.fillRect(50, 50, 75, 50);
ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
ctx2.fillRect(10, 25, 40, 50);
ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
ctx2.fillRect(70, 70, 75, 50);
ctx2.fillRect(30, 5, 50, 40);

ctx.drawImage(canvas2, 0, 0);
</script>
21 changes: 9 additions & 12 deletions html/canvas/element/layers/2d.layer.global-states.alpha.blending-expected.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,30 +3,27 @@
<title>Canvas test: 2d.layer.global-states.alpha.blending</title>
<h1>2d.layer.global-states.alpha.blending</h1>
<p class="desc">Checks that layers correctly use global render states.</p>
<canvas id="canvas" width="200" height="200">
<canvas id="canvas" width="90" height="90">
<p class="fallback">FAIL (fallback content)</p>
</canvas>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'rgba(0, 0, 255, 1)';
ctx.fillStyle = 'rgba(128, 128, 128, 1)';
ctx.fillRect(20, 15, 50, 50);

var circle = new Path2D();
circle.arc(90, 90, 45, 0, 2 * Math.PI);
ctx.fill(circle);

ctx.globalAlpha = 0.6;
ctx.globalAlpha = 0.75;
ctx.globalCompositeOperation = 'multiply';

canvas2 = document.createElement("canvas");
ctx2 = canvas2.getContext("2d");
const canvas2 = document.createElement("canvas");
const ctx2 = canvas2.getContext("2d");

ctx2.globalCompositeOperation = 'screen';
ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
ctx2.fillRect(50, 50, 75, 50);
ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
ctx2.fillRect(10, 25, 40, 50);
ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
ctx2.fillRect(70, 70, 75, 50);
ctx2.fillRect(30, 5, 50, 40);

ctx.drawImage(canvas2, 0, 0);
</script>
17 changes: 7 additions & 10 deletions html/canvas/element/layers/2d.layer.global-states.alpha.blending.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,17 @@
<title>Canvas test: 2d.layer.global-states.alpha.blending</title>
<h1>2d.layer.global-states.alpha.blending</h1>
<p class="desc">Checks that layers correctly use global render states.</p>
<canvas id="canvas" width="200" height="200">
<canvas id="canvas" width="90" height="90">
<p class="fallback">FAIL (fallback content)</p>
</canvas>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'rgba(0, 0, 255, 1)';
ctx.fillStyle = 'rgba(128, 128, 128, 1)';
ctx.fillRect(20, 15, 50, 50);

var circle = new Path2D();
circle.arc(90, 90, 45, 0, 2 * Math.PI);
ctx.fill(circle);

ctx.globalAlpha = 0.6;
ctx.globalAlpha = 0.75;
ctx.globalCompositeOperation = 'multiply';

ctx.beginLayer();
Expand All @@ -26,10 +23,10 @@ <h1>2d.layer.global-states.alpha.blending</h1>
// won't individually composite with the background.
ctx.globalCompositeOperation = 'screen';

ctx.fillStyle = 'rgba(225, 0, 0, 1)';
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = 'rgba(255, 0, 0, 1)';
ctx.fillRect(10, 25, 40, 50);
ctx.fillStyle = 'rgba(0, 255, 0, 1)';
ctx.fillRect(70, 70, 75, 50);
ctx.fillRect(30, 5, 50, 40);

ctx.endLayer();
</script>
25 changes: 11 additions & 14 deletions html/canvas/element/layers/2d.layer.global-states.alpha.blending.shadow-expected.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,34 +3,31 @@
<title>Canvas test: 2d.layer.global-states.alpha.blending.shadow</title>
<h1>2d.layer.global-states.alpha.blending.shadow</h1>
<p class="desc">Checks that layers correctly use global render states.</p>
<canvas id="canvas" width="200" height="200">
<canvas id="canvas" width="90" height="90">
<p class="fallback">FAIL (fallback content)</p>
</canvas>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'rgba(0, 0, 255, 1)';
ctx.fillStyle = 'rgba(128, 128, 128, 1)';
ctx.fillRect(20, 15, 50, 50);

var circle = new Path2D();
circle.arc(90, 90, 45, 0, 2 * Math.PI);
ctx.fill(circle);

ctx.globalAlpha = 0.6;
ctx.globalAlpha = 0.75;
ctx.globalCompositeOperation = 'multiply';
ctx.shadowOffsetX = -10;
ctx.shadowOffsetY = 10;
ctx.shadowOffsetX = -7;
ctx.shadowOffsetY = 7;
ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
ctx.shadowBlur = 3;

canvas2 = document.createElement("canvas");
ctx2 = canvas2.getContext("2d");
const canvas2 = document.createElement("canvas");
const ctx2 = canvas2.getContext("2d");

ctx2.globalCompositeOperation = 'screen';
ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
ctx2.fillRect(50, 50, 75, 50);
ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
ctx2.fillRect(10, 25, 40, 50);
ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
ctx2.fillRect(70, 70, 75, 50);
ctx2.fillRect(30, 5, 50, 40);

ctx.drawImage(canvas2, 0, 0);
</script>
21 changes: 9 additions & 12 deletions html/canvas/element/layers/2d.layer.global-states.alpha.blending.shadow.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,23 +4,20 @@
<title>Canvas test: 2d.layer.global-states.alpha.blending.shadow</title>
<h1>2d.layer.global-states.alpha.blending.shadow</h1>
<p class="desc">Checks that layers correctly use global render states.</p>
<canvas id="canvas" width="200" height="200">
<canvas id="canvas" width="90" height="90">
<p class="fallback">FAIL (fallback content)</p>
</canvas>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'rgba(0, 0, 255, 1)';
ctx.fillStyle = 'rgba(128, 128, 128, 1)';
ctx.fillRect(20, 15, 50, 50);

var circle = new Path2D();
circle.arc(90, 90, 45, 0, 2 * Math.PI);
ctx.fill(circle);

ctx.globalAlpha = 0.6;
ctx.globalAlpha = 0.75;
ctx.globalCompositeOperation = 'multiply';
ctx.shadowOffsetX = -10;
ctx.shadowOffsetY = 10;
ctx.shadowOffsetX = -7;
ctx.shadowOffsetY = 7;
ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
ctx.shadowBlur = 3;

Expand All @@ -30,10 +27,10 @@ <h1>2d.layer.global-states.alpha.blending.shadow</h1>
// won't individually composite with the background.
ctx.globalCompositeOperation = 'screen';

ctx.fillStyle = 'rgba(225, 0, 0, 1)';
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = 'rgba(255, 0, 0, 1)';
ctx.fillRect(10, 25, 40, 50);
ctx.fillStyle = 'rgba(0, 255, 0, 1)';
ctx.fillRect(70, 70, 75, 50);
ctx.fillRect(30, 5, 50, 40);

ctx.endLayer();
</script>
21 changes: 9 additions & 12 deletions html/canvas/element/layers/2d.layer.global-states.alpha.composite-expected.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,30 +3,27 @@
<title>Canvas test: 2d.layer.global-states.alpha.composite</title>
<h1>2d.layer.global-states.alpha.composite</h1>
<p class="desc">Checks that layers correctly use global render states.</p>
<canvas id="canvas" width="200" height="200">
<canvas id="canvas" width="90" height="90">
<p class="fallback">FAIL (fallback content)</p>
</canvas>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'rgba(0, 0, 255, 1)';
ctx.fillStyle = 'rgba(128, 128, 128, 1)';
ctx.fillRect(20, 15, 50, 50);

var circle = new Path2D();
circle.arc(90, 90, 45, 0, 2 * Math.PI);
ctx.fill(circle);

ctx.globalAlpha = 0.6;
ctx.globalAlpha = 0.75;
ctx.globalCompositeOperation = 'source-in';

canvas2 = document.createElement("canvas");
ctx2 = canvas2.getContext("2d");
const canvas2 = document.createElement("canvas");
const ctx2 = canvas2.getContext("2d");

ctx2.globalCompositeOperation = 'screen';
ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
ctx2.fillRect(50, 50, 75, 50);
ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
ctx2.fillRect(10, 25, 40, 50);
ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
ctx2.fillRect(70, 70, 75, 50);
ctx2.fillRect(30, 5, 50, 40);

ctx.drawImage(canvas2, 0, 0);
</script>
17 changes: 7 additions & 10 deletions html/canvas/element/layers/2d.layer.global-states.alpha.composite.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,17 @@
<title>Canvas test: 2d.layer.global-states.alpha.composite</title>
<h1>2d.layer.global-states.alpha.composite</h1>
<p class="desc">Checks that layers correctly use global render states.</p>
<canvas id="canvas" width="200" height="200">
<canvas id="canvas" width="90" height="90">
<p class="fallback">FAIL (fallback content)</p>
</canvas>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'rgba(0, 0, 255, 1)';
ctx.fillStyle = 'rgba(128, 128, 128, 1)';
ctx.fillRect(20, 15, 50, 50);

var circle = new Path2D();
circle.arc(90, 90, 45, 0, 2 * Math.PI);
ctx.fill(circle);

ctx.globalAlpha = 0.6;
ctx.globalAlpha = 0.75;
ctx.globalCompositeOperation = 'source-in';

ctx.beginLayer();
Expand All @@ -26,10 +23,10 @@ <h1>2d.layer.global-states.alpha.composite</h1>
// won't individually composite with the background.
ctx.globalCompositeOperation = 'screen';

ctx.fillStyle = 'rgba(225, 0, 0, 1)';
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = 'rgba(255, 0, 0, 1)';
ctx.fillRect(10, 25, 40, 50);
ctx.fillStyle = 'rgba(0, 255, 0, 1)';
ctx.fillRect(70, 70, 75, 50);
ctx.fillRect(30, 5, 50, 40);

ctx.endLayer();
</script>
25 changes: 11 additions & 14 deletions html/canvas/element/layers/2d.layer.global-states.alpha.composite.shadow-expected.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,34 +3,31 @@
<title>Canvas test: 2d.layer.global-states.alpha.composite.shadow</title>
<h1>2d.layer.global-states.alpha.composite.shadow</h1>
<p class="desc">Checks that layers correctly use global render states.</p>
<canvas id="canvas" width="200" height="200">
<canvas id="canvas" width="90" height="90">
<p class="fallback">FAIL (fallback content)</p>
</canvas>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'rgba(0, 0, 255, 1)';
ctx.fillStyle = 'rgba(128, 128, 128, 1)';
ctx.fillRect(20, 15, 50, 50);

var circle = new Path2D();
circle.arc(90, 90, 45, 0, 2 * Math.PI);
ctx.fill(circle);

ctx.globalAlpha = 0.6;
ctx.globalAlpha = 0.75;
ctx.globalCompositeOperation = 'source-in';
ctx.shadowOffsetX = -10;
ctx.shadowOffsetY = 10;
ctx.shadowOffsetX = -7;
ctx.shadowOffsetY = 7;
ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
ctx.shadowBlur = 3;

canvas2 = document.createElement("canvas");
ctx2 = canvas2.getContext("2d");
const canvas2 = document.createElement("canvas");
const ctx2 = canvas2.getContext("2d");

ctx2.globalCompositeOperation = 'screen';
ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
ctx2.fillRect(50, 50, 75, 50);
ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
ctx2.fillRect(10, 25, 40, 50);
ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
ctx2.fillRect(70, 70, 75, 50);
ctx2.fillRect(30, 5, 50, 40);

ctx.drawImage(canvas2, 0, 0);
</script>
21 changes: 9 additions & 12 deletions html/canvas/element/layers/2d.layer.global-states.alpha.composite.shadow.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,23 +4,20 @@
<title>Canvas test: 2d.layer.global-states.alpha.composite.shadow</title>
<h1>2d.layer.global-states.alpha.composite.shadow</h1>
<p class="desc">Checks that layers correctly use global render states.</p>
<canvas id="canvas" width="200" height="200">
<canvas id="canvas" width="90" height="90">
<p class="fallback">FAIL (fallback content)</p>
</canvas>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'rgba(0, 0, 255, 1)';
ctx.fillStyle = 'rgba(128, 128, 128, 1)';
ctx.fillRect(20, 15, 50, 50);

var circle = new Path2D();
circle.arc(90, 90, 45, 0, 2 * Math.PI);
ctx.fill(circle);

ctx.globalAlpha = 0.6;
ctx.globalAlpha = 0.75;
ctx.globalCompositeOperation = 'source-in';
ctx.shadowOffsetX = -10;
ctx.shadowOffsetY = 10;
ctx.shadowOffsetX = -7;
ctx.shadowOffsetY = 7;
ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
ctx.shadowBlur = 3;

Expand All @@ -30,10 +27,10 @@ <h1>2d.layer.global-states.alpha.composite.shadow</h1>
// won't individually composite with the background.
ctx.globalCompositeOperation = 'screen';

ctx.fillStyle = 'rgba(225, 0, 0, 1)';
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = 'rgba(255, 0, 0, 1)';
ctx.fillRect(10, 25, 40, 50);
ctx.fillStyle = 'rgba(0, 255, 0, 1)';
ctx.fillRect(70, 70, 75, 50);
ctx.fillRect(30, 5, 50, 40);

ctx.endLayer();
</script>
Loading

0 comments on commit 4275d57

Please sign in to comment.