<!DOCTYPE html>
<!--
Tests that a change from the worker produces a visual update.
-->
<script>
window.enablePixelTesting = true;
window.jsTestIsAsync = true;
</script>

<style>
#box {
  width: 100px;
  height: 100px;
}

#covered, #green {
  width: 85px;
  height: 85px;
}

#box, #covered {
  background-color: #ff8080;
  overflow: auto;
}

#green {
  position: relative;
  left: 100px;
  top: 100px;
  background-color: #00ff00;
}
</style>

<div id='console' style='display:none'></div>
<div id="box">
    <div id="green"></div>
</div>
<div id="covered"></div>

<script src="../../../../resources/js-test.js"></script>
<script>
if (window.internals) {
  internals.settings.setCompositorWorkerEnabled(true);
  internals.settings.setPreferCompositingToLCDTextEnabled(true);
}

var cw = new CompositorWorker('resources/visual-update.js');
cw.onmessage = finishTest;
cw.postMessage({'proxy': new CompositorProxy(document.getElementById('box'),
            ['opacity', 'transform', 'scrollLeft', 'scrollTop'])});

function finishTest(timestamp) {
  console.log('finished');
  requestAnimationFrame(finishJSTest);
}
</script>