| <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> |
| <html> |
| <head> |
| <script src="../../resources/accessibility-helper.js"></script> |
| <script src="../../resources/js-test.js"></script> |
| </head> |
| <body> |
| |
| <div id="content"> |
| |
| <p id="p1">Test figure with aria-label.</p> |
| <figure id="figure1" aria-label="aria-label attribute"> |
| <img src="" alt="image alt" width="20" height="20"/> |
| </figure> |
| |
| <p id="p2">Test figure with title attribute.</p> |
| <figure id="figure2" title="title attribute"> |
| <img src="" alt="image alt" width="20" height="20"/> |
| </figure> |
| |
| <p id="p3">Test figure with aria-describedby.</p> |
| <figure id="figure3" aria-describedby="fg-describedby"> |
| <img src="" alt="image alt" width="20" height="20"/> |
| <p id="fg-describedby">p referenced by aria-describedby</p> |
| </figure> |
| |
| <p id="p4">Test figure with figcaption element.</p> |
| <figure id="figure4"> |
| <img src="" alt="image alt" width="20" height="20"/> |
| <figcaption id="figCaption4">Figcaption element</figcaption> |
| </figure> |
| |
| <p id="p5">Test figure with figcaption element and title attribute.</p> |
| <figure id="figure5" title="title attribute"> |
| <img src="" alt="image alt" width="20" height="20"/> |
| <figcaption id="figCaption5">Figcaption element</figcaption> |
| </figure> |
| |
| <p id="p6">Test display:contents figure with figcaption element.</p> |
| <figure id="figure6" style="display:contents"> |
| <img src="" alt="image alt" width="20" height="20"/> |
| <figcaption id="figCaption6">Figcaption element (display:contents)</figcaption> |
| </figure> |
| |
| </div> |
| |
| <script> |
| let output = "This test exercises 'figure' element AX properties.\n\n"; |
| |
| if (window.accessibilityController) { |
| for (let k = 1; k <= 6; k++) { |
| let figure = accessibilityController.accessibleElementById(`figure${k}`); |
| let p = document.getElementById(`p${k}`); |
| output += `${p.innerText}\n`; |
| output += `figure${k} ${figure.role}\n`; |
| output += `figure${k} ${figure.roleDescription}\n`; |
| output += `figure${k} ${figure.description}\n`; |
| output += `figure${k} customContent: ${figure.customContent}\n`; |
| |
| var titleUIElement = figure.titleUIElement(); |
| if (titleUIElement) { |
| var figureCaption = accessibilityController.accessibleElementById("figCaption" + k); |
| output += expect("titleUIElement.isEqual(figureCaption)", "true"); |
| } else |
| output += expect("!titleUIElement", "true"); |
| |
| output += "\n"; |
| } |
| |
| document.getElementById("content").innerText = ""; |
| debug(output); |
| } |
| </script> |
| </body> |
| </html> |
