120 lines
5.7 KiB
HTML
120 lines
5.7 KiB
HTML
<script src="../../../resources/js-test-pre.js"></script>
|
|
<style>
|
|
select {
|
|
width: 100px;
|
|
height: 150px;
|
|
padding: 0px;
|
|
outline: 1px;
|
|
}
|
|
select::-webkit-scrollbar { display: none; }
|
|
</style>
|
|
<div id="testArea">
|
|
<select id="list" multiple>
|
|
<optgroup id="group" label="Group">
|
|
<option id="option1">Option 1</option>
|
|
<option id="option2">Option 2</option>
|
|
</optgroup>
|
|
<option id="option3">Option 3</option>
|
|
</select>
|
|
<br><br>
|
|
</div>
|
|
<div id="console"></div>
|
|
<script>
|
|
if (window.testRunner)
|
|
testRunner.dumpAsText();
|
|
|
|
var list = document.getElementById('list');
|
|
var listBoundingBox = list.getBoundingClientRect();
|
|
var listBoundingBoxes = list.getClientRects();
|
|
|
|
shouldBe("listBoundingBoxes.length", "1");
|
|
shouldBe("listBoundingBoxes[0].left", "listBoundingBox.left");
|
|
shouldBe("listBoundingBoxes[0].right", "listBoundingBox.right");
|
|
shouldBe("listBoundingBoxes[0].top", "listBoundingBox.top");
|
|
shouldBe("listBoundingBoxes[0].bottom", "listBoundingBox.bottom");
|
|
shouldBe("listBoundingBoxes[0].width", "listBoundingBox.width");
|
|
shouldBe("listBoundingBoxes[0].height", "listBoundingBox.height");
|
|
|
|
var group = document.getElementById('group')
|
|
var groupBoundingBox = group.getBoundingClientRect();
|
|
var groupBoundingBoxes = group.getClientRects();
|
|
|
|
shouldBe("groupBoundingBoxes.length", "1");
|
|
shouldBe("groupBoundingBoxes[0].left", "groupBoundingBox.left");
|
|
shouldBe("groupBoundingBoxes[0].right", "groupBoundingBox.right");
|
|
shouldBe("groupBoundingBoxes[0].top", "groupBoundingBox.top");
|
|
shouldBe("groupBoundingBoxes[0].bottom", "groupBoundingBox.bottom");
|
|
shouldBe("groupBoundingBoxes[0].width", "groupBoundingBox.width");
|
|
shouldBe("groupBoundingBoxes[0].height", "groupBoundingBox.height");
|
|
|
|
var option1 = document.getElementById('option1');
|
|
var option1BoundingBox = option1.getBoundingClientRect();
|
|
var option1BoundingBoxes = option1.getClientRects();
|
|
|
|
shouldBe("option1BoundingBoxes.length", "1");
|
|
shouldBe("option1BoundingBoxes[0].left", "option1BoundingBox.left");
|
|
shouldBe("option1BoundingBoxes[0].right", "option1BoundingBox.right");
|
|
shouldBe("option1BoundingBoxes[0].top", "option1BoundingBox.top");
|
|
shouldBe("option1BoundingBoxes[0].bottom", "option1BoundingBox.bottom");
|
|
shouldBe("option1BoundingBoxes[0].width", "option1BoundingBox.width");
|
|
shouldBe("option1BoundingBoxes[0].height", "option1BoundingBox.height");
|
|
|
|
var option2 = document.getElementById('option2');
|
|
var option2BoundingBox = option2.getBoundingClientRect();
|
|
var option2BoundingBoxes = option2.getClientRects();
|
|
|
|
shouldBe("option2BoundingBoxes.length", "1");
|
|
shouldBe("option2BoundingBoxes[0].left", "option2BoundingBox.left");
|
|
shouldBe("option2BoundingBoxes[0].right", "option2BoundingBox.right");
|
|
shouldBe("option2BoundingBoxes[0].top", "option2BoundingBox.top");
|
|
shouldBe("option2BoundingBoxes[0].bottom", "option2BoundingBox.bottom");
|
|
shouldBe("option2BoundingBoxes[0].width", "option2BoundingBox.width");
|
|
shouldBe("option2BoundingBoxes[0].height", "option2BoundingBox.height");
|
|
|
|
var option3 = document.getElementById('option3');
|
|
var option3BoundingBox = option3.getBoundingClientRect();
|
|
var option3BoundingBoxes = option3.getClientRects();
|
|
|
|
shouldBe("option3BoundingBoxes.length", "1");
|
|
shouldBe("option3BoundingBoxes[0].left", "option3BoundingBox.left");
|
|
shouldBe("option3BoundingBoxes[0].right", "option3BoundingBox.right");
|
|
shouldBe("option3BoundingBoxes[0].top", "option3BoundingBox.top");
|
|
shouldBe("option3BoundingBoxes[0].bottom", "option3BoundingBox.bottom");
|
|
shouldBe("option3BoundingBoxes[0].width", "option3BoundingBox.width");
|
|
shouldBe("option3BoundingBoxes[0].height", "option3BoundingBox.height");
|
|
|
|
var border = 1;
|
|
var optionHeight = option1BoundingBox.height;
|
|
|
|
shouldBe("groupBoundingBox.left", "listBoundingBox.left + border");
|
|
shouldBe("groupBoundingBox.top", "listBoundingBox.top + border");
|
|
shouldBe("groupBoundingBox.right", "listBoundingBox.right - border");
|
|
shouldBe("groupBoundingBox.bottom", "groupBoundingBox.top + 3 * optionHeight");
|
|
shouldBe("groupBoundingBox.width", "listBoundingBox.width - 2 * border");
|
|
shouldBe("groupBoundingBox.height", "3 * optionHeight");
|
|
|
|
shouldBe("option1BoundingBox.left", "listBoundingBox.left + border");
|
|
shouldBe("option1BoundingBox.top", "listBoundingBox.top + border + optionHeight");
|
|
shouldBe("option1BoundingBox.right", "listBoundingBox.right - border");
|
|
shouldBe("option1BoundingBox.bottom", "option1BoundingBox.top + option1BoundingBox.height");
|
|
shouldBe("option1BoundingBox.width", "listBoundingBox.width - 2 * border");
|
|
|
|
shouldBe("option2BoundingBox.left", "listBoundingBox.left + border");
|
|
shouldBe("option2BoundingBox.top", "listBoundingBox.top + border + 2 * optionHeight");
|
|
shouldBe("option2BoundingBox.right", "listBoundingBox.right - border");
|
|
shouldBe("option2BoundingBox.bottom", "option2BoundingBox.top + option2BoundingBox.height");
|
|
shouldBe("option2BoundingBox.width", "listBoundingBox.width - 2 * border");
|
|
|
|
shouldBe("option3BoundingBox.left", "listBoundingBox.left + border");
|
|
shouldBe("option3BoundingBox.top", "listBoundingBox.top + border + 3 * optionHeight");
|
|
shouldBe("option3BoundingBox.right", "listBoundingBox.right - border");
|
|
shouldBe("option3BoundingBox.bottom", "option3BoundingBox.top + option3BoundingBox.height");
|
|
shouldBe("option3BoundingBox.width", "listBoundingBox.width - 2 * border");
|
|
|
|
if (window.testRunner) {
|
|
var area = document.getElementById('testArea');
|
|
area.parentNode.removeChild(area);
|
|
}
|
|
</script>
|
|
<script src="../../../resources/js-test-post.js"></script>
|