scrollable-overflow-transform-010.tentative.html (1570B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Overflow: Scrollable Overflow Transform Rotate Nested Element</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 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/12112"/> 7 <meta name="assert" content="Checks that the bounding rectangle of nested rotated element is included correctly in scrollable overflow."> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/resources/check-layout-th.js"></script> 11 <style> 12 .container { 13 width: 100px; 14 height: 100px; 15 overflow: scroll; 16 background: silver; 17 border: solid thick; 18 scrollbar-width: none; 19 } 20 21 .element { 22 width: 200px; 23 height: 200px; 24 background: lime; 25 } 26 27 .element-2 { 28 width: 200px; 29 height: 200px; 30 background: aqua; 31 } 32 </style> 33 <body onload="checkLayout('.container')"> 34 35 <div class="container" data-expected-scroll-height="241" data-expected-scroll-height="241"> 36 <div style="transform: rotate(-45deg);" class="element"> 37 <div style="transform: rotate(45deg);" class="element-2"> 38 </div> 39 </div> 40 </div> 41 42 <div class="container" data-expected-scroll-height="222" data-expected-scroll-height="222"> 43 <div style="transform: rotate(30deg) rotate(-15deg);" class="element"> 44 <div style="transform: rotate(-30deg) rotate(105deg);" class="element-2"> 45 </div> 46 </div> 47 </div> 48 49 </body>