third_party/WebKit/LayoutTests/fast/css/pseudo-element-hit-test.html

   1 <!doctype html>
   2 <script src="../../resources/js-test.js"></script>
   3 <style>
   4 #left {
   5   position: absolute;
   6   top: 0;
   7   left: 0;
   8 }
   9 #right {
  10   position: absolute;
  11   top: 0;
  12   left: 200px;
  13 }
  14 #button {
  15   margin: 0;
  16   width: 50px;
  17   height: 50px;
  18 }
  19 #button:before {
  20   content: '';
  21   position: absolute;
  22   top: 0;
  23   left: 0;
  24   width: 50px;
  25   height: 50px;
  26   background: rgba(0, 255, 0, 0.3);
  27 }
  28 #div {
  29   margin: 0;
  30   width: 50px;
  31   height: 50px;
  32   border: 1px solid blue;
  33 }
  34 #div:before {
  35   content: 'BEFORE';
  36   display: table-cell;
  37   will-change: position;
  38   padding: 25px;
  39   background: rgba(0, 255, 0, 0.3);
  40 }
  41 #console {
  42   position: absolute;
  43   top: 200px;
  44 }
  45 </style>
  46
  47 <div id='left'>
  48   <button id='button'>Button Test</button>
  49 </div>
  50 <div id='right'>
  51   <div id='div'>Div Test</div>
  52 </div>
  53
  54 <div id='console'></div>
  55
  56 <script>
  57 shouldBe('document.elementFromPoint(25, 25).id', "'button'");
  58 shouldBe('document.elementFromPoint(225, 25).id', "'div'");
  59 </script>