Skip to content

Commit 4275d57

Browse files
graveljpchromium-wpt-export-bot
graveljp
authored and
chromium-wpt-export-bot
committed
De-fuzz the 2d.layer.global-states WPT tests
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}
1 parent f95204f commit 4275d57

File tree

121 files changed

+1290
-1949
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

121 files changed

+1290
-1949
lines changed

‎html/canvas/element/layers/2d.layer.global-states.alpha-expected.html

+9-12
Original file line numberDiff line numberDiff line change
@@ -3,29 +3,26 @@
33
<title>Canvas test: 2d.layer.global-states.alpha</title>
44
<h1>2d.layer.global-states.alpha</h1>
55
<p class="desc">Checks that layers correctly use global render states.</p>
6-
<canvas id="canvas" width="200" height="200">
6+
<canvas id="canvas" width="90" height="90">
77
<p class="fallback">FAIL (fallback content)</p>
88
</canvas>
99
<script>
1010
const canvas = document.getElementById("canvas");
1111
const ctx = canvas.getContext('2d');
1212

13-
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
13+
ctx.fillStyle = 'rgba(128, 128, 128, 1)';
14+
ctx.fillRect(20, 15, 50, 50);
1415

15-
var circle = new Path2D();
16-
circle.arc(90, 90, 45, 0, 2 * Math.PI);
17-
ctx.fill(circle);
16+
ctx.globalAlpha = 0.75;
1817

19-
ctx.globalAlpha = 0.6;
20-
21-
canvas2 = document.createElement("canvas");
22-
ctx2 = canvas2.getContext("2d");
18+
const canvas2 = document.createElement("canvas");
19+
const ctx2 = canvas2.getContext("2d");
2320

2421
ctx2.globalCompositeOperation = 'screen';
25-
ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
26-
ctx2.fillRect(50, 50, 75, 50);
22+
ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
23+
ctx2.fillRect(10, 25, 40, 50);
2724
ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
28-
ctx2.fillRect(70, 70, 75, 50);
25+
ctx2.fillRect(30, 5, 50, 40);
2926

3027
ctx.drawImage(canvas2, 0, 0);
3128
</script>

‎html/canvas/element/layers/2d.layer.global-states.alpha.blending-expected.html

+9-12
Original file line numberDiff line numberDiff line change
@@ -3,30 +3,27 @@
33
<title>Canvas test: 2d.layer.global-states.alpha.blending</title>
44
<h1>2d.layer.global-states.alpha.blending</h1>
55
<p class="desc">Checks that layers correctly use global render states.</p>
6-
<canvas id="canvas" width="200" height="200">
6+
<canvas id="canvas" width="90" height="90">
77
<p class="fallback">FAIL (fallback content)</p>
88
</canvas>
99
<script>
1010
const canvas = document.getElementById("canvas");
1111
const ctx = canvas.getContext('2d');
1212

13-
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
13+
ctx.fillStyle = 'rgba(128, 128, 128, 1)';
14+
ctx.fillRect(20, 15, 50, 50);
1415

15-
var circle = new Path2D();
16-
circle.arc(90, 90, 45, 0, 2 * Math.PI);
17-
ctx.fill(circle);
18-
19-
ctx.globalAlpha = 0.6;
16+
ctx.globalAlpha = 0.75;
2017
ctx.globalCompositeOperation = 'multiply';
2118

22-
canvas2 = document.createElement("canvas");
23-
ctx2 = canvas2.getContext("2d");
19+
const canvas2 = document.createElement("canvas");
20+
const ctx2 = canvas2.getContext("2d");
2421

2522
ctx2.globalCompositeOperation = 'screen';
26-
ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
27-
ctx2.fillRect(50, 50, 75, 50);
23+
ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
24+
ctx2.fillRect(10, 25, 40, 50);
2825
ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
29-
ctx2.fillRect(70, 70, 75, 50);
26+
ctx2.fillRect(30, 5, 50, 40);
3027

3128
ctx.drawImage(canvas2, 0, 0);
3229
</script>

‎html/canvas/element/layers/2d.layer.global-states.alpha.blending.html

