<!DOCTYPE html>
<script src="../../resources/js-test.js"></script>
<p>Test that a table-caption with a table-cell sibling is wrapped inside an inline-table when the parent is inline.</p>
<span>
<div id="first" style="display:table-caption; width:100%; height:40px; background:blue;"> </div>
<div id="second" style="display:table-cell; width:80px; height:40px; background:blue;"> </div>
<span id="last">There should be a blue square to the left of this line.</span>
</span>
<div id="console"></div>
<script>
var firstRects = document.getElementById('first').getClientRects();
var secondRects = document.getElementById('second').getClientRects();
var lastRects = document.getElementById('last').getClientRects();
shouldBe("firstRects.length", "1");
shouldBe("secondRects.length", "1");
shouldBe("lastRects.length", "1");
shouldBe("secondRects[0].top", "firstRects[0].top + 40");
shouldBe("secondRects[0].left", "firstRects[0].left");
shouldBe("secondRects[0].bottom", "secondRects[0].top + 40");
shouldBeGreaterThanOrEqual("lastRects[0].right", "secondRects[0].left");
shouldBeGreaterThanOrEqual("lastRects[0].top", "firstRects[0].top");
shouldBeGreaterThanOrEqual("secondRects[0].bottom", "lastRects[0].bottom");
</script>