JSFiddle - React, Tailwind, and code Playground

by ericwilligers

HTML

<div id="report"></div>
<div id="container"></div>

CSS

#report {
  text-align: left
}
#container div {
  transition-property: OneTwoThree;
  transition-duration: 123s;
  transition-timing-function: steps(123);
  transition-delay: -123s;
}

JavaScript

'use strict';
const report = document.getElementById('report');
const container = document.getElementById('container');
const properties = [
  'transition-property',
	'transition-duration',
  'transition-timing-function',
  'transition-delay',
  'transition',
];

test('transition-delay', '-5s');
test('transition', '-5s');
test('transition-property', 'Linear');
test('transition', 'Linear');

function createElement(parent, tag, textContent) {
  const result = document.createElement(tag);
  parent.appendChild(result);
  if (textContent)
  	result.textContent = textContent;
	return result;
}

function test(property, value) {
  const target = createElement(container, 'div');
  target.style[property] = value;
  
  const section = createElement(report, 'section');
  const heading = createElement(section, 'h3', property + " = '" + value + "'");
  
  const table = createElement(section, 'table');
  {
    const tr = createElement(table, 'tr');
    createElement(tr, 'th', 'Property');
    createElement(tr, 'th', 'Serialized');
    createElement(tr, 'th', 'Computed');
  }
  for (let p of properties) {
    const tr = createElement(table, 'tr');
    createElement(tr, 'td', p);
    createElement(tr, 'td', target.style[p]);
    createElement(tr, 'td', getComputedStyle(target)[p]);
  }
}