summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/cssom-view/elementsFromPoint-table.html
blob: 9ecb614b6665bbaef61eab80226e521a0c18eb10 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE HTML>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.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 {
    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>
<script>
test(function() {
    assertElementsFromPoint('document', 125, 125,
        [td11, testtable, sandbox, document.body, document.documentElement]);
    assertElementsFromPoint('document', 275, 125,
        [td14, testtable, sandbox, document.body, document.documentElement]);
    assertElementsFromPoint('document', 175, 175,
        [td22, testtable, sandbox, document.body, document.documentElement]);
    assertElementsFromPoint('document', 125, 275,
        [td41, testtable, sandbox, document.body, document.documentElement]);
}, 'elementsFromPoint for points inside table cells');

test(function() {
    assertElementsFromPoint('document', 100, 100,
        [testtable, sandbox, document.body, document.documentElement]);
    assertElementsFromPoint('document', 199, 199,
        [testtable, sandbox, document.body, document.documentElement]);
}, 'elementsFromPoint for points between table cells');

testtable.setAttribute('class', 'rtl');
test(function() {
    assertElementsFromPoint('document', 125, 125,
        [td14, testtable, sandbox, document.body, document.documentElement]);
    assertElementsFromPoint('document', 275, 125,
        [td11, testtable, sandbox, document.body, document.documentElement]);
    assertElementsFromPoint('document', 100, 100,
        [testtable, sandbox, document.body, document.documentElement]);
    assertElementsFromPoint('document', 199, 199,
        [testtable, sandbox, document.body, document.documentElement]);
}, 'elementsFromPoint for points inside cells in a right-to-left table');

testtable.setAttribute('class', 'tblr');
test(function() {
    assertElementsFromPoint('document', 125, 275,
        [td14, testtable, sandbox, document.body, document.documentElement]);
    assertElementsFromPoint('document', 275, 125,
        [td41, testtable, sandbox, document.body, document.documentElement]);
    assertElementsFromPoint('document', 100, 100,
        [testtable, sandbox, document.body, document.documentElement]);
    assertElementsFromPoint('document', 199, 199,
        [testtable, sandbox, document.body, document.documentElement]);
}, 'elementsFromPoint for points inside cells in a flipped (writing-mode:vertical-lr) table');
</script>