Chromium Code Reviews 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| 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 var epsilon = 1; | |
| 62 assert_approx_equals(axObject.boundsX, bounds.left, epsilon, id + " left"); | |
|
aboxhall
2016/06/09 23:05:30
Can you add a comment explaining why epsilon/appro
dmazzoni
2016/06/10 16:55:39
Added a comment. I also switched the test_runner c
| |
| 63 assert_approx_equals(axObject.boundsY, bounds.top, epsilon, id + " left"); | |
| 64 assert_approx_equals(axObject.boundsWidth, bounds.width, epsilon, id + " lef t"); | |
| 65 assert_approx_equals(axObject.boundsHeight, bounds.height, epsilon, id + " l eft"); | |
| 66 } | |
| 67 | |
| 68 function assertStaticTextChildDOMRectSameAsAXRect(id) { | |
| 69 var element = document.getElementById(id); | |
| 70 var axObject = accessibilityController.accessibleElementById(id); | |
| 71 var text = element.firstChild; | |
| 72 var axText = axObject.childAtIndex(0); | |
| 73 assert_equals(text.nodeType, Node.TEXT_NODE, id + " firstChild nodeType"); | |
| 74 assert_equals(axText.role, "AXRole: AXStaticText", id + " AX first child rol e"); | |
| 75 var range = document.createRange(); | |
| 76 range.selectNode(text); | |
| 77 var bounds = range.getBoundingClientRect(); | |
| 78 var axObject = accessibilityController.accessibleElementById(id); | |
| 79 var epsilon = 1; | |
| 80 assert_approx_equals(axText.boundsX, bounds.left, epsilon, id + " left"); | |
| 81 assert_approx_equals(axText.boundsY, bounds.top, epsilon, id + " left"); | |
| 82 assert_approx_equals(axText.boundsWidth, bounds.width, epsilon, id + " left" ); | |
| 83 assert_approx_equals(axText.boundsHeight, bounds.height, epsilon, id + " lef t"); | |
| 84 } | |
| 85 | |
| 86 function assertOffsetContainerIs(id, containerId) { | |
| 87 var axObject = accessibilityController.accessibleElementById(id); | |
| 88 var axContainer = accessibilityController.accessibleElementById(containerId) ; | |
| 89 assert_equals(axObject.offsetContainer(), axContainer, id + " offsetContaine r"); | |
| 90 } | |
| 91 | |
| 92 function assertHasTransform(id, expected) { | |
| 93 var axObject = accessibilityController.accessibleElementById(id); | |
| 94 assert_equals(axObject.hasNonIdentityTransform(), expected, id + " hasNonIde ntityTransform"); | |
| 95 } | |
| 96 | |
| 97 test(function(t) { | |
| 98 assertDOMRectSameAsAXRect("input"); | |
| 99 assertDOMRectSameAsAXRect("checkbox"); | |
| 100 assertDOMRectSameAsAXRect("radio"); | |
| 101 assertDOMRectSameAsAXRect("button"); | |
| 102 assertDOMRectSameAsAXRect("heading"); | |
| 103 assertStaticTextChildDOMRectSameAsAXRect("heading"); | |
| 104 assertDOMRectSameAsAXRect("para"); | |
| 105 assertStaticTextChildDOMRectSameAsAXRect("para"); | |
| 106 assertDOMRectSameAsAXRect("span"); | |
| 107 assertStaticTextChildDOMRectSameAsAXRect("span"); | |
| 108 assertDOMRectSameAsAXRect("ul"); | |
| 109 assertDOMRectSameAsAXRect("li1"); | |
| 110 assertDOMRectSameAsAXRect("li2"); | |
| 111 assertDOMRectSameAsAXRect("div"); | |
| 112 assertStaticTextChildDOMRectSameAsAXRect("div"); | |
| 113 assertDOMRectSameAsAXRect("border"); | |
| 114 assertStaticTextChildDOMRectSameAsAXRect("border"); | |
| 115 assertDOMRectSameAsAXRect("padding"); | |
| 116 assertStaticTextChildDOMRectSameAsAXRect("padding"); | |
| 117 assertDOMRectSameAsAXRect("margin"); | |
| 118 assertStaticTextChildDOMRectSameAsAXRect("margin"); | |
| 119 assertDOMRectSameAsAXRect("border_padding_margin"); | |
| 120 assertStaticTextChildDOMRectSameAsAXRect("border_padding_margin"); | |
| 121 assertDOMRectSameAsAXRect("svg"); | |
| 122 assertDOMRectSameAsAXRect("svg_circle"); | |
| 123 }, "Test computed AX rect for some common objects"); | |
| 124 </script> | |
| 125 | |
| 126 <div id="container2" class="container" role="group" | |
| 127 style="position: absolute; left: 400px; top: 20px; border: 3px solid #eee; margin: 5px; padding: 7px;"> | |
| 128 <div id="div2">Absolute-positioned</div> | |
| 129 <svg id="svg2" width="60" height="60"> | |
| 130 <circle role="button" id="svg_circle2" r="25" cx="30" cy="30" stroke="bl ue" stroke-width="1"/> | |
| 131 </svg> | |
| 132 | |
| 133 </div> | |
| 134 | |
| 135 <script> | |
| 136 test(function(t) { | |
| 137 assertHasTransform("container2", false); | |
| 138 | |
| 139 assertHasTransform("div2", false); | |
| 140 assertDOMRectSameAsAXRect("div2"); | |
| 141 assertOffsetContainerIs("div2", "container2"); | |
| 142 assertDOMRectSameAsAXRect("svg2"); | |
| 143 assertDOMRectSameAsAXRect("svg_circle2"); | |
| 144 }, "Test objects inside of absolute-positioned container"); | |
| 145 </script> | |
| 146 | |
| 147 <div id="container3" class="container" style="height: 100px; overflow: scroll;"> | |
| 148 <div id="div3" style="height: 500px;">Div</div> | |
| 149 <input type="text" id="input3"> | |
| 150 </div> | |
| 151 | |
| 152 <script> | |
| 153 test(function(t) { | |
| 154 document.getElementById("container3").scrollTop = 200; | |
| 155 | |
| 156 assertHasTransform("container3", false); | |
| 157 | |
| 158 assertHasTransform("div3", false); | |
| 159 assertDOMRectSameAsAXRect("div3"); | |
| 160 assertOffsetContainerIs("div3", "container3"); | |
| 161 assertHasTransform("input3", false); | |
| 162 assertDOMRectSameAsAXRect("input3"); | |
| 163 assertOffsetContainerIs("input3", "container3"); | |
| 164 }, "Test objects inside of scrolled container"); | |
| 165 </script> | |
| 166 | |
| 167 <div id="container4" class="container" style="width: 200px; transform: rotateZ(4 5deg);" role="group"> | |
| 168 <div id="div4">Rotated text</div> | |
| 169 </div> | |
| 170 | |
| 171 <script> | |
| 172 test(function(t) { | |
| 173 assertHasTransform("container4", true); | |
| 174 | |
| 175 assertHasTransform("div4", false); | |
| 176 assertDOMRectSameAsAXRect("div4"); | |
| 177 assertOffsetContainerIs("div4", "container4"); | |
| 178 }, "Test objects inside of rotated container"); | |
| 179 </script> | |
| 180 | |
| 181 <div class="container"> | |
| 182 <div style="margin: 20px; width: 200px; transform: scale(1.5);"> | |
| 183 <div id="scroll5" class="container" style="padding: 10px; height: 100px; overflow: scroll;"> | |
| 184 <div style="width: 200px; transform: rotateZ(175deg);"> | |
| 185 <div id="div5" style="margin: 30px; padding: 40px; border: 2px s olid #eee;"> | |
| 186 Text with lots of transformations | |
| 187 </div> | |
| 188 </div> | |
| 189 </div> | |
| 190 </div> | |
| 191 </div> | |
| 192 | |
| 193 <script> | |
| 194 test(function(t) { | |
| 195 document.getElementById("scroll5").scrollTop = 40; | |
| 196 assertDOMRectSameAsAXRect("div5"); | |
| 197 }, "Test object inside of several nested containers with transforms and scrollin g."); | |
| 198 </script> | |
| 199 | |
| 200 <script> | |
| 201 if (window.testRunner) | |
| 202 document.body.className = "hideAllContainers"; | |
| 203 </script> | |
| OLD | NEW |
