Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add coverage for blend operations #1822

Open
wants to merge 24 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
ee00dc7
Work in progress implementation of canvas blending tests.
acomminos May 11, 2015
db4019e
More work on implementing proper canvas blending test generation.
acomminos May 11, 2015
b84cd5a
Work on consolidating blend test and compositing test generation.
acomminos May 12, 2015
dd661b5
Added overlay and hard-light blend operations
KyleFung May 12, 2015
5e736a8
Merge branch '2dcontext-coverage' of github.com:Morlunk/web-platform-…
acomminos May 12, 2015
5b37044
Fix blend operation tuples.
acomminos May 12, 2015
165a18d
Fixed source/dest calculation in blending generation function.
acomminos May 12, 2015
dd463ad
Remove old blend testing, merge into compositing.
acomminos May 12, 2015
0518aca
Merge branch 'master' of https://github.com/w3c/web-platform-tests in…
acomminos May 12, 2015
5332544
Fixed linter warning.
acomminos May 12, 2015
9f6791f
Add generated tests.
acomminos May 12, 2015
9da8886
Use normal colors in blend calculations.
acomminos May 12, 2015
8b673c3
Fixed hardlight and overlay operations
KyleFung May 12, 2015
022dbf0
Added color-dodge helper
KyleFung May 12, 2015
06477c9
Removed misplaced duplicate of color_dodge and added color_burn blend…
KyleFung May 12, 2015
b469bb8
Added some more non-separable blend helpers.
acomminos May 12, 2015
99a3ac9
Fixed some of the blend helpers.
acomminos May 12, 2015
ae06f3a
Removed hard coded arithmatic functions for hard-light and overlay
KyleFung May 12, 2015
094733a
Implemented non-separable blend testing.
acomminos May 12, 2015
21c20c1
Merge branch '2dcontext-coverage' of https://github.com/Morlunk/web-p…
KyleFung May 12, 2015
0602729
Merge branch '2dcontext-coverage' of https://github.com/Morlunk/web-p…
KyleFung May 12, 2015
3ea00ef
Simplify blending with maps, finished rest of blends.
acomminos May 12, 2015
b9442ac
Made component normalization a bit nicer.
acomminos May 12, 2015
b88995a
Fix lint complaint.
acomminos May 12, 2015
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 38 additions & 0 deletions 2dcontext/compositing/2d.composite.canvas.color-burn.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<!DOCTYPE html>
<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
<title>Canvas test: 2d.composite.canvas.color-burn</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/common/canvas-tests.js"></script>
<link rel="stylesheet" href="/common/canvas-tests.css">
<body class="show_output">

<h1>2d.composite.canvas.color-burn</h1>
<p class="desc"></p>


<p class="output">Actual output:</p>
<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<p class="output expectedtext">Expected output:<p><img src="2d.composite.canvas.color-burn.png" class="output expected" id="expected" alt="">
<ul id="d"></ul>
<script>
var t = async_test("");
_addTest(function(canvas, ctx) {


var canvas2 = document.createElement('canvas');
canvas2.width = canvas.width;
canvas2.height = canvas.height;
var ctx2 = canvas2.getContext('2d');
ctx2.drawImage(document.getElementById('yellow75.png'), 0, 0);
ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'color-burn';
ctx.drawImage(canvas2, 0, 0);
_assertPixelApprox(canvas, 50,25, 109,255,146,223, "50,25", "109,255,146,223", 5);


});
</script>
<img src="/images/yellow75.png" id="yellow75.png" class="resource">

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
38 changes: 38 additions & 0 deletions 2dcontext/compositing/2d.composite.canvas.color-dodge.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<!DOCTYPE html>
<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
<title>Canvas test: 2d.composite.canvas.color-dodge</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/common/canvas-tests.js"></script>
<link rel="stylesheet" href="/common/canvas-tests.css">
<body class="show_output">

<h1>2d.composite.canvas.color-dodge</h1>
<p class="desc"></p>


<p class="output">Actual output:</p>
<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<p class="output expectedtext">Expected output:<p><img src="2d.composite.canvas.color-dodge.png" class="output expected" id="expected" alt="">
<ul id="d"></ul>
<script>
var t = async_test("");
_addTest(function(canvas, ctx) {


var canvas2 = document.createElement('canvas');
canvas2.width = canvas.width;
canvas2.height = canvas.height;
var ctx2 = canvas2.getContext('2d');
ctx2.drawImage(document.getElementById('yellow75.png'), 0, 0);
ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'color-dodge';
ctx.drawImage(canvas2, 0, 0);
_assertPixelApprox(canvas, 50,25, 109,255,146,223, "50,25", "109,255,146,223", 5);


});
</script>
<img src="/images/yellow75.png" id="yellow75.png" class="resource">

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
38 changes: 38 additions & 0 deletions 2dcontext/compositing/2d.composite.canvas.color.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<!DOCTYPE html>
<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
<title>Canvas test: 2d.composite.canvas.color</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/common/canvas-tests.js"></script>
<link rel="stylesheet" href="/common/canvas-tests.css">
<body class="show_output">

