elementsFromPoint-table.html | Explore in Territory

<!DOCTYPE HTML>
<script src="../../../resources/js-test.js"></script>
<script src="resources/elementsFromPoint.js"></script>
<style>
html, body {
    margin: 0;
    padding: 0;
}
#testtable {
    margin: 100px;
    width: 200px;
    height: 200px;
    background-color: rgba(0,180,0,0.2);
}
#testtable tr {
    background-color: rgba(180,0,0,0.2);
}
#testtable td {
    background-color: rgba(0,0,180,0.2);
}
.rtl {
    direction: rtl;
}
.tblr {
    -webkit-writing-mode: vertical-lr;
}
</style>
<div id='sandbox'>
    <table id='testtable'>
        <tr id='tr1'>
            <td id='td11'></td>
            <td id='td12'></td>
            <td id='td13'></td>
            <td id='td14'></td>
        </tr>
        <tr id='tr2'>
            <td id='td21'></td>
            <td id='td22'></td>
            <td id='td23'></td>
            <td id='td24'></td>
        </tr>
        <tr id='tr3'>
            <td id='td31'></td>
            <td id='td32'></td>
            <td id='td33'></td>
            <td id='td34'></td>
        </tr>
        <tr id='tr4'>
            <td id='td41'></td>
            <td id='td42'></td>
            <td id='td43'></td>
            <td id='td44'></td>
        </tr>
    </table>
</div>
<div id="console"></div>
<script>
window.jsTestIsAsync = true;

if (window.testRunner)
    testRunner.dumpAsText();

onload = function() {
    // Check area hits fully inside table cells.
    assertElementsFromPoint('document.elementsFromPoint(125, 125)', [td11, testtable, sandbox, document.body, document.documentElement]);
    assertElementsFromPoint('document.elementsFromPoint(275, 125)', [td14, testtable, sandbox, document.body, document.documentElement]);
    assertElementsFromPoint('document.elementsFromPoint(175, 175)', [td22, testtable, sandbox, document.body, document.documentElement]);
    assertElementsFromPoint('document.elementsFromPoint(125, 275)', [td41, testtable, sandbox, document.body, document.documentElement]);

    // Check area hits between cells.
    assertElementsFromPoint('document.elementsFromPoint(100, 100)', [testtable, sandbox, document.body, document.documentElement]);
    assertElementsFromPoint('document.elementsFromPoint(199, 199)', [testtable, sandbox, document.body, document.documentElement]);

    // Check hit tests on right-to-left table.
    testtable.setAttribute('class', 'rtl');
    assertElementsFromPoint('document.elementsFromPoint(125, 125)', [td14, testtable, sandbox, document.body, document.documentElement]);
    assertElementsFromPoint('document.elementsFromPoint(275, 125)', [td11, testtable, sandbox, document.body, document.documentElement]);
    assertElementsFromPoint('document.elementsFromPoint(100, 100)', [testtable, sandbox, document.body, document.documentElement]);
    assertElementsFromPoint('document.elementsFromPoint(199, 199)', [testtable, sandbox, document.body, document.documentElement]);

    // Check hit tests on a flipped (tb-lr) table.
    testtable.setAttribute('class', 'tblr');
    assertElementsFromPoint('document.elementsFromPoint(125, 275)', [td14, testtable, sandbox, document.body, document.documentElement]);
    assertElementsFromPoint('document.elementsFromPoint(275, 125)', [td41, testtable, sandbox, document.body, document.documentElement]);
    assertElementsFromPoint('document.elementsFromPoint(100, 100)', [testtable, sandbox, document.body, document.documentElement]);
    assertElementsFromPoint('document.elementsFromPoint(199, 199)', [testtable, sandbox, document.body, document.documentElement]);

    finishJSTest();
}
</script>
chromium/third_party/blink/web_tests/fast/dom/elementsFromPoint/elementsFromPoint-table.html
