<!DOCTYPE html>
<html>
  <head>
    <style>
    .container {
        position: absolute;
        left: 550px;
        height: 200px;
        width: 200px;
        background-color: silver;
    }
    #target {
        text-indent: -300px;
        width: 200px;
        height: 50px;
        overflow: hidden;
        background-color: green;
    }
    
    #target.changed, #target:hover {
        background-color: blue;
    }
    </style>
    <script src="resources/text-based-repaint.js"></script>
    <script>
    function repaintTest() {
        document.getElementById('target').classList.add('changed');
    }
    </script>
</head>
<body onload="runRepaintTest();">
    <div class="container">
        <div id="target">Hidden Text</div>
    </div>
</body>
</html>