overflow-abpos-transform.html (960B)
1 <!DOCTYPE html> 2 <title>CSS Overflow and Transforms: css-overflow-3</title> 3 <link rel="author" title="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="css transform is used to compute scroll overflow of abspos children"> 8 <style> 9 #container { 10 position: relative; 11 overflow: auto; 12 width: 200px; 13 height: 200px; 14 } 15 #target { 16 position: absolute; 17 width: 150px; 18 height: 150px; 19 margin-left: 100px; 20 transform: translateX(-100px); 21 background: green; 22 } 23 </style> 24 <!-- There should be no scrollbars on this page --> 25 <div id="container"> 26 <div id="target"></div> 27 </div> 28 <script> 29 test(() => { 30 assert_equals(document.querySelector("#container").scrollWidth, 200); 31 }, '#target used transform when computing scroll overflow'); 32 </script>