getClientRects doesn't work with list box option elements
[WebKit-https.git] / LayoutTests / fast / dom / HTMLSelectElement / listbox-items-client-rects.html
1 <script src="../../../resources/js-test-pre.js"></script>
2 <style>
3     select {
4         width: 100px;
5         height: 150px;
6         padding: 0px;
7         outline: 1px;
8     }
9     select::-webkit-scrollbar { display: none; }
10 </style>
11 <div id="testArea">
12     <select id="list" multiple>
13       <optgroup id="group" label="Group">
14         <option id="option1">Option 1</option>
15         <option id="option2">Option 2</option>
16       </optgroup>
17       <option id="option3">Option 3</option>
18     </select>
19     <br><br>
20 </div>
21 <div id="console"></div>
22 <script>
23     if (window.testRunner)
24         testRunner.dumpAsText();
25
26     var list = document.getElementById('list');
27     var listBoundingBox = list.getBoundingClientRect();
28     var listBoundingBoxes = list.getClientRects();
29
30     shouldBe("listBoundingBoxes.length", "1");
31     shouldBe("listBoundingBoxes[0].left", "listBoundingBox.left");
32     shouldBe("listBoundingBoxes[0].right", "listBoundingBox.right");
33     shouldBe("listBoundingBoxes[0].top", "listBoundingBox.top");
34     shouldBe("listBoundingBoxes[0].bottom", "listBoundingBox.bottom");
35     shouldBe("listBoundingBoxes[0].width", "listBoundingBox.width");
36     shouldBe("listBoundingBoxes[0].height", "listBoundingBox.height");
37
38     var group = document.getElementById('group')
39     var groupBoundingBox = group.getBoundingClientRect();
40     var groupBoundingBoxes = group.getClientRects();
41
42     shouldBe("groupBoundingBoxes.length", "1");
43     shouldBe("groupBoundingBoxes[0].left", "groupBoundingBox.left");
44     shouldBe("groupBoundingBoxes[0].right", "groupBoundingBox.right");
45     shouldBe("groupBoundingBoxes[0].top", "groupBoundingBox.top");
46     shouldBe("groupBoundingBoxes[0].bottom", "groupBoundingBox.bottom");
47     shouldBe("groupBoundingBoxes[0].width", "groupBoundingBox.width");
48     shouldBe("groupBoundingBoxes[0].height", "groupBoundingBox.height");
49
50     var option1 = document.getElementById('option1');
51     var option1BoundingBox = option1.getBoundingClientRect();
52     var option1BoundingBoxes = option1.getClientRects();
53
54     shouldBe("option1BoundingBoxes.length", "1");
55     shouldBe("option1BoundingBoxes[0].left", "option1BoundingBox.left");
56     shouldBe("option1BoundingBoxes[0].right", "option1BoundingBox.right");
57     shouldBe("option1BoundingBoxes[0].top", "option1BoundingBox.top");
58     shouldBe("option1BoundingBoxes[0].bottom", "option1BoundingBox.bottom");
59     shouldBe("option1BoundingBoxes[0].width", "option1BoundingBox.width");
60     shouldBe("option1BoundingBoxes[0].height", "option1BoundingBox.height");
61
62     var option2 = document.getElementById('option2');
63     var option2BoundingBox = option2.getBoundingClientRect();
64     var option2BoundingBoxes = option2.getClientRects();
65
66     shouldBe("option2BoundingBoxes.length", "1");
67     shouldBe("option2BoundingBoxes[0].left", "option2BoundingBox.left");
68     shouldBe("option2BoundingBoxes[0].right", "option2BoundingBox.right");
69     shouldBe("option2BoundingBoxes[0].top", "option2BoundingBox.top");
70     shouldBe("option2BoundingBoxes[0].bottom", "option2BoundingBox.bottom");
71     shouldBe("option2BoundingBoxes[0].width", "option2BoundingBox.width");
72     shouldBe("option2BoundingBoxes[0].height", "option2BoundingBox.height");
73
74     var option3 = document.getElementById('option3');
75     var option3BoundingBox = option3.getBoundingClientRect();
76     var option3BoundingBoxes = option3.getClientRects();
77
78     shouldBe("option3BoundingBoxes.length", "1");
79     shouldBe("option3BoundingBoxes[0].left", "option3BoundingBox.left");
80     shouldBe("option3BoundingBoxes[0].right", "option3BoundingBox.right");
81     shouldBe("option3BoundingBoxes[0].top", "option3BoundingBox.top");
82     shouldBe("option3BoundingBoxes[0].bottom", "option3BoundingBox.bottom");
83     shouldBe("option3BoundingBoxes[0].width", "option3BoundingBox.width");
84     shouldBe("option3BoundingBoxes[0].height", "option3BoundingBox.height");
85
86     var border = 1;
87     var optionHeight = option1BoundingBox.height;
88
89     shouldBe("groupBoundingBox.left", "listBoundingBox.left + border");
90     shouldBe("groupBoundingBox.top", "listBoundingBox.top + border");
91     shouldBe("groupBoundingBox.right", "listBoundingBox.right - border");
92     shouldBe("groupBoundingBox.bottom", "groupBoundingBox.top + 3 * optionHeight");
93     shouldBe("groupBoundingBox.width", "listBoundingBox.width - 2 * border");
94     shouldBe("groupBoundingBox.height", "3 * optionHeight");
95
96     shouldBe("option1BoundingBox.left", "listBoundingBox.left + border");
97     shouldBe("option1BoundingBox.top", "listBoundingBox.top + border + optionHeight");
98     shouldBe("option1BoundingBox.right", "listBoundingBox.right - border");
99     shouldBe("option1BoundingBox.bottom", "option1BoundingBox.top + option1BoundingBox.height");
100     shouldBe("option1BoundingBox.width", "listBoundingBox.width - 2 * border");
101
102     shouldBe("option2BoundingBox.left", "listBoundingBox.left + border");
103     shouldBe("option2BoundingBox.top", "listBoundingBox.top + border + 2 * optionHeight");
104     shouldBe("option2BoundingBox.right", "listBoundingBox.right - border");
105     shouldBe("option2BoundingBox.bottom", "option2BoundingBox.top + option2BoundingBox.height");
106     shouldBe("option2BoundingBox.width", "listBoundingBox.width - 2 * border");
107
108     shouldBe("option3BoundingBox.left", "listBoundingBox.left + border");
109     shouldBe("option3BoundingBox.top", "listBoundingBox.top + border + 3 * optionHeight");
110     shouldBe("option3BoundingBox.right", "listBoundingBox.right - border");
111     shouldBe("option3BoundingBox.bottom", "option3BoundingBox.top + option3BoundingBox.height");
112     shouldBe("option3BoundingBox.width", "listBoundingBox.width - 2 * border");
113
114     if (window.testRunner) {
115         var area = document.getElementById('testArea');
116         area.parentNode.removeChild(area);
117     }
118 </script>
119 <script src="../../../resources/js-test-post.js"></script>