LayoutTests/transitions/shadow.html

   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>Test transition of shadow data</title>
   8   <style type="text/css" media="screen">
   9     #box1 {
  10       height: 100px;
  11       width: 100px;
  12       background-color: blue;
  13       -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  14       -webkit-transition-duration: 0.1s;
  15       -webkit-transition-timing-function: linear;
  16       -webkit-transition-property: -webkit-box-shadow;
  17     }
  18     #box2 {
  19       height: 100px;
  20       width: 100px;
  21       background-color: blue;
  22       -webkit-transition-duration: 0.1s;
  23       -webkit-transition-timing-function: linear;
  24       -webkit-transition-property: -webkit-box-shadow;
  25     }
  26   </style>
  27   <script type="text/javascript" charset="utf-8">
  28     if (window.layoutTestController) {
  29         layoutTestController.dumpAsText();
  30         layoutTestController.waitUntilDone();
  31     }
  32
  33     function start()
  34     {
  35         var box1 = document.getElementById('box1');
  36         box1.style.webkitBoxShadow = 'none';
  37         var box2 = document.getElementById('box2');
  38         box2.style.webkitBoxShadow = '5px 5px 5px rgba(0, 0, 0, 0.5)';
  39         window.setTimeout(function() {
  40               document.getElementById('result').innerHTML = "PASS";
  41               if (window.layoutTestController)
  42                   layoutTestController.notifyDone();
  43           }, 300);
  44     }
  45
  46     window.addEventListener('load', start, false);
  47
  48   </script>
  49 </head>
  50 <body>
  51
  52 <p>
  53 First box should transition to no shadow. Second should transition to a shadow.
  54 </p>
  55 <div id="box1">
  56 </div>
  57 <div id="box2">
  58 </div>
  59 <div id="result">
  60 </div>
  61 </body>
  62 </html>