| <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> |
| <html> |
| <head> |
| <script src="../../resources/js-test.js"></script> |
| <script src="../../resources/accessibility-helper.js"></script> |
| </head> |
| <body> |
| |
| <div role="grid" id="grid1"> |
| <div role="rowgroup"> |
| <div role="row"> |
| <span role="columnheader">A</span> |
| <span role="columnheader">B</span> |
| <span role="columnheader">C</span> |
| </div> |
| </div> |
| <div role="rowgroup" id="myData"><!-- to be populated by script --></div> |
| </div> |
| |
| <script> |
| let output = "This tests that the number of rows and columns of a grid are correct after adding and removing rows and columns.\n"; |
| |
| function $(id) { |
| return document.getElementById(id); |
| } |
| |
| function createNode(tagName, role) { |
| let el = document.createElement(tagName); |
| el.setAttribute('role', role); |
| return el; |
| } |
| |
| function clearGridData() { |
| let data = $("myData"); |
| data.innerHTML = ""; |
| } |
| |
| function randomizeGridData() { |
| let choices = ['foo', 'bar', 'baz', 'baf', 'bop', 'bip']; |
| let data = $("myData"); |
| for (let i = 0; i < 3; i++) { |
| let row = createNode("tr", "row"); |
| for (let j = 0; j < 3; j++) { |
| let cell = createNode("tr", "gridcell"); |
| cell.innerHTML = choices[Math.floor(Math.random() * choices.length)]; // Populate cell with a random entry from 'choices' array: 'foo', 'bar', 'baz', etc. |
| row.appendChild(cell); |
| } |
| data.appendChild(row); |
| } |
| } |
| |
| if (window.accessibilityController) { |
| window.jsTestIsAsync = true; |
| |
| window.grid = accessibilityController.accessibleElementById("grid1"); |
| output += "Initial count:\n"; |
| output += expect("grid.rowCount", "1"); |
| output += expect("grid.columnCount", "3"); |
| |
| randomizeGridData(); |
| setTimeout(async () => { |
| await waitFor(() => { return grid.rowCount == 4; }); |
| output += "Count after adding 3 rows:\n"; |
| output += expect("grid.rowCount", "4"); |
| output += expect("grid.columnCount", "3"); |
| |
| clearGridData(); |
| await waitFor(() => { return grid.rowCount == 1; }); |
| output += "Count after clearing data:\n"; |
| output += expect("grid.rowCount", "1"); |
| output += expect("grid.columnCount", "3"); |
| |
| randomizeGridData(); |
| await waitFor(() => { return grid.rowCount == 4; }); |
| output += "Count after adding 3 rows again:\n"; |
| output += expect("grid.rowCount", "4"); |
| output += expect("grid.columnCount", "3"); |
| |
| debug(output); |
| $("grid1").style.visibility = "hidden"; |
| finishJSTest(); |
| }, 0); |
| } |
| </script> |
| </body> |
| </html> |
