| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <script src="resources/text-based-repaint.js" type="text/javascript"></script> | 2 <script src="resources/text-based-repaint.js" type="text/javascript"></script> |
| 3 <script> | 3 <script> |
| 4 window.testIsAsync = true; |
| 5 function doTest() { |
| 6 document.getElementById('container').style.height = '550px'; |
| 7 finishRepaintTest(); |
| 8 } |
| 4 function repaintTest() | 9 function repaintTest() |
| 5 { | 10 { |
| 6 document.getElementById('container').style.height = '550px'; | 11 if (window.testRunner) { |
| 12 // This ensures finish of image decoding before running the test. |
| 13 testRunner.capturePixelsAsyncThen(doTest); |
| 14 } else { |
| 15 doTest(); |
| 16 } |
| 7 } | 17 } |
| 8 window.onload = runRepaintAndPixelTest; | 18 window.onload = runRepaintAndPixelTest; |
| 9 </script> | 19 </script> |
| 10 <style> | 20 <style> |
| 11 #container { | 21 #container { |
| 12 position: absolute; | 22 position: absolute; |
| 13 width: 600px; | 23 width: 600px; |
| 14 height: 500px; | 24 height: 500px; |
| 15 } | 25 } |
| 16 .test { | 26 .test { |
| (...skipping 28 matching lines...) Expand all Loading... |
| 45 } | 55 } |
| 46 .top { | 56 .top { |
| 47 background-position: left 0px top 10px; | 57 background-position: left 0px top 10px; |
| 48 left: 250px; | 58 left: 250px; |
| 49 } | 59 } |
| 50 .bottom { | 60 .bottom { |
| 51 background-position: left 0px bottom 10px; | 61 background-position: left 0px bottom 10px; |
| 52 left: 300px; | 62 left: 300px; |
| 53 } | 63 } |
| 54 .center { | 64 .center { |
| 55 background-position: center; | 65 background-position: center; |
| 56 left: 350px; | 66 left: 350px; |
| 57 } | 67 } |
| 58 .no-repeat { | 68 .no-repeat { |
| 59 background-repeat: no-repeat; | 69 background-repeat: no-repeat; |
| 60 left: 400px; | 70 left: 400px; |
| 61 } | 71 } |
| 62 .repeat-space { | 72 .repeat-space { |
| 63 background-repeat: space; | 73 background-repeat: space; |
| 64 left: 450px; | 74 left: 450px; |
| 65 } | 75 } |
| 66 .repeat-round { | 76 .repeat-round { |
| 67 background-repeat: round; | 77 background-repeat: round; |
| 68 left: 500px; | 78 left: 500px; |
| 69 } | 79 } |
| 70 </style> | 80 </style> |
| 71 <div id="container"> | 81 <div id="container"> |
| 72 <div class="test image"></div> | 82 <div class="test image"></div> |
| 73 <div class="test image size-cover"></div> | 83 <div class="test image size-cover"></div> |
| 74 <div class="test image size-contain"></div> | 84 <div class="test image size-contain"></div> |
| 75 <div class="test image fixed-height"></div> | 85 <div class="test image fixed-height"></div> |
| 76 <div class="test image percent-height"></div> | 86 <div class="test image percent-height"></div> |
| 77 <div class="test image top"></div> | 87 <div class="test image top"></div> |
| 78 <div class="test image bottom"></div> | 88 <div class="test image bottom"></div> |
| 79 <div class="test image center"></div> | 89 <div class="test image center"></div> |
| 80 <div class="test image no-repeat"></div> | 90 <div class="test image no-repeat"></div> |
| 81 <div class="test image repeat-space"></div> | 91 <div class="test image repeat-space"></div> |
| 82 <div class="test image repeat-round"></div> | 92 <div class="test image repeat-round"></div> |
| 83 <div class="test generated"></div> | 93 <div class="test generated"></div> |
| 84 <div class="test generated cover"></div> | 94 <div class="test generated size-cover"></div> |
| 85 <div class="test generated contain"></div> | 95 <div class="test generated size-contain"></div> |
| 86 <div class="test generated fixed-height"></div> | |
| 87 <div class="test generated percent-height"></div> | 96 <div class="test generated percent-height"></div> |
| 88 <div class="test generated top"></div> | 97 <div class="test generated top"></div> |
| 89 <div class="test generated bottom"></div> | 98 <div class="test generated bottom"></div> |
| 90 <div class="test generated center"></div> | 99 <div class="test generated center"></div> |
| 91 <div class="test generated no-repeat"></div> | 100 <div class="test generated no-repeat"></div> |
| 92 <div class="test generated repeat-space"></div> | 101 <div class="test generated repeat-space"></div> |
| 93 <div class="test generated repeat-round"></div> | 102 <div class="test generated repeat-round"></div> |
| 94 </div> | 103 </div> |
| OLD | NEW |