diff options
Diffstat (limited to 'accessible/tests/mochitest/elm/test_HTMLSpec.html')
| -rw-r--r-- | accessible/tests/mochitest/elm/test_HTMLSpec.html | 2024 |
1 files changed, 2024 insertions, 0 deletions
diff --git a/accessible/tests/mochitest/elm/test_HTMLSpec.html b/accessible/tests/mochitest/elm/test_HTMLSpec.html new file mode 100644 index 0000000000..a5cc175123 --- /dev/null +++ b/accessible/tests/mochitest/elm/test_HTMLSpec.html @@ -0,0 +1,2024 @@ +<!DOCTYPE html> +<html> +<head> + <title>HTML a11y spec tests</title> + <link id="link" rel="stylesheet" type="text/css" + href="chrome://mochikit/content/tests/SimpleTest/test.css" /> + + <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> + + <script type="application/javascript" + src="../common.js"></script> + <script type="application/javascript" + src="../actions.js"></script> + <script type="application/javascript" + src="../role.js"></script> + <script type="application/javascript" + src="../states.js"></script> + <script type="application/javascript" + src="../attributes.js"></script> + <script type="application/javascript" + src="../relations.js"></script> + <script type="application/javascript" + src="../name.js"></script> + + <script type="application/javascript"> + const syntheticBrowsingContexts = SpecialPowers.getBoolPref("browser.opaqueResponseBlocking.syntheticBrowsingContext", false); + + async function doTest() { + // //////////////////////////////////////////////////////////////////////// + // HTML:a@href + + var obj = { + role: ROLE_LINK, + states: STATE_LINKED, + actions: "jump", + interfaces: [ nsIAccessibleText, nsIAccessibleHyperText, nsIAccessibleHyperLink ], + children: [ // all kids inherits linked state and action + { + role: ROLE_TEXT_LEAF, + states: STATE_LINKED, + actions: "click ancestor", + }, + ], + }; + testElm("a_href", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:a no @href + + obj = { + todo_role: ROLE_TEXT_CONTAINER, + absentStates: STATE_LINKED, + actions: null, + children: [ + { + role: ROLE_TEXT_LEAF, + absentStates: STATE_LINKED, + actions: null, + }, + ], + }; + testElm("a_nohref", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:abbr contained by HTML:td + + obj = { + role: ROLE_CELL, + attributes: { abbr: "WWW" }, + interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], + children: [ + { + role: ROLE_TEXT, + children: [ { role: ROLE_TEXT_LEAF } ], + }, + ], + }; + testElm("td_abbr", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:address + + obj = { + role: ROLE_GROUPING, + interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], + }; + testElm("address", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:area@href + + obj = { + role: ROLE_LINK, + states: STATE_LINKED, + actions: "jump", + interfaces: [ nsIAccessibleHyperLink ], + children: [], + }; + testElm(getAccessible("imgmap").firstChild, obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:area no @href + + obj = { + todo_role: "ROLE_SHAPE", + absentStates: STATE_LINKED, + children: [], + }; + testElm(getAccessible("imgmap").lastChild, obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:article + obj = { + role: ROLE_ARTICLE, + states: STATE_READONLY, + interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], + }; + testElm("article", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:aside + obj = { + role: ROLE_LANDMARK, + attributes: { "xml-roles": "complementary" }, + interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], + }; + testElm("aside", obj); + + // //////////////////////////////////////////////////////////////////////// + obj = { // HTML:audio + role: ROLE_GROUPING, + }; + testElm("audio", obj); + + // //////////////////////////////////////////////////////////////////////// + obj = { // HTML:b contained by paragraph + role: ROLE_PARAGRAPH, + textAttrs: { + 0: { }, + 6: { "font-weight": kBoldFontWeight }, + }, + children: [ + { role: ROLE_TEXT_LEAF }, // plain text + { role: ROLE_TEXT_LEAF }, // HTML:b text + ], + }; + testElm("b_container", obj); + + // //////////////////////////////////////////////////////////////////////// + obj = { // HTML:bdi contained by paragraph + role: ROLE_PARAGRAPH, + todo_textAttrs: { + 0: { }, + 5: { "writing-mode": "rl" }, + 8: { }, + }, + children: [ + { role: ROLE_TEXT_LEAF }, // plain text + { role: ROLE_TEXT_LEAF }, // HTML:bdi text + { role: ROLE_TEXT_LEAF }, // plain text + ], + }; + testElm("bdi_container", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:bdo contained by paragraph + + obj = { + role: ROLE_PARAGRAPH, + todo_textAttrs: { + 0: { }, + 6: { "writing-mode": "rl" }, + }, + children: [ + { role: ROLE_TEXT_LEAF }, // plain text + ], + }; + testElm("bdo_container", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:blockquote + + obj = { + role: ROLE_BLOCKQUOTE, + interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], + children: [ { role: ROLE_PARAGRAPH } ], + }; + testElm("blockquote", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:br contained by paragraph + + obj = { + role: ROLE_PARAGRAPH, + children: [ + { role: ROLE_WHITESPACE }, + { role: ROLE_WHITESPACE } + ] + }; + testElm("br_container", obj); + + // //////////////////////////////////////////////////////////////////////// + obj = { // HTML:button + role: ROLE_PUSHBUTTON, + absentStates: STATE_DEFAULT, + actions: "press", + interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], + }; + testElm("button", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:button@type="submit" (default button) + + obj = { + role: ROLE_PUSHBUTTON, + states: STATE_DEFAULT, + actions: "press", + }; + testElm("button_default", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:canvas + + obj = { + role: ROLE_CANVAS, + }; + testElm("canvas", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:caption under table + + obj = { + role: ROLE_TABLE, + relations: { + RELATION_LABELLED_BY: "caption", + }, + interfaces: [ nsIAccessibleText, nsIAccessibleHyperText, nsIAccessibleTable ], + children: [ + { + role: ROLE_CAPTION, + relations: { + RELATION_LABEL_FOR: "table", + }, + interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], + }, + { // td inside thead + role: ROLE_ROW, + interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], + children: [ + { + role: ROLE_COLUMNHEADER, + interfaces: [ nsIAccessibleTableCell, nsIAccessibleText, nsIAccessibleHyperText ], + }, + { role: ROLE_COLUMNHEADER }, + ], + }, + { // td inside tbody + role: ROLE_ROW, + children: [ + { + role: ROLE_ROWHEADER, + interfaces: [ nsIAccessibleTableCell, nsIAccessibleText, nsIAccessibleHyperText ], + }, + { + role: ROLE_CELL, + interfaces: [ nsIAccessibleTableCell, nsIAccessibleText, nsIAccessibleHyperText ], + }, + ], + }, + { // td inside tfoot + role: ROLE_ROW, + }, + ], + }; + testElm("table", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:cite contained by paragraph + + obj = { + role: ROLE_PARAGRAPH, + textAttrs: { + 0: { }, + 6: { "font-style": "italic" }, + }, + children: [ + { role: ROLE_TEXT_LEAF }, // plain text + { role: ROLE_TEXT_LEAF }, // HTML:cite text + ], + }; + testElm("cite_container", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:code contained by paragraph + + obj = { + role: ROLE_PARAGRAPH, + textAttrs: { + 0: { }, + 6: { "font-family": kMonospaceFontFamily }, + }, + children: [ + { role: ROLE_TEXT_LEAF }, // plain text + { role: ROLE_TEXT_LEAF }, // HTML:code text + ], + }; + testElm("code_container", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:col and HTML:colgroup under table + + obj = + { TABLE: [ + { ROW: [ + { role: ROLE_CELL }, + { role: ROLE_CELL }, + { role: ROLE_CELL }, + ] }, + ] }; + testElm("colNcolgroup_table", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:data contained by paragraph + + obj = + { PARAGRAPH: [ + { TEXT_LEAF: [] }, // HTML:data text + ] }; + testElm("data_container", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:datalist associated with input + + todo(false, "datalist and summary tree hierarchy test missed"); + + // //////////////////////////////////////////////////////////////////////// + // HTML:dd, HTML:dl, HTML:dd + + obj = { + role: ROLE_DEFINITION_LIST, + states: STATE_READONLY, + children: [ // dl + { + role: ROLE_TERM, + states: STATE_READONLY, + interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], + children: [ // dt + { role: ROLE_TEXT_LEAF }, + ], + }, + { + role: ROLE_DEFINITION, + interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], + children: [ // dd + { role: ROLE_TEXT_LEAF }, + ], + }, + ], + }; + testElm("dl", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:del contained by paragraph + + obj = { + role: ROLE_PARAGRAPH, + children: [ + { role: ROLE_TEXT_LEAF }, // plain text + { role: ROLE_CONTENT_DELETION }, + ], + }; + testElm("del_container", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:details with open state + + obj = { + role: ROLE_DETAILS, + children: [ + { + role: ROLE_SUMMARY, + states: STATE_EXPANDED, + actions: "collapse", + }, + { role: ROLE_PARAGRAPH }, + ], + }; + testElm("details", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:details with closed (default) state + + obj = { + role: ROLE_DETAILS, + children: [ + { + role: ROLE_SUMMARY, + states: STATE_COLLAPSED, + actions: "expand", + }, + ], + }; + testElm("details_closed", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:dfn contained by paragraph + + obj = { + role: ROLE_PARAGRAPH, + textAttrs: { + 0: { "font-style": "italic" }, + 12: { }, + }, + children: [ + { role: ROLE_TEXT_LEAF }, // HTML:dfn text + { role: ROLE_TEXT_LEAF }, // plain text + ], + }; + testElm("dfn_container", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:dialog + + // XXX: Remove the pushing of the pref and just run the test once the + // dialog element is enabled by default. + await SpecialPowers.pushPrefEnv({ set: [["dom.dialog_element.enabled", true]] }); + obj = { + role: ROLE_DIALOG, + children: [ + { role: ROLE_TEXT_LEAF }, + ], + }; + testElm("dialog", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:div + + obj = { + role: ROLE_SECTION, + interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], + children: [ + { role: ROLE_TEXT_LEAF }, // plain text + ], + }; + testElm("div", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:em in a paragraph + + obj = { + role: ROLE_PARAGRAPH, + textAttrs: { + 0: { }, + 6: { "font-style": "italic" }, + }, + children: [ + { role: ROLE_TEXT_LEAF }, // plain text + { role: ROLE_TEXT_LEAF }, // HTML:em text + ], + }; + testElm("em_container", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:embed + + if (syntheticBrowsingContexts) { + obj = { + INTERNAL_FRAME: [ { + DOCUMENT: [ { + role: ROLE_GRAPHIC, + interfaces: [ nsIAccessibleImage ], + } ], + } ], + }; + } else { + obj = { + role: ROLE_GRAPHIC, + interfaces: [ nsIAccessibleImage ], + }; + } + testElm("embed_png", obj); + + obj = { + INTERNAL_FRAME: [ { + DOCUMENT: [ { + role: ROLE_PARAGRAPH, + } ], + } ], + }; + testElm("embed_html", obj); + + obj = { + INTERNAL_FRAME: [ { + DOCUMENT: [ { + } ], + } ], + }; + testElm("embed_pdf", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:fieldset and HTML:legend + + obj = { + role: ROLE_GROUPING, + name: "legend", + relations: { + RELATION_LABELLED_BY: "legend", + }, + children: [ + { + role: ROLE_LABEL, + name: "legend", + relations: { + RELATION_LABEL_FOR: "fieldset", + }, + interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], + }, + { + role: ROLE_ENTRY, + }, + ], + }; + testElm("fieldset", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:figure and HTML:figcaption + + obj = { + role: ROLE_FIGURE, + attributes: { "xml-roles": "figure" }, + relations: { + RELATION_LABELLED_BY: "figcaption", + }, + children: [ + { role: ROLE_GRAPHIC }, + { + role: ROLE_CAPTION, + relations: { + RELATION_LABEL_FOR: "figure", + }, + interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], + }, + ], + }; + testElm("figure", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:footer + + obj = { + role: ROLE_LANDMARK, + attributes: { "xml-roles": "contentinfo" }, + interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], + }; + testElm("footer", obj); + + obj = { + role: ROLE_SECTION, + absentAttributes: { "xml-roles": "contentinfo" }, + interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], + }; + testElm("footer_in_article", obj); + testElm("footer_in_aside", obj); + testElm("footer_in_main", obj); + testElm("footer_in_nav", obj); + testElm("footer_in_section", obj); + testElm("footer_in_blockquote", obj); + testElm("footer_in_details", obj); + testElm("footer_in_dialog", obj); + testElm("footer_in_fieldset", obj); + testElm("footer_in_figure", obj); + testElm("footer_in_td", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:form + + obj = { + role: ROLE_FORM, + absentAttributes: { "xml-roles": "form" }, + }; + testElm("form", obj); + + // HTML:form with an accessible name + + obj = { + role: ROLE_FORM_LANDMARK, + attributes: { "xml-roles": "form" }, + }; + testElm("named_form", obj); + + // //////////////////////////////////////////////////////////////////////// + // // HTML:frameset, HTML:frame and HTML:iframe + + obj = { + INTERNAL_FRAME: [ { // HTML:iframe + DOCUMENT: [ { + INTERNAL_FRAME: [ { // HTML:frame + DOCUMENT: [ { role: ROLE_TEXT_LEAF} ], + } ], + } ], + } ], + }; + testElm("frameset_container", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:h1, HTML:h2, HTML:h3, HTML:h4, HTML:h5, HTML:h6 + + function headingWithLevel(i) { + return { + role: ROLE_HEADING, + attributes: { "level": i.toString() }, + interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], + }; + } + + for (let level = 1; level <= 6; ++level) { + testElm("h" + level, headingWithLevel(level)); + for (const ancestor of ["section", "article", "aside", "nav"]) { + testElm("h" + level + "_in_" + ancestor, headingWithLevel(level)); + testElm("h" + level + "_in_" + ancestor + "_in_hgroup", headingWithLevel(level)); + } + } + + // //////////////////////////////////////////////////////////////////////// + // HTML:header + + obj = { + role: ROLE_LANDMARK, + attributes: { "xml-roles": "banner" }, + interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], + }; + testElm("header", obj); + + obj = { + role: ROLE_SECTION, + absentAttributes: { "xml-roles": "banner" }, + interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], + }; + testElm("header_in_article", obj); + testElm("header_in_aside", obj); + testElm("header_in_main", obj); + testElm("header_in_nav", obj); + testElm("header_in_section", obj); + testElm("header_in_blockquote", obj); + testElm("header_in_details", obj); + testElm("header_in_dialog", obj); + testElm("header_in_fieldset", obj); + testElm("header_in_figure", obj); + testElm("header_in_td", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:hr + + obj = { + role: ROLE_SEPARATOR, + }; + testElm("hr", obj); + + // //////////////////////////////////////////////////////////////////////// + obj = { // HTML:i contained by paragraph + role: ROLE_PARAGRAPH, + textAttrs: { + 0: { }, + 6: { "font-style": "italic" }, + }, + children: [ + { role: ROLE_TEXT_LEAF }, // plain text + { role: ROLE_TEXT_LEAF }, // HTML:i text + ], + }; + testElm("i_container", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:img + + obj = { + role: ROLE_GRAPHIC, + interfaces: [ nsIAccessibleImage ], + }; + testElm("img", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:input@type="button" + + obj = { + role: ROLE_PUSHBUTTON, + absentStates: STATE_DEFAULT, + }; + testElm("input_button", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:input@type="checkbox" + + obj = { + role: ROLE_CHECKBUTTON, + states: STATE_CHECKABLE, + absentStates: STATE_CHECKED, + actions: "check", + }; + testElm("input_checkbox", obj); + + obj = { + role: ROLE_CHECKBUTTON, + states: STATE_CHECKABLE | STATE_CHECKED, + actions: "uncheck", + }; + testElm("input_checkbox_true", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:input@type="file" + + obj = { + GROUPING: [ + { role: ROLE_PUSHBUTTON }, + { role: ROLE_LABEL }, + ], + }; + testElm("input_file", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:input@type="image" + + obj = { + role: ROLE_PUSHBUTTON, + absentStates: STATE_DEFAULT, + actions: "press", + }; + testElm("input_image", obj); + testElm("input_image_display", obj); + testElm("input_submit", obj); + + obj = { + role: ROLE_PUSHBUTTON, + actions: "press", + states: STATE_DEFAULT, + }; + testElm("input_image_default", obj); + testElm("input_submit_default", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:input@type="number" and etc + + obj = { + role: ROLE_SPINBUTTON, + interfaces: [ nsIAccessibleValue, nsIAccessibleText, nsIAccessibleEditableText ], + children: [ + { role: ROLE_TEXT_LEAF }, + ], + }; + testElm("input_number", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:input@type="text" and etc + + obj = { + role: ROLE_ENTRY, + extraStates: EXT_STATE_EDITABLE | EXT_STATE_SINGLE_LINE, + actions: "activate", + interfaces: [ nsIAccessibleText, nsIAccessibleEditableText ], + children: [ + { role: ROLE_TEXT_LEAF }, + ], + }; + testElm("input_email", obj); + testElm("input_search", obj); + testElm("input_tel", obj); + testElm("input_text", obj); + testElm("input_url", obj); + + // //////////////////////////////////////////////////////////////////////// + // input @type="text" with placeholder attribute + + // First: Label and placeholder, text is the same, no attribute. + obj = { + role: ROLE_ENTRY, + name: "Your name", + extraStates: EXT_STATE_EDITABLE | EXT_STATE_SINGLE_LINE, + actions: "activate", + absentAttributes: { placeholder: "Your name" }, + interfaces: [ nsIAccessibleText, nsIAccessibleEditableText ], + children: [], + }; + testElm("input_placeholder_same", obj); + + // Second: Label and placeholder, text is different, attribute. + obj = { + role: ROLE_ENTRY, + name: "First name:", + extraStates: EXT_STATE_EDITABLE | EXT_STATE_SINGLE_LINE, + actions: "activate", + attributes: { placeholder: "Enter your first name" }, + interfaces: [ nsIAccessibleText, nsIAccessibleEditableText ], + children: [], + }; + testElm("input_placeholder_different", obj); + + // Third: placeholder only, text is name, no attribute. + obj = { + role: ROLE_ENTRY, + name: "Date of birth", + extraStates: EXT_STATE_EDITABLE | EXT_STATE_SINGLE_LINE, + actions: "activate", + absentAttributes: { placeholder: "Date of birth" }, + interfaces: [ nsIAccessibleText, nsIAccessibleEditableText ], + children: [], + }; + testElm("input_placeholder_only", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:input@type="password" + + obj = { + role: ROLE_PASSWORD_TEXT, + states: STATE_PROTECTED, + extraStates: EXT_STATE_EDITABLE, + actions: "activate", + children: [ + { + role: ROLE_TEXT_LEAF, + }, + ], + }; + testElm("input_password", obj); + ok(getAccessible("input_password").firstChild.name != "44", + "text leaf for password shouldn't have its real value as its name!"); + + obj = { + role: ROLE_PASSWORD_TEXT, + states: STATE_PROTECTED | STATE_READONLY, + actions: "activate", + children: [ + { + role: ROLE_TEXT_LEAF, + }, + ], + }; + testElm("input_password_readonly", obj); + ok(getAccessible("input_password_readonly").firstChild.name != "44", + "text leaf for password shouldn't have its real value as its name!"); + + // //////////////////////////////////////////////////////////////////////// + // HTML:input@type="radio" + + obj = { + role: ROLE_RADIOBUTTON, + states: STATE_CHECKABLE, + absentStates: STATE_CHECKED, + actions: "select", + }; + testElm("input_radio", obj); + + obj = { + role: ROLE_RADIOBUTTON, + states: STATE_CHECKABLE | STATE_CHECKED, + actions: "select", + }; + testElm("input_radio_true", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:input@type="range" + + obj = { + role: ROLE_SLIDER, + }; + testElm("input_range", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:input@type="reset" + + obj = { + role: ROLE_PUSHBUTTON, + actions: "press", + absentStates: STATE_DEFAULT, + }; + testElm("input_reset", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:input@type="time" + + obj = { + role: ROLE_TIME_EDITOR, + name: "time label", + attributes: { "text-input-type": "time" }, + children: [ + { role: ROLE_SPINBUTTON }, + { role: ROLE_TEXT_LEAF }, + { role: ROLE_SPINBUTTON }, + { role: ROLE_TEXT_LEAF }, + { role: ROLE_ENTRY }, + ], + }; + testElm("input_time", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:input@type="date" + + obj = { + role: ROLE_DATE_EDITOR, + name: "date label", + attributes: { "text-input-type": "date" }, + children: [ + { role: ROLE_SPINBUTTON }, + { role: ROLE_TEXT_LEAF }, + { role: ROLE_SPINBUTTON }, + { role: ROLE_TEXT_LEAF }, + { role: ROLE_SPINBUTTON }, + { role: ROLE_PUSHBUTTON }, + ], + }; + testElm("input_date", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:input@type="datetime-local" + + obj = { + role: ROLE_DATE_EDITOR, + name: "datetime-local label", + attributes: { "text-input-type": "datetime-local" }, + children: [ + { role: ROLE_SPINBUTTON }, // Month + { role: ROLE_TEXT_LEAF }, // "/"" + { role: ROLE_SPINBUTTON }, // Day + { role: ROLE_TEXT_LEAF }, // "/" + { role: ROLE_SPINBUTTON }, // Year + { role: ROLE_TEXT_LEAF }, // " " + { role: ROLE_SPINBUTTON }, // Hours + { role: ROLE_TEXT_LEAF }, // ":" + { role: ROLE_SPINBUTTON }, // Minutes + { role: ROLE_TEXT_LEAF }, // " " + { role: ROLE_ENTRY }, // "AM" or "PM" + { role: ROLE_PUSHBUTTON }, // Calendar + ], + }; + testElm("input_datetime_local", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:ins contained by paragraph + + obj = { + role: ROLE_PARAGRAPH, + children: [ + { role: ROLE_TEXT_LEAF }, // plain text + { role: ROLE_CONTENT_INSERTION }, + ], + }; + testElm("ins_container", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:kbd contained by paragraph + + obj = { + role: ROLE_PARAGRAPH, + textAttrs: { + 0: { }, + 6: { "font-family": kMonospaceFontFamily }, + }, + children: [ + { role: ROLE_TEXT_LEAF }, // plain text + { role: ROLE_TEXT_LEAF }, // HTML:kbd text + ], + }; + testElm("kbd_container", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:label + + obj = { + role: ROLE_LABEL, + todo_relations: { + RELATION_LABEL_FOR: "label_input", + }, + children: [ + { role: ROLE_TEXT_LEAF }, // plain text + { + role: ROLE_ENTRY, + relations: { + RELATION_LABELLED_BY: "label", + }, + }, + ], + }; + testElm("label", obj); + + obj = { + role: ROLE_LABEL, + relations: { + RELATION_LABEL_FOR: "label_for_input", + }, + }; + testElm("label_for", obj); + + obj = { + role: ROLE_ENTRY, + relations: { + RELATION_LABELLED_BY: "label_for", + }, + }; + testElm("label_for_input", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:ul, HTML:ol, HTML:li + + obj = { // ul or ol + role: ROLE_LIST, + states: STATE_READONLY, + children: [ + { // li + role: ROLE_LISTITEM, + states: STATE_READONLY, + interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], + }, + ], + }; + testElm("ul", obj); + testElm("ol", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:link + + ok(!isAccessible("link"), "link element is not accessible"); + + // //////////////////////////////////////////////////////////////////////// + // HTML:main + + obj = { + role: ROLE_LANDMARK, + attributes: { "xml-roles": "main" }, + interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], + }; + testElm("main", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:map + + ok(!isAccessible("map_imagemap"), + "map element is not accessible if used as an image map"); + + obj = { + role: ROLE_TEXT_CONTAINER, + }; + testElm("map", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:mark contained by paragraph + + obj = { + role: ROLE_PARAGRAPH, + children: [ + { role: ROLE_TEXT_LEAF }, // plain text + { role: ROLE_MARK, // HTML:mark text + attributes: { "xml-roles": "mark" }, + interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], + textAttrs: { + 0: { }, + } + } + ], + }; + testElm("mark_container", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:math + + obj = { + role: ROLE_MATHML_MATH, + }; + testElm("math", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:menu + + obj = { + role: ROLE_LIST, // menu + children: [ + { role: ROLE_LISTITEM, + children: [ // home + { role: ROLE_LISTITEM_MARKER }, + { role: ROLE_TEXT_LEAF } + ] + }, + { + role: ROLE_LISTITEM, + children: [ + { role: ROLE_LISTITEM_MARKER }, + { role: ROLE_TEXT_LEAF }, // about + { + role: ROLE_LIST, // menu + children: [ + { role: ROLE_LISTITEM, + children: [ + { role: ROLE_LISTITEM_MARKER }, + { role: ROLE_TEXT_LEAF } // our story + ] + }, + ] + }, + ] + }, + ] + }; + + testElm("menu", obj); + obj = { + role: ROLE_LIST, + children: [ + { + role: ROLE_LISTITEM, + children: [ + { role: ROLE_LISTITEM_MARKER }, + { + role: ROLE_PUSHBUTTON, + children: [ + { role: ROLE_TEXT_LEAF } + ] + }, + { + role: ROLE_LIST, + children: [ + { + role: ROLE_LISTITEM, + children: [ + { role: ROLE_LISTITEM_MARKER }, + { + role: ROLE_PUSHBUTTON, + children: [ + { role: ROLE_TEXT_LEAF } + ] + } + ] + }, + ] + } + ] + } + ] + }; + testElm("menu1", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:meter + obj = { + role: ROLE_METER + }; + testElm("meter", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:nav + + obj = { + role: ROLE_LANDMARK, + attributes: { "xml-roles": "navigation" }, + interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], + }; + testElm("nav", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:object and HTML:param + + if (syntheticBrowsingContexts) { + obj = { + INTERNAL_FRAME: [ { + DOCUMENT: [ { + role: ROLE_GRAPHIC, + interfaces: [ nsIAccessibleImage ], + } ], + } ], + }; + } else { + obj = { + role: ROLE_GRAPHIC, + interfaces: [ nsIAccessibleImage ], + }; + } + testElm("object_png", obj); + + obj = { + INTERNAL_FRAME: [ { + DOCUMENT: [ { + role: ROLE_PARAGRAPH, + } ], + } ], + }; + testElm("object_html", obj); + + obj = { + INTERNAL_FRAME: [ { + DOCUMENT: [ { + } ], + } ], + }; + testElm("object_pdf", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:select, HTML:optgroup and HTML:option + + obj = { // HMTL:select@size > 1 + role: ROLE_LISTBOX, + states: STATE_FOCUSABLE, + absentStates: STATE_MULTISELECTABLE, + interfaces: [ nsIAccessibleSelectable ], + children: [ + { GROUPING: [ // HTML:optgroup + { role: ROLE_STATICTEXT }, + { role: ROLE_OPTION }, // HTML:option + { role: ROLE_OPTION }, + ] }, + { + role: ROLE_OPTION, + states: STATE_FOCUSABLE, + actions: "select", + interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], + }, + ], + }; + testElm("select_listbox", obj); + + obj = { // HTML:select@multiple + role: ROLE_LISTBOX, + states: STATE_FOCUSABLE | STATE_MULTISELECTABLE, + children: [ + { role: ROLE_OPTION }, + { role: ROLE_OPTION }, + { role: ROLE_OPTION }, + ], + }; + testElm("select_listbox_multiselectable", obj); + + obj = { // HTML:select + role: ROLE_COMBOBOX, + states: STATE_FOCUSABLE, + children: [ + { + role: ROLE_COMBOBOX_LIST, + children: [ + { role: ROLE_COMBOBOX_OPTION }, + { role: ROLE_COMBOBOX_OPTION }, + { role: ROLE_COMBOBOX_OPTION }, + ], + }, + ], + }; + testElm("select_combobox", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:output + + obj = { + role: ROLE_STATUSBAR, + attributes: { "live": "polite" }, + todo_relations: { + RELATION_CONTROLLED_BY: "output_input", + }, + interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], + }; + testElm("output", obj); + + obj = { + role: ROLE_ENTRY, + relations: { + RELATION_CONTROLLER_FOR: "output", + }, + }; + testElm("output_input", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:pre + + obj = { + role: ROLE_TEXT_CONTAINER, + interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], + }; + testElm("pre", obj); + + // ///////////////////////////////////////////////////////////////////////// + // HTML:progress + + obj = { + role: ROLE_PROGRESSBAR, + absentStates: STATE_MIXED, + interfaces: [ nsIAccessibleValue ], + }; + testElm("progress", obj); + + obj = { + role: ROLE_PROGRESSBAR, + states: STATE_MIXED, + }; + testElm("progress_indeterminate", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:q + + obj = { + role: ROLE_TEXT, + interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], + children: [ + { role: ROLE_STATICTEXT }, // left quote + { role: ROLE_TEXT_LEAF }, // quoted text + { role: ROLE_STATICTEXT }, // right quote + ], + }; + testElm("q", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:ruby + + todo(isAccessible("ruby"), "ruby element is not accessible"); + + // //////////////////////////////////////////////////////////////////////// + // HTML:s contained by paragraph + + obj = { + role: ROLE_PARAGRAPH, + textAttrs: { + 0: { }, + 6: { "text-line-through-style": "solid" }, + }, + children: [ + { role: ROLE_TEXT_LEAF }, // plain text + { role: ROLE_TEXT_LEAF }, // HTML:i text + ], + }; + testElm("s_container", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:samp contained by paragraph + + obj = { + role: ROLE_PARAGRAPH, + children: [ + { role: ROLE_TEXT_LEAF }, // plain text + { role: ROLE_TEXT_LEAF }, // HTML:samp text + ], + }; + testElm("samp_container", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:section without an accessible name + + obj = { + role: ROLE_SECTION, + absentAttributes: { "xml-roles": "region" }, + interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], + }; + testElm("section", obj); + + // HTML:section with an accessible name + + obj = { + role: ROLE_REGION, + attributes: { "xml-roles": "region" }, + interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], + }; + testElm("named_section", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:small contained by paragraph + + obj = { + role: ROLE_PARAGRAPH, + textAttrs: { + 0: { }, + 6: { "font-size": "10pt" }, + }, + children: [ + { role: ROLE_TEXT_LEAF }, // plain text + { role: ROLE_TEXT_LEAF }, // HTML:small text + ], + }; + testElm("small_container", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:source + + ok(!isAccessible("source"), "source element is not accessible"); + + // //////////////////////////////////////////////////////////////////////// + // HTML:span + + ok(!isAccessible("span"), "span element is not accessible"); + + // //////////////////////////////////////////////////////////////////////// + // html:span with a title attribute, which should make it accessible. + obj = { + role: ROLE_TEXT, + }; + testElm("span_explicit", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:strong contained by paragraph + + obj = { + role: ROLE_PARAGRAPH, + children: [ + { role: ROLE_TEXT_LEAF }, // plain text + { role: ROLE_TEXT_LEAF }, // HTML:strong text + ], + }; + testElm("strong_container", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:sub + obj = { + role: ROLE_SUBSCRIPT + }; + testElm("sub", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:sup + obj = { + role: ROLE_SUPERSCRIPT + }; + testElm("sup", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:sub contained by paragraph + + obj = { + role: ROLE_PARAGRAPH, + children: [ + { role: ROLE_TEXT_LEAF }, // plain text + { + role: ROLE_SUBSCRIPT, // HTML:sub + children: [ + { role: ROLE_TEXT_LEAF } // HTML:sub text + ] + } + ], + }; + testElm("sub_container", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:sup contained by paragraph + + obj = { + role: ROLE_PARAGRAPH, + children: [ + { role: ROLE_TEXT_LEAF }, // plain text + { + role: ROLE_SUPERSCRIPT, // HTML:sup + children: [ + { role: ROLE_TEXT_LEAF } // HTML:sup text + ] + } + ], + }; + testElm("sup_container", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:svg + + obj = { + todo_role: ROLE_GRAPHIC, + }; + testElm("svg", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:textarea + + obj = { + role: ROLE_ENTRY, + extraStates: EXT_STATE_MULTI_LINE | EXT_STATE_EDITABLE, + actions: "activate", + interfaces: [ nsIAccessibleText, nsIAccessibleEditableText ], + }; + testElm("textarea", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:time + + obj = { + role: ROLE_TEXT, + attributes: { "xml-roles": "time", "datetime": "2001-05-15 19:00" }, + interfaces: [ nsIAccessibleText, nsIAccessibleHyperText ], + }; + testElm("time", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:u contained by paragraph + + obj = { + role: ROLE_PARAGRAPH, + textAttrs: { + 0: { }, + 6: { "text-underline-style": "solid" }, + }, + children: [ + { role: ROLE_TEXT_LEAF }, // plain text + { role: ROLE_TEXT_LEAF }, // HTML:u text + ], + }; + testElm("u_container", obj); + + // //////////////////////////////////////////////////////////////////////// + // HTML:var contained by paragraph + + obj = { + role: ROLE_PARAGRAPH, + children: [ + { role: ROLE_TEXT_LEAF }, // plain text + { role: ROLE_TEXT_LEAF }, // HTML:var text + { role: ROLE_TEXT_LEAF }, // plain text + { role: ROLE_TEXT_LEAF }, // HTML:var text + ], + }; + testElm("var_container", obj); + + // //////////////////////////////////////////////////////////////////////// + obj = { // HTML:video + role: ROLE_GROUPING, + }; + testElm("video", obj); + + SimpleTest.finish(); + } + + SimpleTest.waitForExplicitFinish(); + addA11yLoadEvent(doTest); + + </script> +</head> +<body> + + <a target="_blank" + title="Implement figure and figcaption accessibility" + href="https://bugzilla.mozilla.org/show_bug.cgi?id=658272"> + Mozilla Bug 658272 + </a><br/> + <p id="display"></p> + <div id="content" style="display: none"></div> + <pre id="test"> + </pre> + + <a id="a_href" href="www.mozilla.com">mozilla site</a> + <a id="a_nohref">anchor</a> + <table> + <tr> + <td id="td_abbr"><abbr title="World Wide Web">WWW</abbr></td> + </tr> + </table> + <address id="address"> + Mozilla Foundation<br> + 1981 Landings Drive<br> + Building K<br> + Mountain View, CA 94043-0801<br> + USA + </address> + + <map name="atoz_map"> + <area id="area_href" + href="http://www.bbc.co.uk/radio4/atoz/index.shtml#b" + coords="17,0,30,14" alt="b" shape="rect"> + <area id="area_nohref" + coords="0,0,13,14" alt="a" shape="rect"> + </map> + <img id="imgmap" width="447" height="15" + usemap="#atoz_map" + src="../letters.gif"> + + <article id="article">A document</article> + <audio id="audio" controls="true"> + <source id="source" src="../bug461281.ogg" type="video/ogg"> + </audio> + + <aside id="aside"> + <p>Some content related to an <article></p> + </aside> + + <p id="b_container">normal<b>bold</b></p> + <p id="bdi_container">User <bdi>إيان</bdi>: 90 points</p> + <p id="bdo_container"><bdo dir="rtl">This text will go right to left.</bdo></p> + + <blockquote id="blockquote" cite="http://developer.mozilla.org"> + <p>This is a quotation taken from the Mozilla Developer Center.</p> + </blockquote> + + <!-- two BRs, both will be present --> + <p id="br_container"><br><br></p> + + <button id="button">button</button> + <form> + <button id="button_default" type="submit">button</button> + </form> + + <canvas id="canvas"></canvas> + + <table id="table"> + <caption id="caption">caption</caption> + <thead> + <tr> + <th>col1</th><th>col2</th> + </tr> + </thead> + <tbody> + <tr> + <th>col1</th><td>cell2</td> + </tr> + </tbody> + <tfoot> + <tr> + <td>cell5</td><td>cell6</td> + </tr> + </tfoot> + </table> + + <p id="cite_container">normal<cite>cite</cite></p> + <p id="code_container">normal<code>code</code></p> + + <table id="colNcolgroup_table"> + <colgroup> + <col> + <col span="2"> + </colgroup> + <tr> + <td>Lime</td> + <td>Lemon</td> + <td>Orange</td> + </tr> + </table> + + <p id="data_container"><data value="8">Eight</data></p> + + <datalist id="datalist"> + <summary id="summary">details</summary> + <option>Paris</option> + <option>San Francisco</option> + </datalist> + <input id="autocomplete_datalist" list="datalist"> + + <dl id="dl"> + <dt>item1</dt><dd>description</dd> + </dl> + + <p id="del_container">normal<del>Removed</del></p> + + <details id="details" open="open"> + <summary>Information</summary> + <p>If your browser supports this element, it should allow you to expand and collapse these details.</p> + </details> + + <details id="details_closed"> + <summary>Information</summary> + <p>If your browser supports this element, it should allow you to expand and collapse these details.</p> + </details> + + <p id="dfn_container"><dfn id="def-internet">The Internet</dfn> is a global + system of interconnected networks that use the Internet Protocol Suite (TCP/IP) + to serve billions of users worldwide.</p> + + <dialog id="dialog" open="true">This is a dialog</dialog> + + <div id="div">div</div> + + <p id="em_container">normal<em>emphasis</em></p> + + <embed id="embed_png" type="image/png" src="../moz.png" + width="300" height="300"> + </embed> + <embed id="embed_html" type="text/html" src="../longdesc_src.html" + width="300" height="300"> + </embed> + <embed id="embed_pdf" type="application/pdf" src="../dummy.pdf" + width="300" height="300"> + </embed> + + <fieldset id="fieldset"> + <legend id="legend">legend</legend> + <input /> + </fieldset> + + <!-- Depending on whether or not the image is cached, layout may be able to + optimize away spaces between the figure, img and figcaption tags. As + such, we should keep everything on one line to get consistent results. + --> + <figure id="figure"><img src="../moz.png" alt="An awesome picture"><figcaption id="figcaption">Caption for the awesome picture</figcaption></figure> + + <footer id="footer">Some copyright info</footer> + <article> + <footer id="footer_in_article">Some copyright info</footer> + </article> + <aside> + <footer id="footer_in_aside">Some copyright info</footer> + </aside> + <main> + <footer id="footer_in_main">Some copyright info</footer> + </main> + <nav> + <footer id="footer_in_nav">Some copyright info</footer> + </nav> + <section> + <footer id="footer_in_section">Some copyright info</footer> + </section> + <blockquote> + <footer id="footer_in_blockquote">Some copyright info</footer> + </blockquote> + <details open="true"> + <footer id="footer_in_details">Some copyright info</footer> + </details> + <dialog open="true"> + <footer id="footer_in_dialog">Some copyright info</footer> + </dialog> + <fieldset> + <footer id="footer_in_fieldset">Some copyright info</footer> + </fieldset> + <figure> + <footer id="footer_in_figure">Some copyright info</footer> + </figure> + <table><tr><td> + <footer id="footer_in_td">Some copyright info</footer> + </td></tr></table> + + <form id="form"></form> + <form id="named_form" aria-label="New form"></form> + + <iframe id="frameset_container" + src="data:text/html,<html><frameset><frame src='data:text/html,hi'></frame></frameset></html>"> + </iframe> + + <h1 id="h1">heading1</h1> + <h2 id="h2">heading2</h2> + <h3 id="h3">heading3</h3> + <h4 id="h4">heading4</h4> + <h5 id="h5">heading5</h5> + <h6 id="h6">heading6</h6> + + <header id="header">A logo</header> + <article> + <header id="header_in_article">Not logo</header> + <h1 id="h1_in_article">heading1</h1> + <h2 id="h2_in_article">heading2</h2> + <h3 id="h3_in_article">heading3</h3> + <h4 id="h4_in_article">heading4</h4> + <h5 id="h5_in_article">heading5</h5> + <h6 id="h6_in_article">heading6</h6> + <hgroup> + <h1 id="h1_in_article_in_hgroup">heading1</h1> + <h2 id="h2_in_article_in_hgroup">heading2</h2> + <h3 id="h3_in_article_in_hgroup">heading3</h3> + <h4 id="h4_in_article_in_hgroup">heading4</h4> + <h5 id="h5_in_article_in_hgroup">heading5</h5> + <h6 id="h6_in_article_in_hgroup">heading6</h6> + </hgroup> + </article> + <aside> + <header id="header_in_aside">Not logo</header> + <h1 id="h1_in_aside">heading1</h1> + <h2 id="h2_in_aside">heading2</h2> + <h3 id="h3_in_aside">heading3</h3> + <h4 id="h4_in_aside">heading4</h4> + <h5 id="h5_in_aside">heading5</h5> + <h6 id="h6_in_aside">heading6</h6> + <hgroup> + <h1 id="h1_in_aside_in_hgroup">heading1</h1> + <h2 id="h2_in_aside_in_hgroup">heading2</h2> + <h3 id="h3_in_aside_in_hgroup">heading3</h3> + <h4 id="h4_in_aside_in_hgroup">heading4</h4> + <h5 id="h5_in_aside_in_hgroup">heading5</h5> + <h6 id="h6_in_aside_in_hgroup">heading6</h6> + </hgroup> + </aside> + <main> + <header id="header_in_main">Not logo</header> + </main> + <nav> + <header id="header_in_nav">Not logo</header> + <h1 id="h1_in_nav">heading1</h1> + <h2 id="h2_in_nav">heading2</h2> + <h3 id="h3_in_nav">heading3</h3> + <h4 id="h4_in_nav">heading4</h4> + <h5 id="h5_in_nav">heading5</h5> + <h6 id="h6_in_nav">heading6</h6> + <hgroup> + <h1 id="h1_in_nav_in_hgroup">heading1</h1> + <h2 id="h2_in_nav_in_hgroup">heading2</h2> + <h3 id="h3_in_nav_in_hgroup">heading3</h3> + <h4 id="h4_in_nav_in_hgroup">heading4</h4> + <h5 id="h5_in_nav_in_hgroup">heading5</h5> + <h6 id="h6_in_nav_in_hgroup">heading6</h6> + </hgroup> + </nav> + <section> + <header id="header_in_section">Not logo</header> + <h1 id="h1_in_section">heading1</h1> + <h2 id="h2_in_section">heading2</h2> + <h3 id="h3_in_section">heading3</h3> + <h4 id="h4_in_section">heading4</h4> + <h5 id="h5_in_section">heading5</h5> + <h6 id="h6_in_section">heading6</h6> + <hgroup> + <h1 id="h1_in_section_in_hgroup">heading1</h1> + <h2 id="h2_in_section_in_hgroup">heading2</h2> + <h3 id="h3_in_section_in_hgroup">heading3</h3> + <h4 id="h4_in_section_in_hgroup">heading4</h4> + <h5 id="h5_in_section_in_hgroup">heading5</h5> + <h6 id="h6_in_section_in_hgroup">heading6</h6> + </hgroup> + </section> + <blockquote> + <header id="header_in_blockquote">Not logo</header> + </blockquote> + <details open="true"> + <header id="header_in_details">Not logo</header> + </details> + <dialog open="true"> + <header id="header_in_dialog">Not logo</header> + </dialog> + <fieldset> + <header id="header_in_fieldset">Not logo</header> + </fieldset> + <figure> + <header id="header_in_figure">Not logo</header> + </figure> + <table><tr><td> + <header id="header_in_td">Not logo</header> + </td></tr></table> + + <hr id="hr"> + <p id="i_container">normal<i>italic</i></p> + <img id="img" src="../moz.png"> + + <input id="input_button" type="button" value="Button"> + <input id="input_checkbox" type="checkbox"> + <input id="input_checkbox_true" type="checkbox" checked> + <input id="input_file" type="file"> + <input id="input_image" type="image"> + <input id="input_image_display" type="image" style="display: block"> + <form> + <input id="input_image_default" type="image"> + </form> + <input id="input_submit" type="submit"> + <form> + <input id="input_submit_default" type="submit"> + </form> + <input id="input_number" type="number" value="44"> + <input id="input_text" type="text" value="hi"> + <form> + <label for="input_placeholder_same">Your name</label> + <input id="input_placeholder_same" placeholder="Your name"/> + <label for="input_placeholder_different">First name:</label> + <input id="input_placeholder_different" placeholder="Enter your first name"/> + <input id="input_placeholder_only" placeholder="Date of birth"/> + </form> + <input id="input_search" type="search" value="cats"> + <input id="input_email" type="email" value="me@mozilla.com"> + <input id="input_tel" type="tel" value="111.111.1111"> + <input id="input_url" type="url" value="www.mozilla.com"> + <input id="input_password" type="password" value="44"> + <input id="input_password_readonly" type="password" value="44" readonly> + <input id="input_radio" type="radio"> + <input id="input_radio_true" type="radio" checked> + <input id="input_range" type="range"> + <form> + <input id="input_reset" type="reset"> + </form> + <label>time label + <input id="input_time" type="time" value="23:23"> + </label> + <label>date label + <input id="input_date" type="date" value="2017-11-10"> + </label> + <label>datetime-local label + <input id="input_datetime_local" type="datetime-local" value="2017-11-10T23:23"> + </label> + + <p id="ins_container">normal<ins>Inserted</ins></p> + <p id="kbd_container">normal<kbd>cmd</kbd></p> + + <label id="label">label<input id="label_input"></label> + <label id="label_for" for="label_for_input">label</label> + <input id="label_for_input"> + + <ul id="ul"> + <li>item1</li> + </ul> + <ol id="ol"> + <li>item1</li> + </ol> + + <main id="main">main</main> + + <map id="map_imagemap" name="atoz_map"> + <area href="http://www.bbc.co.uk/radio4/atoz/index.shtml#b" + coords="17,0,30,14" alt="b" shape="rect"> + <area href="http://www.bbc.co.uk/radio4/atoz/index.shtml#a" + coords="0,0,13,14" alt="a" shape="rect"> + </map> + <img id="imgmap" width="447" height="15" + usemap="#atoz_map" + src="../letters.gif"> + + <map id="map" title="Navigation Bar" name="mapgroup"> + <p> + [<a href="#how">Bypass navigation bar</a>] + [<a href="home.html">Home</a>] + </p> + </map> + + <p id="mark_container">normal<mark>highlighted</mark></p> + + <math id="math"> + <mrow> + <mrow> + <msup> + <mi>a</mi> + <mn>2</mn> + </msup> + <mo>+</mo> + <msup> + <mi>b</mi> + <mn>2</mn> + </msup> + </mrow> + <mo>=</mo> + <msup> + <mi>c</mi> + <mn>2</mn> + </msup> + </mrow> + </math> + + <menu id="menu"> + <li>Home</li> + <li>About + <menu> + <li>Our Story</li> + </menu> + </li> + </menu> + + <menu id="menu1"> + <li> + <button>File</button> + <menu> + <li> + <button type="button" onclick="new()">New...</button> + </li> + </menu> + </li> + </menu> + + <meter id="meter" min="0" max="1000" low="300" high="700" value="200">200 Euro</meter> + + <nav id="nav"> + <ul> + <li><a href="#">Home</a></li> + <li><a href="#">About</a></li> + <li><a href="#">Contact</a></li> + </ul> + </nav> + + <object id="object_png" type="image/png" data="../moz.png" + width="300" height="300"> + </object> + <object id="object_html" type="text/html" data="../longdesc_src.html" + width="300" height="300"> + </object> + <object id="object_pdf" type="application/pdf" data="../dummy.pdf" + width="300" height="300"> + </object> + + <select id="select_listbox" size="4"> + <optgroup label="Colors"> + <option>Red</option> + <option>Blue</option> + </optgroup> + <option>Animal</option> + </select> + + <select id="select_listbox_multiselectable" multiple> + <option>Red</option> + <option>Blue</option> + <option>Green</option> + </select> + + <select id="select_combobox"> + <option>Red</option> + <option>Blue</option> + <option>Green</option> + </select> + + <input id="output_input"> + <output id="output" for="output_input"></output> + + <pre id="pre">pre</pre> + + <progress id="progress" min="0" value="21" max="42"></progress> + <progress id="progress_indeterminate"></progress> + + <q id="q" cite="http://en.wikipedia.org/wiki/Kenny_McCormick#Cultural_impact"> + Oh my God, they killed Kenny! + </q> + + <ruby id="ruby"> + 漢 <rp>(</rp><rt>Kan</rt><rp>)</rp> + 字 <rp>(</rp><rt>ji</rt><rp>)</rp> + </ruby> + + <p id="s_container">normal<s>striked</s></p> + <p id="samp_container">normal<samp>sample</samp></p> + <section id="section">section</section> + <section id="named_section" aria-label="foo">named section</section> + <p id="small_container">normal<small>small</small></p> + <span id="span"></span> + <span id="span_explicit" title="explicit"></span> + <p id="strong_container">normal<strong>strong</strong></p> + <sub id="sub"></sub> + <sup id="sup"></sup> + <p id="sub_container">normal<sub>sub</sub></p> + <p id="sup_container">normal<sup>sup</sup></p> + + <svg id="svg"></svg> + <textarea id="textarea"></textarea> + + <p>The concert took place on <time id="time" datetime="2001-05-15 19:00">May 15</time></p> + <p id="u_container">normal<u>underline</u></p> + <p id="var_container">An equation: <var>x</var> = <var>y</var></p> + + <video id="video" controls="true"> + <source id="source" src="../bug461281.ogg" type="video/ogg"> + </video> + +</video> +</body> +</html> |