Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Test case for $.once #75

Closed
fcalderan opened this issue Dec 10, 2015 · 6 comments
Closed

Test case for $.once #75

fcalderan opened this issue Dec 10, 2015 · 6 comments
Labels
tests

Comments

@fcalderan
Copy link

Looking into the source code I've found an undocumented method once and I've tested it: in this example I want to move one div twice, but I want to execute the transitionend handler just once.

Expecting result: the number inside the foobardiv should be increased one time in all browsers
Actual result: the number inside the div increases twice on Chrome 47.0.2526.80 (64-bit) and Safari 9.0.2 (9537.86.3.9.1) and increases properly once on Firefox 42.0 on a MacOSX 10.9.5 (see screenshot below about the comparison between Chrome and Firefox)
Hint: it seems the problem is related to 'webkitTransitionEnd transitionend' event type string: if I specify only 'transitionend' the demo works as expected in all the tested browsers.

once

This is my test case

<html>

    <head>
        <style>
        div {
            border: 3px #79b solid;
            display: inline-block;
            padding: 1em 3em;
            transform: translateX(0);
            transition: all 3s;
        }
        </style>
    </head>

    <body>

        <div id="foobar">0</div>
        <script src="bliss.min.js"></script>

        <script>
        $.ready().then(function() {
            var foobar = $('#foobar');
            foobar._.style({
                transform: 'translateX(160px)'
            });

            /* this is executed twice */
            foobar._.once('webkitTransitionEnd transitionend', function l(evt) {
                this.textContent = +this.textContent + 1;
                this._.style({
                    transform: 'translateX(0)'
                })
            });

            /* tried also this */
            /* foobar._.once({
                'webkitTransitionEnd transitionend': function l(evt) {
                    this.textContent = +this.textContent + 1;
                    this._.style({
                        transform: 'translateX(0)'
                    })
                }
            }); */


        });
        </script>
@fcalderan fcalderan changed the title Test for $.once Test case for $.once Dec 10, 2015
@guoguo12 guoguo12 added the tests label Dec 10, 2015
@zdfs
Copy link
Collaborator

zdfs commented Dec 10, 2015

It seems like Chrome understands both webkitTransitionEnd and transitionend events and executes once for each event?

@fcalderan
Copy link
Author

@zdfs In this case I suppose that on chrome and safari the counter would be immediately 2 after the first animation (since they would be both executed once) and not at the end

@LeaVerou
Copy link
Owner

Oh, $.once() is undocumented indeed! That was not on purpose, it was just forgotten. We/I need to document it :)
Nice test too. Easy to fix as well, I think (it just needs a loop where it removes the event). If nobody else fixes it by tomorrow, I'll push a fix (I have a deadline tomorrow, so can't do much right now).
Thanks for both catches @fcalderan!

This was referenced Dec 11, 2015
Closed
Closed
@LeaVerou
Copy link
Owner

Does it pass now?

@fcalderan
Copy link
Author

The test case works fine both in Chrome and Safari.

@LeaVerou
Copy link
Owner

Awesome, closing this then! Thanks @fcalderan!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
tests
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@LeaVerou @fcalderan @zdfs @guoguo12