overflow-shorthand-002.html (1160B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Overflow Test: Overflow shorthand logical mapping</title> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <link rel="help" href="https://drafts.csswg.org/css-overflow/#propdef-overflow"> 7 <style> 8 #horizontal { 9 writing-mode: horizontal-tb; 10 } 11 #vertical { 12 writing-mode: vertical-lr; 13 } 14 .overflow { 15 overflow: visible clip; 16 } 17 </style> 18 <div id="horizontal" class="overflow"></div> 19 <div id="vertical" class="overflow"></div> 20 <script> 21 test(() => { 22 const style = getComputedStyle(horizontal); 23 assert_equals(style.overflowX, "visible"); 24 assert_equals(style.overflowY, "clip"); 25 assert_equals(style.overflowInline, "visible"); 26 assert_equals(style.overflowBlock, "clip"); 27 }, "overflow - horizontal writing mode"); 28 29 test(() => { 30 const style = getComputedStyle(vertical); 31 assert_equals(style.overflowX, "visible"); 32 assert_equals(style.overflowY, "clip"); 33 assert_equals(style.overflowInline, "clip"); 34 assert_equals(style.overflowBlock, "visible"); 35 }, "overflow - vertical writing mode"); 36 </script>