Merge pull request #2 from w3c/master

Sync with upstream

.travis.yml

@@ -87,6 +87,9 @@ matrix:
     - env:
         - secure: "YTSXPwI0DyCA1GhYrLT9KMEV6b7QQKuEeaQgeFDP38OTzJ1+cIj3CC4SRNqbnJ/6SJwPGcdqSxLuV8m4e5HFFnyCcQnJe6h8EMsTehZ7W3j/fP9UYrJqYqvGpe3Vj3xblO5pwBYmq7sg3jAmmuCgAgOW6VGf7cRMucrsmFeo7VM="
         - JOB=stability SCRIPT=tools/ci/ci_stability.sh PRODUCT=sauce:MicrosoftEdge:14.14393 PLATFORM='Windows 10'
+    - env:
+        - secure: "YTSXPwI0DyCA1GhYrLT9KMEV6b7QQKuEeaQgeFDP38OTzJ1+cIj3CC4SRNqbnJ/6SJwPGcdqSxLuV8m4e5HFFnyCcQnJe6h8EMsTehZ7W3j/fP9UYrJqYqvGpe3Vj3xblO5pwBYmq7sg3jAmmuCgAgOW6VGf7cRMucrsmFeo7VM="
+        - JOB=stability SCRIPT=tools/ci/ci_stability.sh PRODUCT=sauce:safari:10.0 PLATFORM='macOS 10.12'
 script:
   - ./tools/ci/run.sh
 cache:
@@ -97,4 +100,4 @@ notifications:
   email:
     on_success: never
     on_failure: always
-  webhooks: https://w3c-test.org/prbuildbot.py
+  webhooks: https://pulls.web-platform-tests.org/api/build

2dcontext/drawing-images-to-the-canvas/drawimage_html_image_10_srgb.html

@@ -0,0 +1,49 @@
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<canvas id="dest" height="100" width="100"></canvas>
+
+<script>
+var sourceWidth = 128;
+var sourceHeight = 128;
+var smoothingEnabled = false;
+var destCanvas = document.getElementById('dest');
+var sourceImg = document.createElement('img');
+sourceImg.src = '../2x2-srgb.png'
+sourceImg.width = sourceWidth;
+sourceImg.height = sourceHeight;
+var destCtx = destCanvas.getContext('2d');
+
+function checkPixel(x, y, expected, epsilon) {
+    var actual = destCtx.getImageData(x, y, 1, 1).data;
+    assert_true(actual.length === expected.length);
+    for (var i=0; i < actual.length; i++)
+        assert_approx_equals(actual[i], expected[i], epsilon);
+}
+
+var pixelTests = [
+    ['Pixel Top Left Image', 0, 0, [253, 140, 245, 255], 1],
+    ['Pixel Top Right Image', 0, 99, [253, 140, 245, 255], 1],
+    ['Pixel Bottom Left Image', 99, 0, [253, 140, 245, 255], 1],
+    ['Pixel Bottom Right Image', 99, 99, [253, 140, 245, 255], 1],
+];
+
+function runTest() {
+    destCtx.fillStyle = "#FF0000";
+    destCtx.fillRect(0, 0,  destCanvas.width, destCanvas.height);
+    destCtx.imageSmoothingEnabled = smoothingEnabled;
+    // The destination rectangle is larger than the destination canvas.
+    // When the destination rectangle is outside the destination image (the scratch bitmap),
+    // the pixels that land outside the scratch bitmap are discarded,
+    // as if the destination was an infinite canvas
+    // whose rendering was clipped to the dimensions of the scratch bitmap.
+    destCtx.drawImage(sourceImg, 0, 0, 512, 512, 0, 0, 256, 256);
+    generate_tests(checkPixel, pixelTests);
+}
+
+async_test(t => {
+        window.onload = function() {
+            t.step(runTest);
+            t.done();
+        }
+}, 'Draw a 100x100 image to a 100x100 canvas with resize and clipping.');
+</script>

2dcontext/drawing-images-to-the-canvas/drawimage_html_image_1_srgb.html