+7-10
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,17 @@
44
<title>Canvas test: 2d.layer.global-states.alpha.blending</title>
55
<h1>2d.layer.global-states.alpha.blending</h1>
66
<p class="desc">Checks that layers correctly use global render states.</p>
7-
<canvas id="canvas" width="200" height="200">
7+
<canvas id="canvas" width="90" height="90">
88
<p class="fallback">FAIL (fallback content)</p>
99
</canvas>
1010
<script>
1111
const canvas = document.getElementById("canvas");
1212
const ctx = canvas.getContext('2d');
1313

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

16-
var circle = new Path2D();
17-
circle.arc(90, 90, 45, 0, 2 * Math.PI);
18-
ctx.fill(circle);
19-
20-
ctx.globalAlpha = 0.6;
17+
ctx.globalAlpha = 0.75;
2118
ctx.globalCompositeOperation = 'multiply';
2219

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

29-
ctx.fillStyle = 'rgba(225, 0, 0, 1)';
30-
ctx.fillRect(50, 50, 75, 50);
26+
ctx.fillStyle = 'rgba(255, 0, 0, 1)';
27+
ctx.fillRect(10, 25, 40, 50);
3128
ctx.fillStyle = 'rgba(0, 255, 0, 1)';
32-
ctx.fillRect(70, 70, 75, 50);
29+
ctx.fillRect(30, 5, 50, 40);
3330

3431
ctx.endLayer();
3532
</script>

‎html/canvas/element/layers/2d.layer.global-states.alpha.blending.shadow-expected.html

+11-14
Original file line numberDiff line numberDiff line change
@@ -3,34 +3,31 @@
33
<title>Canvas test: 2d.layer.global-states.alpha.blending.shadow</title>
44
<h1>2d.layer.global-states.alpha.blending.shadow</h1>
55
<p class="desc">Checks that layers correctly use global render states.</p>
6-
<canvas id="canvas" width="200" height="200">
6+
<canvas id="canvas" width="90" height="90">
77
<p class="fallback">FAIL (fallback content)</p>
88
</canvas>
99
<script>
1010
const canvas = document.getElementById("canvas");
1111
const ctx = canvas.getContext('2d');
1212

13-
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
13+
ctx.fillStyle = 'rgba(128, 128, 128, 1)';
14+
ctx.fillRect(20, 15, 50, 50);
1415

15-
var circle = new Path2D();
16-
circle.arc(90, 90, 45, 0, 2 * Math.PI);
17-
ctx.fill(circle);
18-
19-
ctx.globalAlpha = 0.6;
16+
ctx.globalAlpha = 0.75;
2017
ctx.globalCompositeOperation = 'multiply';
21-
ctx.shadowOffsetX = -10;
22-
ctx.shadowOffsetY = 10;
18+
ctx.shadowOffsetX = -7;
19+
ctx.shadowOffsetY = 7;
2320
ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
2421
ctx.shadowBlur = 3;
2522

26-
canvas2 = document.createElement("canvas");
27-
ctx2 = canvas2.getContext("2d");
23+
const canvas2 = document.createElement("canvas");
24+
const ctx2 = canvas2.getContext("2d");
2825

2926
ctx2.globalCompositeOperation = 'screen';
30-
ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
31-
ctx2.fillRect(50, 50, 75, 50);
27+
ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
28+
ctx2.fillRect(10, 25, 40, 50);
3229
ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
33-
ctx2.fillRect(70, 70, 75, 50);
30+
ctx2.fillRect(30, 5, 50, 40);
3431

3532
ctx.drawImage(canvas2, 0, 0);
3633
</script>

‎html/canvas/element/layers/2d.layer.global-states.alpha.blending.shadow.html

+9-12
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,20 @@
44
<title>Canvas test: 2d.layer.global-states.alpha.blending.shadow</title>
55
<h1>2d.layer.global-states.alpha.blending.shadow</h1>
66
<p class="desc">Checks that layers correctly use global render states.</p>
7-
<canvas id="canvas" width="200" height="200">
7+
<canvas id="canvas" width="90" height="90">
88
<p class="fallback">FAIL (fallback content)</p>
99
</canvas>
1010
<script>
1111
const canvas = document.getElementById("canvas");
1212
const ctx = canvas.getContext('2d');
1313

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

