<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>CSS Tests: CSS Animations : animation-duration value set to 0 (zero).</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-name-property" />
        <link rel="help" href="http://www.w3.org/TR/css3-animations/#animation-duration-property" />
        <link rel="author" title="Nokia Inc." href="http://www.nokia.com/" />
        <meta name="flags" content="animated" />
        <meta name="assert" content="When animation-duration is set to 0 (zero), the animation cycle is immediate (i.e. there will be NO animation seen)." />
        <style type="text/css">
        /* <![CDATA[ */
            @-webkit-keyframes sample {
                                             from {
                                                      left: 150px;
                                                  }
                                                   to {
                                                    left: 0px;
                                                  }
                                           }
                                           
            @-moz-keyframes sample {
                                             from {
                                                      left: 150px;
                                                  }
                                                   to {
                                                    left: 0px;
                                                  }
                                           }
                                           
            @keyframes sample {
                                             from {
                                                      left: 150px;
                                                  }
                                                   to {
                                                    left: 0px;
                                                  }
                                           }
                .abc {
                     background-color: blue;
                     width: 100px;
                     height: 100px;
                     padding: 0.2em 1em;
                     margin: 6em;
                     position: absolute;
                     left: 0px;
                     
                     -webkit-animation-name: sample;
                     -webkit-animation-duration: 0s;
                     
                     -moz-animation-name: sample;
                     -moz-animation-duration: 0s;
                     
                     animation-name: sample;
                     animation-duration: 0s;
                    }
					.def {
                     position: absolute;
                     background-color: red;
                     left: 0px;
                     width: 100px;
                     height: 100px;
                     padding: 0.2em 1em;
                     margin: 6em;
                     z-index: -1;
                    }
        /* ]]> */
        </style>
    </head>
    <body>
        <p id="testdetails">
            Assertion: When animation-duration is set to 0 (zero), the animation cycle is immediate (i.e. there will be NO animation seen).
        </p>
        <p>
            <ul>
                <li>PASS if a blue colored box with text "CSS3 Testing Content" appears below and NO animation is seen. Also no red should be visible on this page.</li>
                <li>FAIL if blue box is animated/moved or if red is visible.</li>
            </ul>
        </p>
        <div class="abc">
            CSS3 Testing Content
        </div>
		 <div class="def">
            Reference
        </div>
    </body>
</html>