scrollable-overflow-transform-008.html (1295B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Overflow: Scrollable Overflow Transform Skew</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 skewed 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="227" data-expected-scroll-height="227"> 35 <div style="transform: skew(-15deg, -15deg);" class="element"> 36 </div> 37 </div> 38 39 <div class="container" data-expected-scroll-width="227" data-expected-scroll-height="227"> 40 <div style="transform: skew(15deg, 15deg);" class="element"> 41 </div> 42 </div> 43 44 </body>