browser_position.js (4411B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 5 "use strict"; 6 7 /* import-globals-from ../../mochitest/role.js */ 8 loadScripts({ name: "role.js", dir: MOCHITESTS_DIR }); 9 10 /** 11 * Test changing the left/top CSS properties. 12 */ 13 addAccessibleTask( 14 ` 15 <div id="div" style="position: relative; left: 0px; top: 0px; width: fit-content;"> 16 test 17 </div> 18 `, 19 async function (browser, docAcc) { 20 await testBoundsWithContent(docAcc, "div", browser); 21 info("Changing left"); 22 await invokeContentTask(browser, [], () => { 23 content.document.getElementById("div").style.left = "200px"; 24 }); 25 await waitForContentPaint(browser); 26 await testBoundsWithContent(docAcc, "div", browser); 27 info("Changing top"); 28 await invokeContentTask(browser, [], () => { 29 content.document.getElementById("div").style.top = "200px"; 30 }); 31 await waitForContentPaint(browser); 32 await testBoundsWithContent(docAcc, "div", browser); 33 }, 34 { chrome: true, topLevel: true, iframe: true } 35 ); 36 37 /** 38 * Test moving one element by inserting a second element before it such that the 39 * second element doesn't reflow. 40 */ 41 addAccessibleTask( 42 ` 43 <div id="reflowContainer"> 44 <p>1</p> 45 <p id="reflow2" hidden>2</p> 46 <p id="reflow3">3</p> 47 </div> 48 <p id="noReflow">noReflow</p> 49 `, 50 async function (browser, docAcc) { 51 for (const id of ["reflowContainer", "reflow3", "noReflow"]) { 52 await testBoundsWithContent(docAcc, id, browser); 53 } 54 // Show p2, which will reflow everything inside "reflowContainer", but just 55 // move "noReflow" down without reflowing it. 56 info("Showing p2"); 57 let shown = waitForEvent(EVENT_SHOW, "reflow2"); 58 await invokeContentTask(browser, [], () => { 59 content.document.getElementById("reflow2").hidden = false; 60 }); 61 await waitForContentPaint(browser); 62 await shown; 63 for (const id of ["reflowContainer", "reflow2", "reflow3", "noReflow"]) { 64 await testBoundsWithContent(docAcc, id, browser); 65 } 66 }, 67 { chrome: true, topLevel: true, remoteIframe: true } 68 ); 69 70 /** 71 * Test bounds when an Accessible is re-parented. 72 */ 73 addAccessibleTask( 74 ` 75 <div id="container"> 76 <p style="height: 300px;">1</p> 77 <div class="pParent"> 78 <p id="p2">2</p> 79 </div> 80 </div> 81 `, 82 async function (browser, docAcc) { 83 const paraTree = { PARAGRAPH: [{ TEXT_LEAF: [] }] }; 84 const container = findAccessibleChildByID(docAcc, "container"); 85 testAccessibleTree(container, { SECTION: [paraTree, paraTree] }); 86 await testBoundsWithContent(docAcc, "p2", browser); 87 // Add a click listener to the div containing p2. This will cause an 88 // Accessible to be created for that div, which didn't have one before. 89 info("Adding click listener to pParent"); 90 let reordered = waitForEvent(EVENT_REORDER, container); 91 await invokeContentTask(browser, [], () => { 92 content.document 93 .querySelector(".pParent") 94 .addEventListener("click", function () {}); 95 }); 96 await reordered; 97 testAccessibleTree(container, { 98 SECTION: [paraTree, { SECTION: [paraTree] }], 99 }); 100 await testBoundsWithContent(docAcc, "p2", browser); 101 }, 102 { chrome: true, topLevel: true, remoteIframe: true } 103 ); 104 105 /** 106 * Test the bounds of items in an inline list with content that offsets the 107 * origin of the list's bounding box (creating an IB split within the UL frame). 108 */ 109 addAccessibleTask( 110 ` 111 <style> 112 ul,li { 113 display:inline; 114 list-style-type:none; 115 list-style-position:inside; 116 margin:0; 117 padding:0; 118 } 119 </style> 120 <div id="container" style="background:green; max-width: 400px;">List of information: <ul id="list"><li id="one">item one</li> | <li id="two">item two</li> | <li id="three">item three</li> | <li id="four">item four</li> | <li id="five">item five</li></ul></div> 121 `, 122 async function (browser, docAcc) { 123 await testBoundsWithContent(docAcc, "list", browser); 124 await testBoundsWithContent(docAcc, "one", browser); 125 await testBoundsWithContent(docAcc, "two", browser); 126 await testBoundsWithContent(docAcc, "three", browser); 127 await testBoundsWithContent(docAcc, "four", browser); 128 await testBoundsWithContent(docAcc, "five", browser); 129 }, 130 { 131 chrome: true, 132 topLevel: true, 133 iframe: true, 134 } 135 );