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>
  </tr>
</table>
<div id="container">
  <div id="target">
    <div id="child"></div>  
  </div>
</div>

CSS

#report {
  color: black;
  background-color: white;
}
#target {
  font-size: 40px;
}

JavaScript

test_valid_value("background-image", "radial-gradient(calc(1em + 2px) at calc(1em + 3px) calc(1em + 4px), blue, orange)");
test_valid_value("border-image-source", "conic-gradient(at calc(1em + 3px) calc(1em + 4px), blue, orange)");
test_valid_value("list-style-image", "linear-gradient(45deg, blue, orange)");
test_valid_value("shape-outside", "linear-gradient(45deg, blue, orange)");
test_valid_value("-webkit-mask-box-image-source", "linear-gradient(45deg, blue, orange)");
test_valid_value("-webkit-mask-image", "linear-gradient(45deg, blue, orange)");
test_valid_value("-webkit-box-reflect", "below 2px linear-gradient(45deg, blue, orange)");

function test_valid_value(property, values, expected) {

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]);
  log(getComputedStyle(target)[property]);


  if (target.style[property] === '')
  	row.style['font-weight'] = 'bold';
  else if (target.style[property] !== (expected ? expected : value))
  	row.style['color'] = 'red';

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

}