LayoutTests/fast/css/hover-affects-ancestor.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <title>hover ancestor test</title>
   5 <style type="text/css" media="screen">
   6 .foo {
   7     background: red;
   8     width: 300px;
   9     height: 300px;
  10     position: relative;
  11 }
  12
  13 .foo:hover {
  14     background: green;
  15 }
  16 </style>
  17 </head>
  18 <body>
  19 <p>This test ensures that ancestor element hover rules are not affected when we hover
  20 its contained elements</p>
  21 <div class="foo" id="target">
  22 <select class="select" id="testselect" size="3">
  23 <option  value="option1">option1</option>
  24 <option  value="option1">option2</option>
  25 <option selected="selected" value="option2">option3</option>
  26 </select>
  27 <br>
  28 <input type="text" name="fname" id="testinput"/>
  29 <br>
  30 <textarea rows="2" cols="20" id="testtextarea">Textarea test.</textarea>
  31 <br>
  32 <a  id="testanchor" href="webkit.org">http://www.webkit.org</a>
  33 <br>
  34 <button type="button" id="testbutton">Button test</button>
  35 <br>
  36 <form>
  37 <input type="radio" id="testradio"/>Radio test
  38 <br>
  39 <input type="checkbox" id="testcheckbox"/>Checkbox test
  40 <br>
  41 </form>
  42 </div>
  43 <script type="text/javascript">
  44 if (window.layoutTestController) {
  45     layoutTestController.dumpAsText();
  46 }
  47
  48 function getCenterFor(element)
  49 {
  50     var rect = element.getBoundingClientRect();
  51     return { x : parseInt((rect.left + rect.right) / 2) , y : parseInt((rect.top + rect.bottom) / 2)};
  52 }
  53
  54 function runTest(id) {
  55     var box, x, y;
  56     box = document.getElementById(id);
  57     center = getCenterFor(box);
  58     eventSender.mouseMoveTo(center.x, center.y);
  59     var target = document.getElementById("target");
  60     var style = window.getComputedStyle(target, null);
  61     var bgColor = style.getPropertyValue("background-color");
  62     logResult(id, bgColor);
  63 }
  64
  65 function logResult(id, bgColor) {
  66     document.write(id + ': ');
  67     document.write(bgColor=="rgb(0, 128, 0)" ? "PASS" : "FAIL");
  68     document.write('<br>');
  69 }
  70
  71 if (window.eventSender) {
  72     runTest("testselect");
  73     runTest("testinput");
  74     runTest("testtextarea");
  75     runTest("testanchor");
  76     runTest("testbutton");
  77     runTest("testradio");
  78     runTest("testcheckbox");
  79 }
  80 </script>
  81 </body>
  82 </html>