| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE HTML> |
| 2 <script src="../resources/testharness.js"></script> |
| 3 <script src="../resources/testharnessreport.js"></script> |
| 4 |
| 5 <!-- |
| 6 This is a test of the new (June 2016) bounds calculation code, |
| 7 in which every node in the accessibility tree specifies its |
| 8 bounding box and optional matrix transform relative to an |
| 9 ancestor object in the tree. |
| 10 |
| 11 This representation means that when a container element |
| 12 scrolls, animates, or otherwise changes position on screen, |
| 13 its descendants don't need to be updated because their |
| 14 coordinates are all relative. |
| 15 |
| 16 This test asserts that the bounding box we compute is the |
| 17 same as what's computed by the DOM getBoundingClientRect |
| 18 interface. |
| 19 --> |
| 20 |
| 21 <style> |
| 22 .hideAllContainers .container { |
| 23 display: none; |
| 24 } |
| 25 </style> |
| 26 |
| 27 <div class="container"> |
| 28 <input type="text" id="input"> |
| 29 <input type="checkbox" id="checkbox"> |
| 30 <input type="radio" id="radio"> |
| 31 <select id="select"> |
| 32 <option>Apple |
| 33 <option>Orange |
| 34 </select> |
| 35 <button id="button">Button</button> |
| 36 <h1 id="heading">Heading</h1> |
| 37 <p id="para">Para</p> |
| 38 <p>This para has one <span id="span" role="group">span</span></p> |
| 39 <ul id="ul"> |
| 40 <li id="li1">List item 1</li> |
| 41 <li id="li2">List item 2</li> |
| 42 </ul> |
| 43 <div id="div">Div</div> |
| 44 <div id="border" style="border: 10px solid #ccc;">Border</div> |
| 45 <div id="padding" style="padding: 20px;">Padding</div> |
| 46 <div id="margin" style="margin: 30px;">Margin</div> |
| 47 <div id="border_padding_margin" |
| 48 style="border: 10px solid #eee; padding: 20px; margin: 30px;"> |
| 49 Border Padding Margin |
| 50 </div> |
| 51 <svg id="svg" width="60" height="60"> |
| 52 <circle role="button" id="svg_circle" r="25" cx="30" cy="30" stroke="blue"
stroke-width="1"/> |
| 53 </svg> |
| 54 </div> |
| 55 |
| 56 <script> |
| 57 function assertDOMRectSameAsAXRect(id) { |
| 58 var element = document.getElementById(id); |
| 59 var bounds = element.getBoundingClientRect(); |
| 60 var axObject = accessibilityController.accessibleElementById(id); |
| 61 |
| 62 // Due to rounding we won't get identical bounds as getBoundingClientRect(), |
| 63 // so allow the test to pass if we're within 1 pixel. The test examples |
| 64 // deliberately have borders, margins, and padding larger than 1 pixel to |
| 65 // ensure that this epsilon is not masking more serious errors. |
| 66 var epsilon = 1; |
| 67 |
| 68 assert_approx_equals(axObject.boundsX, bounds.left, epsilon, id + " left"); |
| 69 assert_approx_equals(axObject.boundsY, bounds.top, epsilon, id + " left"); |
| 70 assert_approx_equals(axObject.boundsWidth, bounds.width, epsilon, id + " lef
t"); |
| 71 assert_approx_equals(axObject.boundsHeight, bounds.height, epsilon, id + " l
eft"); |
| 72 } |
| 73 |
| 74 function assertStaticTextChildDOMRectSameAsAXRect(id) { |
| 75 var element = document.getElementById(id); |
| 76 var axObject = accessibilityController.accessibleElementById(id); |
| 77 var text = element.firstChild; |
| 78 var axText = axObject.childAtIndex(0); |
| 79 assert_equals(text.nodeType, Node.TEXT_NODE, id + " firstChild nodeType"); |
| 80 assert_equals(axText.role, "AXRole: AXStaticText", id + " AX first child rol
e"); |
| 81 var range = document.createRange(); |
| 82 range.selectNode(text); |
| 83 var bounds = range.getBoundingClientRect(); |
| 84 var axObject = accessibilityController.accessibleElementById(id); |
| 85 var epsilon = 1; |
| 86 assert_approx_equals(axText.boundsX, bounds.left, epsilon, id + " left"); |
| 87 assert_approx_equals(axText.boundsY, bounds.top, epsilon, id + " left"); |
| 88 assert_approx_equals(axText.boundsWidth, bounds.width, epsilon, id + " left"
); |
| 89 assert_approx_equals(axText.boundsHeight, bounds.height, epsilon, id + " lef
t"); |
| 90 } |
| 91 |
| 92 function assertOffsetContainerIs(id, containerId, opt_expectedResult) { |
| 93 if (opt_expectedResult === undefined) |
| 94 opt_expectedResult = true; |
| 95 var axObject = accessibilityController.accessibleElementById(id); |
| 96 var axContainer = accessibilityController.accessibleElementById(containerId)
; |
| 97 if (opt_expectedResult) |
| 98 assert_equals(axObject.offsetContainer(), axContainer, id + " offsetCont
ainer"); |
| 99 else |
| 100 assert_false(axObject.offsetContainer().isEqual(axContainer), id + " off
setContainer (should be false)"); |
| 101 } |
| 102 |
| 103 function assertHasTransform(id, expected) { |
| 104 var axObject = accessibilityController.accessibleElementById(id); |
| 105 assert_equals(axObject.hasNonIdentityTransform(), expected, id + " hasNonIde
ntityTransform"); |
| 106 } |
| 107 |
| 108 test(function(t) { |
| 109 assertDOMRectSameAsAXRect("input"); |
| 110 assertDOMRectSameAsAXRect("checkbox"); |
| 111 assertDOMRectSameAsAXRect("radio"); |
| 112 assertDOMRectSameAsAXRect("button"); |
| 113 assertDOMRectSameAsAXRect("heading"); |
| 114 assertStaticTextChildDOMRectSameAsAXRect("heading"); |
| 115 assertDOMRectSameAsAXRect("para"); |
| 116 assertStaticTextChildDOMRectSameAsAXRect("para"); |
| 117 assertDOMRectSameAsAXRect("span"); |
| 118 assertStaticTextChildDOMRectSameAsAXRect("span"); |
| 119 assertDOMRectSameAsAXRect("ul"); |
| 120 assertDOMRectSameAsAXRect("li1"); |
| 121 assertDOMRectSameAsAXRect("li2"); |
| 122 assertDOMRectSameAsAXRect("div"); |
| 123 assertStaticTextChildDOMRectSameAsAXRect("div"); |
| 124 assertDOMRectSameAsAXRect("border"); |
| 125 assertStaticTextChildDOMRectSameAsAXRect("border"); |
| 126 assertDOMRectSameAsAXRect("padding"); |
| 127 assertStaticTextChildDOMRectSameAsAXRect("padding"); |
| 128 assertDOMRectSameAsAXRect("margin"); |
| 129 assertStaticTextChildDOMRectSameAsAXRect("margin"); |
| 130 assertDOMRectSameAsAXRect("border_padding_margin"); |
| 131 assertStaticTextChildDOMRectSameAsAXRect("border_padding_margin"); |
| 132 assertDOMRectSameAsAXRect("svg"); |
| 133 assertDOMRectSameAsAXRect("svg_circle"); |
| 134 }, "Test computed AX rect for some common objects"); |
| 135 </script> |
| 136 |
| 137 <div id="container2" class="container" role="group" |
| 138 style="position: absolute; left: 400px; top: 20px; border: 3px solid #eee;
margin: 5px; padding: 7px;"> |
| 139 <div id="div2">Absolute-positioned</div> |
| 140 <svg id="svg2" width="60" height="60"> |
| 141 <circle role="button" id="svg_circle2" r="25" cx="30" cy="30" stroke="bl
ue" stroke-width="1"/> |
| 142 </svg> |
| 143 |
| 144 </div> |
| 145 |
| 146 <script> |
| 147 test(function(t) { |
| 148 assertHasTransform("container2", false); |
| 149 |
| 150 assertHasTransform("div2", false); |
| 151 assertDOMRectSameAsAXRect("div2"); |
| 152 assertOffsetContainerIs("div2", "container2"); |
| 153 assertDOMRectSameAsAXRect("svg2"); |
| 154 assertDOMRectSameAsAXRect("svg_circle2"); |
| 155 }, "Test objects inside of absolute-positioned container"); |
| 156 </script> |
| 157 |
| 158 <div id="container3" class="container" style="height: 100px; overflow: scroll;"> |
| 159 <div id="div3" style="height: 500px;">Div</div> |
| 160 <input type="text" id="input3"> |
| 161 </div> |
| 162 |
| 163 <script> |
| 164 test(function(t) { |
| 165 document.getElementById("container3").scrollTop = 200; |
| 166 |
| 167 assertHasTransform("container3", false); |
| 168 |
| 169 assertHasTransform("div3", false); |
| 170 assertDOMRectSameAsAXRect("div3"); |
| 171 assertOffsetContainerIs("div3", "container3"); |
| 172 assertHasTransform("input3", false); |
| 173 assertDOMRectSameAsAXRect("input3"); |
| 174 assertOffsetContainerIs("input3", "container3"); |
| 175 }, "Test objects inside of scrolled container"); |
| 176 </script> |
| 177 |
| 178 <div id="container4" class="container" style="width: 200px; transform: rotateZ(4
5deg);" role="group"> |
| 179 <div id="div4">Rotated text</div> |
| 180 </div> |
| 181 |
| 182 <script> |
| 183 test(function(t) { |
| 184 assertHasTransform("container4", true); |
| 185 |
| 186 assertHasTransform("div4", false); |
| 187 assertDOMRectSameAsAXRect("div4"); |
| 188 assertOffsetContainerIs("div4", "container4"); |
| 189 }, "Test objects inside of rotated container"); |
| 190 </script> |
| 191 |
| 192 <div class="container"> |
| 193 <div style="margin: 20px; width: 200px; transform: scale(1.5);"> |
| 194 <div id="scroll5" class="container" style="padding: 10px; height: 100px;
overflow: scroll;"> |
| 195 <div style="width: 200px; transform: rotateZ(175deg);"> |
| 196 <div id="div5" style="margin: 30px; padding: 40px; border: 2px s
olid #eee;"> |
| 197 Text with lots of transformations |
| 198 </div> |
| 199 </div> |
| 200 </div> |
| 201 </div> |
| 202 </div> |
| 203 |
| 204 <script> |
| 205 test(function(t) { |
| 206 document.getElementById("scroll5").scrollTop = 40; |
| 207 assertDOMRectSameAsAXRect("div5"); |
| 208 }, "Test object inside of several nested containers with transforms and scrollin
g."); |
| 209 </script> |
| 210 |
| 211 <div id="container6a" class="container" role="group" style="position: relative;
left: 10px;" |
| 212 aria-owns="div6d"> |
| 213 <div id="div6a">A</div> |
| 214 <div id="div6b">B</div> |
| 215 </div> |
| 216 |
| 217 <div id="container6b" class="container" role="group" style="position: relative;
left: 10px;" |
| 218 aria-owns="div6b"> |
| 219 <div id="div6c">C</div> |
| 220 <div id="div6d">D</div> |
| 221 </div> |
| 222 |
| 223 <script> |
| 224 test(function(t) { |
| 225 // This test uses aria-owns to rearrange children between ancestors, |
| 226 // to ensure that an object's offset container is not a node that's an |
| 227 // ancestor in the accessibility tree but not in the layout tree. |
| 228 // |
| 229 // Access both of these accessibility objects first to make sure that |
| 230 // the owned children are up-to-date before running assertions, |
| 231 // since aria-owns is processed lazily. |
| 232 var axContainer6a = accessibilityController.accessibleElementById("container
6a"); |
| 233 axContainer6a.childrenCount; |
| 234 var axContainer6b = accessibilityController.accessibleElementById("container
6b"); |
| 235 axContainer6b.childrenCount; |
| 236 |
| 237 assertOffsetContainerIs("div6a", "container6a", true); |
| 238 assertOffsetContainerIs("div6b", "container6a", false); |
| 239 assertOffsetContainerIs("div6b", "container6b", false); |
| 240 |
| 241 assertOffsetContainerIs("div6c", "container6b", true); |
| 242 assertOffsetContainerIs("div6d", "container6a", false); |
| 243 assertOffsetContainerIs("div6d", "container6b", false); |
| 244 }, "Container must be an ancestor in both the AX tree and layout tree."); |
| 245 </script> |
| 246 |
| 247 <script> |
| 248 if (window.testRunner) |
| 249 document.body.className = "hideAllContainers"; |
| 250 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2047873002:
Add interface to get relative bounding box rect of AX objects. (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master