| <!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> |
| |
