Delayed snapshot and callback test

by tonytlwu

HTML

<pre>&nbsp;</pre>
<div id="progress"><span></span></div>
<div id="blocks"></div>
<!--

Scenarios

1. No delay in snapshotting (no intro with coloured blocks), counting starts straight away
2. No delay in snapshotting (no intro with coloured blocks), counting starts upon snapshotFinished callback
3. Snapshot delay added with intro of 12 coloured blocks, counting starts straight after all 12 coloured blocks have been added
4. Snapshot delay added with intro of 12 coloured blocks, counting starts upon snapshotFinished callback
5. Snapshot delay added with intro of 12 coloured blocks, counting starts upon snapshotFinished callback with an offset of 5000

Whenever counting starts, the number will start counting up from 0, except for the last scenario, which counts up from 5000. When the counting starts, the purple progress bar will also start transitioning from 0% to 100%.

Expected results:

1. Unsure - snapshot will probably contain a small number and parts of the progress bar filled
2. Snapshot will contain no number and 0% progress bar. Counting and animation starts after snapshot is swapped with live webview
3. Unsure - snapshot will probably contain a small number and parts of the progress bar filled as well as 12 coloured blocks
4. Snapshot will contain no number and 0% progress bar as well as all 12 coloured blocks. Counting and animation starts after snapshot is swapped with live webview
5. Snapshot will contain no number and 0% progress bar as well as all 12 coloured blocks. Counting and animation starts after snapshot is swapped with live webview - starting with 5000 as the initial count value

-->

CSS

#progress {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #999;
    height: 50px;
    margin-bottom: 2%;
    padding: 1%;
}

#progress > span {
    width: 0;
    height: 100%;
    display: block;
    background: purple;
    -webkit-transition: all 2s linear;
    transition: all 2s linear;
}

#progress.active > span {
    width: 100%;
}

#blocks {
    width: 100%;
    font-size: 0;
    text-align: justify;
}
#blocks > div {
    width: 23%;
    display: inline-block;
    height: 0;
    box-sizing: border-box;
    padding-top: 23%;
    margin-bottom: 2%;
    margin-left: 1%;
    margin-right: 1%;
    /* Animation */
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn;
    -webkit-animation-duration: .75s;
    animation-duration: .75s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
#blocks > div:nth-child(3n+1) {
    background: red;
}
#blocks > div:nth-child(3n+2) {
    background: green;
}
#blocks > div:nth-child(3n+3) {
    background: blue;
}
/* Keyframes */
@-webkit-keyframes bounceIn {
    0%, 20%, 40%, 60%, 80%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }
    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
        -webkit-transform: scale3d(.97, .97, .97);
        transform: scale3d(.97, .97, .97);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@keyframes bounceIn {
  ...

JavaScript

function startCounter(offset) {
    var startValue = typeof offset === "number" ? Math.max(offset, 0) : 0;
    setInterval(function () {
        startValue++;
        $('pre').html(startValue);
    }, 0);
    
    $('#progress').addClass('active');
}

function addBlocks(num, callback) {
    var x = 0;
    var blocksInterval = setInterval(function(){
        if ( x < num ) {
            $('#blocks').append('<div></div> ');
            x++;
        } else {
            clearInterval( blocksInterval );
            if ( typeof callback === "function" ) {
                callback();
            }
        }
    }, 50);
}

addBlocks(12, function(){
    startCounter();
});