JSFiddle - React, Tailwind, and code Playground

by ericwilligers

HTML

<table id="report">
  <tr>
    <th>Property</th>
    <th>Assigned</th>
    <th>Serialized</th>
    <th>Computed</th>
    <th>Round-trips?</th>
  </tr>
</table>
<div id="container">
  <div id="target">
    <div id="child"></div>  
  </div>
</div>

CSS

#report {
  color: black;
  background-color: white;
}

#container {
  transform-style: preserve-3d;
  width: 100px;
  height: 100px;
  font-size: 20px;
  column-gap: 20px;
  column-width: 20px;
}

#target {
  image-rendering: -webkit-optimize-contrast;
}

JavaScript

test('animationName', ['Foo', '"Foo"', '" Foo "']);
test('animationName', ['123', '"123"', '" 123 "']);
test('animationName', ['Initial', '"Initial"', '" Initial "']);
test('animationName', ['Default', '"Default"', '" Default "']);
test('animationName', ['None', '"None"', '" None "']);
test('animationName', ['1', '"1"', '" 1 "']);
test('animationName', ['', '""', '" "']);
test('animationName', ['"!@#$%^&*()"', '"{}|:\\\"<>?"']);

function test(property, values) {

if (!Array.isArray(values)) {
  values = [ values ];
}

for (let value of values) {
  const row = document.createElement('tr');
  const log = (content) => {
    // console.log(content);
    const cell = document.createElement('td');
    cell.textContent = "'" + content + "'";
    row.appendChild(cell);
  }
  
  target.style[property] = '';
  target.style[property] = value;
  log(property);
  log(value);
  log(target.style[property]);
  let computed = getComputedStyle(target)[property];
  log(computed);
  target.style[property] = computed;
	let roundTrips = getComputedStyle(target)[property] == computed;
  log(roundTrips ? 'yes' : 'no');

  report.appendChild(row);
  target.style[property] = '';
}

}