third_party/WebKit/LayoutTests/fast/repaint/background-resize-width.html

   1 <!DOCTYPE html>
   2 <script src="resources/text-based-repaint.js" type="text/javascript"></script>
   3 <script>
   4 function repaintTest()
   5 {
   6     document.getElementById('container').style.width = '550px';
   7 }
   8 window.onload = runRepaintTest;
   9 </script>
  10 <style>
  11 #container {
  12     position: absolute;
  13     width: 600px;
  14     height: 500px;
  15 }
  16 .test {
  17     backface-visibility: hidden;
  18     position: absolute;
  19     width: 10%;
  20     height: 8%;
  21 }
  22 .image {
  23     background-image: url(resources/small-apple.jpg);
  24     top: 0px;
  25 }
  26 .generated {
  27     background-image: linear-gradient(blue, green);
  28     top: 100px;
  29 }
  30 .size-cover {
  31     background-size: cover;
  32     left: 50px;
  33 }
  34 .size-contain {
  35     background-size: contain;
  36     left: 100px;
  37 }
  38 .fixed-width {
  39     background-size: 30px auto;
  40     left: 150px;
  41 }
  42 .percent-width {
  43     background-size: 50% auto;
  44     left: 200px;
  45 }
  46 .left {
  47     background-position: left 10px top 0px;
  48     left: 250px;
  49 }
  50 .right {
  51     background-position: right 20px top 0px;
  52     left: 300px;
  53 }
  54 .center {
  55     background-position: center;
  56     left: 350px;
  57 }
  58 .no-repeat {
  59     background-repeat: no-repeat;
  60     left: 400px;
  61 }
  62 .repeat-space {
  63     background-repeat: space;
  64     left: 450px;
  65 }
  66 .repeat-round {
  67     background-repeat: round;
  68     left: 500px;
  69 }
  70 </style>
  71 <div id="container">
  72     <div class="test image"></div>
  73     <div class="test image size-cover"></div>
  74     <div class="test image size-contain"></div>
  75     <div class="test image fixed-width"></div>
  76     <div class="test image percent-width"></div>
  77     <div class="test image left"></div>
  78     <div class="test image right"></div>
  79     <div class="test image center"></div>
  80     <div class="test image no-repeat"></div>
  81     <div class="test image repeat-space"></div>
  82     <div class="test image repeat-round"></div>
  83     <div class="test generated"></div>
  84     <div class="test generated cover"></div>
  85     <div class="test generated contain"></div>
  86     <div class="test generated fixed-width"></div>
  87     <div class="test generated percent-width"></div>
  88     <div class="test generated left"></div>
  89     <div class="test generated right"></div>
  90     <div class="test generated center"></div>
  91     <div class="test generated no-repeat"></div>
  92     <div class="test generated repeat-space"></div>
  93     <div class="test generated repeat-round"></div>
  94 </div>