JSFiddle - React, Tailwind, and code Playground

by Brodingo

HTML

<span>Hello</span>

<table id="log"><tr><th>Assigned</th><th>Computed</th></tr></table>

CSS

span{
  position: absolute;
  }
  
#log {
  padding-top: 40px;
  }

.diff {
  background: gainsboro;
  color: red;
  }
  
body {
  font-family: monospace;
  }

JavaScript

var dvals = [
'none',
'inline',
'block',
'inline-block',
'contents',
'list-item',
'inline-list-item',
'table',
'inline-table',
'table-cell',
'table-column',
'table-column-group',
'table-footer-group',
'table-header-group',
'table-row',
'table-row-group',
'table-caption',
'flex',
'inline-flex',
'grid',
'inline-grid',
'ruby',
'ruby-base',
'ruby-text',
'ruby-base-container',
'ruby-text-container',
'run-in',
'inherit',
'initial',
'unset'
];

$log = $('#log');
$span = $('span');

// What is the computed display when an element is pos abs?
for (var i in dvals) {
  $span.css('display', dvals[i]);
  $log.append('<tr class="'+(dvals[i]!==$span.css('display')?'diff':'')+'"><td>'+dvals[i]+'</td><td>'+$span.css('display')+'</td></tr>');
}