overflow-inline-transform-relative.html (1073B)
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 inline-block children"> 8 <style> 9 #container { 10 border: 1px solid black; 11 width: 200px; 12 overflow: auto; 13 } 14 #target { 15 display: inline-block; 16 width: 20px; 17 height: 20px; 18 background: green; 19 position: relative; 20 top: 100px; 21 transform: translateY(80px); 22 } 23 </style> 24 <!-- 25 #container should have vertical scrollbar because target is offset 26 by position:relative and transform. 27 --> 28 <div id="container"> 29 <span> 30 scroll 31 <div id="target"></div> 32 down 33 </span> 34 </div> 35 <script> 36 test(() => { 37 assert_equals(document.querySelector("#container").scrollHeight, 200); 38 }, '#target used transform when computing scroll overflow'); 39 </script>