third_party/WebKit/LayoutTests/fast/repaint/background-clip-content-box-repaint.html

   1 <!DOCTYPE html>
   2 <style>
   3 #container {
   4     position: relative;
   5     width: 500px;
   6 }
   7
   8 #dynamic-padding {
   9     position: absolute;
  10     left: 0;
  11     top: 0;
  12
  13     box-sizing: border-box;
  14     width: 300px;
  15     height: 300px;
  16     padding: 10%;
  17
  18     background-clip: content-box;
  19     background-color: yellow;
  20 }
  21 </style>
  22 <div id="container">
  23     <div id="dynamic-padding"></div>
  24 </div>
  25 This test verifies an element with percentage padding and background-clip:content-box correctly repaints when its padding changes due to container layout.
  26 <script src="../../resources/run-after-layout-and-paint.js"></script>
  27 <script>
  28 runAfterLayoutAndPaint(function() {
  29     document.getElementById("container").style.width = "100px";
  30 }, true);
  31 </script>