opaque-fractional-displayport-1.html (1298B)
1 <!DOCTYPE html> 2 <html lang="en" reftest-async-scroll> 3 <meta charset="utf-8"> 4 <title>Make sure the scrolled layer is opaque even if the scrolled area is fractional</title> 5 6 <style> 7 8 body { 9 margin: 0; 10 } 11 12 .scrollbox { 13 margin: 50px; 14 width: 200px; 15 height: 200px; 16 overflow: auto; 17 18 /* Make the background "non-uniform" so that the scrolled layer does not 19 * pull up a background color. */ 20 background: linear-gradient(to bottom, white, transparent); 21 } 22 23 .scrolled-contents { 24 height: 300.2px; 25 background-color: lime; 26 box-sizing: border-box; 27 } 28 29 .transparent-overlap-of-fractional-edge { 30 margin: 0 20px; 31 height: 40px; 32 /* This element has a box-shadow that overlaps the bottom of the scrolled 33 * area. Box shadows do not expand the scrollable area. */ 34 box-shadow: 0 280px rgba(0, 0, 255, 0.5); 35 } 36 37 </style> 38 39 <body> 40 41 <div class="scrollbox" 42 reftest-displayport-x="0" reftest-displayport-y="0" 43 reftest-displayport-w="200" reftest-displayport-h="300.2" 44 reftest-async-scroll-x="0" reftest-async-scroll-y="0"> 45 <div class="scrolled-contents"> 46 <div class="transparent-overlap-of-fractional-edge reftest-opaque-layer"> 47 <!-- This element has the magic "reftest-opaque-layer" class which 48 constitutes the actual test here. --> 49 </div> 50 </div> 51 </div>