<!DOCTYPE html> <script src="resources/text-based-repaint.js" type="text/javascript"></script> <script> function repaintTest() { document.getElementById('container').style.width = '550px'; } window.onload = runRepaintTest; </script> <style> #container { position: absolute; width: 600px; height: 500px; } .test { backface-visibility: hidden; position: absolute; width: 10%; height: 8%; } .image { background-image: url(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>