third_party/WebKit/LayoutTests/transitions/inherit.html

   1 <html>
   2 <head>
   3   <style>
   4     .box {
   5       position: relative;
   6       left: 0;
   7       height: 100px;
   8       width: 100px;
   9       margin: 10px;
  10       background-color: blue;
  11     }
  12     .transition {
  13       -webkit-transition-property: left;
  14       -webkit-transition-duration: 2s;
  15     }
  16     #box4 {
  17       -webkit-transition-property: inherit;
  18     }
  19   </style>
  20   <script>
  21     if (window.testRunner) {
  22         testRunner.dumpAsText();
  23         testRunner.waitUntilDone();
  24     }
  25
  26     var kExpecteds = [
  27       'all', /* box1 */
  28       'left', /* box2 */
  29       'left', /* box3 */
  30       'left', /* box4 */ /* inherits from box3 */
  31       'left', /* box5 */
  32       'all', /* box6 */ /* does NOT inherit */
  33     ];
  34
  35     function testProperties()
  36     {
  37       var result = '';
  38
  39       var boxes = document.body.getElementsByClassName('box');
  40       for (var i = 0; i < boxes.length; ++i) {
  41         var curBox = boxes[i];
  42         var curProp = getComputedStyle(curBox).webkitTransitionProperty;
  43         if (curProp == kExpecteds[i])
  44           result += "PASS: ";
  45         else
  46           result += "FAIL: ";
  47         result += "Box " + (i + 1) + " computed transition-property: " + curProp + ", expected: " + kExpecteds[i] + "<br>";
  48       }
  49
  50       document.body.removeChild(document.getElementById('container'));
  51       document.getElementById('result').innerHTML = result;
  52       if (window.testRunner)
  53           testRunner.notifyDone();
  54
  55     }
  56
  57     window.addEventListener('load', testProperties, false);
  58   </script>
  59 </head>
  60 <body>
  61 <p>Tests inheritance of transition-property.
  62 <div id="container">
  63   <div id="box1" class="box"></div>
  64   <div id="box2" class="box transition"></div>
  65   <div id="box3" class="box transition">
  66     <div id="box4" class="box"></div>
  67   </div>
  68   <div id="box5" class="box transition">
  69     <div id="box6" class="box"></div>
  70   </div>
  71 </div>
  72
  73 <div id="result"></div>
  74
  75 </body>
  76 </html>