scrollable-overflow-transform-005.tentative.html (2325B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Overflow: Scrollable Overflow Transform Exclusion of Untransformed Child Box</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/12113"/> 7 <meta name="assert" content="Checks that the untransformed child box is not included 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: 100px; 29 height: 100px; 30 } 31 </style> 32 <body onload="checkLayout('.container')"> 33 34 <div class="container" data-expected-scroll-width="100" data-expected-scroll-height="100"> 35 <div style="transform: translate(-200px, -200px);" class="element"> 36 </div> 37 </div> 38 39 <div class="container" data-expected-scroll-width="150" data-expected-scroll-height="150"> 40 <div style="transform: translate(-25%, -25%);" class="element"> 41 </div> 42 </div> 43 44 <div class="container" data-expected-scroll-height="100" data-expected-scroll-height="100"> 45 <div style="width: 100px; height: 100px;"> 46 <div style="transform: translate(-200px, -200px);" class="element"> 47 </div> 48 </div> 49 </div> 50 51 <div class="container" data-expected-scroll-width="150" data-expected-scroll-height="150"> 52 <div style="width: 100px; height: 100px;"> 53 <div style="transform: translate(-25%, -25%);" class="element"> 54 </div> 55 </div> 56 </div> 57 58 <div class="container" style="position: relative;" data-expected-scroll-width="100" data-expected-scroll-height="100"> 59 <div style="transform: translate(-200px, -200px); position: absolute;" class="element"> 60 </div> 61 </div> 62 63 <div class="container" style="position: relative;" data-expected-scroll-width="150" data-expected-scroll-height="150"> 64 <div style="transform: translate(-25%, -25%); position: absolute;" class="element"> 65 </div> 66 </div> 67 68 </body>