<!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>