|
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> |