logical-overflow-001.html (1405B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Overflow Test: flow-relative versions of overflow-x and -y</title> 4 <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> 5 <link rel="help" href="https://drafts.csswg.org/css-overflow-3/#logical"> 6 <link rel="help" href="https://drafts.csswg.org/css-logical/#box"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <style> 10 #d1, #d2 { 11 overflow-block: hidden; 12 overflow-inline: scroll 13 } 14 #d1 { 15 writing-mode: horizontal-tb; 16 } 17 #d2 { 18 writing-mode: vertical-rl; 19 } 20 21 </style> 22 <body> 23 <div id="log"></div> 24 25 <div id=d1></div> 26 <div id=d2></div> 27 28 <script> 29 test( 30 function(){ 31 var target = document.getElementById("d1"); 32 assert_equals(getComputedStyle(target).overflowX, "scroll"); 33 assert_equals(getComputedStyle(target).overflowY, "hidden"); 34 }, "overflow-x matches overflow-inline, and overflow-y matches overflow-block when the element has a horizontal writing mode"); 35 test( 36 function(){ 37 var target = document.getElementById("d2"); 38 assert_equals(getComputedStyle(target).overflowX, "hidden"); 39 assert_equals(getComputedStyle(target).overflowY, "scroll"); 40 }, "overflow-y matches overflow-inline, and overflow-x matches overflow-block when the element has a vertical writing mode"); 41 </script> 42 </body>