layout/reftests/invalidation/layer-splitting-6.html

   1 <!DOCTYPE html>
   2 <html lang="en" class="reftest-wait"
   3       reftest-displayport-x="0"
   4       reftest-displayport-y="0"
   5       reftest-displayport-w="800"
   6       reftest-displayport-h="1000">
   7 <meta charset="utf-8">
   8 <title>Things overlapping active scrollboxes should be in a layer on top of the scrolled contents, and that layer shouldn't pull up a background color through the scrollbox.</title>
   9 <!--
  10   This test is the same as layer-splitting-5.html, but without the scrollbox
  11   border. The lack of a border here makes it attractive for .overlap to pull
  12   a background color from the page background (because there's no scrollbox
  13   border in the way), but it shouldn't do that because .scrolled can move
  14   under it.
  15 -->
  16
  17 <style>
  18
  19 div {
  20   height: 50px;
  21   border: 1px solid;
  22   box-model: border-box;
  23 }
  24
  25 .first, .second {
  26   border-color: blue;
  27   margin: 50px 0;
  28 }
  29
  30 .overlap {
  31   border-color: #088;
  32   margin-left: 100px;
  33   width: 80px;
  34   margin-bottom: -30px;
  35   position: relative;
  36 }
  37
  38 .scrollable {
  39   height: auto;
  40   overflow: auto;
  41   border: none;
  42 }
  43
  44 .scrollarea {
  45   width: 5000px;
  46   border: none;
  47   padding: 10px 0 20px;
  48   height: auto;
  49 }
  50
  51 .scrolled {
  52   margin-left: 220px;
  53   width: 100px;
  54   height: 100px;
  55   border-color: red;
  56 }
  57
  58 body {
  59   margin: 0;
  60   padding: 0 100px;
  61   height: 3000px;
  62 }
  63
  64 </style>
  65
  66 <div class="first" reftest-assigned-layer="page-background">
  67   <!--
  68     This is just a regular box, it should end up in the page background layer.
  69   -->
  70 </div>
  71
  72 <div class="overlap reftest-no-paint">
  73   <!--
  74     This item intersects with the scrollable box and is positioned above
  75     .scrolled, in z-order, so it should be split into its own layer as soon
  76     as the scrollbox gets active scrolling. The splitting should not wait for
  77     .scrolled to move under .overlap.
  78   -->
  79 </div>
  80
  81 <div class="scrollable">
  82   <div class="scrollarea">
  83     <div class="scrolled reftest-opaque-layer">
  84       <!--
  85         This will move under .overlap by .scrollable being scrolled. This
  86         action should not invalidate .overlap.
  87
  88         Furthermore, since the background of .scrollable is uniform and opaque,
  89         .scrolled should be able to pull up that background color and become
  90         opaque itself.
  91       -->
  92     </div>
  93   </div>
  94 </div>
  95
  96 <div class="second" reftest-assigned-layer="page-background">
  97   <!--
  98     This should share a layer with .first and the page background.
  99   -->
 100 </div>
 101
 102 <script>
 103
 104 var scrollable = document.querySelector(".scrollable");
 105
 106 function doTest() {
 107   scrollable.scrollLeft = 100;
 108   document.documentElement.removeAttribute("class");
 109 }
 110
 111 // Make .scrollable start out with active scrolling.
 112 scrollable.scrollLeft = 0;
 113 scrollable.scrollLeft = 20;
 114 document.addEventListener("MozReftestInvalidate", doTest);
 115
 116 </script>
 117