third_party/WebKit/ManualTests/simple-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>Checking for simple image layer optimisation</title>
   8   <style type="text/css" media="screen">
   9     img {
  10       float: left;
  11       width: 150px;
  12       height: 150px;
  13     }
  14     p {
  15       clear: both;
  16       margin: 1em 2em;
  17       height: 180px;
  18     }
  19     img {
  20       transform: rotate3d(0, 0, 1, 0);
  21     }
  22    </style>
  23 </head>
  24 <body>
  25
  26   <h1>Image optimisation in layers</h1>
  27
  28   <p style="height: auto">
  29     In order to run this test you should enable the debugging options that indicate
  30     what type of compositing layer is being used.
  31   </p>
  32
  33 <pre>
  34 defaults write com.apple.Safari WebCoreLayerRepaintCounter -bool yes
  35 defaults write com.apple.Safari WebCoreLayerBorders -bool yes
  36 </pre>
  37
  38   <p style="height: auto">
  39     Directly composited image layers will have a yellow border and no repaint counter.
  40   </p>
  41
  42   <p>
  43     <img src="resources/simple_image.png">
  44     Basic image - no style - can be directly composited
  45   </p>
  46
  47   <p>
  48     <img src="resources/simple_image.png" style="border: 5px solid blue;">
  49     5px blue border - can NOT be directly composited
  50   </p>
  51
  52   <p>
  53     <img src="resources/simple_image.png" style="margin: 10px 20px;">
  54     margin - can NOT be directly composited
  55   </p>
  56
  57   <p>
  58     <img src="resources/simple_image.png" style="background-color: grey;">
  59     solid background - can be directly composited
  60   </p>
  61
  62   <p>
  63     <img src="resources/simple_image.png" style="background: orange url(resources/simple_image.png) -50px -50px;">
  64     background image - can NOT be directly composited
  65   </p>
  66
  67   <p>
  68     <img src="resources/simple_image.png" style="transform: rotate3d(0, 0, 1, 10deg);">
  69     rotated but otherwise no style - can be directly composited
  70   </p>
  71
  72
  73
  74
  75 </body>
  76 </html>