src/tools/perf/page_sets/tough_layer_cases/opacity.html

   1 <!doctype html>
   2 <html>
   3   <head>
   4     <title>Chrome 18 opacity test</title>
   5     <style>
   6       .ninety-nine{
   7         opacity: 0.99;
   8       }
   9     </style>
  10     <script>
  11         function toggleOpacity() {
  12             var pre = document.getElementById('label');
  13             if (document.body.className == '') {
  14                 document.body.className='ninety-nine';
  15                 pre.innerHTML = 'opacity: 0.99';
  16             } else {
  17                 document.body.className='';
  18                 pre.innerHTML = 'opacity: 1.0';
  19             }
  20             window.setTimeout("toggleOpacity();", 1000);
  21         }
  22         onload = toggleOpacity;
  23     </script>
  24   </head>
  25   <body>
  26     <div style="overflow: hidden">
  27       <div style="-webkit-perspective: 10px">
  28        Quite a lot of text: Opacity can be thought of as a postprocessing
  29        operation. Conceptually, after the element (including its descendants)
  30        is rendered into an RGBA offscreen image, the opacity setting specifies
  31        how to blend the offscreen rendering into the current composite rendering.
  32        The uniform opacity setting to be applied across an entire object. Any
  33        values outside the range 0.0 (fully transparent) to 1.0 (fully opaque)
  34        will be clamped to this range. If the object is a container element, then
  35        the effect is as if the contents of the container element were blended
  36        against the current background using a mask where the value of each pixel
  37        of the mask is the opacity value
  38       </div>
  39       <pre id="label"></pre>
  40     </div>
  41   </body>
  42 </html>