test_cssflexbox.html (2431B)
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <title>CSS flexbox 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 // Ensure that flexbox ordering and absolute positioning do not affect 19 // the accessibility tree. 20 // Note that there is no accessible for a div with display:flex style. 21 var accTree = { 22 role: ROLE_SECTION, 23 children: [ 24 { // Bug 1277559. Button outside the flexed content 25 role: ROLE_PUSHBUTTON, 26 name: "Button", 27 }, 28 { // Visually first button in the 3 button row 29 role: ROLE_PUSHBUTTON, 30 name: "First", 31 }, 32 { // Flushed right third button in the 3 button row 33 role: ROLE_PUSHBUTTON, 34 name: "Second", 35 }, 36 { // Middle button in the 3 button row 37 role: ROLE_PUSHBUTTON, 38 name: "Third", 39 }, // end bug 1277559 40 { // Bug 962558: DOM first, Order 2. 41 role: ROLE_PUSHBUTTON, 42 name: "two, tab first", 43 }, 44 { // DOM order second, flex order 1 45 role: ROLE_PUSHBUTTON, 46 name: "one, tab second", 47 }, // end bug 962558 48 ], 49 }; 50 testAccessibleTree("flex_elements", accTree); 51 52 SimpleTest.finish(); 53 } 54 55 SimpleTest.waitForExplicitFinish(); 56 addA11yLoadEvent(doTest); 57 </script> 58 </head> 59 <body> 60 <p id="display"></p> 61 <div id="content" style="display: none"></div> 62 <pre id="test"> 63 </pre> 64 65 <div id="flex_elements"> 66 <button type="button">Button</button> 67 <div style="position: relative; display: flex; width: 200px;"> 68 <button type="button" style="order: 1">First</button> 69 <button type="button" style="order: 2; position: absolute; right: 0">Second</button> 70 <button type="button" style="order: 3">Third</button> 71 </div> 72 <div style="display: flex"> 73 <button id="two" style="order: 2">two, tab first</button> 74 <button id="one" style="order: 1">one, tab second</button> 75 </div> 76 </div> 77 </body> 78 </html>