pull-background-displayport-2.html (1805B)
1 <!DOCTYPE html> 2 <html lang="en" reftest-async-scroll> 3 <meta charset="utf-8"> 4 <title>Scrollboxes with uniform backgrounds should pull that color into their contents, even if their contents have a visible region that extends beyond the scrollbox clip, even through an opacity container layer</title> 5 6 <style> 7 8 div { 9 min-height: 50px; 10 box-model: border-box; 11 } 12 13 .first, .second { 14 border: 1px solid blue; 15 margin: 50px 0; 16 } 17 18 .border { 19 border: 1px solid black; 20 } 21 22 .scrollable { 23 height: 150px; 24 overflow: auto; 25 } 26 27 .scrollarea { 28 width: 5000px; 29 border: none; 30 padding: 10px 0 20px; 31 height: auto; 32 } 33 34 .scrolled { 35 margin-left: 220px; 36 width: 100px; 37 height: 100px; 38 border-color: red; 39 } 40 41 .opacity { 42 opacity: 0.9; 43 } 44 45 body { 46 margin: 0; 47 padding: 0 100px; 48 height: 3000px; 49 } 50 51 </style> 52 53 <div class="first" reftest-assigned-layer="page-background"> 54 <!-- 55 This is just a regular box, it should end up in the page background layer. 56 --> 57 </div> 58 59 <div class="opacity border"> 60 <div class="opacity scrollable" 61 reftest-displayport-x="0" reftest-displayport-y="0" 62 reftest-displayport-w="2000" reftest-displayport-h="200"> 63 <div class="scrollarea"> 64 <div class="scrolled border reftest-opaque-layer"> 65 <!-- 66 The background of .scrollable is uniform and opaque, 67 .scrolled should be able to pull up that background color and become 68 opaque itself. 69 --> 70 </div> 71 </div> 72 </div> 73 </div> 74 75 <div class="second" reftest-assigned-layer="page-background"> 76 <!-- 77 This should share a layer with .first and the page background. 78 --> 79 </div> 80 81 <script> 82 83 var scrollable = document.querySelector(".scrollable"); 84 85 // Make .scrollable start out with active scrolling. 86 scrollable.scrollLeft = 0; 87 scrollable.scrollLeft = 20; 88 89 </script>