OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <head> |
| 4 <meta charset="utf-8"> |
| 5 <title>CSS Test: :focus-within selector</title> |
| 6 <link rel="author" title="Ethan Lin" href="mailto:ethlin@mozilla.com"> |
| 7 <link rel="author" title="Mozilla" href="https://www.mozilla.org"> |
| 8 <link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-ps
eudo"> |
| 9 <meta name="assert" content="Test checks :focus-within works after focus cha
nge"> |
| 10 <link rel="match" href="focus-within-1-ref.html"> |
| 11 <meta name="flags" content="interact"> |
| 12 <style type="text/css"> |
| 13 div { |
| 14 border: solid 15px blue; |
| 15 outline: none; |
| 16 } |
| 17 div:focus-within { |
| 18 border-color: green; |
| 19 } |
| 20 </style> |
| 21 </head> |
| 22 <body> |
| 23 <p>Test passes if, when the upper element is unfocused and the lower element
is focused, the upper element is blue and the lower one is green, and they are
surrounded by a thick green border.</p> |
| 24 <div id="parent"> |
| 25 <div id="child1" tabindex="1"></div> |
| 26 <div id="child2" tabindex="2"></div> |
| 27 </div> |
| 28 <script> |
| 29 var child1 = document.getElementById('child1'); |
| 30 child1.focus(); |
| 31 document.body.offsetWidth; |
| 32 |
| 33 var child2 = document.getElementById('child2'); |
| 34 child2.focus(); |
| 35 document.body.offsetWidth; |
| 36 </script> |
| 37 </body> |
| 38 </html> |
OLD | NEW |