@@ -0,0 +1,46 @@
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<canvas id="dest" height="100" width="100"></canvas>
+
+<script>
+var sourceWidth = 100;
+var sourceHeight = 100;
+var smoothingEnabled = false;
+var destCanvas = document.getElementById('dest');
+var sourceImg = document.createElement('img');
+sourceImg.src = '../2x2-srgb.png'
+sourceImg.width = sourceWidth;
+sourceImg.height = sourceHeight;
+var destCtx = destCanvas.getContext('2d');
+
+function checkPixel(x, y, expected, epsilon) {
+    var actual = destCtx.getImageData(x, y, 1, 1).data;
+    assert_true(actual.length === expected.length);
+    for (var i=0; i < actual.length; i++)
+        assert_approx_equals(actual[i], expected[i], epsilon);
+}
+
+var pixelTests = [
+    ['Pixel Top Left Image', 0, 0, [253, 140, 245, 255], 1],
+    ['Pixel Top Right Image', 0, 99, [253, 140, 245, 255], 1],
+    ['Pixel Bottom Left Image', 99, 0, [253, 140, 245, 255], 1],
+    ['Pixel Bottom Right Image', 99, 99, [253, 140, 245, 255], 1],
+];
+
+function runTest() {
+    destCtx.fillStyle = "#FF0000";
+    destCtx.fillRect(0, 0,  destCanvas.width, destCanvas.height);
+    destCtx.imageSmoothingEnabled = smoothingEnabled;
+    // 2 arguments, the dest origin is 0,0
+    // The source canvas will copied to the 0,0 position of the destination canvas
+    destCtx.drawImage(sourceImg, 0, 0);
+    generate_tests(checkPixel, pixelTests);
+}
+
+async_test(t => {
+        window.onload = function() {
+            t.step(runTest);
+            t.done();
+        }
+}, 'Draw 100x100 image to 100x100 canvas at 0,0.');
+</script>

2dcontext/drawing-images-to-the-canvas/drawimage_html_image_2_srgb.html

@@ -0,0 +1,53 @@
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<canvas id="dest" height="100" width="100"></canvas>
+
+<script>
+var sourceWidth = 100;
+var sourceHeight = 100;
+var smoothingEnabled = false;
+var destCanvas = document.getElementById('dest');
+var sourceImg = document.createElement('img');
+sourceImg.src = '../2x2-srgb.png'
+sourceImg.width = sourceWidth;
+sourceImg.height = sourceHeight;
+var destCtx = destCanvas.getContext('2d');
+
+function checkPixel(x, y, expected, epsilon) {
+    var actual = destCtx.getImageData(x, y, 1, 1).data;
+    assert_true(actual.length === expected.length);
+    for (var i=0; i < actual.length; i++)
+        assert_approx_equals(actual[i], expected[i], epsilon);
+}
+
+var pixelTests = [
+    ['Pixel Top Left Canvas Background', 0, 0, [255, 0, 0, 255], 1],
+    ['Pixel Middle Middle Canvas Background', 24, 24, [255, 0, 0, 255], 1],
+    ['Pixel Top Middle Canvas Background', 0, 25, [255, 0, 0, 255], 1],
+    ['Pixel Middle Left Canvas Background', 25, 0, [255, 0, 0, 255], 1],
+    ['Pixel Top Right Canvas Background', 0, 99, [255, 0, 0, 255], 1],
+    ['Pixel Bottom Left Canvas Background', 99, 0, [255, 0, 0, 255], 1],
+
+    ['Pixel Top Left Image', 25, 25, [253, 140, 245, 255], 1],
+    ['Pixel Top Right Image', 25, 99, [253, 140, 245, 255], 1],
+    ['Pixel Bottom Left Image', 99, 25, [253, 140, 245, 255], 1],
+    ['Pixel Bottom Right Image', 99, 99, [253, 140, 245, 255], 1],
+];
+
+function runTest() {
+    destCtx.fillStyle = "#FF0000";
+    destCtx.fillRect(0, 0,  destCanvas.width, destCanvas.height);
+    destCtx.imageSmoothingEnabled = smoothingEnabled;
+    // 2 arguments, the dest origin is not 0,0
+    // The source canvas will copied to the 25,25 position of the destination canvas
+    destCtx.drawImage(sourceImg, 25, 25);
+    generate_tests(checkPixel, pixelTests);
+}
+
+async_test(t => {
+        window.onload = function() {
+            t.step(runTest);
+            t.done();
+        }
+}, 'Draw 100x100 image to 100x100 canvas at 25,25.');
+</script>

2dcontext/drawing-images-to-the-canvas/drawimage_html_image_3_srgb.html

