<!DOCTYPE html>
<html><head>
        <meta charset="utf-8">
        <title>CSS Transitions Test: transitionend event for pseudo elements</title>
        <meta content="Test checks that TransitionEnd events are fired for pseudo-elements" name="assert">
        <link href="http://www.w3.org/TR/css3-transitions/#transition-events" rel="help" title="5. Transition Events">
        <link href="http://www.w3.org/TR/CSS21/generate.html#before-after-content" rel="help" title="CSS21 - 12.1 The :before and :after pseudo-elements">
        <link href="http://www.w3.org/TR/css3-content/" rel="help" title="CSS3 Generated and Replaced Content Module">
        <link href="http://rodneyrehm.de/en/" rel="author" title="Rodney Rehm">
        <meta content="dom" name="flags">
        
        <script src="/resources/testharness.js" type="text/javascript"></script>
        <script src="/resources/testharnessreport.js" type="text/javascript"></script>
        
        <script src="./support/vendorPrefix.js" type="text/javascript"></script>
        <script src="./support/helper.js" type="text/javascript"></script>
        <script src="./support/runParallelAsyncHarness.js" type="text/javascript"></script>
        <script src="./support/generalParallelTest.js" type="text/javascript"></script>
        <script src="./support/properties.js" type="text/javascript"></script>

        <style type="text/css">
            #offscreen {
                position: absolute;
                top: -100000px;
                left: -100000px;
                width: 100000px;
                height: 100000px;
            }
        </style>
        
        <script id="metadata_cache">/*
        {
          "transition padding-left on :before / events": {},
          "transition padding-left on :after / events": {}
        }
        */</script>
    </head>
    <body>
        <!-- required by testharnessreport.js -->
        <div id="log"></div>
        <!-- elements used for testing -->
        <div class="fixture" id="fixture">
            <div class="container">
                <div class="transition">Text sample</div>
            </div>
        </div>
        <div id="offscreen"></div>
        
        <!--
            SEE ./support/README.md for an abstract explanation of the test procedure
            http://test.csswg.org/source/contributors/rodneyrehm/submitted/css3-transitions/README.md
        -->

        <script>
            // this is yet to be specified behavior
        
            // this test takes its time, give it a minute to run
            var timeout = 60000;
            setup({timeout: timeout});
            
            var tests = [
                {
                    name: "transition padding-left on :before",
                    pseudo: 'before',
                    property: 'padding-left',
                    flags: {},
                    from: {'padding-left': '1px', 'content': '""'},
                    to: {'padding-left': '10px'},
                    expect: [
                        'padding-left:before:0.1s'
                    ]
                }, {
                    name: "transition padding-left on :after",
                    pseudo: 'after',
                    property: 'padding-left',
                    flags: {},
                    from: {'padding-left': '1px', 'content': '""'},
                    to: {'padding-left': '10px'},
                    expect: [
                        'padding-left:after:0.1s'
                    ]
                }
            ];
            
            // general transition-duration
            var duration = '0.5s';

            runParallelAsyncHarness({
                // array of test data
                tests: tests,
                // the number of tests to run in parallel
                testsPerSlice: 50,
                // milliseconds to wait before calling teardown and ending test
                duration: parseFloat(duration) * 1000,
                // the global suite timeout
                timeout: timeout,
                // prepare individual test
                setup: function(data, options) {
                    var styles = {};
                    styles['.container'] = {};
                    styles['.transition'] = {};
                    styles['.transition:' + data.pseudo.name] = data.from;
                    styles['.transition.how:' + data.pseudo.name] = {transition: 'all .1s linear 0s'};
                    styles['.transition.to:' + data.pseudo.name] = data.to;

                    generalParallelTest.setup(data, options);
                    generalParallelTest.addStyles(data, options, styles);
                },
                // cleanup after individual test
                teardown: generalParallelTest.teardown,
                // invoked prior to running a slice of tests
                sliceStart: generalParallelTest.sliceStart,
                // invoked after running a slice of tests
                sliceDone: generalParallelTest.sliceDone,
                // test cases, make them as granular as possible
                cases: {
                    // test TransitionEnd events
                    'events': {
                        start: function(test, data, options) {
                            // kick off the transition
                            generalParallelTest.startTransition(data);
                        },
                        done: function(test, data, options) {
                            // make sure we got the event for the tested property only
                            test.step(generalParallelTest.assertExpectedEventsFunc(data, 'transition', data.expect));
                        }
                    }
                },
                // called once all tests are done
                done: generalParallelTest.done
            });
        </script>
    
</body></html>