| <!-- Based on fast/repaint/background-resize-width.html --> |
| <!DOCTYPE html> |
| <script src="resources/paint-invalidation-test.js" type="text/javascript"></script> |
| <script> |
| 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> |