<!DOCTYPE html>
<html>
<head>
<style>
.composited {
  transform: translateZ(0);
}

.background {
  position: fixed;
  background-color: lightgray;
  width: 300px;
  height: 300px;
  top: 150px;
  left: 100px;
}

.cyan {
  background-color: cyan;
}

.lime {
  background-color: lime;
}

.overlapping {
  position: relative;
  z-index: 1;
  width: 200px;
  height: 100.5px;
}

.nonsubpixel {
  position: relative;
  z-index: 1;
  width: 200px;
  height: 100px;
}

#description {
  position: absolute;
  top: 100px;
  left: 450px;
  width: 300px;
}

#testResults {
  display: none;
}

body {
  margin: 0px;
}
</style>

</head>

<body>

  <div id="description">
    <p>This scenario tests that content is rendered correctly when the
    squashing composited layer is itself at an integral position but contains
    a render layer whose position is non-integral.</p>
  </div>

  <div class="composited background"> </div>

  <div id="paragraph-a" class="nonsubpixel cyan"></div>
  <div id="paragraph-b" class="overlapping lime"></div>
  <div id="paragraph-c" class="overlapping cyan"></div>
  <div id="paragraph-d" class="overlapping lime"></div>
  <div id="paragraph-e" class="overlapping cyan"></div>
  <div id="paragraph-f" class="overlapping lime"></div>
  <div id="paragraph-g" class="overlapping cyan"></div>
  <div id="paragraph-h" class="overlapping lime"></div>
  <div id="paragraph-i" class="overlapping cyan"></div>
  <div id="paragraph-j" class="overlapping lime"></div>
  <div id="paragraph-k" class="overlapping cyan"></div>
  <div id="paragraph-l" class="overlapping lime"></div>
  <div id="paragraph-m" class="overlapping cyan"></div>
  <div id="paragraph-n" class="overlapping lime"></div>

</body>

</html>