browser_computed_keybindings_02.js (2507B)
1 /* Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ */ 3 4 "use strict"; 5 6 // Tests the computed-view keyboard navigation. 7 8 const TEST_URI = ` 9 <style type="text/css"> 10 span { 11 font-variant: small-caps; 12 color: #000000; 13 } 14 .nomatches { 15 color: #ff0000; 16 } 17 </style> 18 <div id="first" style="margin: 10em; 19 font-size: 14pt; font-family: helvetica, sans-serif; color: #AAA"> 20 <h1>Some header text</h1> 21 <p id="salutation" style="font-size: 12pt">hi.</p> 22 <p id="body" style="font-size: 12pt">I am a test-case. This text exists 23 solely to provide some things to <span style="color: yellow"> 24 highlight</span> and <span style="font-weight: bold">count</span> 25 style list-items in the box at right. If you are reading this, 26 you should go do something else instead. Maybe read a book. Or better 27 yet, write some test-cases for another bit of code. 28 <span style="font-style: italic">some text</span></p> 29 <p id="closing">more text</p> 30 <p>even more text</p> 31 </div> 32 `; 33 34 add_task(async function () { 35 await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)); 36 const { inspector, view } = await openComputedView(); 37 await selectNode("span", inspector); 38 39 info("Selecting the first computed style in the list"); 40 const firstStyle = view.styleDocument.querySelector( 41 "#computed-container .computed-property-view" 42 ); 43 ok(firstStyle, "First computed style found in panel"); 44 firstStyle.focus(); 45 46 info("Tab to select the 2nd style and press return"); 47 let onExpanded = inspector.once("computed-view-property-expanded"); 48 EventUtils.synthesizeKey("KEY_Tab"); 49 EventUtils.synthesizeKey("KEY_Enter"); 50 await onExpanded; 51 52 info("Verify the 2nd style has been expanded"); 53 const secondStyleSelectors = view.styleDocument.querySelectorAll( 54 ".computed-property-view .matchedselectors" 55 )[1]; 56 ok(!!secondStyleSelectors.childNodes.length, "Matched selectors expanded"); 57 58 info("Tab back up and test the same thing, with space"); 59 onExpanded = inspector.once("computed-view-property-expanded"); 60 EventUtils.synthesizeKey("KEY_Tab", { shiftKey: true }); 61 EventUtils.synthesizeKey(" "); 62 await onExpanded; 63 64 info("Verify the 1st style has been expanded too"); 65 const firstStyleSelectors = view.styleDocument.querySelectorAll( 66 ".computed-property-view .matchedselectors" 67 )[0]; 68 ok(!!firstStyleSelectors.childNodes.length, "Matched selectors expanded"); 69 });