<!DOCTYPE html>
<html>
<head>
<style>
.container {
    width: 100px;
    border: 2px solid black;
}
.test {
    width: 100px;
    height: 100px;
    background-color: red;
}
.visibility-hidden { visibility: hidden; }
.opacity-zero { opacity: 0; }
</style>
<script src="resources/text-based-repaint.js"></script>
<script>
function repaintTest() {
    var tests = document.querySelectorAll(".test");
    for (let test of tests)
        test.style.backgroundColor = "green";
}
</script>

</head>
<body onload="runRepaintTest()">

Test repaint-only style changes in non-visible elements don't trigger repaints.

<div class="container">
<div class="test" ></div>
<div class="test visibility-hidden"></div>
<div class="test opacity-zero"></div>
</div>

</body>
</html>