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