mirror of
https://github.com/Feodor2/Mypal68.git
synced 2025-06-18 14:55:44 -04:00
261 lines
8.3 KiB
HTML
261 lines
8.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>div element creation tests</title>
|
|
<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="../role.js"></script>
|
|
<script type="application/javascript"
|
|
src="../attributes.js"></script>
|
|
|
|
<script type="application/javascript">
|
|
function doTest() {
|
|
// All below test cases are wrapped in a div which always gets rendered.
|
|
// c1 through c10 are the containers, the actual test cases are inside.
|
|
|
|
// c1: Expose the div with text content
|
|
let tree =
|
|
{ role: ROLE_SECTION, // outer div with ID
|
|
children: [
|
|
{ role: ROLE_SECTION, // inner div
|
|
children: [
|
|
{ TEXT_LEAF: [] },
|
|
], // end children inner div
|
|
}, // end inner div
|
|
], // end children outer div
|
|
};
|
|
testAccessibleTree("c1", tree);
|
|
|
|
// c2: Only the outermost and innermost divs are exposed.
|
|
// The middle one is skipped. This is identical to the above tree.
|
|
testAccessibleTree("c2", tree);
|
|
|
|
// c3: Make sure the inner div with ID is exposed, but the middle one is
|
|
// skipped.
|
|
tree =
|
|
{ role: ROLE_SECTION, // outer div with ID
|
|
children: [
|
|
{ role: ROLE_SECTION, // inner div
|
|
attributes: { id: "b" },
|
|
children: [
|
|
{ TEXT_LEAF: [] },
|
|
], // end children inner div
|
|
}, // end inner div
|
|
], // end children outer div
|
|
};
|
|
testAccessibleTree("c3", tree);
|
|
|
|
// c4: Expose all three divs including the middle one due to its ID.
|
|
tree =
|
|
{ role: ROLE_SECTION, // outer div with ID
|
|
children: [
|
|
{ role: ROLE_SECTION, // middle div
|
|
attributes: { id: "a" },
|
|
children: [
|
|
{ role: ROLE_SECTION, // inner div
|
|
attributes: { id: "b" },
|
|
children: [
|
|
{ TEXT_LEAF: [] },
|
|
], // end children inner div
|
|
}, // end inner div
|
|
], // end children middle div
|
|
}, // end middle div
|
|
], // end children outer div
|
|
};
|
|
testAccessibleTree("c4", tree);
|
|
|
|
// c5: Expose the inner div with class b due to its text contents.
|
|
tree =
|
|
{ role: ROLE_SECTION, // outer div with ID
|
|
children: [
|
|
{ role: ROLE_SECTION, // inner div with class and text
|
|
attributes: { class: "b" },
|
|
children: [
|
|
{ TEXT_LEAF: [] },
|
|
], // end children inner div
|
|
}, // end inner div
|
|
], // end children outer div
|
|
};
|
|
testAccessibleTree("c5", tree);
|
|
|
|
// c6: Expose the outer div due to its ID, and the two inner divs due to
|
|
// their text contents. Skip the middle one.
|
|
tree =
|
|
{ role: ROLE_SECTION, // outer div with ID
|
|
children: [
|
|
{ role: ROLE_SECTION, // first inner div
|
|
children: [
|
|
{ TEXT_LEAF: [] },
|
|
], // end children first inner div
|
|
}, // end first inner div
|
|
{ role: ROLE_SECTION, // second inner div
|
|
children: [
|
|
{ TEXT_LEAF: [] },
|
|
], // end children second inner div
|
|
}, // end second inner div
|
|
], // end children outer div
|
|
};
|
|
testAccessibleTree("c6", tree);
|
|
|
|
// c7: Expose all three divs including the middle one due to it being block
|
|
// breaking.
|
|
tree =
|
|
{ role: ROLE_SECTION, // outer div with ID
|
|
children: [
|
|
{ role: ROLE_SECTION, // middle div
|
|
children: [
|
|
{ TEXT_LEAF: [] }, // foo
|
|
{ role: ROLE_SECTION, // inner div
|
|
children: [
|
|
{ TEXT_LEAF: [] }, // bar
|
|
], // end children inner div
|
|
}, // end inner div
|
|
{ TEXT_LEAF: [] }, // baz
|
|
], // end children middle div
|
|
}, // end middle div
|
|
], // end children outer div
|
|
};
|
|
testAccessibleTree("c7", tree);
|
|
|
|
// c8: Expose all divs due to them all being text block breakers.
|
|
tree =
|
|
{ role: ROLE_SECTION, // outer div with ID
|
|
children: [
|
|
{ role: ROLE_SECTION, // foo div
|
|
children: [
|
|
{ TEXT_LEAF: [] }, // foo
|
|
{ role: ROLE_SECTION, // baz div
|
|
children: [
|
|
{ role: ROLE_SECTION, // bar div
|
|
children: [
|
|
{ TEXT_LEAF: [] }, // bar
|
|
], // end children bar div
|
|
}, // end bar div
|
|
{ TEXT_LEAF: [] }, // baz
|
|
], // end children baz div
|
|
}, // end baz div
|
|
], // end children foo div
|
|
}, // end foo div
|
|
], // end children outer div
|
|
};
|
|
testAccessibleTree("c8", tree);
|
|
|
|
// c9: The same, but in a different nesting order.
|
|
tree =
|
|
{ role: ROLE_SECTION, // outer div with ID
|
|
children: [
|
|
{ role: ROLE_SECTION, // c div
|
|
children: [
|
|
{ role: ROLE_SECTION, // b div
|
|
children: [
|
|
{ role: ROLE_SECTION, // a div
|
|
children: [
|
|
{ TEXT_LEAF: [] }, // a
|
|
], // end children a div
|
|
}, // end a div
|
|
{ TEXT_LEAF: [] }, // b
|
|
], // end children b div
|
|
}, // end b div
|
|
{ TEXT_LEAF: [] }, // c
|
|
], // end children c div
|
|
}, // end foo div
|
|
], // end children outer div
|
|
};
|
|
testAccessibleTree("c9", tree);
|
|
|
|
// c10: Both inner divs must be exposed so there is a break after b.
|
|
tree =
|
|
{ role: ROLE_SECTION, // outer div with ID
|
|
children: [
|
|
{ role: ROLE_SECTION, // first inner div
|
|
children: [
|
|
{ TEXT_LEAF: [] }, // a
|
|
{ TEXT_LEAF: [] }, // b
|
|
], // end children first inner div
|
|
}, // end first inner div
|
|
{ role: ROLE_SECTION, // second inner div
|
|
children: [
|
|
{ TEXT_LEAF: [] }, // c
|
|
{ TEXT_LEAF: [] }, // d
|
|
], // end children second inner div
|
|
}, // end second inner div
|
|
], // end children outer div
|
|
};
|
|
testAccessibleTree("c10", tree);
|
|
|
|
// c11: A div must be exposed if it contains a br element.
|
|
tree =
|
|
{ role: ROLE_SECTION, // outer div
|
|
children: [
|
|
{ role: ROLE_SECTION, // First line
|
|
children: [
|
|
{ TEXT_LEAF: [] }, // text
|
|
], // end children first line
|
|
}, // end first line
|
|
{ role: ROLE_SECTION, // Second line
|
|
children: [
|
|
{ WHITESPACE: [] }, // whitespace
|
|
], // end children second line
|
|
}, // end second line
|
|
{ role: ROLE_SECTION, // Third line
|
|
children: [
|
|
{ TEXT_LEAF: [] }, // text
|
|
], // end children third line
|
|
}, // end third line
|
|
], // end children outer div
|
|
};
|
|
testAccessibleTree("c11", tree);
|
|
|
|
SimpleTest.finish();
|
|
}
|
|
|
|
SimpleTest.waitForExplicitFinish();
|
|
addA11yLoadEvent(doTest);
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<p id="display"></p>
|
|
<div id="content" style="display: none"></div>
|
|
<pre id="test">
|
|
</pre>
|
|
|
|
<!-- Expose the div if it has plain text contents -->
|
|
<div id="c1"><div>foo</div></div>
|
|
|
|
<!-- Expose the outer and inner div, skip the middle one. -->
|
|
<div id="c2"><div><div>foo</div></div></div>
|
|
|
|
<!-- Expose the outer and inner divs due to the ID, but skip the middle one. -->
|
|
<div id="c3"><div><div id="b">foo</div></div></div>
|
|
|
|
<!-- Expose all three divs and their IDs. -->
|
|
<div id="c4"><div id="a"><div id="b">foo</div></div></div>
|
|
|
|
<!-- Expose outer and inner divs, due to text content, not class. -->
|
|
<div id="c5"><div class="a"><div class="b">foo</div></div></div>
|
|
|
|
<!-- Expose the outer and two inner divs, skip the single middle one. -->
|
|
<div id="c6"><div><div>foo</div><div>bar</div></div></div>
|
|
|
|
<!-- Expose all divs due to the middle one being block breaking. -->
|
|
<div id="c7"><div>foo<div>bar</div>baz</div></div>
|
|
|
|
<!-- Expose all divs due to them all being text block breakers. -->
|
|
<div id="c8"><div>foo<div><div>bar</div>baz</div></div></div>
|
|
<div id="c9"><div><div><div>a</div>b</div>c</div></div>
|
|
|
|
<!-- Both inner divs need to be rendered so there is a break after b. -->
|
|
<div id="c10"><div><b>a</b>b</div><div><b>c</b><b>d</b></div></div>
|
|
|
|
<!-- Div must be rendered if it contains a br -->
|
|
<div id="c11"><div>first line.</div><div><br /></div><div>third line</div></div>
|
|
</body>
|
|
</html>
|