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 -webkit-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="-webkit-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> 77
