75 lines
2.2 KiB
HTML
75 lines
2.2 KiB
HTML
<html>
|
|
<head>
|
|
<style>
|
|
.box {
|
|
height: 200px;
|
|
width: 200px;
|
|
border: 1px solid black;
|
|
background-repeat: no-repeat;
|
|
background-size: 100px 100px;
|
|
background-position: 0 0, 100px 100px;
|
|
}
|
|
|
|
.apply-images {
|
|
background-image: url('../images/resources/green-256x256.jpg'), url('../images/resources/dice.png');
|
|
}
|
|
|
|
.composited {
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
}
|
|
|
|
.composited.changed {
|
|
-webkit-transform: translate3d(50px, 50px, 0);
|
|
}
|
|
</style>
|
|
<script>jsTestIsAsync = true;</script>
|
|
<script src="../../resources/js-test-pre.js"></script>
|
|
<script>
|
|
description("Tests that a transform change on an element with multiple background images doesn't cause a repaint.");
|
|
function startTrackingRepaints()
|
|
{
|
|
if (window.internals)
|
|
window.internals.startTrackingRepaints();
|
|
document.getElementById('test').classList.add('changed');
|
|
setTimeout(logRepaints, 0)
|
|
}
|
|
|
|
function logRepaints()
|
|
{
|
|
layerTreeAsText = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
|
|
window.internals.stopTrackingRepaints();
|
|
shouldBeTrue("layerTreeAsText.indexOf('(repaint rects') == -1");
|
|
|
|
finishJSTest();
|
|
}
|
|
|
|
var loadedRemaining = 2;
|
|
function imageLoaded()
|
|
{
|
|
if (!--loadedRemaining) {
|
|
document.getElementById('test').classList.add('apply-images');
|
|
setTimeout(startTrackingRepaints, 0);
|
|
}
|
|
}
|
|
|
|
function doTest()
|
|
{
|
|
// We have to know that the images to be used by CSS are loaded to avoid spurious repaints later.
|
|
var firstImage = new Image();
|
|
firstImage.onload = imageLoaded;
|
|
firstImage.src = '../images/resources/green-256x256.jpg';
|
|
|
|
var secondImage = new Image();
|
|
secondImage.onload = imageLoaded;
|
|
secondImage.src = '../images/resources/dice.png';
|
|
}
|
|
|
|
window.addEventListener('load', doTest, false);
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="test" class="composited box">
|
|
</div>
|
|
<script src="../../resources/js-test-post.js"></script>
|
|
</html>
|