| <!-- Based on fast/repaint/background-resize-width.html --> |
| <!DOCTYPE html> |
| <script src="resources/paint-invalidation-test.js" type="text/javascript"></script> |
| <script> |
| if (window.testRunner) |
| testRunner.dumpAsTextWithPixelResults(); |
| window.expectedPaintInvalidationObjects = [ |
| "LayoutBlockFlow (positioned) DIV id='container'", |
| "LayoutBlockFlow (positioned) DIV class='test image'", |
| "LayoutBlockFlow (positioned) DIV class='test image size-cover'", |
| "LayoutBlockFlow (positioned) DIV class='test image size-contain'", |
| "LayoutBlockFlow (positioned) DIV class='test image fixed-width'", |
| "LayoutBlockFlow (positioned) DIV class='test image percent-width'", |
| "LayoutBlockFlow (positioned) DIV class='test image left'", |
| "LayoutBlockFlow (positioned) DIV class='test image right'", |
| "LayoutBlockFlow (positioned) DIV class='test image center'", |
| "LayoutBlockFlow (positioned) DIV class='test image no-repeat'", |
| "LayoutBlockFlow (positioned) DIV class='test image repeat-space'", |
| "LayoutBlockFlow (positioned) DIV class='test image repeat-round'", |
| "LayoutBlockFlow (positioned) DIV class='test generated'", |
| "LayoutBlockFlow (positioned) DIV class='test generated cover'", |
| "LayoutBlockFlow (positioned) DIV class='test generated contain'", |
| "LayoutBlockFlow (positioned) DIV class='test generated fixed-width'", |
| "LayoutBlockFlow (positioned) DIV class='test generated percent-width'", |
| "LayoutBlockFlow (positioned) DIV class='test generated left'", |
| "LayoutBlockFlow (positioned) DIV class='test generated right'", |
| "LayoutBlockFlow (positioned) DIV class='test generated center'", |
| "LayoutBlockFlow (positioned) DIV class='test generated no-repeat'", |
| "LayoutBlockFlow (positioned) DIV class='test generated repeat-space'", |
| "LayoutBlockFlow (positioned) DIV class='test generated repeat-round'", |
| ]; |
| function paintInvalidationTest() |
| { |
| document.getElementById('container').style.width = '550px'; |
| } |
| window.onload = runPaintInvalidationTest; |
| </script> |
| <style> |
| #container { |
| position: absolute; |
| width: 600px; |
| height: 500px; |
| } |
| .test { |
| backface-visibility: hidden; |
| position: absolute; |
| width: 10%; |
| height: 8%; |
| } |
| .image { |
| background-image: url(../../../fast/repaint/resources/small-apple.jpg); |
| top: 0px; |
| } |
| .generated { |
| background-image: linear-gradient(blue, green); |
| top: 100px; |
| } |
| .size-cover { |
| background-size: cover; |
| left: 50px; |
| } |
| .size-contain { |
| background-size: contain; |
| left: 100px; |
| } |
| .fixed-width { |
| background-size: 30px auto; |
| left: 150px; |
| } |
| .percent-width { |
| background-size: 50% auto; |
| left: 200px; |
| } |
| .left { |
| background-position: left 10px top 0px; |
| left: 250px; |
| } |
| .right { |
| background-position: right 20px top 0px; |
| left: 300px; |
| } |
| .center { |
| background-position: center; |
| left: 350px; |
| } |
| .no-repeat { |
| background-repeat: no-repeat; |
| left: 400px; |
| } |
| .repeat-space { |
| background-repeat: space; |
| left: 450px; |
| } |
| .repeat-round { |
| background-repeat: round; |
| left: 500px; |
| } |
| </style> |
| <div id="container"> |
| <div class="test image"></div> |
| <div class="test image size-cover"></div> |
| <div class="test image size-contain"></div> |
| <div class="test image fixed-width"></div> |
| <div class="test image percent-width"></div> |
| <div class="test image left"></div> |
| <div class="test image right"></div> |
| <div class="test image center"></div> |
| <div class="test image no-repeat"></div> |
| <div class="test image repeat-space"></div> |
| <div class="test image repeat-round"></div> |
| <div class="test generated"></div> |
| <div class="test generated cover"></div> |
| <div class="test generated contain"></div> |
| <div class="test generated fixed-width"></div> |
| <div class="test generated percent-width"></div> |
| <div class="test generated left"></div> |
| <div class="test generated right"></div> |
| <div class="test generated center"></div> |
| <div class="test generated no-repeat"></div> |
| <div class="test generated repeat-space"></div> |
| <div class="test generated repeat-round"></div> |
| </div> |
