JSFiddle - React, Tailwind, and code Playground

by ericwilligers

HTML

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

CSS

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

JavaScript

'use strict';
const container = document.getElementById('container');
const target = document.getElementById('target');
test('background', '1px 2px / 3px 4px space round fixed border-box padding-box, url("https://example.com/") red');
test('cursor', 'url("https://example.com/"), alias');

function test(property, valueWithQuotes) {
  const heading = document.createElement('h2');
  container.appendChild(heading);
  heading.textContent = property;

  const table = document.createElement('table');
  container.appendChild(table);
  const headerRow = document.createElement('tr');
  table.appendChild(headerRow);
  const addHeaderCell = (content) => {
    const cell = document.createElement('th');
    headerRow.appendChild(cell);
    cell.textContent = content;
  }
  addHeaderCell('Assigned');
  addHeaderCell('Serialized');
  addHeaderCell('Computed');
  
  for (let hasQuotes of [true, false]) {
    const assigned = hasQuotes ? valueWithQuotes : valueWithQuotes.replace(/\"/g , '');
     
    target.style[property] = assigned;

    const row = document.createElement('tr');
    table.appendChild(row);
    const addCell = (content) => {
      const cell = document.createElement('td');
      row.appendChild(cell);
      cell.textContent = content;
    }
    addCell(assigned);
    addCell(target.style[property]);
    addCell(getComputedStyle(target)[property]);
  }
}