LayoutTests/transitions/change-values-during-transition.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>Changing transition values during transition should not affect it</title>
   8   <style type="text/css" media="screen">
   9     #box {
  10       height: 100px;
  11       width: 100px;
  12       background-color: blue;
  13       -webkit-transition-duration: 1s;
  14       -webkit-transition-timing-function: linear;
  15       -webkit-transition-property: -webkit-transform;
  16     }
  17   </style>
  18   <script type="text/javascript" charset="utf-8">
  19     if (window.layoutTestController) {
  20       layoutTestController.dumpAsText();
  21       layoutTestController.waitUntilDone();
  22     }
  23
  24     var result = "PASS";
  25     const defaultTolerance = 10;
  26
  27     function isCloseEnough(actual, desired)
  28     {
  29         var diff = Math.abs(actual - desired);
  30         return diff < defaultTolerance;
  31     }
  32
  33     function changeValues()
  34     {
  35         var box = document.getElementById('box');
  36         box.style.webkitTransitionDuration = "0.1s";
  37     }
  38
  39     function getXPosition()
  40     {
  41         var t = window.getComputedStyle(document.getElementById('box')).webkitTransform;
  42         t = t.split("(");
  43         t = t[1].split(",");
  44         return t[4];
  45     }
  46
  47     function check1()
  48     {
  49         var xPos = getXPosition();
  50         if (!isCloseEnough(xPos, 50))
  51             result = "FAIL(was:"+xPos+", s/b:50)";
  52     }
  53
  54     function check2()
  55     {
  56         var xPos = getXPosition();
  57         if (!isCloseEnough(xPos, 0))
  58             result += "FAIL(was:"+xPos+", s/b:0)";
  59
  60         document.getElementById('result').innerText = result;
  61         if (window.layoutTestController)
  62             layoutTestController.notifyDone();
  63     }
  64
  65     function goBack()
  66     {
  67         var box = document.getElementById('box');
  68         box.style.webkitTransform = 'translateX(0)';
  69     }
  70
  71     function start()
  72     {
  73         var box = document.getElementById('box');
  74         setTimeout("changeValues()", 100);
  75         setTimeout("check1()", 500);
  76         setTimeout("check2()", 1300);
  77         box.style.webkitTransform = 'translateX(100px)';
  78     }
  79
  80     window.addEventListener('load', start, false);
  81     document.addEventListener('webkitTransitionEnd', goBack, false);
  82
  83   </script>
  84 </head>
  85 <body>
  86
  87 <p>Test changes -webkit-transition-duration while the transition is running to ensure that the running transition is not affected</p>
  88 <div id="box">
  89 </div>
  90 <div id="result">
  91 </div>
  92 </body>
  93 </html>