<!DOCTYPE html> <meta charset="utf-8"> <title>CSS Overflow Test: flow-relative versions of overflow-x and -y</title> <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> <link rel="help" href="https://drafts.csswg.org/css-overflow-3/#logical"> <link rel="help" href="https://drafts.csswg.org/css-logical/#box"> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <style> #d1, #d2 { overflow-block: hidden; overflow-inline: scroll } #d1 { writing-mode: horizontal-tb; } #d2 { writing-mode: vertical-rl; } </style> <body> <div id="log"></div> <div id=d1></div> <div id=d2></div> <script> test( function(){ var target = document.getElementById("d1"); assert_equals(getComputedStyle(target).overflowX, "scroll"); assert_equals(getComputedStyle(target).overflowY, "hidden"); }, "overflow-x matches overflow-inline, and overflow-y matches overflow-block when the element has a horizontal writing mode"); test( function(){ var target = document.getElementById("d2"); assert_equals(getComputedStyle(target).overflowX, "hidden"); assert_equals(getComputedStyle(target).overflowY, "scroll"); }, "overflow-y matches overflow-inline, and overflow-x matches overflow-block when the element has a vertical writing mode"); </script> </body>