<!DOCTYPE HTML>
<html>
<head>
<title>This tests that we repaint focus ring properly.</title>
<script src="resources/text-based-repaint.js"></script>
<script>
function repaintTest() {
  document.getElementById("shrinkThis").style.height = "20px"; 
  document.getElementById("enlargeThis").style.height = "80px"; 
  document.getElementById("moveThisRelative").style.left = "150px"; 
  document.getElementById("moveThisAbsolute").style.left = "150px"; 
  document.getElementById("moveThisRelativeAndNotIntersected").style.left = "200px"; 
  document.getElementById("removeOutline").style.outline = "none";
  document.getElementById("addOutline").style.outline = "auto";
}
onload = runRepaintTest;
</script>

<style>
div {
	margin-top: 35px;
}

.outline-container {
    width: 50px;
    height: 50px;
  	outline: auto;
}

img {
    width: 30px;
    height: 30px;
}
</style>
</head>
<body>
<div class=outline-container><img style="margin-top: 30px; margin-left: 10px;" src="broken.jpg" id=shrinkThis></div>
<div class=outline-container><img style="height: 50px;" src="broken.jpg" id=enlargeThis></div>
<div class=outline-container><img style="position: relative; top: 10px; left: 40px;" src="broken.jpg" id=moveThisRelative></div>
<div class=outline-container><img style="position: absolute; top: 380px; left: 10px;" src="broken.jpg" id=moveThisAbsolute></div>
<div class=outline-container><img style="position: relative; top: 10px; left: 100px;" src="broken.jpg" id=moveThisRelativeAndNotIntersected></div>
<div class=outline-container id=removeOutline><img style="margin-top: 30px; margin-left: 70px;" src="broken.jpg"></div>
<div class=outline-container id=addOutline style="outline: none"><img style="margin-top: 30px; margin-left: 70px;" src="broken.jpg"></div>
</body>
</html>