src/third_party/WebKit/LayoutTests/fast/repaint/transform-inline-layered-child.html

   1 <!DOCTYPE html>
   2 <script src="resources/text-based-repaint.js"></script>
   3 <script>
   4 function repaintTest() {
   5   document.getElementById('box').style.transform = 'rotate(30deg)';
   6 }
   7 onload = runRepaintTest;
   8 </script>
   9 <style>
  10 #box {
  11   position: absolute;
  12   top: 100px;
  13   left: 100px;
  14   width: 100px;
  15 }
  16 #child {
  17   position: relative;
  18   left: 200px;
  19   top: 200px;
  20   font-family: Ahem;
  21 }
  22 </style>
  23 Tests if the inline layered child is correctly repainted when container's transform changes.
  24 Succeeds if the text is completely rotated leaving no residue at the original location.
  25 <div id="box">
  26   <span id="child">A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</span>
  27 </div>