Skip to content

Commit

Permalink
New WPT test grids validating all canvas composite operations
Browse files Browse the repository at this point in the history 
This new test validates every single canvas composite operations by
comparing against pycairo. Composite ops are validated with
globalAlpha, transformations, with and without filters, with and
without shadows, using different source raster types (normal fill
style, drawImage and canvas patterns), and for all combinations of
these. These variants are grouped into grids, with each generated
test files validating all composite ops together.

Chromium has similar tests, but they validate the result by either
comparing against hard-coded expected color values, or against PNG
files generated by saving the result of the test itself and using that
as the expected results. The first approach is problematic because the
expected color values are hard to compute and hard to validate. The
second approach is also problematic because the tests only checks that
the code doesn't start producing different results, they don't test
that the results are actually correct. As a matter of fact, this new
test surfaced an existing bug in Chromium where it doesn't correctly
computes shadows when the "screen" composite op is used.

Using pycairo has the advantage of providing an independent reference
that is easy to generated programmatically. The reason pycairo was used
here is simply that the Canvas WPT test generator already uses it.

Bug: 364549423
Change-Id: If476f8ee29a1afbb2a759421f5e8e76b68702982
  • Loading branch information
@graveljp @chromium-wpt-export-bot
graveljp authored and chromium-wpt-export-bot committed Oct 18, 2024
1 parent 7c3e363 commit 5934179
Show file tree
Hide file tree
Showing 86 changed files with 44,296 additions and 2 deletions.
270 changes: 270 additions & 0 deletions html/canvas/element/compositing/2d.composite.grid.filter.no_shadow.drawImage-expected.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,270 @@
<!DOCTYPE html>
<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
<title>Canvas test: 2d.composite.grid.filter.no_shadow.drawImage</title>
<h1 style="font-size: 20px;">2d.composite.grid.filter.no_shadow.drawImage</h1>
<p></p>

<div style="display: grid; grid-gap: 4px;
grid-template-columns: repeat(6, max-content);
font-size: 13px; text-align: center;">
<span>
<div>source-over</div>
<img src="2d.composite.grid.filter.no_shadow.drawImage.png"
style="outline: 1px solid;
width: 80px;
height: 60px;
object-position: 0px 0px;
object-fit: none;">
</span>

<span>
<div>source-in</div>
<img src="2d.composite.grid.filter.no_shadow.drawImage.png"
style="outline: 1px solid;
width: 80px;
height: 60px;
object-position: -80px 0px;
object-fit: none;">
</span>

<span>
<div>source-out</div>
<img src="2d.composite.grid.filter.no_shadow.drawImage.png"
style="outline: 1px solid;
width: 80px;
height: 60px;
object-position: -160px 0px;
object-fit: none;">
</span>

<span>
<div>source-atop</div>
<img src="2d.composite.grid.filter.no_shadow.drawImage.png"
style="outline: 1px solid;
width: 80px;
height: 60px;
object-position: -240px 0px;
object-fit: none;">
</span>

<span>
<div>destination-over</div>
<img src="2d.composite.grid.filter.no_shadow.drawImage.png"
style="outline: 1px solid;
width: 80px;
height: 60px;
object-position: -320px 0px;
object-fit: none;">
</span>

<span>
<div>destination-in</div>
<img src="2d.composite.grid.filter.no_shadow.drawImage.png"
style="outline: 1px solid;
width: 80px;
height: 60px;
object-position: -400px 0px;
object-fit: none;">
</span>

<span>
<div>destination-out</div>
<img src="2d.composite.grid.filter.no_shadow.drawImage.png"
style="outline: 1px solid;
width: 80px;
height: 60px;
object-position: 0px -60px;
object-fit: none;">
</span>

<span>
<div>destination-atop</div>
<img src="2d.composite.grid.filter.no_shadow.drawImage.png"
style="outline: 1px solid;
width: 80px;
height: 60px;
object-position: -80px -60px;
object-fit: none;">
</span>

<span>
<div>lighter</div>
<img src="2d.composite.grid.filter.no_shadow.drawImage.png"
style="outline: 1px solid;
width: 80px;
height: 60px;
object-position: -160px -60px;
object-fit: none;">
</span>

