overflow-outside-padding.html (1644B)
1 <!DOCTYPE html> 2 <title>CSS Overflow and Transforms: css-overflow-3</title> 3 <link rel="author" href="mailto:atotic@google.com"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <link rel="help" href="https://www.w3.org/TR/css-overflow-3/#scrollable"> 7 <meta name="assert" content="blocks wholly outside padding edges should not contribute to overflow"> 8 <style> 9 .container { 10 position: relative; 11 display: inline-block; 12 border: 5px solid rgba(0,0,0,0.5); 13 border-width: 0px 0px 50px 80px; 14 overflow: auto; 15 width: 200px; 16 height: 200px; 17 background: gray; 18 } 19 .target { 20 position: absolute; 21 width: 1000px; 22 height: 1000px; 23 background: red; 24 } 25 .htb { 26 writing-mode: horizontal-tb; 27 } 28 .vrl { 29 writing-mode: vertical-rl; 30 } 31 .vlr { 32 writing-mode: vertical-lr; 33 } 34 .rtl { 35 direction: rtl; 36 } 37 </style> 38 <!-- --> 39 <div class="container htb"> 40 <div class="target" style="top: -1000px"></div> 41 htb 42 </div> 43 <div class="container htb rtl"> 44 <div class="target" style="right: -1000px" ></div> 45 htb rtl 46 </div> 47 <div class="container vrl"> 48 <div class="target" style="top: -1000px"></div> 49 vrl 50 </div> 51 <div class="container vrl rtl"> 52 <div class="target" style="bottom: -1000px"></div> 53 vrl rtl 54 </div> 55 <div class="container vlr"> 56 <div class="target" style="top: -1000px"></div> 57 vlr 58 </div> 59 <div class="container vlr rtl"> 60 <div class="target" style="left: -1000px"></div> 61 vlr rtl 62 </div> 63 <script> 64 test(() => { 65 Array.from(document.querySelectorAll(".container")).forEach( el => { 66 assert_equals(el.scrollWidth, 200); 67 }); 68 }, '#target did not trigger scroll overflow'); 69 </script>