Wed, 31 Dec 2014 06:09:35 +0100
Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.
michael@0 | 1 | <!DOCTYPE html> |
michael@0 | 2 | <html> |
michael@0 | 3 | |
michael@0 | 4 | <head> |
michael@0 | 5 | <title>Whitespace text accessible creation/desctruction</title> |
michael@0 | 6 | |
michael@0 | 7 | <link rel="stylesheet" type="text/css" |
michael@0 | 8 | href="chrome://mochikit/content/tests/SimpleTest/test.css" /> |
michael@0 | 9 | |
michael@0 | 10 | <script type="application/javascript" |
michael@0 | 11 | src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> |
michael@0 | 12 | |
michael@0 | 13 | <script type="application/javascript" |
michael@0 | 14 | src="../common.js"></script> |
michael@0 | 15 | <script type="application/javascript" |
michael@0 | 16 | src="../role.js"></script> |
michael@0 | 17 | <script type="application/javascript" |
michael@0 | 18 | src="../events.js"></script> |
michael@0 | 19 | |
michael@0 | 20 | <script type="application/javascript"> |
michael@0 | 21 | |
michael@0 | 22 | //////////////////////////////////////////////////////////////////////////// |
michael@0 | 23 | // Invokers |
michael@0 | 24 | |
michael@0 | 25 | /** |
michael@0 | 26 | * Middle image accessible removal results in text accessible removal. |
michael@0 | 27 | * |
michael@0 | 28 | * Before: |
michael@0 | 29 | * DOM: whitespace img1 whitespace img2 whitespace img3 whitespace, |
michael@0 | 30 | * a11y: img1 whitespace img2 whitespace img3 |
michael@0 | 31 | * After: |
michael@0 | 32 | * DOM: whitespace img1 whitespace whitespace img3 whitespace, |
michael@0 | 33 | * a11y: img1 whitespace img3 |
michael@0 | 34 | */ |
michael@0 | 35 | function removeImg() |
michael@0 | 36 | { |
michael@0 | 37 | this.containerNode = getNode("container1"); |
michael@0 | 38 | this.imgNode = getNode("img1"); |
michael@0 | 39 | this.img = getAccessible(this.imgNode); |
michael@0 | 40 | this.text = this.img.nextSibling; |
michael@0 | 41 | |
michael@0 | 42 | this.eventSeq = [ |
michael@0 | 43 | new invokerChecker(EVENT_HIDE, this.img), |
michael@0 | 44 | new invokerChecker(EVENT_HIDE, this.text), |
michael@0 | 45 | new invokerChecker(EVENT_REORDER, this.containerNode) |
michael@0 | 46 | ]; |
michael@0 | 47 | |
michael@0 | 48 | this.finalCheck = function textLeafUpdate_finalCheck() |
michael@0 | 49 | { |
michael@0 | 50 | var tree = |
michael@0 | 51 | { SECTION: [ |
michael@0 | 52 | { GRAPHIC: [] }, |
michael@0 | 53 | { TEXT_LEAF: [] }, |
michael@0 | 54 | { GRAPHIC: [] } |
michael@0 | 55 | ] }; |
michael@0 | 56 | |
michael@0 | 57 | testAccessibleTree(this.containerNode, tree); |
michael@0 | 58 | } |
michael@0 | 59 | |
michael@0 | 60 | this.invoke = function setOnClickAttr_invoke() |
michael@0 | 61 | { |
michael@0 | 62 | var tree = |
michael@0 | 63 | { SECTION: [ |
michael@0 | 64 | { GRAPHIC: [] }, |
michael@0 | 65 | { TEXT_LEAF: [] }, |
michael@0 | 66 | { GRAPHIC: [] }, |
michael@0 | 67 | { TEXT_LEAF: [] }, |
michael@0 | 68 | { GRAPHIC: [] } |
michael@0 | 69 | ] }; |
michael@0 | 70 | |
michael@0 | 71 | testAccessibleTree(this.containerNode, tree); |
michael@0 | 72 | |
michael@0 | 73 | this.containerNode.removeChild(this.imgNode); |
michael@0 | 74 | } |
michael@0 | 75 | |
michael@0 | 76 | this.getID = function setOnClickAttr_getID() |
michael@0 | 77 | { |
michael@0 | 78 | return "remove middle img"; |
michael@0 | 79 | } |
michael@0 | 80 | } |
michael@0 | 81 | |
michael@0 | 82 | /** |
michael@0 | 83 | * Append image making the whitespace visible and thus accessible. |
michael@0 | 84 | * Note: images and whitespaces are on different leves of accessible trees, |
michael@0 | 85 | * so that image container accessible update doesn't update the tree |
michael@0 | 86 | * of whitespace container. |
michael@0 | 87 | * |
michael@0 | 88 | * Before: |
michael@0 | 89 | * DOM: whitespace emptylink whitespace linkwithimg whitespace |
michael@0 | 90 | * a11y: emptylink linkwithimg |
michael@0 | 91 | * After: |
michael@0 | 92 | * DOM: whitespace linkwithimg whitespace linkwithimg whitespace |
michael@0 | 93 | * a11y: linkwithimg whitespace linkwithimg |
michael@0 | 94 | */ |
michael@0 | 95 | function insertImg() |
michael@0 | 96 | { |
michael@0 | 97 | this.containerNode = getNode("container2"); |
michael@0 | 98 | this.topNode = this.containerNode.parentNode; |
michael@0 | 99 | this.textNode = this.containerNode.nextSibling; |
michael@0 | 100 | this.imgNode = document.createElement("img"); |
michael@0 | 101 | this.imgNode.setAttribute("src", "../moz.png"); |
michael@0 | 102 | |
michael@0 | 103 | this.eventSeq = [ |
michael@0 | 104 | new invokerChecker(EVENT_SHOW, getAccessible, this.imgNode), |
michael@0 | 105 | new invokerChecker(EVENT_SHOW, getAccessible, this.textNode), |
michael@0 | 106 | new invokerChecker(EVENT_REORDER, this.topNode) |
michael@0 | 107 | ]; |
michael@0 | 108 | |
michael@0 | 109 | this.invoke = function insertImg_invoke() |
michael@0 | 110 | { |
michael@0 | 111 | var tree = |
michael@0 | 112 | { SECTION: [ |
michael@0 | 113 | { LINK: [] }, |
michael@0 | 114 | { LINK: [ |
michael@0 | 115 | { GRAPHIC: [] } |
michael@0 | 116 | ] } |
michael@0 | 117 | ] }; |
michael@0 | 118 | |
michael@0 | 119 | testAccessibleTree(this.topNode, tree); |
michael@0 | 120 | |
michael@0 | 121 | this.containerNode.appendChild(this.imgNode); |
michael@0 | 122 | } |
michael@0 | 123 | |
michael@0 | 124 | this.finalCheck = function insertImg_finalCheck() |
michael@0 | 125 | { |
michael@0 | 126 | var tree = |
michael@0 | 127 | { SECTION: [ |
michael@0 | 128 | { LINK: [ |
michael@0 | 129 | { GRAPHIC: [ ] } |
michael@0 | 130 | ] }, |
michael@0 | 131 | { TEXT_LEAF: [ ] }, |
michael@0 | 132 | { LINK: [ |
michael@0 | 133 | { GRAPHIC: [ ] } |
michael@0 | 134 | ] } |
michael@0 | 135 | ] }; |
michael@0 | 136 | |
michael@0 | 137 | testAccessibleTree(this.topNode, tree); |
michael@0 | 138 | } |
michael@0 | 139 | |
michael@0 | 140 | this.getID = function appendImg_getID() |
michael@0 | 141 | { |
michael@0 | 142 | return "insert img into internal container"; |
michael@0 | 143 | } |
michael@0 | 144 | } |
michael@0 | 145 | |
michael@0 | 146 | //////////////////////////////////////////////////////////////////////////// |
michael@0 | 147 | // Test |
michael@0 | 148 | |
michael@0 | 149 | //gA11yEventDumpID = "eventdump"; // debug stuff |
michael@0 | 150 | //gA11yEventDumpToConsole = true; |
michael@0 | 151 | |
michael@0 | 152 | var gQueue = null; |
michael@0 | 153 | |
michael@0 | 154 | function doTest() |
michael@0 | 155 | { |
michael@0 | 156 | gQueue = new eventQueue(); |
michael@0 | 157 | |
michael@0 | 158 | gQueue.push(new removeImg()); |
michael@0 | 159 | gQueue.push(new insertImg()); |
michael@0 | 160 | |
michael@0 | 161 | gQueue.invoke(); // SimpleTest.finish() will be called in the end |
michael@0 | 162 | } |
michael@0 | 163 | |
michael@0 | 164 | SimpleTest.waitForExplicitFinish(); |
michael@0 | 165 | addA11yLoadEvent(doTest); |
michael@0 | 166 | </script> |
michael@0 | 167 | </head> |
michael@0 | 168 | <body> |
michael@0 | 169 | |
michael@0 | 170 | <a target="_blank" |
michael@0 | 171 | title="Make sure accessible tree is correct when rendered text is changed" |
michael@0 | 172 | href="https://bugzilla.mozilla.org/show_bug.cgi?id=625652"> |
michael@0 | 173 | Mozilla Bug 625652 |
michael@0 | 174 | </a> |
michael@0 | 175 | |
michael@0 | 176 | <p id="display"></p> |
michael@0 | 177 | <div id="content" style="display: none"></div> |
michael@0 | 178 | <pre id="test"> |
michael@0 | 179 | </pre> |
michael@0 | 180 | |
michael@0 | 181 | <div id="container1"> <img src="../moz.png"> <img id="img1" src="../moz.png"> <img src="../moz.png"> </div> |
michael@0 | 182 | <div> <a id="container2"></a> <a><img src="../moz.png"></a> </div> |
michael@0 | 183 | |
michael@0 | 184 | <div id="eventdump"></div> |
michael@0 | 185 | </body> |
michael@0 | 186 | </html> |