<h1>2d.composite.canvas.color</h1>
<p class="desc"></p>


<p class="output">Actual output:</p>
<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<p class="output expectedtext">Expected output:<p><img src="2d.composite.canvas.color.png" class="output expected" id="expected" alt="">
<ul id="d"></ul>
<script>
var t = async_test("");
_addTest(function(canvas, ctx) {


var canvas2 = document.createElement('canvas');
canvas2.width = canvas.width;
canvas2.height = canvas.height;
var ctx2 = canvas2.getContext('2d');
ctx2.drawImage(document.getElementById('yellow75.png'), 0, 0);
ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'color';
ctx.drawImage(canvas2, 0, 0);
_assertPixelApprox(canvas, 50,25, 195,232,36,223, "50,25", "195,232,36,223", 5);


});
</script>
<img src="/images/yellow75.png" id="yellow75.png" class="resource">

Binary file added 2dcontext/compositing/2d.composite.canvas.color.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified 2dcontext/compositing/2d.composite.canvas.copy.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
38 changes: 38 additions & 0 deletions 2dcontext/compositing/2d.composite.canvas.darken.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<!DOCTYPE html>
<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
<title>Canvas test: 2d.composite.canvas.darken</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/common/canvas-tests.js"></script>
<link rel="stylesheet" href="/common/canvas-tests.css">
<body class="show_output">

<h1>2d.composite.canvas.darken</h1>
<p class="desc"></p>


<p class="output">Actual output:</p>
<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<p class="output expectedtext">Expected output:<p><img src="2d.composite.canvas.darken.png" class="output expected" id="expected" alt="">
<ul id="d"></ul>
<script>
var t = async_test("");
_addTest(function(canvas, ctx) {


var canvas2 = document.createElement('canvas');
canvas2.width = canvas.width;
canvas2.height = canvas.height;
var ctx2 = canvas2.getContext('2d');
ctx2.drawImage(document.getElementById('yellow75.png'), 0, 0);
ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'darken';
ctx.drawImage(canvas2, 0, 0);
_assertPixelApprox(canvas, 50,25, 109,255,36,223, "50,25", "109,255,36,223", 5);


});
</script>
<img src="/images/yellow75.png" id="yellow75.png" class="resource">

Binary file added 2dcontext/compositing/2d.composite.canvas.darken.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified 2dcontext/compositing/2d.composite.canvas.destination-atop.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified 2dcontext/compositing/2d.composite.canvas.destination-over.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
38 changes: 38 additions & 0 deletions 2dcontext/compositing/2d.composite.canvas.difference.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<!DOCTYPE html>
<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
<title>Canvas test: 2d.composite.canvas.difference</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/common/canvas-tests.js"></script>
<link rel="stylesheet" href="/common/canvas-tests.css">
<body class="show_output">

<h1>2d.composite.canvas.difference</h1>
<p class="desc"></p>


<p class="output">Actual output:</p>
<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<p class="output expectedtext">Expected output:<p><img src="2d.composite.canvas.difference.png" class="output expected" id="expected" alt="">
<ul id="d"></ul>
<script>
var t = async_test("");
_addTest(function(canvas, ctx) {


var canvas2 = document.createElement('canvas');
canvas2.width = canvas.width;
canvas2.height = canvas.height;
var ctx2 = canvas2.getContext('2d');
ctx2.drawImage(document.getElementById('yellow75.png'), 0, 0);
ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'difference';
ctx.drawImage(canvas2, 0, 0);
_assertPixelApprox(canvas, 50,25, 219,146,146,223, "50,25", "219,146,146,223", 5);


});
</script>
<img src="/images/yellow75.png" id="yellow75.png" class="resource">

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
38 changes: 38 additions & 0 deletions 2dcontext/compositing/2d.composite.canvas.exclusion.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<!DOCTYPE html>
<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
<title>Canvas test: 2d.composite.canvas.exclusion</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/common/canvas-tests.js"></script>
<link rel="stylesheet" href="/common/canvas-tests.css">
<body class="show_output">

<h1>2d.composite.canvas.exclusion</h1>
<p class="desc"></p>


<p class="output">Actual output:</p>
<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<p class="output expectedtext">Expected output:<p><img src="2d.composite.canvas.exclusion.png" class="output expected" id="expected" alt="">
<ul id="d"></ul>
<script>
var t = async_test("");
_addTest(function(canvas, ctx) {


var canvas2 = document.createElement('canvas');
canvas2.width = canvas.width;
canvas2.height = canvas.height;
var ctx2 = canvas2.getContext('2d');
ctx2.drawImage(document.getElementById('yellow75.png'), 0, 0);
ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'exclusion';
ctx.drawImage(canvas2, 0, 0);
_assertPixelApprox(canvas, 50,25, 219,146,146,223, "50,25", "219,146,146,223", 5);


});
</script>
<img src="/images/yellow75.png" id="yellow75.png" class="resource">

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
38 changes: 38 additions & 0 deletions 2dcontext/compositing/2d.composite.canvas.hard-light.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<!DOCTYPE html>
<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
<title>Canvas test: 2d.composite.canvas.hard-light</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/common/canvas-tests.js"></script>
<link rel="stylesheet" href="/common/canvas-tests.css">
<body class="show_output">

