<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>CSS Tests: CSS Animations : animation-name set to valid keyframes rule name</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-name is set to refer to a keyframe at-rule that provides the property values for the animation; desired animation should be seen.">
        <style type="text/css">
        /*  */
            @-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: relative;
                     
                     -webkit-animation-name: sample;
                     -webkit-animation-duration: 10s;
                     
                     -moz-animation-name: sample;
                     -moz-animation-duration: 10s;
                     
                     animation-name: sample;
                     animation-duration: 10s;
                    }
        /*  */
        </style>
    </head>
    <body>
        <p id="testdetails">
            <p>
                Assertion: When animation-name is set to refer to a keyframe at-rule that provides the property values for the animation; desired animation should be seen.
            </p>
            <ul>
                <li>PASS if a blue colored box with text "CSS3 Testing Content"  inside it appears below and animates/moves towards left.</li>
                <li>FAIL if box fails to transcend towards left.</li>
            </ul>
        </p>
        <div class="abc">        
          CSS3 Testing Content
        </div>
    </body>
</html>