<!DOCTYPE HTML>
<html>
<head>
<style>
#layer {
position: relative;
left: 10px;
width: 400px;
height: 300px;
overflow: hidden;
}
.composited {
will-change: transform;
}
</style>
</head>
<body>
<div id="layer" class="composited">A layer that may or may not be composited</div>
<p id="description"></p>
<div id="console"></div>
<script src="../../../resources/js-test.js"></script>
<script src="../../../resources/run-after-layout-and-paint.js"></script>
<script>
window.jsTestIsAsync = true;
description("Make sure we don't crash when a layer with a touch event handler becomes non-composited");
var layer = document.getElementById('layer');
layer.addEventListener('touchstart', function() {});
var rects;
if (window.internals) {
// Ensure we've done a layout, updated compositing, and we have a hit rect on this composited layer.
internals.forceCompositingUpdate(document);
rects = internals.touchEventTargetLayerRects(document);
shouldBe("rects.length", "1");
shouldBe("rects[0].hitTestRect.x", "0");
shouldBe("rects[0].hitTestRect.y", "0");
shouldBe("rects[0].hitTestRect.width", "400");
shouldBe("rects[0].hitTestRect.height", "300");
}
// Make the layer non-composited
layer.className = '';
// Verify we now have a hit rect on the document after layout and paint.
runAfterLayoutAndPaint(function() {
if (window.internals) {
rects = internals.touchEventTargetLayerRects(document);
shouldBe("rects.length", "1");
shouldBe("rects[0].hitTestRect.x", "18");
shouldBe("rects[0].hitTestRect.y", "8");
shouldBe("rects[0].hitTestRect.width", "400");
shouldBe("rects[0].hitTestRect.height", "300");
}
finishJSTest();
});
</script>
</body>
</html>