third_party/WebKit/LayoutTests/fast/repaint/padding-keeping-visual-size.html

   1 <!DOCTYPE HTML>
   2 <script src="resources/text-based-repaint.js"></script>
   3 <script>
   4 function repaintTest()
   5 {
   6     // No visual change. Optimally, there should be no repaint.
   7     var target1 = document.getElementById('target1');
   8     target1.style.padding = '20px';
   9     target1.style.width = '60px';
  10     target1.style.height = '60px';
  11
  12     // Content will shrink. Should repaint at least the content.
  13     var target2 = document.getElementById('target2');
  14     target2.style.padding = '20px';
  15     target2.style.width = '60px';
  16     target2.style.height = '60px';
  17 }
  18 window.onload = runRepaintTest;
  19 </script>
  20 <style>
  21 body {
  22     margin: 0;
  23 }
  24 .outer {
  25     width: 100px;
  26     height: 100px;
  27     position: absolute;
  28     background-color: green;
  29 }
  30 #target2 {
  31     top: 200px;
  32 }
  33 .inner {
  34     width: 100%;
  35     height: 100%;
  36     background-color: yellow;
  37 }
  38 </style>
  39 <div id="target1" class="outer"></div>
  40 <div id="target2" class="outer"><div class="inner"></div></div>