<h1>2d.composite.canvas.hard-light</h1>
<p class="desc"></p>


<p class="output">Actual output:</p>
<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<p class="output expectedtext">Expected output:<p><img src="2d.composite.canvas.hard-light.png" class="output expected" id="expected" alt="">
<ul id="d"></ul>
<script>
var t = async_test("");
_addTest(function(canvas, ctx) {


var canvas2 = document.createElement('canvas');
canvas2.width = canvas.width;
canvas2.height = canvas.height;
var ctx2 = canvas2.getContext('2d');
ctx2.drawImage(document.getElementById('yellow75.png'), 0, 0);
ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'hard-light';
ctx.drawImage(canvas2, 0, 0);
_assertPixelApprox(canvas, 50,25, 219,255,36,223, "50,25", "219,255,36,223", 5);


});
</script>
<img src="/images/yellow75.png" id="yellow75.png" class="resource">

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
38 changes: 38 additions & 0 deletions 2dcontext/compositing/2d.composite.canvas.hue.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<!DOCTYPE html>
<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
<title>Canvas test: 2d.composite.canvas.hue</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/common/canvas-tests.js"></script>
<link rel="stylesheet" href="/common/canvas-tests.css">
<body class="show_output">

<h1>2d.composite.canvas.hue</h1>
<p class="desc"></p>


<p class="output">Actual output:</p>
<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<p class="output expectedtext">Expected output:<p><img src="2d.composite.canvas.hue.png" class="output expected" id="expected" alt="">
<ul id="d"></ul>
<script>
var t = async_test("");
_addTest(function(canvas, ctx) {


var canvas2 = document.createElement('canvas');
canvas2.width = canvas.width;
canvas2.height = canvas.height;
var ctx2 = canvas2.getContext('2d');
ctx2.drawImage(document.getElementById('yellow75.png'), 0, 0);
ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'hue';
ctx.drawImage(canvas2, 0, 0);
_assertPixelApprox(canvas, 50,25, 195,232,36,223, "50,25", "195,232,36,223", 5);


});
</script>
<img src="/images/yellow75.png" id="yellow75.png" class="resource">

Binary file added 2dcontext/compositing/2d.composite.canvas.hue.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
38 changes: 38 additions & 0 deletions 2dcontext/compositing/2d.composite.canvas.lighten.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<!DOCTYPE html>
<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
<title>Canvas test: 2d.composite.canvas.lighten</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/common/canvas-tests.js"></script>
<link rel="stylesheet" href="/common/canvas-tests.css">
<body class="show_output">

<h1>2d.composite.canvas.lighten</h1>
<p class="desc"></p>


<p class="output">Actual output:</p>
<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<p class="output expectedtext">Expected output:<p><img src="2d.composite.canvas.lighten.png" class="output expected" id="expected" alt="">
<ul id="d"></ul>
<script>
var t = async_test("");
_addTest(function(canvas, ctx) {


var canvas2 = document.createElement('canvas');
canvas2.width = canvas.width;
canvas2.height = canvas.height;
var ctx2 = canvas2.getContext('2d');
ctx2.drawImage(document.getElementById('yellow75.png'), 0, 0);
ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'lighten';
ctx.drawImage(canvas2, 0, 0);
_assertPixelApprox(canvas, 50,25, 219,255,146,223, "50,25", "219,255,146,223", 5);


});
</script>
<img src="/images/yellow75.png" id="yellow75.png" class="resource">

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified 2dcontext/compositing/2d.composite.canvas.lighter.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
38 changes: 38 additions & 0 deletions 2dcontext/compositing/2d.composite.canvas.luminosity.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<!DOCTYPE html>
<!-- DO NOT EDIT! This test has been generated by tools/gentest.py. -->
<title>Canvas test: 2d.composite.canvas.luminosity</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/common/canvas-tests.js"></script>
<link rel="stylesheet" href="/common/canvas-tests.css">
<body class="show_output">

<h1>2d.composite.canvas.luminosity</h1>
<p class="desc"></p>


<p class="output">Actual output:</p>
<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<p class="output expectedtext">Expected output:<p><img src="2d.composite.canvas.luminosity.png" class="output expected" id="expected" alt="">
<ul id="d"></ul>
<script>
var t = async_test("");
_addTest(function(canvas, ctx) {


var canvas2 = document.createElement('canvas');
canvas2.width = canvas.width;
canvas2.height = canvas.height;
var ctx2 = canvas2.getContext('2d');
ctx2.drawImage(document.getElementById('yellow75.png'), 0, 0);
ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
ctx.fillRect(0, 0, 100, 50);
ctx.globalCompositeOperation = 'luminosity';
ctx.drawImage(canvas2, 0, 0);
_assertPixelApprox(canvas, 50,25, 179,255,146,223, "50,25", "179,255,146,223", 5);


});
</script>
<img src="/images/yellow75.png" id="yellow75.png" class="resource">

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading