position-absolute-scrollable-overflow-001.html (3695B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <title>CSS Positioned Layout Test: Absolute positioned elements are included in the scrollable overflow area</title> 4 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-position/#valdef-position-absolute"> 6 <link rel="help" href="https://drafts.csswg.org/css-overflow/#scrollable"> 7 <link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-scrollheight"> 8 <meta name=assert content="Absolute positioned elements are included in the scrollable overflow area of its containing block."> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script src="/resources/check-layout-th.js"></script> 12 <style> 13 .containing-block { 14 position: relative; 15 width: 100px; 16 height: 100px; 17 margin: 100px; 18 } 19 20 .abspos { 21 position: absolute; 22 background: rgba(0, 255, 0, 0.5); 23 width: 10px; 24 height: 10px; 25 left: 0; 26 top: 0; 27 } 28 </style> 29 <body onload="checkLayout('.containing-block');"> 30 <div id="log"></div> 31 <div class="containing-block" data-expected-scroll-width="100" data-expected-scroll-height="500"> 32 <div class="abspos" style="left: -50px; height: 500px;"></div> 33 </div> 34 <div class="containing-block" data-expected-scroll-width="100" data-expected-scroll-height="550"> 35 <div class="abspos" style="left: -50px; height: 500px; top: 50px;"></div> 36 </div> 37 <div class="containing-block" data-expected-scroll-width="100" data-expected-scroll-height="700"> 38 <div class="abspos" style="left: -50px; height: 500px; top: 200px;"></div> 39 </div> 40 <div class="containing-block" data-expected-scroll-width="100" data-expected-scroll-height="400"> 41 <div class="abspos" style="left: -50px; height: 500px; top: -100px;"></div> 42 </div> 43 <div class="containing-block" data-expected-scroll-width="100" data-expected-scroll-height="100"> 44 <div class="abspos" style="left: -50px; height: 500px; top: -1000px;"></div> 45 </div> 46 <div class="containing-block" data-expected-scroll-width="100" data-expected-scroll-height="100"> 47 <div class="abspos" style="left: 50px; height: 500px; top: -1000px;"></div> 48 </div> 49 <div class="containing-block" data-expected-scroll-width="210" data-expected-scroll-height="700"> 50 <div class="abspos" style="left: 200px; height: 500px; top: 200px;"></div> 51 </div> 52 <div class="containing-block" data-expected-scroll-width="500" data-expected-scroll-height="100"> 53 <div class="abspos" style="width: 500px; top: -50px;"></div> 54 </div> 55 <div class="containing-block" data-expected-scroll-width="550" data-expected-scroll-height="100"> 56 <div class="abspos" style="width: 500px; left: 50px; top: -50px;"></div> 57 </div> 58 <div class="containing-block" data-expected-scroll-width="700" data-expected-scroll-height="100"> 59 <div class="abspos" style="width: 500px; left: 200px; top: -50px;"></div> 60 </div> 61 <div class="containing-block" data-expected-scroll-width="400" data-expected-scroll-height="100"> 62 <div class="abspos" style="width: 500px; left: -100px; top: -50px;"></div> 63 </div> 64 <div class="containing-block" data-expected-scroll-width="100" data-expected-scroll-height="100"> 65 <div class="abspos" style="width: 500px; left: -1000px; top: -50px;"></div> 66 </div> 67 <div class="containing-block" data-expected-scroll-width="100" data-expected-scroll-height="100"> 68 <div class="abspos" style="width: 500px; left: -1000px; top: 50px;"></div> 69 </div> 70 <div class="containing-block" data-expected-scroll-width="700" data-expected-scroll-height="210"> 71 <div class="abspos" style="width: 500px; left: 200px; top: 200px;"></div> 72 </div> 73 </body>