test_aria_display_contents.html (5200B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>ARIA and style="display: contents;"</title> 5 <link rel="stylesheet" type="text/css" 6 href="chrome://mochikit/content/tests/SimpleTest/test.css" /> 7 8 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 9 10 <script type="application/javascript" 11 src="../common.js"></script> 12 <script type="application/javascript" 13 src="../role.js"></script> 14 15 <script type="application/javascript"> 16 function doTest() { 17 // Test ARIA grids that have display: contents; on different elements. 18 // They should all have equivalent trees. 19 var accTree = 20 { GRID: [ 21 { ROW: [ 22 { role: ROLE_COLUMNHEADER, 23 children: [ { TEXT_LEAF: [ ] }, ] 24 }, 25 { role: ROLE_COLUMNHEADER, 26 children: [ { TEXT_LEAF: [ ] }, ] 27 }, 28 ] }, 29 { ROW: [ 30 { ROWHEADER: [ 31 { TEXT_LEAF: [ ] }, 32 ] }, 33 { GRID_CELL: [ 34 { TEXT_LEAF: [ ] }, 35 ] }, 36 ] }, 37 ] }; 38 39 testAccessibleTree("gridWithoutDisplayContents", accTree); 40 testAccessibleTree("gridWithDisplayContents", accTree); 41 testAccessibleTree("gridWithDisplayContentsRow", accTree); 42 testAccessibleTree("gridWithDisplayContentsColHeader", accTree); 43 testAccessibleTree("gridWithDisplayContentsRowHeader", accTree); 44 testAccessibleTree("gridWithDisplayContentsGridCell", accTree); 45 46 // Test divs with ARIA roles and attributes and display: contents to 47 // verify that Accessibles are created appropriately. 48 accTree = 49 { SECTION: [ 50 { LIST: [ 51 { LISTITEM: [ 52 { TEXT_LEAF: [ ] } 53 ] }, 54 ] }, 55 { SECTION: [ 56 { SECTION: [ 57 { TEXT_LEAF: [ ] } 58 ] }, 59 ] }, 60 { SECTION: [ 61 { TEXT_LEAF: [ ] } 62 ] }, 63 ] }; 64 testAccessibleTree("container", accTree); 65 66 // Test paragraph with display: contents. It should create a generic 67 // Accessible that reports the role correctly. 68 accTree = 69 { SECTION: [ 70 { PARAGRAPH: [ { TEXT_LEAF: [ ] } ] }, 71 { TEXT_LEAF: [ ] }, // space between paragraphs 72 { TEXT_LEAF: [ ] }, 73 ] }; 74 testAccessibleTree("paragraphContainer", accTree); 75 76 SimpleTest.finish(); 77 } 78 79 SimpleTest.waitForExplicitFinish(); 80 addA11yLoadEvent(doTest); 81 </script> 82 </head> 83 <body> 84 85 <a target="_blank" 86 title="Element with ARIA role and display: contents doesn't get an accessible" 87 href="https://bugzilla.mozilla.org/show_bug.cgi?id=1494196"> 88 Mozilla Bug 1494196 89 </a> 90 <p id="display"></p> 91 <div id="content" style="display: none"></div> 92 <pre id="test"> 93 </pre> 94 95 <div id="gridWithoutDisplayContents" role="grid"> 96 <div role="row"> 97 <div role="columnheader">col1</div> 98 <div role="columnheader">col2</div> 99 </div> 100 <div role="row"> 101 <div role="rowheader">row1</div> 102 <div role="gridcell">cell1</div> 103 </div> 104 </div> 105 <div id="gridWithDisplayContents" role="grid" style="display:contents;"> 106 <div role="row"> 107 <div role="columnheader">col1</div> 108 <div role="columnheader">col2</div> 109 </div> 110 <div role="row"> 111 <div role="rowheader">row1</div> 112 <div role="gridcell">cell1</div> 113 </div> 114 </div> 115 <div id="gridWithDisplayContentsRow" role="grid"> 116 <div role="row" style="display:contents;"> 117 <div role="columnheader">col1</div> 118 <div role="columnheader">col2</div> 119 </div> 120 <div role="row"> 121 <div role="rowheader">row1</div> 122 <div role="gridcell">cell1</div> 123 </div> 124 </div> 125 <div id="gridWithDisplayContentsColHeader" role="grid"> 126 <div role="row"> 127 <div role="columnheader" style="display:contents;">col1</div> 128 <div role="columnheader">col2</div> 129 </div> 130 <div role="row"> 131 <div role="rowheader">row1</div> 132 <div role="gridcell">cell1</div> 133 </div> 134 </div> 135 <div id="gridWithDisplayContentsRowHeader" role="grid"> 136 <div role="row"> 137 <div role="columnheader">col1</div> 138 <div role="columnheader">col2</div> 139 </div> 140 <div role="row"> 141 <div role="rowheader" style="display:contents;">row1</div> 142 <div role="gridcell">cell1</div> 143 </div> 144 </div> 145 <div id="gridWithDisplayContentsGridCell" role="grid"> 146 <div role="row"> 147 <div role="columnheader">col1</div> 148 <div role="columnheader">col2</div> 149 </div> 150 <div role="row"> 151 <div role="rowheader">row1</div> 152 <div role="gridcell" style="display:contents;">cell1</div> 153 </div> 154 </div> 155 156 <div id="container"> 157 <div role="list" style="display: contents;"> 158 <div role="listitem">test</div> 159 </div> 160 <div aria-label="test" style="display: contents;"> 161 <div role="listitem">test</div> 162 </div> 163 <div role="none" style="display: contents;"> 164 <div role="listitem">test</div> 165 </div> 166 </div> 167 168 <div id="paragraphContainer"> 169 <p style="display: contents;">test</p> 170 <p style="display: contents;" role="none">test</p> 171 </div> 172 </body> 173 </html>