<!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>