JSFiddle - React, Tailwind, and code Playground

by Chris Rebert

HTML

<div id="b"></div>
<div id="a"></div>
<div id="spacer"></div>
<ul id="res"></ul>

CSS

#a {
    background-color: blue;
}
#b {
    background-color: yellow;
}
#a, #b {
    height: 100px;
    width: 200px;
}
#b {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
}
#spacer {
    height: 50px;
    width: 5px;
}

JavaScript

function rect() {
    return $('#a')[0].getBoundingClientRect();
}
var ayRect = rect();
$('<li>Had width?: ' + (ayRect.width !== undefined) + '</li>').appendTo('#res');
var canset = true;
try {
    ayRect.left = 25;
} catch (e1) {
    canset = false;
}
$('<li>Can change value of existing prop?: ' + canset + '</li>').appendTo('#res');
ayRect = rect();
var canadd = true;
try {
    ayRect.foo = 12;
} catch (e2) {
    canadd = false;
}
$('<li>Can add new prop?: ' + canadd + '</li>').appendTo('#res');
var beeRect = $('#b')[0].getBoundingClientRect();
var thewidth = Math.round(beeRect.right - beeRect.left);
var rotates = thewidth === 100;
$('<li>Supports rotation?: ' + rotates + ' ; width='+ thewidth +'==100?</li>').appendTo('#res');
$('<li>Done.</li>').appendTo('#res');