table-parts-in-inline.html | Explore in Territory

<!DOCTYPE html>
<script src="../../resources/js-test.js"></script>
<p>Test that a table part child of an inline is wrapped inside an inline-table.</p>
<div id="cell" class="test">
    <span class="first">This</span> text
    <span>
        should be
        <div style="display:table-cell;">on</div>
        one
    </span>
    <span class="last">line.</span>
</div>
<div id="row" class="test">
    <span class="first">This</span> text
    <span>
        should be
        <div style="display:table-row;">on</div>
        one
    </span>
    <span class="last">line.</span>
</div>
<div id="row-group" class="test">
    <span class="first">This</span> text
    <span>
        should be
        <div style="display:table-row-group;">on</div>
        one
    </span>
    <span class="last">line.</span>
</div>
<div id="console"></div>
<script>
    var tests = document.querySelectorAll(".test");
    for (var i = 0; i < tests.length; i++) {
	debug("Testing " + tests[i].id + ":");
	var id = "#" + tests[i].id;
        var firstTop = document.querySelector(id + ' > .first').getClientRects()[0].top;
        var lastTop = document.querySelector(id + ' > .last').getClientRects()[0].top;
        shouldBe("firstTop", "lastTop");
    }
</script>
chromium/third_party/blink/web_tests/fast/table/table-parts-in-inline.html
