scrollable-overflow-height-with-flex-item-margin-inline-end-rtl.html (2212B)
1 <!DOCTYPE html> 2 <title>CSS Overflow: Scrollable overflow from flex item with margin-inline-end and "direction: rtl"</title> 3 <link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable" /> 4 <meta name="assert" content="Flex item contribute its margin-end to parent scroller's scrollable overflow."> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style> 8 #container { 9 width: 100px; 10 height: 100px; 11 display: flex; 12 overflow: scroll; 13 outline: 1px solid red; 14 writing-mode: vertical-lr; 15 direction: rtl; 16 } 17 18 .item { 19 outline: 2px solid green; 20 width: 50px; 21 height: 50px; 22 margin-inline-end: 950px; 23 } 24 </style> 25 26 <div id=container> 27 <div class=item></div> 28 </div> 29 <script> 30 test(() => { 31 container.style.overflow = "auto"; 32 assert_equals(container.scrollHeight, 950); 33 }, "Check scrollHeight with overflow: auto"); 34 35 test(() => { 36 container.style.overflow = "scroll"; 37 assert_equals(container.scrollHeight, 950); 38 }, "Check scrollHeight with overflow: scroll"); 39 40 test(() => { 41 container.style.overflow = "hidden"; 42 assert_equals(container.scrollHeight, 950); 43 }, "Check scrollHeight with overflow: hidden"); 44 45 test(() => { 46 container.style.overflow = "clip"; 47 assert_equals(container.scrollHeight, 100); 48 }, "Check scrollHeight with overflow: clip"); 49 50 test(() => { 51 container.style.overflow = "visible"; 52 assert_equals(container.scrollHeight, 100); 53 }, "Check scrollHeight with overflow: visible"); 54 55 test(() => { 56 container.style.overflowX = "visible"; 57 container.style.overflowY = "clip"; 58 assert_equals(container.scrollHeight, 100); 59 }, "Check scrollHeight with overflowX: visible, overflowY: clip"); 60 61 test(() => { 62 container.style.overflowX = "visible"; 63 container.style.overflowY = "hidden"; 64 assert_equals(container.scrollHeight, 950); 65 }, "Check scrollHeight with overflowX: visible, overflowY: hidden"); 66 67 test(() => { 68 container.style.overflowX = "visible"; 69 container.style.overflowY = "auto"; 70 assert_equals(container.scrollHeight, 950); 71 }, "Check scrollHeight with overflowX: visible, overflowY: auto"); 72 </script>