<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../../../resources/js-test-pre.js"></script>
</head>
<body>
<p>Test computed style for the overflow property of select element</p>
<div id="console"></div>

<div id="test">
<select id="wut" name="wut" size="8">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
    <option value="6">Six</option>
    <option value="7">Seven</option>
    <option value="8">Eight</option>
    <option value="9">Nine</option>
    <option value="10">Ten</option>
</select>
</div>

<script>


function computedOverflowStyle(overflowStyle, property) {
    var selectElement = document.getElementById("wut");
    selectElement.style.overflow = overflowStyle;
    return window.getComputedStyle(selectElement).getPropertyValue(property);
}

function computedInheritedOverflowStyle(overflowStyle, property) {
    var divElement = document.getElementById("test");
    divElement.style.overflow = 'scroll';

    var selectElement = document.getElementById("wut");
    selectElement.style.overflow = overflowStyle;
    return window.getComputedStyle(selectElement).getPropertyValue(property);
}

shouldBe("computedOverflowStyle('scroll', 'overflow-x')", "'scroll'");
shouldBe("computedOverflowStyle('scroll', 'overflow-y')", "'scroll'");

shouldBe("computedInheritedOverflowStyle('inherit', 'overflow-x')", "'scroll'");
shouldBe("computedInheritedOverflowStyle('inherit', 'overflow-y')", "'scroll'");


var successfullyParsed = true;

</script>
<script src="../../../resources/js-test-post.js"></script>
</body>
</html> 
