third_party/WebKit/LayoutTests/transitions/shadow.html

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