16-
var circle = new Path2D();
17-
circle.arc(90, 90, 45, 0, 2 * Math.PI);
18-
ctx.fill(circle);
19-
20-
ctx.globalAlpha = 0.6;
17+
ctx.globalAlpha = 0.75;
2118
ctx.globalCompositeOperation = 'multiply';
22-
ctx.shadowOffsetX = -10;
23-
ctx.shadowOffsetY = 10;
19+
ctx.shadowOffsetX = -7;
20+
ctx.shadowOffsetY = 7;
2421
ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
2522
ctx.shadowBlur = 3;
2623

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

33-
ctx.fillStyle = 'rgba(225, 0, 0, 1)';
34-
ctx.fillRect(50, 50, 75, 50);
30+
ctx.fillStyle = 'rgba(255, 0, 0, 1)';
31+
ctx.fillRect(10, 25, 40, 50);
3532
ctx.fillStyle = 'rgba(0, 255, 0, 1)';
36-
ctx.fillRect(70, 70, 75, 50);
33+
ctx.fillRect(30, 5, 50, 40);
3734

3835
ctx.endLayer();
3936
</script>

‎html/canvas/element/layers/2d.layer.global-states.alpha.composite-expected.html

+9-12
Original file line numberDiff line numberDiff line change
@@ -3,30 +3,27 @@
33
<title>Canvas test: 2d.layer.global-states.alpha.composite</title>
44
<h1>2d.layer.global-states.alpha.composite</h1>
55
<p class="desc">Checks that layers correctly use global render states.</p>
6-
<canvas id="canvas" width="200" height="200">
6+
<canvas id="canvas" width="90" height="90">
77
<p class="fallback">FAIL (fallback content)</p>
88
</canvas>
99
<script>
1010
const canvas = document.getElementById("canvas");
1111
const ctx = canvas.getContext('2d');
1212

13-
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
13+
ctx.fillStyle = 'rgba(128, 128, 128, 1)';
14+
ctx.fillRect(20, 15, 50, 50);
1415

15-
var circle = new Path2D();
16-
circle.arc(90, 90, 45, 0, 2 * Math.PI);
17-
ctx.fill(circle);
18-
19-
ctx.globalAlpha = 0.6;
16+
ctx.globalAlpha = 0.75;
2017
ctx.globalCompositeOperation = 'source-in';
2118

22-
canvas2 = document.createElement("canvas");
23-
ctx2 = canvas2.getContext("2d");
19+
const canvas2 = document.createElement("canvas");
20+
const ctx2 = canvas2.getContext("2d");
2421

2522
ctx2.globalCompositeOperation = 'screen';
26-
ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
27-
ctx2.fillRect(50, 50, 75, 50);
23+
ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
24+
ctx2.fillRect(10, 25, 40, 50);
2825
ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
29-
ctx2.fillRect(70, 70, 75, 50);
26+
ctx2.fillRect(30, 5, 50, 40);
3027

3128
ctx.drawImage(canvas2, 0, 0);
3229
</script>

‎html/canvas/element/layers/2d.layer.global-states.alpha.composite.html

+7-10
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,17 @@
44
<title>Canvas test: 2d.layer.global-states.alpha.composite</title>
55
<h1>2d.layer.global-states.alpha.composite</h1>
66
<p class="desc">Checks that layers correctly use global render states.</p>
7-
<canvas id="canvas" width="200" height="200">
7+
<canvas id="canvas" width="90" height="90">
88
<p class="fallback">FAIL (fallback content)</p>
99
</canvas>
1010
<script>
1111
const canvas = document.getElementById("canvas");
1212
const ctx = canvas.getContext('2d');
1313

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

16-
var circle = new Path2D();
17-
circle.arc(90, 90, 45, 0, 2 * Math.PI);
18-
ctx.fill(circle);
19-
20-
ctx.globalAlpha = 0.6;
17+
ctx.globalAlpha = 0.75;
2118
ctx.globalCompositeOperation = 'source-in';
2219

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

29-
ctx.fillStyle = 'rgba(225, 0, 0, 1)';
30-
ctx.fillRect(50, 50, 75, 50);
26+
ctx.fillStyle = 'rgba(255, 0, 0, 1)';
27+
ctx.fillRect(10, 25, 40, 50);
3128
ctx.fillStyle = 'rgba(0, 255, 0, 1)';
32-
ctx.fillRect(70, 70, 75, 50);
29+
ctx.fillRect(30, 5, 50, 40);
3330

