JSFiddle - React, Tailwind, and code Playground

by mgiuffrida

HTML

<div>Divvy McDivface</div>

CSS

div {
  background: grey;
  height: 200px;
}

JavaScript

console.clear();

var div = document.querySelector('div');
// var dur = 500;  // rarely fails: end (36 should be 10)
var dur = 100;  // sometimes fails: end (75 should be 10)
// var dur = 10;  // often fails: end (400 should be 10)

var animation;
function playAnimation() {
  animation = div.animate(
    [{height: '400px'}, {height: '10px'}],
    {duration: dur, fill: 'forwards'}
  );
};

function reset() {
  animation && animation.cancel();
}

function test() {
  var assertEquals = function(exp, act, time) { if (exp != act) throw new Error(`${time} (${act} should be ${exp})`); };
  reset();
  assertEquals(200, div.offsetHeight, 'before');  // OK (synchronous)
  playAnimation();
  assertEquals(400, div.offsetHeight, 'start');  // OK (synchronous)
  setTimeout(function() {
    assertEquals(10, div.offsetHeight, 'end');  // Flaky
  }, dur + 1 /* ??? */);
}

div.addEventListener('click', test);
test();