third_party/WebKit/LayoutTests/compositing/direct-image-compositing.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   2    "http://www.w3.org/TR/html4/loose.dtd">
   3
   4 <html lang="en">
   5 <head>
   6   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   7   <title>Testing direct image layer optimisation</title>
   8   <style type="text/css" media="screen">
   9     img {
  10       float: left;
  11       width: 150px;
  12       height: 150px;
  13     }
  14     img {
  15       transform: rotate3d(0, 0, 1, 0);
  16     }
  17     .test {
  18       float: left;
  19       height: 200px;
  20       width: 260px;
  21     }
  22    </style>
  23 </head>
  24 <body>
  25
  26   <h1>Image optimisation in layers</h1>
  27
  28   <p>
  29     This test exercises direct compositing of images with hardware acceleration. The visual results
  30     using ACCELERATED_COMPOSITING and regular TOT should be identical. Running this test manually with
  31     the correct debug options will show which elements are directly composited. See
  32     <a href="https://bugs.webkit.org/show_bug.cgi?id=23361">https://bugs.webkit.org/show_bug.cgi?id=23361</a>
  33   </p>
  34
  35   <div class="test">
  36     <img src="resources/simple_image.png">
  37     Basic image - no style - can be directly composited
  38   </div>
  39
  40   <div class="test">
  41     <img src="resources/simple_image.png" style="border: 5px solid blue;">
  42     5px blue border - can NOT be directly composited
  43   </div>
  44
  45   <div class="test">
  46     <img src="resources/simple_image.png" style="margin: 5px 5px;">
  47     margin - can NOT be directly composited
  48   </div>
  49
  50   <div class="test">
  51     <img src="resources/simple_image.png" style="background-color: grey;">
  52     solid background - can be directly composited
  53   </div>
  54
  55   <div class="test">
  56     <img src="resources/simple_image.png" style="background: orange url(resources/simple_image.png) -50px -50px;">
  57     background image - can NOT be directly composited
  58   </div>
  59
  60   <div class="test">
  61     <img src="resources/simple_image.png" style="transform: rotate3d(0, 0, 1, 10deg);">
  62     rotated but otherwise no style - can be directly composited
  63   </div>
  64
  65 </body>
  66 </html>