scrollable-overflow-transform-007.html (1349B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Overflow: Scrollable Overflow Transform Scale</title> 4 <link rel="author" title="Jo Steven Novaryo" href="mailto:steven.novaryo@gmail.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable" /> 6 <meta name="assert" content="Checks that the bounding rectangle of scaled element is included correctly in scrollable overflow."> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/resources/check-layout-th.js"></script> 10 <style> 11 .container { 12 width: 100px; 13 height: 100px; 14 overflow: scroll; 15 background: silver; 16 border: solid thick; 17 scrollbar-width: none; 18 } 19 20 .element { 21 width: 200px; 22 height: 200px; 23 background: lime; 24 } 25 26 .element-2 { 27 width: 200px; 28 height: 200px; 29 background: aqua; 30 } 31 </style> 32 <body onload="checkLayout('.container')"> 33 34 <div class="container" data-expected-scroll-width="300" data-expected-scroll-height="300"> 35 <div style="transform: scale(2);" class="element"> 36 </div> 37 </div> 38 39 <div class="container" data-expected-scroll-height="250" data-expected-scroll-height="250"> 40 <div style="transform: scale(0.5);" class="element"> 41 <div style="transform: scale(3);" class="element-2"> 42 </div> 43 </div> 44 </div> 45 46 </body>