| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <script src="../resources/run-after-layout-and-paint.js"></script> | 3 <script src="../resources/run-after-layout-and-paint.js"></script> |
| 4 | 4 |
| 5 <style> | 5 <style> |
| 6 canvas, img { margin-bottom: -10px; } | 6 canvas, img { margin-bottom: -10px; } |
| 7 </style> | 7 </style> |
| 8 | 8 |
| 9 <body style="overflow: hidden"> | 9 <body style="overflow: hidden"> |
| 10 <!-- The red sector of the canvas images should be at 12 o'clock. --> | 10 <!-- The red sector of the canvas images should be at 12 o'clock. --> |
| 11 <p title="html canvas 2d element"> | 11 <p title="html canvas 2d element"> |
| 12 <canvas width="700px" height="200px" /> | 12 <canvas width="700px" height="200px" /> |
| 13 </p> | 13 </p> |
| 14 <!-- The blue sector of the source images should be at 12 o'clock. --> | 14 <!-- The blue sector of the source images should be at 12 o'clock. --> |
| 15 <img title="source image to draw on canvas"> | 15 <img title="source image to draw on canvas"> |
| 16 </body> | 16 </body> |
| 17 | 17 |
| 18 <script> | 18 <script> |
| 19 window.onload = function() { | 19 window.onload = function() { |
| 20 var image = document.querySelector('img'); | 20 var image = document.querySelector('img'); |
| 21 | 21 |
| 22 image.onload = function() { | 22 image.onload = function() { |
| 23 runAfterLayoutAndPaint(window.testRunner ? changeColorProfile : profileChang
ed); | 23 runAfterLayoutAndPaint(loadedImage); |
| 24 }; | 24 }; |
| 25 | 25 |
| 26 image.src = 'resources/color-profile-image-data-url.svg'; | 26 image.src = 'resources/color-profile-image-data-url.svg'; |
| 27 }; | 27 }; |
| 28 | 28 |
| 29 function changeColorProfile() { | 29 function loadedImage() { |
| 30 window.testRunner.setColorProfile('sRGB', profileChanged); | |
| 31 } | |
| 32 | |
| 33 function profileChanged() { | |
| 34 setTimeout(drawImageToCanvas, 0, document.querySelector('img')); | 30 setTimeout(drawImageToCanvas, 0, document.querySelector('img')); |
| 35 } | 31 } |
| 36 | 32 |
| 37 function drawImageToCanvas(image) { | 33 function drawImageToCanvas(image) { |
| 38 var canvas = document.querySelector('canvas'); | 34 var canvas = document.querySelector('canvas'); |
| 39 | 35 |
| 40 canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height); | 36 canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height); |
| 41 canvas.getContext('2d').drawImage(image, 0, 0); | 37 canvas.getContext('2d').drawImage(image, 0, 0); |
| 42 | 38 |
| 43 if (window.testRunner) | 39 if (window.testRunner) |
| 44 runAfterLayoutAndPaint(setWhackedColorProfile); | 40 runAfterLayoutAndPaint(setWhackedColorProfile); |
| 45 } | 41 } |
| 46 | 42 |
| 47 function setWhackedColorProfile() { | 43 function setWhackedColorProfile() { |
| 48 window.testRunner.setColorProfile('colorSpin', done); | 44 window.testRunner.setColorProfile('colorSpin', done); |
| 49 } | 45 } |
| 50 | 46 |
| 51 function done() { | 47 function done() { |
| 52 setTimeout(function() { window.testRunner.notifyDone() }, 0); | 48 setTimeout(function() { window.testRunner.notifyDone() }, 0); |
| 53 } | 49 } |
| 54 | 50 |
| 55 if (window.testRunner) { | 51 if (window.testRunner) { |
| 56 testRunner.dumpAsTextWithPixelResults(); | 52 testRunner.dumpAsTextWithPixelResults(); |
| 57 testRunner.waitUntilDone(); | 53 testRunner.waitUntilDone(); |
| 58 } | 54 } |
| 59 </script> | 55 </script> |
| 60 </html> | 56 </html> |
| OLD | NEW |