| <!-- Based on fast/repaint/background-resize-height.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-height'", |
| "LayoutBlockFlow (positioned) DIV class='test image percent-height'", |
| "LayoutBlockFlow (positioned) DIV class='test image top'", |
| "LayoutBlockFlow (positioned) DIV class='test image bottom'", |
| "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-height'", |
| "LayoutBlockFlow (positioned) DIV class='test generated percent-height'", |
| "LayoutBlockFlow (positioned) DIV class='test generated top'", |
| "LayoutBlockFlow (positioned) DIV class='test generated bottom'", |
| "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.height = '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-height { |
| background-size: auto 30px; |
| left: 150px; |
| } |
| .percent-height { |
| background-size: auto 50%; |
| left: 200px; |
| } |
| .top { |
| background-position: left 0px top 10px; |
| left: 250px; |
| } |
| .bottom { |
| background-position: left 0px bottom 10px; |
| 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-height"></div> |
| <div class="test image percent-height"></div> |
| <div class="test image top"></div> |
| <div class="test image bottom"></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-height"></div> |
| <div class="test generated percent-height"></div> |
| <div class="test generated top"></div> |
| <div class="test generated bottom"></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> |
