| Index: third_party/WebKit/LayoutTests/paint/invalidation/canvas-composite-repaint-by-all-imagesource.html
|
| diff --git a/third_party/WebKit/LayoutTests/paint/invalidation/canvas-composite-repaint-by-all-imagesource.html b/third_party/WebKit/LayoutTests/paint/invalidation/canvas-composite-repaint-by-all-imagesource.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..a00c00d5192761eec9162a60e966cc73916a045b
|
| --- /dev/null
|
| +++ b/third_party/WebKit/LayoutTests/paint/invalidation/canvas-composite-repaint-by-all-imagesource.html
|
| @@ -0,0 +1,178 @@
|
| +<!doctype html>
|
| +<html>
|
| + <head>
|
| + <title>Check repaint region of fillRect() and drawImage() with different composite modes.</title>
|
| + <style type="text/css">
|
| + body { margin: 5px; font-family: arial,verdana,helvetica; background: #fff; }
|
| + canvas { border: 1px solid #999; }
|
| + div { margin: 10px; }
|
| + #output h1 { font-size: medium; font-weight: normal; }
|
| + #output h2 { font-size: small; font-weight: normal; }
|
| + #output div { font-size: small; margin: 0px; }
|
| + #output .pass { color: green; }
|
| + #output .fail { color: rgb(255, 0, 0); }
|
| + #output .error { color: rgb(255, 0, 64); }
|
| + td { padding: 2px 5px; }
|
| + table { border-collapse: collapse; }
|
| + </style>
|
| + </head>
|
| + <body>
|
| + <div>Test Results</div>
|
| + <div><table id='outputtable'></table></div>
|
| + <div>Test Image</div>
|
| + <div><img id = "image" src="data:image/png;base64,
|
| + iVBORw0KGgoAAAANSUhEUgAAAJYAAAA8CAIAAAAL5NQ9AAAACXBIWXMAAAsTAAALEwEAmpwY
|
| + AAAAB3RJTUUH2woaBQc4oLEFpAAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeB
|
| + DhcAAACMSURBVHja7dNBEYAgFEVRPhHMYgAzUIsmVnFvB/fsoQb+ObfBmzMvxneW1D1vzz2w
|
| + FiEUQiFEKIRCKIQIhVAIhRChEAqhECIUQiEUQoRCKIRCiFAIhVAIEep3xTWTLzzu5oVCKIRC
|
| + iFAIhVAIEQqhEAohQiEUQiFEKIRCKIQIhVAIhRChEAqhECLUZi3VEwcBMGr1NgAAAABJRU5E
|
| + rkJggg==
|
| + "></div>
|
| + <div>Test Canvas</div>
|
| + <div><canvas id = "source-canvas"></canvas></div>
|
| + <div>Test Video</div>
|
| + <div><video id="video">
|
| + <source src="../../fast/canvas/resources/canvas_video.mp4" type='video/mp4' />
|
| + <source src="../../fast/canvas/resources/canvas_video.webm" type='video/webm' />
|
| + <source src="../../fast/canvas/resources/canvas_video.ogv" type='video/ogg' />
|
| + </video></div>
|
| + <script src="resources/text-based-repaint.js"></script>
|
| + <script type="application/x-javascript">
|
| + // These map to the rows of the table
|
| + var compositeTypes = [
|
| + 'source-over','source-in','source-out','source-atop',
|
| + 'destination-over','destination-in','destination-out','destination-atop',
|
| + 'lighter','copy','xor'
|
| + ];
|
| +
|
| + // These map to the columns of the table
|
| + var testNames = [
|
| + 'solid color', 'image', 'canvas', 'video'
|
| + ];
|
| +
|
| + function createOutputTable() {
|
| + var tableEl = document.getElementById('outputtable');
|
| + var row = tableEl.insertRow(-1);
|
| + var cell = row.insertCell(-1);
|
| + var label;
|
| + for (var j = 0; j < testNames.length; j++) {
|
| + cell = row.insertCell(-1);
|
| + label = document.createTextNode(testNames[j]);
|
| + cell.appendChild(label);
|
| + }
|
| + for (var i = 0; i < compositeTypes.length; i++) {
|
| + row = tableEl.insertRow(-1);
|
| + cell = row.insertCell(-1);
|
| + label = document.createTextNode(compositeTypes[i]);
|
| + cell.appendChild(label);
|
| + for (var j = 0; j < testNames.length; j++) {
|
| + var canvas = document.createElement('canvas');
|
| + canvas.width = 130;
|
| + canvas.height = 40;
|
| + canvas.id = compositeTypes[i] + testNames[j];
|
| + cell = row.insertCell(-1);
|
| + cell.appendChild(canvas);
|
| + }
|
| + }
|
| + }
|
| +
|
| + function getContext(compositeIndex, testIndex) {
|
| + var id = compositeTypes[compositeIndex] + testNames[testIndex];
|
| + var context = document.getElementById(id).getContext('2d');
|
| + return context;
|
| + }
|
| +
|
| + function setupContext(context) {
|
| + context.fillStyle = 'blue';
|
| + context.fillRect(5, 5, 120, 30);
|
| + context.beginPath();
|
| + context.moveTo(0, 0);
|
| + context.lineTo(0, 45);
|
| + context.lineTo(80, 45);
|
| + context.lineTo(80, 0);
|
| + context.clip();
|
| + context.translate(40, -10);
|
| + context.scale(0.4, 0.6);
|
| + context.rotate(Math.PI / 8);
|
| + context.translate(-10, -10);
|
| + }
|
| +
|
| + function prepareRepaintTest() {
|
| + if (window.testRunner)
|
| + testRunner.dumpAsText();
|
| + createOutputTable();
|
| + for (var i = 0; i < compositeTypes.length; i++) {
|
| + for (var j = 0; j < testNames.length; j++) {
|
| + var context = getContext(i, j);
|
| + context.save();
|
| + setupContext(context);
|
| + }
|
| + }
|
| + }
|
| +
|
| + function drawRect(context) {
|
| + context.fillStyle = 'green';
|
| + context.fillRect(10, 10, 150, 60);
|
| + }
|
| +
|
| + function drawImage(context) {
|
| + context.drawImage(document.getElementById('image'), 10, 10);
|
| + }
|
| +
|
| + function drawCanvas(context) {
|
| + context.drawImage(document.getElementById('source-canvas'), 10, 10);
|
| + }
|
| +
|
| + function drawVideo(context) {
|
| + context.drawImage(document.getElementById('video'), 10, 10);
|
| + }
|
| +
|
| + // callback from text-based-repaint.js
|
| + function repaintTest() {
|
| + for (var i = 0; i < compositeTypes.length; i++) {
|
| + for (var j = 0; j < testNames.length; j++) {
|
| + var context = getContext(i, j);
|
| + context.globalCompositeOperation = compositeTypes[i];
|
| + switch (testNames[j]) {
|
| + case 'solid color':
|
| + drawRect(context);
|
| + break;
|
| + case 'image':
|
| + drawImage(context);
|
| + break;
|
| + case 'canvas':
|
| + drawCanvas(context);
|
| + break;
|
| + case 'video':
|
| + drawVideo(context);
|
| + }
|
| + context.restore();
|
| + }
|
| + }
|
| + // Because canvas invalidations are processed at the end of the current task,
|
| + // the repaint test has to end in a subsequent task in order to capture the repaint.
|
| + setTimeout(finishRepaintTest, 0);
|
| + }
|
| +
|
| + // we can start this test after the video can be played.
|
| + function startTest() {
|
| + video.removeEventListener("playing", startTest, true);
|
| + prepareRepaintTest();
|
| + runRepaintTest();
|
| + }
|
| +
|
| + var video = document.getElementById("video");
|
| + video.addEventListener("playing", startTest, true);
|
| + video.play();
|
| +
|
| + var imageElement = document.getElementById('image');
|
| + var canvas = document.getElementById('source-canvas');
|
| + canvas.width = imageElement.width;
|
| + canvas.height = imageElement.height;
|
| + var context = canvas.getContext('2d');
|
| + context.drawImage(imageElement, 0, 0);
|
| +
|
| + window.testIsAsync = true;
|
| + </script>
|
| + </body>
|
| +</html>
|
|
|
Chromium Code Reviews
Issue 2321183002:
Move repaint tests (except for svg/) to paint/invalidation (Closed)
