simple-image-compositing.html 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3. <html lang="en">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. <title>Checking for simple image layer optimisation</title>
  7. <style type="text/css" media="screen">
  8. img {
  9. float: left;
  10. width: 150px;
  11. height: 150px;
  12. }
  13. p {
  14. clear: both;
  15. margin: 1em 2em;
  16. height: 180px;
  17. }
  18. img {
  19. transform: rotate3d(0, 0, 1, 0);
  20. }
  21. </style>
  22. </head>
  23. <body>
  24. <h1>Image optimisation in layers</h1>
  25. <p style="height: auto">
  26. In order to run this test you should enable the debugging options that indicate
  27. what type of compositing layer is being used.
  28. </p>
  29. <pre>
  30. defaults write com.apple.Safari WebCoreLayerRepaintCounter -bool yes
  31. defaults write com.apple.Safari WebCoreLayerBorders -bool yes
  32. </pre>
  33. <p style="height: auto">
  34. Directly composited image layers will have a yellow border and no repaint counter.
  35. </p>
  36. <p>
  37. <img src="resources/simple_image.png">
  38. Basic image - no style - can be directly composited
  39. </p>
  40. <p>
  41. <img src="resources/simple_image.png" style="border: 5px solid blue;">
  42. 5px blue border - can NOT be directly composited
  43. </p>
  44. <p>
  45. <img src="resources/simple_image.png" style="margin: 10px 20px;">
  46. margin - can NOT be directly composited
  47. </p>
  48. <p>
  49. <img src="resources/simple_image.png" style="background-color: grey;">
  50. solid background - can be directly composited
  51. </p>
  52. <p>
  53. <img src="resources/simple_image.png" style="background: orange url(resources/simple_image.png) -50px -50px;">
  54. background image - can NOT be directly composited
  55. </p>
  56. <p>
  57. <img src="resources/simple_image.png" style="transform: rotate3d(0, 0, 1, 10deg);">
  58. rotated but otherwise no style - can be directly composited
  59. </p>
  60. </body>
  61. </html>