summaryrefslogtreecommitdiffstats
path: root/layout/reftests/invalidation/scroll-inactive-layers-2.html
blob: 70606bad63195fa741a01263ffaf7a97be5b5c69 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html class="reftest-wait"
      reftest-displayport-x="0"
      reftest-displayport-y="0"
      reftest-displayport-w="800"
      reftest-displayport-h="1000">
<title>Scrolling over inactive layers shouldn't repaint their contents even if both the top and the bottom edge of the inactive layers are offscreen</title>

<style>

html, body {
  margin: 0;
  padding: 0;
}

.outer {
  border: 1px solid black;
  width: 100px;
  height: 2000px;
  margin-right: 20px;
  padding-top: 200px;
  float: left;
}

.opacity {
  opacity: 0.5;
}

.transform {
  transform: translateX(1px);
}

.filter {
  filter: url(#filter);
}

.mask {
  mask: url(#mask);
}

.reftest-no-paint {
  height: 50px;
  border: 1px solid lime;
}

</style>

<svg height="0">
  <defs>
    <filter id="filter" filterUnits="objectBoundingBox"
            x="0%" y="0%" width="100%" height="100%"
            color-interpolation-filters="sRGB">
      <feMerge><feMergeNode/><feMerge>
    </filter>
    <mask id="mask" maskContentUnits="objectBoundingBox">
      <rect x="0" y="0" width="1" height="1" fill="white"/>
    </mask>
  </defs>
</svg>

<div class="outer opacity">
  <div class="reftest-no-paint"></div>
</div>

<div class="outer transform">
  <div class="reftest-no-paint"></div>
</div>

<div class="outer filter">
  <div class="reftest-no-paint"></div>
</div>

<div class="outer mask">
  <div class="reftest-no-paint"></div>
</div>

<script>

function doTest() {
  document.documentElement.scrollTop = 100;
  document.documentElement.removeAttribute("class");
}
document.documentElement.scrollTop = 50;
document.addEventListener("MozReftestInvalidate", doTest);

</script>