DXR is a code search and navigation tool aimed at making sense of large projects. It supports full-text and regex searches as well as structural queries.

Mercurial (409f3966645a)

VCS Links

Line Code
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 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105
<!DOCTYPE html>
<html lang="en" class="reftest-wait">
<meta charset="utf-8">
<title>This test fails - Opacity containers should anticipate animations of the contents when deciding whether to pull a background color</title>

<style>

div {
  min-height: 50px;
  box-model: border-box;
}

.first, .second {
  border: 1px solid blue;
  margin: 50px 0;
  position: relative;
}

.border {
  border: 1px solid black;
}

.underlap {
  border: 1px solid #088;
  margin-left: 120px;
  width: 80px;
  margin-bottom: -30px;
}

.opacity {
  opacity: 0.9;
  height: auto;
  padding: 10px 0 20px;
}

.animated-position {
  position: relative;
  left: 20px;
  margin-left: 220px;
  width: 100px;
  height: 100px;
  border-color: red;
}

body {
  margin: 0;
  padding: 0 100px;
  height: 3000px;
}

</style>

<div class="first" reftest-assigned-layer="page-background">
  <!--
    This is just a regular box, it should end up in the page background layer.
  -->
</div>

<div class="underlap">
  <!--
    This item intersects with the scrollable box and is positioned below
    .scrollable, in z-order.
  -->
</div>

<div class="border">
  <div class="opacity">
    <div class="border animated-position reftest-no-paint">
      <!--
        This item start out above solid white background but will move to
        intersect .underlap, so it shouldn't pull up the background color.
        However, the opacity item that wraps this item only looks at the
        current bounds of its contents, so this test will fail.
      -->
    </div>
  </div>
</div>

<div class="second" reftest-assigned-layer="page-background">
  <!--
    This should share a layer with .first and the page background.
  -->
</div>

<script>

var animatedLeft = document.querySelector(".animated-position");

function doTest() {
  animatedLeft.style.left = "-40px";
  document.documentElement.removeAttribute("class");
}

// Layerize #animatedLeft
animatedLeft.offsetLeft;
animatedLeft.style.left = "40px";
animatedLeft.offsetLeft;
animatedLeft.style.left = "60px";
animatedLeft.offsetLeft;

document.addEventListener("MozReftestInvalidate", doTest);
setTimeout(doTest, 200);

</script>