third_party/WebKit/LayoutTests/compositing/repaint/clipping-should-not-repaint-composited-descendants.html

   1 <!DOCTYPE html>
   2 <style>
   3     .spacer {
   4         position: relative;
   5         width: 300px;
   6         height: 300px;
   7     }
   8
   9     .clipping-container {
  10         position: absolute;
  11         height: 300px;
  12         transform: translateZ(0);
  13     }
  14
  15     .with-initial-clipping {
  16         clip: rect(50px, 250px, 250px, 50px);
  17     }
  18
  19     .clipped-composited-child {
  20         width: 250px;
  21         height: 250px;
  22         background-color: yellow;
  23         border: 1px solid black;
  24         transform: translateZ(0);
  25     }
  26 </style>
  27 <style id="alt1">
  28     .clipping-container {
  29         width: 300px;
  30     }
  31 </style>
  32 <style id="alt2">
  33     .clipping-container {
  34         width: 100%;
  35         clip: rect(100px, 200px, 200px, 100px);
  36     }
  37 </style>
  38 <script src="../../fast/repaint/resources/text-based-repaint.js"></script>
  39 <script>
  40     var alt1 = document.getElementById('alt1');
  41     var alt2 = document.getElementById('alt2');
  42     alt2.disabled = true;
  43
  44     function repaintTest() {
  45         alt2.disabled = false;
  46         alt1.disabled = true;
  47     }
  48
  49     runRepaintTest();
  50 </script>
  51
  52 <div class="spacer">
  53     <div class="clipping-container">
  54         <div class="clipped-composited-child"></div>
  55     </div>
  56 </div>
  57 <div class="spacer">
  58     <div class="clipping-container with-initial-clipping">
  59         <div class="clipped-composited-child"></div>
  60     </div>
  61 </div>