View All Attachments for Bug 19938

Obsolete attachments are hidden. To view all attachments (including obsolete) click here.

Attachment #22152
Test case for simple transitions	text/html	2008-07-07 19:06:00 PDT	1.18 KB	no flags	Details

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Transition of left property</title>
    <style>
         div {
             position: relative;
             left: 100px;
             height: 200px;
             width: 300px;
             background-color: #9bb;
             -webkit-transition-property: left;
             -webkit-transition-duration: 1s;
         }
     </style>
     <script type="text/javascript" charset="utf-8">
      
      var flag = true;
      
      function init() {
        document.getElementById("target").addEventListener("click", function(evt) {
          if (flag)
            evt.target.style.left = "300px";
          else 
            evt.target.style.left = "100px";
          flag = !flag;
        }, false);
      }
      
      window.addEventListener("load", init, false);
     </script>
</head>
<body>
  <h1>Transition of 'left' property</h1>

  <p>The element below should move 200 pixels left or right when clicked</p>
  
  <div id="target">
    This element should transition.
  </div>

</body>
</html>

Attachment #22153
test case for different timing functions	text/html	2008-07-07 19:06:28 PDT	2.60 KB	no flags	Details

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Timing Functions for Transitions</title>
    <style type="text/css" media="screen">
      
      body {
        margin: 10px;
        padding: 0;
      }
      
      .container div {
        position: relative;
        width: 250px;
        height: 50px;
        background: #99c;
        -webkit-transition-property: left;
        -webkit-transition-duration: 5s;
        margin-bottom: 10px;
      }
      
      .container:hover .default,
      .container:hover .ease,
      .container:hover .linear,
      .container:hover .ease-in,
      .container:hover .ease-out,
      .container:hover .ease-in-out,
      .container:hover .cubic,
      .container:hover .error {
        left: 400px;
      }

      .container .ease {
        -webkit-transition-timing-function: ease;
      }

      .container .linear {
        -webkit-transition-timing-function: linear;
      }

      .container .ease-in {
        -webkit-transition-timing-function: ease-in;
      }

      .container .ease-out {
        -webkit-transition-timing-function: ease-out;
      }

      .container .ease-in-out {
        -webkit-transition-timing-function: ease-in-out;
      }

      .container .cubic {
        -webkit-transition-timing-function: cubic-bezier(.42, .0, .58, 1.0)
      }

      .container .error {
        -webkit-transition-timing-function: bananas;
      }

      #endmarker {
        position: absolute;
        width: 10px;
        left: 400px;
        top: 100px;
        height: 500px;
        background-color: red;
      }

      
    </style>
  </head>
  <body>
    <div id="endmarker">
    </div>

    <h1>Timing functions for transitions</h1>
    <p>On hover, the elements below should transition using the
      described timing functions</p>
      
    <div class="container">
      
      <div class="default">
        Default (no timing function specified, should be the same as Ease)
      </div>

      <div class="ease">
        Ease (the default ease function)
      </div>

      <div class="linear">
        Linear
      </div>

      <div class="ease-in">
        Ease In
      </div>

      <div class="ease-out">
        Ease Out
      </div>

      <div class="ease-in-out">
        Ease In Out
      </div>

      <div class="cubic">
        Cubic bezier specified the same as Ease In Out
      </div>

      <div class="error">
        Bogus definition, should become default of Ease
      </div>
      
    </div>
    
    
    
  </body>
</html>

Attachment #22154
Test case for transition delay	text/html	2008-07-07 19:07:00 PDT	1.40 KB	no flags	Details

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Transition Delay</title>
    <style>
      #container {
        position: absolute;
        width: 500px;
        height: 340px;
        border: 1px solid black;
      }
      
      .box {
        position: relative;
        width: 100px;
        height: 100px;
        margin: 10px;
        background-color: #66F;
        z-index: 0;
      }
      
/*      #container:hover > .box {
        -webkit-transform: translateX(380px);
        -webkit-transition-property: -webkit-transform;
        -webkit-transition-duration: 2s;
      }
*/
      #container.foopy > .box {
        -webkit-transform: translateX(380px);
        -webkit-transition-property: -webkit-transform;
        -webkit-transition-duration: 2s;
      }
      
      #box1 {
        -webkit-transition-delay: 200ms;
      }

      #box2 {
        -webkit-transition-delay: 2s;
      }

      #box3 {
        -webkit-transition-delay: 4s;
      }
     </style>
     
</head>
<body>
<p>Click to animate</p>
<div id="container" onclick="this.className = 'foopy'">
  <div class="box" id="box1">
      Delay: 200ms
  </div>
  <div class="box" id="box2">
      Delay: 2s
  </div>
  <div class="box" id="box3">
      Delay: 4s
  </div>
</div>
</body>
</html>

Attachment #22571
Patch Update 4	patch	2008-07-30 18:28:10 PDT	135.57 KB	hyatt: review+	Details