| 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 <style> | 4 <style> |
| 5 .css-shape { | 5 .css-shape { |
| 6 shape-outside: circle(); | 6 shape-outside: circle(); |
| 7 shape-margin: 2px; | 7 shape-margin: 2px; |
| 8 width: 200px; | 8 width: 200px; |
| 9 border-radius: 50%; | 9 border-radius: 50%; |
| 10 float: left; | 10 float: left; |
| 11 } | 11 } |
| 12 | 12 |
| 13 p { | 13 p { |
| 14 font: 10pt Ahem, sans-serif; | 14 font: 10pt Ahem, sans-serif; |
| 15 width: 250px; | 15 width: 250px; |
| 16 } | 16 } |
| 17 </style> | 17 </style> |
| 18 | 18 |
| 19 <body> | 19 <body> |
| 20 <!-- The blue sector of the image should be at 12'oclock --> | 20 <!-- The blue sector of the image should be at 12'oclock --> |
| 21 <img class="css-shape" src="resources/red-at-12-oclock-with-color-profile.jpg"
> | 21 <img class="css-shape" src="resources/red-at-12-oclock-with-color-profile.jpg"
> |
| 22 <p>Lorem </p> | 22 <p>Lorem </p> |
| 23 </body> | 23 </body> |
| 24 | 24 |
| 25 <script> | 25 <script> |
| 26 window.onload = function() { | 26 window.onload = function() { |
| 27 if (window.testRunner) | 27 if (window.testRunner) |
| 28 runAfterLayoutAndPaint(changeColorProfile); | 28 runAfterLayoutAndPaint(function() { testRunner.notifyDone() }); |
| 29 }; | 29 }; |
| 30 | 30 |
| 31 function changeColorProfile() { | |
| 32 setTimeout(function() { testRunner.setColorProfile('colorSpin', done) }, 20); | |
| 33 } | |
| 34 | |
| 35 function done() { | |
| 36 setTimeout(function() { testRunner.notifyDone() }, 0); | |
| 37 } | |
| 38 | 31 |
| 39 if (window.testRunner) { | 32 if (window.testRunner) { |
| 40 testRunner.dumpAsTextWithPixelResults(); | 33 testRunner.dumpAsTextWithPixelResults(); |
| 41 testRunner.waitUntilDone(); | 34 testRunner.waitUntilDone(); |
| 42 } | 35 } |
| 43 </script> | 36 </script> |
| 44 </html> | 37 </html> |
| OLD | NEW |