<!DOCTYPE html>
<html>
<head>
<title>Test for repaint on layout of flexbox</title>
<script src="../resources/text-based-repaint.js" type="text/javascript"></script>
<script>
function repaintTest()
{
if (window.testRunner)
document.getElementById('badge').style.display = "none";
}
</script>
<style>
html {
height: 100%
}
.nav-bar {
display: flex;
height: 100%;
position: fixed;
top: 0;
background-color: yellow;
}
.nav-right {
width: 200px;
background-color: green;
}
.state {
float: right;
line-height: 0;
}
#badge {
background-color: red;
display: inline-block;
height: 20px;
width: 80px;
}
.item:hover #badge {
display: none;
}
</style>
</head>
<body onload="runRepaintAndPixelTest()">
<nav class="nav-bar">
<div class="nav-right"></div>
</nav>
<div class="item">
<div class="state">
<div id="badge"></div>
</div>
</div>
</body>
</html>