3431
ctx.endLayer();
3532
</script>

‎html/canvas/element/layers/2d.layer.global-states.alpha.composite.shadow-expected.html

+11-14
Original file line numberDiff line numberDiff line change
@@ -3,34 +3,31 @@
33
<title>Canvas test: 2d.layer.global-states.alpha.composite.shadow</title>
44
<h1>2d.layer.global-states.alpha.composite.shadow</h1>
55
<p class="desc">Checks that layers correctly use global render states.</p>
6-
<canvas id="canvas" width="200" height="200">
6+
<canvas id="canvas" width="90" height="90">
77
<p class="fallback">FAIL (fallback content)</p>
88
</canvas>
99
<script>
1010
const canvas = document.getElementById("canvas");
1111
const ctx = canvas.getContext('2d');
1212

13-
ctx.fillStyle = 'rgba(0, 0, 255, 1)';
13+
ctx.fillStyle = 'rgba(128, 128, 128, 1)';
14+
ctx.fillRect(20, 15, 50, 50);
1415

15-
var circle = new Path2D();
16-
circle.arc(90, 90, 45, 0, 2 * Math.PI);
17-
ctx.fill(circle);
18-
19-
ctx.globalAlpha = 0.6;
16+
ctx.globalAlpha = 0.75;
2017
ctx.globalCompositeOperation = 'source-in';
21-
ctx.shadowOffsetX = -10;
22-
ctx.shadowOffsetY = 10;
18+
ctx.shadowOffsetX = -7;
19+
ctx.shadowOffsetY = 7;
2320
ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
2421
ctx.shadowBlur = 3;
2522

26-
canvas2 = document.createElement("canvas");
27-
ctx2 = canvas2.getContext("2d");
23+
const canvas2 = document.createElement("canvas");
24+
const ctx2 = canvas2.getContext("2d");
2825

2926
ctx2.globalCompositeOperation = 'screen';
30-
ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
31-
ctx2.fillRect(50, 50, 75, 50);
27+
ctx2.fillStyle = 'rgba(255, 0, 0, 1)';
28+
ctx2.fillRect(10, 25, 40, 50);
3229
ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
33-
ctx2.fillRect(70, 70, 75, 50);
30+
ctx2.fillRect(30, 5, 50, 40);
3431

3532
ctx.drawImage(canvas2, 0, 0);
3633
</script>

‎html/canvas/element/layers/2d.layer.global-states.alpha.composite.shadow.html

+9-12
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,20 @@
44
<title>Canvas test: 2d.layer.global-states.alpha.composite.shadow</title>
55
<h1>2d.layer.global-states.alpha.composite.shadow</h1>
66
<p class="desc">Checks that layers correctly use global render states.</p>
7-
<canvas id="canvas" width="200" height="200">
7+
<canvas id="canvas" width="90" height="90">
88
<p class="fallback">FAIL (fallback content)</p>
99
</canvas>
1010
<script>
1111
const canvas = document.getElementById("canvas");
1212
const ctx = canvas.getContext('2d');
1313

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

16-
var circle = new Path2D();
17-
circle.arc(90, 90, 45, 0, 2 * Math.PI);
18-
ctx.fill(circle);
19-
20-
ctx.globalAlpha = 0.6;
17+
ctx.globalAlpha = 0.75;
2118
ctx.globalCompositeOperation = 'source-in';
22-
ctx.shadowOffsetX = -10;
23-
ctx.shadowOffsetY = 10;
19+
ctx.shadowOffsetX = -7;
20+
ctx.shadowOffsetY = 7;
2421
ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
2522
ctx.shadowBlur = 3;
2623

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

33-
ctx.fillStyle = 'rgba(225, 0, 0, 1)';
34-
ctx.fillRect(50, 50, 75, 50);
30+
ctx.fillStyle = 'rgba(255, 0, 0, 1)';
31+
ctx.fillRect(10, 25, 40, 50);
3532
ctx.fillStyle = 'rgba(0, 255, 0, 1)';
36-
ctx.fillRect(70, 70, 75, 50);
33+
ctx.fillRect(30, 5, 50, 40);
3734

3835
ctx.endLayer();
3936
</script>

0 commit comments

Comments
 (0)