<!DOCTYPE html>
<script src="../../resources/js-test.js"></script>
<!-- For tables. -->
<table id="table1" class="test" style="overflow-x: visible; overflow-y: auto"/>
<table id="table2" class="test" style="overflow-x: visible; overflow-y: scroll"/>
<table id="table3" class="test" style="overflow-x: visible; overflow-y: hidden"/>
<!-- For inline tables. -->
<table id="inline_table1" class="test" style="overflow-x: visible; overflow-y: auto; display: inline-table;"/>
<table id="inline_table2" class="test" style="overflow-x: visible; overflow-y: scroll; display: inline-table;"/>
<table id="inline_table3" class="test" style="overflow-x: visible; overflow-y: hidden; display: inline-table;"/>
<!-- For table row groups. -->
<table>
<tbody id="tbody1" class="test" style="overflow-x: visible; overflow-y: auto"/>
<tbody id="tbody2" class="test" style="overflow-x: visible; overflow-y: scroll"/>
<tbody id="tbody3" class="test" style="overflow-x: visible; overflow-y: hidden"/>
</table>
<!-- For table rows. -->
<table>
<tr id="tr1" class="test" style="overflow-x: visible; overflow-y: auto"/>
<tr id="tr2" class="test" style="overflow-x: visible; overflow-y: scroll"/>
<tr id="tr3" class="test" style="overflow-x: visible; overflow-y: hidden"/>
</table>
<script>
description("This test checks for overflow equality. If overflow-x is visible then overflow-y should be visible as well.");
var elements = document.getElementsByClassName("test");
for (i = 0; i < elements.length; ++i)
{
computedStyle = getComputedStyle(elements[i]);
overflowX = computedStyle.getPropertyValue('overflow-x');
overflowY = computedStyle.getPropertyValue('overflow-y');
if (overflowX == "visible" && overflowX != overflowY)
testFailed(elements[i].id + ": overflow-y should be visible. Was " + overflowY + ".");
else
testPassed(elements[i].id + ": overflow-x is either not visible or both overflow values are visible.");
}
</script>