<!DOCTYPE html>
<html>
<head>
<style>
.composited {
  will-change: transform;
}

.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
    squashing composited layer is at a non-integral position, and contains
    render layers at both integral and non-integral positions.</p>
  </div>

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

  <div id="paragraph-a" class="overlapping 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>