@@ -0,0 +1,54 @@
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<canvas id="dest" height="100" width="100"></canvas>
+
+<script>
+var sourceWidth = 100;
+var sourceHeight = 100;
+var smoothingEnabled = false;
+var destCanvas = document.getElementById('dest');
+var sourceImg = document.createElement('img');
+sourceImg.src = '../2x2-srgb.png'
+sourceImg.width = sourceWidth;
+sourceImg.height = sourceHeight;
+var destCtx = destCanvas.getContext('2d');
+
+function checkPixel(x, y, expected, epsilon) {
+    var actual = destCtx.getImageData(x, y, 1, 1).data;
+    assert_true(actual.length === expected.length);
+    for (var i=0; i < actual.length; i++)
+        assert_approx_equals(actual[i], expected[i], epsilon);
+}
+
+var pixelTests = [
+    ['Pixel Top Left Canvas Background', 0, 0, [255, 0, 0, 255], 1],
+    ['Pixel Middle Middle Canvas Background', 49, 49, [255, 0, 0, 255], 1],
+    ['Pixel Top Middle Canvas Background', 0, 50, [255, 0, 0, 255], 1],
+    ['Pixel Middle Left Canvas Background', 50, 0, [255, 0, 0, 255], 1],
+    ['Pixel Top Right Canvas Background', 0, 99, [255, 0, 0, 255], 1],
+    ['Pixel Bottom Left Canvas Background', 99, 0, [255, 0, 0, 255], 1],
+
+    ['Pixel Top Left Image', 50, 50, [253, 140, 245, 255], 1],
+    ['Pixel Top Right Image', 50, 99, [41, 122, 115, 255], 1],
+    ['Pixel Bottom Left Image', 99, 50, [41, 122, 115, 255], 1],
+    ['Pixel Bottom Right Image', 99, 99, [253, 140, 245, 255], 1],
+];
+
+function runTest() {
+    destCtx.fillStyle = "#FF0000";
+    destCtx.fillRect(0, 0,  destCanvas.width, destCanvas.height);
+    destCtx.imageSmoothingEnabled = smoothingEnabled;
+    // 4 arguments, the source origin is not 0,0, the dest size is provided
+    // The source canvas will copied to the 50, 50 position of the destination canvas and
+    // on an area of 50x50 pixels
+    destCtx.drawImage(sourceImg, 50, 50, 50, 50);
+    generate_tests(checkPixel, pixelTests);
+}
+
+async_test(t => {
+        window.onload = function() {
+            t.step(runTest);
+            t.done();
+        }
+}, 'Draw 100x100 image to 100x100 canvas at 50,50 with resize to 50x50.');
+</script>

2dcontext/drawing-images-to-the-canvas/drawimage_html_image_4_srgb.html

@@ -0,0 +1,58 @@
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<canvas id="dest" height="100" width="100"></canvas>
+
+<script>
+var sourceWidth = 100;
+var sourceHeight = 100;
+var smoothingEnabled = false;
+var destCanvas = document.getElementById('dest');
+var sourceImg = document.createElement('img');
+sourceImg.src = '../2x2-srgb.png'
+sourceImg.width = sourceWidth;
+sourceImg.height = sourceHeight;
+var destCtx = destCanvas.getContext('2d');
+
+function checkPixel(x, y, expected, epsilon) {
+    var actual = destCtx.getImageData(x, y, 1, 1).data;
+    assert_true(actual.length === expected.length);
+    for (var i=0; i < actual.length; i++)
+        assert_approx_equals(actual[i], expected[i], epsilon);
+}
+
+var pixelTests = [
+    ['Pixel Top Left Canvas Background', 0, 0, [255, 0, 0, 255], 1],
+    ['Pixel Top Right Canvas Background', 0, 99, [255, 0, 0, 255], 1],
+    ['Pixel Bottom Left Canvas Background', 99, 0, [255, 0, 0, 255], 1],
+    ['Pixel Bottom Right Canvas Background', 99, 99, [255, 0, 0, 255], 1],
+
+    ['Pixel Surrounding Top Left Canvas Background', 49, 49, [255, 0, 0, 255], 1],
+    ['Pixel Surrounding Top Right Canvas Background', 49, 66, [255, 0, 0, 255], 1],
+    ['Pixel Surrounding Bottom Left Canvas Background', 66, 49, [255, 0, 0, 255], 1],
+    ['Pixel Surrounding Bottom Right Canvas Background', 66, 66, [255, 0, 0, 255], 1],
+
+    ['Pixel Top Left Image', 50, 50, [253, 140, 245, 255], 1],
+    ['Pixel Top Right Image', 50, 65, [41, 122, 115, 255], 1],
+    ['Pixel Bottom Left Image', 65, 50, [41, 122, 115, 255], 1],
+    ['Pixel Bottom Right Image', 65, 65, [253, 140, 245, 255], 1],
+];
+
+function runTest() {
+    destCtx.fillStyle = "#FF0000";
+    destCtx.fillRect(0, 0,  destCanvas.width, destCanvas.height);
+    destCtx.imageSmoothingEnabled = smoothingEnabled;
+    // 4 arguments, the dest origin is not 0,0 and the dest size is provided but
+    // does not match the size of the source. The image will be distorted
+    // The source canvas will copied to the 50,50 position of the destination canvas
+    // and it will be shrunk to a and area of 16x16
+    destCtx.drawImage(sourceImg, 50, 50, 16, 16);
+    generate_tests(checkPixel, pixelTests);
+}
+
+async_test(t => {
+        window.onload = function() {
+            t.step(runTest);
+            t.done();
+        }
+}, 'Draw 100x100 image to 100x100 canvas at 50,50 with resize to 16x16.');
+</script>

