test_hover_quirk.html (4878B)
1 <html> 2 <!-- 3 https://bugzilla.mozilla.org/show_bug.cgi?id=783213 4 --> 5 <head> 6 <meta charset="utf-8"> 7 <title>Test for the :active and :hover quirk</title> 8 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"> 9 <style type="text/css"> 10 /* Should apply to all elements: */ 11 #content :hover:first-of-type { 12 color: rgb(255, 0, 0); 13 } 14 #content :-moz-any(:hover) { 15 text-transform: lowercase; 16 } 17 #content :hover::after { 18 content: "any element"; 19 } 20 21 #content :hover:first-of-type .child::after { 22 content: "any child"; 23 } 24 25 #content .parent .child::after { 26 content: "wrong" !important; 27 } 28 29 #content .parent:hover .child::after { 30 content: "any child" !important; 31 } 32 33 /* Should apply only to links: */ 34 #content :hover { 35 color: rgb(0, 255, 0) !important; 36 text-transform: uppercase !important; 37 } 38 #content :hover .child::after { 39 content: "link child" !important; 40 } 41 42 #dynamic-test { 43 width: 100px; 44 height: 100px; 45 background: green; 46 } 47 48 #dynamic-test > * { 49 width: 100%; 50 height: 100%; 51 background: red; 52 } 53 54 #dynamic-test:hover > * { 55 background: rgb(0, 255, 0); 56 } 57 58 #dynamic-test-2 :is(button,input,a){ 59 background-color:yellow !important; 60 } 61 62 #dynamic-test-2 :is(button,input,a):hover{ 63 background-color:lime !important; 64 } 65 66 #dynamic-test-2 :is(button,input):focus{ 67 background-color:skyblue !important; 68 } 69 </style> 70 <script src="/tests/SimpleTest/SimpleTest.js"></script> 71 <script src="/tests/SimpleTest/EventUtils.js"></script> 72 <script type="application/javascript"> 73 /** Test for the :active and :hover quirk */ 74 function test(element, isLink) { 75 if (!isLink) 76 var styles = {color: "rgb(255, 0, 0)", textTransform: "lowercase", 77 childContent: '"any child"'}; 78 else 79 var styles = {color: "rgb(0, 255, 0)", textTransform: "uppercase", 80 childContent: '"link child"'}; 81 82 // Trigger the :hover pseudo-class. 83 synthesizeMouseAtCenter(element, {type: "mousemove"}); 84 85 var computedStyle = getComputedStyle(element); 86 is(computedStyle.color, styles.color, "Unexpected color value"); 87 is(computedStyle.textTransform, styles.textTransform, 88 "Unexpected text-transform value"); 89 90 computedStyle = getComputedStyle(element, "::after"); 91 is(computedStyle.content, '"any element"', 92 "Unexpected pseudo-element content"); 93 94 computedStyle = getComputedStyle( 95 element.getElementsByClassName("child")[0], "::after"); 96 is(computedStyle.content, styles.childContent, 97 "Unexpected pseudo-element content for child"); 98 } 99 100 SimpleTest.waitForExplicitFinish(); 101 SimpleTest.waitForFocus(function() { 102 test(document.getElementById("span"), false); 103 test(document.getElementById("label"), false); 104 test(document.getElementById("link"), true); 105 test(document.getElementById("div"), false); 106 // Dynamic change test. 107 // Trigger the :hover pseudo-class. 108 synthesizeMouseAtCenter(document.getElementById('dynamic-test'), {type: "mousemove"}); 109 is(getComputedStyle(document.getElementById('should-be-green-on-hover')).backgroundColor, 110 "rgb(0, 255, 0)", 111 "Dynamic change should invalidate properly"); 112 113 synthesizeMouseAtCenter(document.getElementById('button'), {type: "mousemove"}); 114 is(getComputedStyle(document.getElementById('button')).backgroundColor, 115 "rgb(0, 255, 0)", 116 "Button hover should be green"); 117 118 synthesizeMouseAtCenter(document.getElementById('input'), {type: "mousemove"}); 119 is(getComputedStyle(document.getElementById('input')).backgroundColor, 120 "rgb(0, 255, 0)", 121 "Input hover should be green"); 122 123 synthesizeMouseAtCenter(document.getElementById('link-2'), {type: "mousemove"}); 124 is(getComputedStyle(document.getElementById('link-2')).backgroundColor, 125 "rgb(0, 255, 0)", 126 "Link hover should be green"); 127 SimpleTest.finish(); 128 }); 129 </script> 130 </head> 131 <body> 132 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=783213">Mozilla Bug 783213</a> 133 <p id="display"></p> 134 <div id="dynamic-test"> 135 <div id="should-be-green-on-hover"></div> 136 </div> 137 <div id="content"> 138 <span id="span">Span<span class="child"></span></span><br> 139 <label id="label">Label<span class="child"></span></label><br> 140 <a id="link" href="#">Link<span class="child"></span></a><br> 141 <div id="div" class="parent">Div <span><span class="child"></span></span></div><br> 142 </div> 143 <div id="dynamic-test-2"> 144 <button id="button">Button</button> 145 <input id="input" value="Input"> 146 <a id="link-2"href="">Link</a> 147 </div> 148 <pre id="test"></pre> 149 </body> 150 </html>