src/third_party/WebKit/LayoutTests/fast/repaint/hover-pseudo-borders.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5 .hitregion {
   6   width: 100px;
   7   height: 100px;
   8   background-color: red;
   9 }
  10 .hitregion:after {
  11   content: "";
  12   border: 40px solid;
  13   outline: 10px solid;
  14   position: absolute;
  15   width: 0;
  16   height: 0;
  17   margin-left: 140px;
  18   margin-top: 10px;
  19 }
  20 .hitregion:hover {
  21   background-color: green; /* Changes the left box's color. */
  22 }
  23 .hitregion:hover:after {
  24   color: green; /* Changes the right box's color. */
  25 }
  26 </style>
  27 <script src="resources/repaint.js"></script>
  28 <script>
  29 function repaintTest() {
  30   if (!window.testRunner)
  31     return;
  32   eventSender.mouseMoveTo(50, 50);
  33   eventSender.mouseDown();
  34   eventSender.mouseUp();
  35 }
  36 window.addEventListener("load", runRepaintTest);
  37 </script>
  38 </head>
  39 <body>
  40 <!--
  41     REGRESSION: :hover doesn't work on :after content with borders or outlines.
  42     To test this bug outside DRT, hover on the square below.
  43     This test passes if there are two green squares.
  44 -->
  45 <div class="hitregion"></div>
  46 </body>
  47 </html>