2dcontext/drawing-images-to-the-canvas/drawimage_html_image_5_srgb.html

@@ -0,0 +1,57 @@
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<canvas id="dest" height="100" width="100"></canvas>
+
+<script>
+var sourceWidth = 100;
+var sourceHeight = 100;
+var smoothingEnabled = false;
+var destCanvas = document.getElementById('dest');
+var sourceImg = document.createElement('img');
+sourceImg.src = '../2x2-srgb.png'
+sourceImg.width = sourceWidth;
+sourceImg.height = sourceHeight;
+var destCtx = destCanvas.getContext('2d');
+
+function checkPixel(x, y, expected, epsilon) {
+    var actual = destCtx.getImageData(x, y, 1, 1).data;
+    assert_true(actual.length === expected.length);
+    for (var i=0; i < actual.length; i++)
+        assert_approx_equals(actual[i], expected[i], epsilon);
+}
+
+var pixelTests = [
+    ['Pixel Top Left Canvas Background', 0, 0, [255, 0, 0, 255], 1],
+    ['Pixel Top Right Canvas Background', 0, 99, [255, 0, 0, 255], 1],
+    ['Pixel Bottom Left Canvas Background', 99, 0, [255, 0, 0, 255], 1],
+    ['Pixel Bottom Right Canvas Background', 99, 99, [255, 0, 0, 255], 1],
+
+    ['Pixel Surrounding Top Left Canvas Background', 49, 49, [255, 0, 0, 255], 1],
+    ['Pixel Surrounding Top Right Canvas Background', 49, 82, [255, 0, 0, 255], 1],
+    ['Pixel Surrounding Bottom Left Canvas Background', 99, 49, [255, 0, 0, 255], 1],
+    ['Pixel Surrounding Bottom Right Canvas Background', 99, 82, [255, 0, 0, 255], 1],
+
+    ['Pixel Top Left Image', 50, 50, [253, 140, 245, 255], 1],
+    ['Pixel Top Right Image', 50, 81, [41, 122, 115, 255], 1],
+    ['Pixel Bottom Left Image', 99, 50, [41, 122, 115, 255], 1],
+    ['Pixel Bottom Right Image', 99, 81, [253, 140, 245, 255], 1],
+];
+
+function runTest() {
+    destCtx.fillStyle = "#FF0000";
+    destCtx.fillRect(0, 0,  destCanvas.width, destCanvas.height);
+    destCtx.imageSmoothingEnabled = smoothingEnabled;
+    // The source canvas will copied to the 50,50 position of the destination canvas
+    // over an area of 64x32 pixels
+    // The copied image will be distorted along the x axis
+    destCtx.drawImage(sourceImg, 50, 50, 64, 32);
+    generate_tests(checkPixel, pixelTests);
+}
+
+async_test(t => {
+        window.onload = function() {
+            t.step(runTest);
+            t.done();
+        }
+}, 'Draw 100x100 image to 100x100 canvas at 50,50 with resize to 64x32.');
+</script>