<!DOCTYPE html>
<html>
    <head>
        <script src="../../resources/js-test-pre.js"></script>
    </head>
    <body style="margin: 0; padding: 0;">
        <div style="margin: 0; width: 700px; margin: 10px; background: black; overflow: hidden;">
            <div id="test" style="width: 697px; height: 200px; background-color: red; margin: 0 auto"></div>
        </div>
        <script>
            var testEl = document.getElementById('test');
            var testRect = testEl.getBoundingClientRect();
            var parentRect = testEl.parentElement.getBoundingClientRect();

            var expectedMarginWidth = String((parentRect.width - testRect.width) / 2);
            shouldBe('testRect.left - parentRect.left', expectedMarginWidth);
            shouldBe('parentRect.right - testRect.right', expectedMarginWidth);
        </script>
    </body>
</html>