test_display_contents.html (2255B)
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <title>CSS display:contents tests</title> 6 <link rel="stylesheet" type="text/css" 7 href="chrome://mochikit/content/tests/SimpleTest/test.css" /> 8 9 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 10 11 <script type="application/javascript" 12 src="../common.js"></script> 13 <script type="application/javascript" 14 src="../role.js"></script> 15 16 <script type="application/javascript"> 17 function doTest() { 18 let tree = 19 { LIST: [ 20 { LISTITEM: [ 21 { LISTITEM_MARKER: [] }, 22 { TEXT_LEAF: [] }, 23 ]}, 24 { LISTITEM: [ 25 { LISTITEM_MARKER: [] }, 26 { TEXT_LEAF: [] }, 27 ]}, 28 ] }; 29 testAccessibleTree("ul", tree); 30 31 tree = 32 { TABLE: [ 33 { ROW: [ 34 { CELL: [{ TEXT_LEAF: [] } ] }, 35 { CELL: [{ TEXT_LEAF: [] } ] }, 36 ]}, 37 ] }; 38 testAccessibleTree("tableTableContents", tree); 39 testAccessibleTree("tableTrContents", tree); 40 testAccessibleTree("tableTdContents", tree); 41 42 tree = 43 { TABLE: [ 44 { ROWGROUP : [ 45 { ROW: [ 46 { CELL: [{ TEXT_LEAF: [] } ] }, 47 { CELL: [{ TEXT_LEAF: [] } ] }, 48 ]}, 49 ]}, 50 ] }; 51 testAccessibleTree("tableTbodyContents", tree); 52 53 54 SimpleTest.finish(); 55 } 56 57 SimpleTest.waitForExplicitFinish(); 58 addA11yLoadEvent(doTest); 59 </script> 60 </head> 61 <body> 62 <p id="display"></p> 63 <div id="content" style="display: none"></div> 64 <pre id="test"> 65 </pre> 66 67 <ul id="ul" style="display: contents;"> 68 <li>Supermarket 1</li> 69 <li>Supermarket 2</li> 70 </ul> 71 72 <!-- The summary attribute in these tables ensures they are treated as data 73 tables. --> 74 <table id="tableTableContents" summary="summary" style="display: contents;"> 75 <tr><td>a</td><td>b</td></tr> 76 </table> 77 <table id="tableTrContents" summary="table" style="display: block;"> 78 <tr style="display: contents;"><td>a</td><td>b</td></tr> 79 </table> 80 <table id="tableTdContents" summary="summary"> 81 <tr> 82 <td style="display: contents;">a</td> 83 <td style="display: contents;">b</td> 84 </tr> 85 </table> 86 <table id="tableTbodyContents" summary="summary" style="display: block;"> 87 <tbody style="display: contents;"> 88 <tr><td>a</td><td>b</td></tr> 89 </tbody> 90 </table> 91 </body> 92 </html>