third_party/WebKit/LayoutTests/css3/flexbox/repaint-on-layout.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <title>Test for repaint on layout of flexbox</title>
   5     <script src="../../fast/repaint/resources/text-based-repaint.js" type="text/javascript"></script>
   6     <script>
   7         function repaintTest()
   8         {
   9             if (window.testRunner)
  10                 document.getElementById('badge').style.display = "none";
  11         }
  12     </script>
  13     <style>
  14         html {
  15             height: 100%
  16         }
  17
  18         .nav-bar {
  19             display: flex;
  20             height: 100%;
  21             position: fixed;
  22             top: 0;
  23             background-color: yellow;
  24         }
  25
  26         .nav-right {
  27             width: 200px;
  28             background-color: green;
  29         }
  30
  31         .state {
  32             float: right;
  33             line-height: 0;
  34         }
  35
  36         #badge {
  37             background-color: red;
  38             display: inline-block;
  39             height: 20px;
  40             width: 80px;
  41         }
  42
  43         .item:hover #badge {
  44             display: none;
  45         }
  46     </style>
  47 </head>
  48 <body onload="runRepaintTest()">
  49     <nav class="nav-bar">
  50         <div class="nav-right"></div>
  51     </nav>
  52     <div class="item">
  53         <div class="state">
  54             <div id="badge"></div>
  55         </div>
  56     </div>
  57 </body>
  58 </html>
  59