Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(6)

Side by Side Diff: third_party/WebKit/LayoutTests/external/csswg-test/selectors-4/focus-within-006.html

Issue 2776693002: [selectors-4] Import W3C Test Suite (Closed)
Patch Set: Created 3 years, 8 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
(Empty)
1 <!DOCTYPE html>
2 <html lang=en>
3 <meta charset="utf-8">
4 <title>Selectors Level 4: focus-within</title>
5 <link rel="author" title="Keyong Li" href="mailto:kli79@bloomberg.net">
6 <link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
7 <link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-within-pseudo ">
8 <link rel="match" href="focus-within-001-ref.html">
9 <meta name="flags" content="interact">
10 <meta name="assert" content="Test that :focus-within works on form controls, usi ng an input element.">
11 <style>
12 /* Suppress things that cannot be reproduced in the reference file */
13 :focus {
14 all: initial;
15 outline: none;
16
17 /* Make the caret invisible
18 since it matches the color of the text, which is transparent,
19 while keeping the text readable thanks to its shadow.
20 Not using the caret-color property as it is too new to be relied on. */
21 color: transparent; text-shadow: black 0px 0px 0px;
22 }
23
24 /* Use blue to indicate that the user needs to pay attention.
25 This element needs to be focused for the test to make sense. */
26 #focusme:not(:focus) {
27 border: solid 15px blue;
28 }
29
30 #focusme:focus:not(:focus-within) {
31 background: red;
32 }
33 div:focus-within {
34 border: solid 5px green;
35 }
36 </style>
37 <p>Test passes if, when the element below is focused,
38 it is surrounded by a thick green border.
39 There must be no red or blue once it is focused.</p>
40 <div>
41 <div>
42 <div>
43 <input id="focusme" class="reftest-wait" onfocus="this.classList.toggle('r eftest-wait');" value="Focus this element">
44 </div>
45 </div>
46 </div>
47 <script>
48 /* This script is an optional convenience,
49 simply removing the need to manually focus the element.
50 The test is valid even if the script is not run. */
51 var editor = document.getElementById('focusme');
52 editor.focus();
53 </script>
54 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698