<span>
<div>copy</div>
<img src="2d.composite.grid.filter.no_shadow.drawImage.png"
style="outline: 1px solid;
width: 80px;
height: 60px;
object-position: -240px -60px;
object-fit: none;">
</span>

<span>
<div>xor</div>
<img src="2d.composite.grid.filter.no_shadow.drawImage.png"
style="outline: 1px solid;
width: 80px;
height: 60px;
object-position: -320px -60px;
object-fit: none;">
</span>

<span>
<div>multiply</div>
<img src="2d.composite.grid.filter.no_shadow.drawImage.png"
style="outline: 1px solid;
width: 80px;
height: 60px;
object-position: -400px -60px;
object-fit: none;">
</span>

<span>
<div>screen</div>
<img src="2d.composite.grid.filter.no_shadow.drawImage.png"
style="outline: 1px solid;
width: 80px;
height: 60px;
object-position: 0px -120px;
object-fit: none;">
</span>

<span>
<div>overlay</div>
<img src="2d.composite.grid.filter.no_shadow.drawImage.png"
style="outline: 1px solid;
width: 80px;
height: 60px;
object-position: -80px -120px;
object-fit: none;">
</span>

<span>
<div>darken</div>
<img src="2d.composite.grid.filter.no_shadow.drawImage.png"
style="outline: 1px solid;
width: 80px;
height: 60px;
object-position: -160px -120px;
object-fit: none;">
</span>

<span>
<div>lighten</div>
<img src="2d.composite.grid.filter.no_shadow.drawImage.png"
style="outline: 1px solid;
width: 80px;
height: 60px;
object-position: -240px -120px;
object-fit: none;">
</span>

<span>
<div>color-dodge</div>
<img src="2d.composite.grid.filter.no_shadow.drawImage.png"
style="outline: 1px solid;
width: 80px;
height: 60px;
object-position: -320px -120px;
object-fit: none;">
</span>

<span>
<div>color-burn</div>
<img src="2d.composite.grid.filter.no_shadow.drawImage.png"
style="outline: 1px solid;
width: 80px;
height: 60px;
object-position: -400px -120px;
object-fit: none;">
</span>

<span>
<div>hard-light</div>
<img src="2d.composite.grid.filter.no_shadow.drawImage.png"
style="outline: 1px solid;
width: 80px;
height: 60px;
object-position: 0px -180px;
object-fit: none;">
</span>

<span>
<div>soft-light</div>
<img src="2d.composite.grid.filter.no_shadow.drawImage.png"
style="outline: 1px solid;
width: 80px;
height: 60px;
object-position: -80px -180px;
object-fit: none;">
</span>

<span>
<div>difference</div>
<img src="2d.composite.grid.filter.no_shadow.drawImage.png"
style="outline: 1px solid;
width: 80px;
height: 60px;
object-position: -160px -180px;
object-fit: none;">
</span>

<span>
<div>exclusion</div>
<img src="2d.composite.grid.filter.no_shadow.drawImage.png"
style="outline: 1px solid;
width: 80px;
height: 60px;
object-position: -240px -180px;
object-fit: none;">
</span>

<span>
<div>hue</div>
<img src="2d.composite.grid.filter.no_shadow.drawImage.png"
style="outline: 1px solid;
width: 80px;
height: 60px;
object-position: -320px -180px;
object-fit: none;">
</span>

<span>
<div>saturation</div>
<img src="2d.composite.grid.filter.no_shadow.drawImage.png"
style="outline: 1px solid;
width: 80px;
height: 60px;
object-position: -400px -180px;
object-fit: none;">
</span>

<span>
<div>color</div>
<img src="2d.composite.grid.filter.no_shadow.drawImage.png"
style="outline: 1px solid;
width: 80px;
height: 60px;
object-position: 0px -240px;
object-fit: none;">
</span>

<span>
<div>luminosity</div>
<img src="2d.composite.grid.filter.no_shadow.drawImage.png"
style="outline: 1px solid;
width: 80px;
height: 60px;
object-position: -80px -240px;
object-fit: none;">
</span>

</div>
Loading

0 comments on commit 5934179

Please sign in to comment.