|
1 <!DOCTYPE html> |
|
2 <html> |
|
3 <head> |
|
4 <style> |
|
5 |
|
6 #outer { |
|
7 overflow: auto; |
|
8 width: 200px; |
|
9 height: 200px; |
|
10 } |
|
11 |
|
12 #inner { |
|
13 position: relative; |
|
14 height: 400px; |
|
15 } |
|
16 |
|
17 #inner:focus { |
|
18 background-color: lightblue; |
|
19 } |
|
20 |
|
21 #inner:active { |
|
22 background-color: blue; |
|
23 } |
|
24 |
|
25 #h, #h2 { |
|
26 background: rgba(255, 255, 255, 0); |
|
27 } |
|
28 |
|
29 #h { |
|
30 position: absolute; |
|
31 height: 200px; |
|
32 width: 200px; |
|
33 } |
|
34 |
|
35 #h2 { |
|
36 position: absolute; |
|
37 top: 200px; |
|
38 height: 200px; |
|
39 width: 100%; |
|
40 } |
|
41 |
|
42 #h:hover, |
|
43 #h2:hover { |
|
44 background: pink; |
|
45 } |
|
46 |
|
47 #h:active, |
|
48 #h2:active { |
|
49 background: red; |
|
50 } |
|
51 |
|
52 pre { |
|
53 position: absolute; |
|
54 left: 250px; |
|
55 top: 80px; |
|
56 } |
|
57 |
|
58 </style> |
|
59 </head> |
|
60 <body> |
|
61 |
|
62 <p>Manual test for <a href="https://bugs.webkit.org/show_bug.cgi?id=38129">bug 38129</a></p> |
|
63 |
|
64 <p>Click the div below and press the context menu key on your keyboard (Shift+F10 also works)</p> |
|
65 |
|
66 <div id=outer> |
|
67 <div id=inner tabindex=0> |
|
68 <div id=h2></div> |
|
69 </div> |
|
70 </div> |
|
71 |
|
72 <div id=h></div> |
|
73 |
|
74 <pre></pre> |
|
75 |
|
76 <script> |
|
77 |
|
78 function cs(el) |
|
79 { |
|
80 if (window.getComputedStyle) |
|
81 return window.getComputedStyle(el, ''); |
|
82 return el.currentStyle; |
|
83 } |
|
84 |
|
85 document.addEventListener('contextmenu', function(e) |
|
86 { |
|
87 var inner = document.querySelector('#inner'); |
|
88 var outer = document.querySelector('#outer'); |
|
89 var h = document.querySelector('#h'); |
|
90 var h2 = document.querySelector('#h2'); |
|
91 var result = []; |
|
92 |
|
93 result.push(e.target, document.querySelector('#inner')); |
|
94 result.push(cs(inner, '').backgroundColor, 'rgb(0, 0, 255)'); |
|
95 result.push(cs(h, '').backgroundColor, 'rgba(255, 255, 255, 0)'); |
|
96 result.push(cs(h2, '').backgroundColor, 'rgba(255, 255, 255, 0)'); |
|
97 |
|
98 var s = ''; |
|
99 for (var i = 0; i < result.length; i += 2) { |
|
100 s += result[i] + ' == ' + result[i + 1] + ' - ' + |
|
101 (result[i] == result[i + 1] ? 'PASS' : 'FAIL') + '<br>'; |
|
102 } |
|
103 |
|
104 document.querySelector('pre').innerHTML = s; |
|
105 |
|
106 return true; |
|
107 }, false); |
|
108 |
|
109 </script> |
|
110 |
|
111 </body> |
|
112 </html> |