third_party/WebKit/LayoutTests/paint/invalidation/spv2/hover-pseudo-borders.html

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