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 -webkit-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="-webkit-transform: rotate3d(0, 0, 1, 10deg);"> 62 rotated but otherwise no style - can be directly composited 63 </div> 64 65</body> 66</html> 67