JSFiddle - React, Tailwind, and code Playground

by Chris Rebert

HTML

<div id="a"></div>
<div id="b"></div>

CSS

#a {
    height: 100px;
    width: 200px;
    background-color: blue;
}
#b {
    position: absolute;
    top: 105px;
    left: 210px;
    height: 100px;
    width: 200px;
    background-color: aqua;
}

JavaScript

function assert_true(x, msg) {
    console.log("TRUE?: " + x + " -- " + msg);
}
function assert_equals(x, y, msg) {
    console.log("" + x + " == " + y + " ? -- " + msg);
}
(function () {
    var rects = document.getElementById('a').getClientRects();
    assert_equals(rects.length, 1, "DOMRectList should contain one item");
    var expectedRect = rects[0];
    var called = false;
    Element.prototype.getClientRects = function () {
        called = true;
        return rects;
    };
    var actualRect = document.getElementById('b').getBoundingClientRect();
    assert_true(called, "Replaced getClientRects should have been invoked by getBoundingClientRect");
    assert_equals(actualRect.top, expectedRect.top, "Returned DOMRect should use top from replaced getClientRects");
    assert_equals(actualRect.bottom, expectedRect.bottom, "Returned DOMRect should use bottom from replaced getClientRects");
    assert_equals(actualRect.left, expectedRect.left, "Returned DOMRect should use left from replaced getClientRects");
    assert_equals(actualRect.right, expectedRect.right, "Returned DOMRect should use right from replaced getClientRects");
})();