--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/cm/media/js/lib/yui/yui_3.10.3/docs/node-focusmanager/node-focusmanager-button.html Tue Jul 16 14:29:46 2013 +0200
@@ -0,0 +1,843 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>Example: Accessible Menu Button</title>
+ <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic">
+ <link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css">
+ <link rel="stylesheet" href="../assets/css/main.css">
+ <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
+ <link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
+ <script src="../../build/yui/yui-min.js"></script>
+
+</head>
+<body>
+<!--
+<a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
+-->
+<div id="doc">
+ <div id="hd">
+ <h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1>
+ </div>
+
+ <a href="#toc" class="jump">Jump to Table of Contents</a>
+
+
+ <h1>Example: Accessible Menu Button</h1>
+ <div class="yui3-g">
+ <div class="yui3-u-3-4">
+ <div id="main">
+ <div class="content"><div class="intro">
+ <p>
+ This example illustrates how to use the Focus Manager Node Plugin,
+ Event's <a href="http://yuilibrary.com/yui/docs/api/classes/YUI.html#event_delegate">delegation support</a> and
+ <a href="http://yuilibrary.com/yui/docs/api/classes/YUI.html#event_mouseenter">mouseenter</a> event, along with
+ the <a href="../overlay/index.html">Overlay widget</a> and Node's support for the
+ <a href="http://www.w3.org/TR/wai-aria/">WAI-ARIA Roles and States</a> to
+ create an accessible menu button.
+ </p>
+</div>
+
+<div class="example">
+ <style scoped>
+ /* The following two styles are necessary to override style rules in the
+ YUI CSS file. */
+
+ .example ul {
+ margin: 0;
+ }
+
+ .example a:hover {
+ text-decoration: none;
+ }
+
+
+ /* Hide the button and list while it is being transformed into a menu button. */
+ .yui3-js-enabled .yui3-menubutton-loading #menu-1,
+ .yui3-js-enabled .yui3-menubutton-loading #button-1 {
+ display: none;
+ }
+
+ </style>
+
+ <link rel="stylesheet" href="../assets/node-focusmanager/menubutton.css">
+
+<div class="yui3-menubutton-loading">
+ <a id="button-1" href="#menu-1"><span><span>Move To</span></span></a>
+ <div id="menu-1">
+ <ul>
+ <li><input type="button" name="button-1" value="Inbox"></li>
+ <li><input type="button" name="button-2" value="Archive"></li>
+ <li><input type="button" name="button-3" value="Trash"></li>
+ </ul>
+ </div>
+</div>
+<div id="out">(Accessible Menu Button results here)</div>
+
+<script>
+YUI().use("node-focusmanager", "node-event-simulate", "overlay", function(Y){
+
+ var menuButton = Y.one("#button-1"),
+ out = Y.one("#out"),
+ menu;
+
+ var initMenu = function () {
+
+ menu = new Y.Overlay({
+ contentBox: "#menu-1",
+ visible: false,
+ tabIndex: null
+ });
+
+ menu.render();
+
+
+ Y.one("#menu-1").setStyle("display", "");
+
+ var boundingBox = menu.get("boundingBox"),
+ contentBox = menu.get("contentBox");
+
+ boundingBox.addClass("yui3-buttonmenu");
+ contentBox.addClass("yui3-buttonmenu-content");
+
+
+ // Append a decorator element to the bounding box to render the shadow.
+
+ boundingBox.append('<div class="yui3-menu-shadow"></div>');
+
+
+ // Apply the ARIA roles, states and properties to the menu.
+
+ boundingBox.setAttrs({
+ role: "menu",
+ "aria-labelledby": menuLabelID
+ });
+
+ boundingBox.all("input").set("role", "menuitem");
+
+
+ // For NVDA: Add the role of "presentation" to each LI
+ // element to prevent NVDA from announcing the
+ // "listitem" role.
+
+ boundingBox.all("div,ul,li").set("role", "presentation");
+
+
+ // Use the FocusManager Node Plugin to manage the focusability
+ // of each menuitem in the menu.
+
+ contentBox.plug(Y.Plugin.NodeFocusManager, {
+
+ descendants: "input",
+ keys: { next: "down:40", // Down arrow
+ previous: "down:38" }, // Up arrow
+ focusClass: {
+ className: "yui3-menuitem-active",
+ fn: function (node) {
+ return node.get("parentNode");
+ }
+ },
+ circular: true
+
+ });
+
+
+ // Subscribe to the change event for the "focused" attribute
+ // to listen for when the menu initially gains focus, and
+ // when the menu has lost focus completely.
+
+ contentBox.focusManager.after("focusedChange", function (event) {
+
+ if (!event.newVal) { // The menu has lost focus
+
+ // Set the "activeDescendant" attribute to 0 when the
+ // menu is hidden so that the user can tab from the
+ // button to the first item in the menu the next time
+ // the menu is made visible.
+
+ this.set("activeDescendant", 0);
+
+ }
+
+ });
+
+
+ // Hide the button's menu if the user presses the escape key
+ // while focused either on the button or its menu.
+
+ Y.on("key", function () {
+
+ menu.hide();
+ menuButton.focus();
+
+ }, [menuButton, boundingBox] ,"down:27");
+
+
+ if (Y.UA.ie === 6) {
+
+ // Set the width and height of the menu's bounding box -
+ // this is necessary for IE 6 so that the CSS for the
+ // shadow element can simply set the shadow's width and
+ // height to 100% to ensure that dimensions of the shadow
+ // are always sync'd to the that of its parent menu.
+
+ menu.on("visibleChange", function (event) {
+
+ if (event.newVal) {
+
+ boundingBox.setStyles({ height: "", width: "" });
+
+ boundingBox.setStyles({
+ height: (boundingBox.get("offsetHeight") + "px"),
+ width: (boundingBox.get("offsetWidth") + "px") });
+
+ }
+
+ });
+
+ }
+
+
+ menu.after("visibleChange", function (event) {
+
+ var bVisible = event.newVal;
+
+ // Focus the first item when the menu is made visible
+ // to allow users to navigate the menu via the keyboard
+
+ if (bVisible) {
+
+ // Need to set focus via a timer for Webkit and Opera
+ Y.Lang.later(0, contentBox.focusManager, contentBox.focusManager.focus);
+
+ }
+
+ boundingBox.set("aria-hidden", (!bVisible));
+
+ });
+
+
+ // Hide the menu when one of menu items is clicked.
+
+ boundingBox.delegate("click", function (event) {
+
+ out.setHTML("You clicked " + this.one("input").get("value"));
+
+ contentBox.focusManager.blur();
+ menu.hide();
+
+ }, "li");
+
+
+ // Focus each menuitem as the user moves the mouse over
+ // the menu.
+
+ boundingBox.delegate("mouseenter", function (event) {
+
+ var focusManager = contentBox.focusManager;
+
+ if (focusManager.get("focused")) {
+ focusManager.focus(this.one("input"));
+ }
+
+ }, "li");
+
+
+ // Hide the menu if the user clicks outside of it or if the
+ // user doesn't click on the button
+
+ boundingBox.get("ownerDocument").on("mousedown", function (event) {
+
+ var oTarget = event.target;
+
+ if (!oTarget.compareTo(menuButton) &&
+ !menuButton.contains(oTarget) &&
+ !oTarget.compareTo(boundingBox) &&
+ !boundingBox.contains(oTarget)) {
+
+ menu.hide();
+
+ }
+
+ });
+
+ };
+
+
+ menuButton.addClass("yui3-menubutton");
+
+
+ // Hide the list until it is transformed into a menu
+
+ Y.one("#menu-1").setStyle("display", "none");
+
+
+ // Remove the "yui3-menubutton-loading" class from the parent container
+ // now that the necessary YUI dependencies are loaded and the
+ // menu button has been skinned.
+
+ menuButton.ancestor(".yui3-menubutton-loading").removeClass("yui3-menubutton-loading");
+
+
+ // Apply the ARIA roles, states and properties to the anchor.
+
+ menuButton.setAttrs({
+ role: "button",
+ "aria-haspopup": true
+ });
+
+
+ // Remove the "href" attribute from the anchor element to
+ // prevent JAWS and NVDA from reading the value of the "href"
+ // attribute when the anchor is focused.
+
+ if ((Y.UA.gecko || Y.UA.ie) && navigator.userAgent.indexOf("Windows") > -1) {
+
+ menuButton.removeAttribute("href");
+
+ // Since the anchor's "href" attribute has been removed, the
+ // element will not fire the click event in Firefox when the
+ // user presses the enter key. To fix this, dispatch the
+ // "click" event to the anchor when the user presses the
+ // enter key.
+
+ Y.on("key", function (event) {
+
+ menuButton.simulate("click");
+
+ }, menuButton, "down:13");
+
+ }
+
+
+ // Set the "tabIndex" attribute of the anchor element to 0 to
+ // place it in the browser's default tab flow. This is
+ // necessary since 1) anchor elements are not in the default
+ // tab flow in Opera and 2) removing the "href" attribute
+ // prevents the anchor from firing its "click" event
+ // in Firefox.
+
+ menuButton.set("tabIndex", 0);
+
+ // Since there is some intermediary markup (<span>s) between the anchor element with the role
+ // of "button" applied and the text label for the anchor - we need to use the
+ // "aria-labelledby" attribute to ensure that screen readers announce the text label for the
+ // button.
+
+ var menuLabel = menuButton.one("span span"),
+ menuLabelID = Y.stamp(menuLabel);
+
+ menuLabel.set("id", menuLabelID);
+ menuButton.set("aria-labelledby", menuLabelID);
+
+ var showMenu = function (event) {
+
+ // For performance: Defer the creation of the menu until
+ // the first time the button is clicked.
+
+ if (!menu) {
+ initMenu();
+ }
+
+
+ if (!menu.get("visible")) {
+
+ menu.set("align", {
+ node: menuButton,
+ points: [Y.WidgetPositionAlign.TL, Y.WidgetPositionAlign.BL]
+ });
+
+ menu.show();
+
+ }
+
+ // Prevent the anchor element from being focused
+ // when the users mouses down on it.
+ event.preventDefault();
+
+ };
+
+
+ // Bind both a "mousedown" and "click" event listener to
+ // ensure the button's menu can be invoked using both the
+ // mouse and the keyboard.
+
+ menuButton.on(["mousedown", "click"], showMenu);
+
+});
+</script>
+
+</div>
+
+<h2 id="setting-up-the-html">Setting Up the HTML</h2>
+
+<p>
+For a menu button, start with an <code><a></code> element whose
+<code>href</code> attribute is set to the id of an <code><div></code>
+that wraps a list of <code><input></code> elements.
+Therefore, without JavaScript and CSS, the menu button is simply an in-page
+link to a set of additional buttons.
+</p>
+
+<pre class="code prettyprint"><div class="yui3-menubutton-loading">
+ <a id="button-1" href="#menu-1"><span><span>Move To</span></span></a>
+ <div id="menu-1">
+ <ul>
+ <li><input type="button" name="button-1" value="Inbox"></li>
+ <li><input type="button" name="button-2" value="Archive"></li>
+ <li><input type="button" name="button-3" value="Trash"></li>
+ </ul>
+ </div>
+</div></pre>
+
+
+<h2 id="progressive-enhancement">Progressive Enhancement</h2>
+
+<p>
+To account for the scenario where the user has CSS enabled in their browser but JavaScript
+is disabled, the CSS used to style the menu button will be loaded via JavaScript
+using the YUI instance's <a href="../yui/index.html#loader">built-in Loader</a>.
+</p>
+
+<pre class="code prettyprint">YUI({
+ modules: {
+ "menubuttoncss": {
+ type: "css",
+ fullpath: "../assets/node-focusmanager/menubutton.css"
+ },
+ "menubuttonjs": {
+ type: "js",
+ fullpath: "../assets/node-focusmanager/menubutton.js",
+ requires: ["menubuttoncss", "node-focusmanager", "node-event-simulate", "overlay"]
+ }
+ }
+}).use("menubuttonjs");</pre>
+
+
+<p>
+To prevent the user from seeing a flash unstyled content when JavaScript is enabled,
+a style rule is created using YUI's <code>yui3-js-enabled</code> class name that will temporarily
+hide the markup while the JavaScript and CSS are in the process of loading. For more on using the
+<code>yui3-js-enabled</code> class name, see the
+<a href="../widget/index.html#progressive">Hiding Progressively Enhanced Markup</a> section of the
+<a href="../widget/index.html">YUI Widget landing page</a>.
+</p>
+
+<pre class="code prettyprint">/* Hide the button and list while it is being transformed into a menu button. */
+
+.yui3-js-enabled .yui3-menubutton-loading #menu-1,
+.yui3-js-enabled .yui3-menubutton-loading #button-1 {
+ display: none;
+}</pre>
+
+
+<h2 id="aria-support">ARIA Support</h2>
+
+<p>
+Through the use of CSS and JavaScript the HTML for the menu button can be
+transformed into something that looks and behaves like a desktop menu button,
+but users of screen readers won't perceive it as an atomic widget, but rather
+simply as a set of HTML elements. However, through the application
+of the
+<a href="http://www.w3.org/TR/wai-aria/">WAI-ARIA Roles and States</a>, it is
+possible to improve the semantics of the markup such that users of screen
+readers perceive it as a menu button control.
+</p>
+
+<h2 id="keyboard-functionality">Keyboard Functionality</h2>
+
+<p>
+The keyboard functionality for the button's menu will be provided by the Focus
+Manager Node Plugin. The Focus Manager's
+<a href="http://yuilibrary.com/yui/docs/api/classes/plugin.NodeFocusManager.html#attr_descendants"><code>descendants</code></a>
+attribute is set to a value of "input", so that only one menuitem in the
+button's menu is in the browser's default tab flow. This allows users
+navigating via the keyboard to use the tab key to quickly move into and out of
+the menu. Once the menu has focus, the user can move focus among each menuitem
+using the up and down arrows keys, as defined by the value of the
+<a href="http://yuilibrary.com/yui/docs/api/classes/plugin.NodeFocusManager.html#attr_keys"><code>keys</code></a>
+attribute. The
+<a href="http://yuilibrary.com/yui/docs/api/classes/plugin.NodeFocusManager.html#attr_focusClass"><code>focusClass</code></a>
+attribute is used to apply a class of <code>yui-menuitem-active</code> to
+the parent <code><li></code> of each
+<code><input></code> when it is focused, making it easy to style the
+menuitem's focused state in all browsers.
+
+<pre class="code prettyprint">YUI().use("*", function (Y) {
+
+ var menuButton = Y.one("#button-1"),
+ menu;
+
+
+ var initMenu = function () {
+
+ menu = new Y.Overlay({
+ contentBox: "#menu-1",
+ visible: false,
+ tabIndex: null
+ });
+
+ menu.render();
+
+
+ Y.one("#menu-1").setStyle("display", "");
+
+ var boundingBox = menu.get("boundingBox"),
+ contentBox = menu.get("contentBox");
+
+ boundingBox.addClass("yui3-buttonmenu");
+ contentBox.addClass("yui3-buttonmenu-content");
+
+
+ // Append a decorator element to the bounding box to render the shadow.
+
+ boundingBox.append('<div class="yui3-menu-shadow"></div>');
+
+
+ // Apply the ARIA roles, states and properties to the menu.
+
+ boundingBox.setAttrs({
+ role: "menu",
+ "aria-labelledby": menuLabelID
+ });
+
+ boundingBox.all("input").set("role", "menuitem");
+
+
+ // For NVDA: Add the role of "presentation" to each LI
+ // element to prevent NVDA from announcing the
+ // "listitem" role.
+
+ boundingBox.all("div,ul,li").set("role", "presentation");
+
+
+ // Use the FocusManager Node Plugin to manage the focusability
+ // of each menuitem in the menu.
+
+ contentBox.plug(Y.Plugin.NodeFocusManager, {
+
+ descendants: "input",
+ keys: { next: "down:40", // Down arrow
+ previous: "down:38" }, // Up arrow
+ focusClass: {
+ className: "yui3-menuitem-active",
+ fn: function (node) {
+ return node.get("parentNode");
+ }
+ },
+ circular: true
+
+ });
+
+
+ // Subscribe to the change event for the "focused" attribute
+ // to listen for when the menu initially gains focus, and
+ // when the menu has lost focus completely.
+
+ contentBox.focusManager.after("focusedChange", function (event) {
+
+ if (!event.newVal) { // The menu has lost focus
+
+ // Set the "activeDescendant" attribute to 0 when the
+ // menu is hidden so that the user can tab from the
+ // button to the first item in the menu the next time
+ // the menu is made visible.
+
+ this.set("activeDescendant", 0);
+
+ }
+
+ });
+
+
+ // Hide the button's menu if the user presses the escape key
+ // while focused either on the button or its menu.
+
+ Y.on("key", function () {
+
+ menu.hide();
+ menuButton.focus();
+
+ }, [menuButton, boundingBox] ,"down:27");
+
+
+ if (Y.UA.ie === 6) {
+
+ // Set the width and height of the menu's bounding box -
+ // this is necessary for IE 6 so that the CSS for the
+ // shadow element can simply set the shadow's width and
+ // height to 100% to ensure that dimensions of the shadow
+ // are always sync'd to the that of its parent menu.
+
+ menu.on("visibleChange", function (event) {
+
+ if (event.newVal) {
+
+ boundingBox.setStyles({ height: "", width: "" });
+
+ boundingBox.setStyles({
+ height: (boundingBox.get("offsetHeight") + "px"),
+ width: (boundingBox.get("offsetWidth") + "px") });
+
+ }
+
+ });
+
+ }
+
+
+ menu.after("visibleChange", function (event) {
+
+ var bVisible = event.newVal;
+
+ // Focus the first item when the menu is made visible
+ // to allow users to navigate the menu via the keyboard
+
+ if (bVisible) {
+
+ // Need to set focus via a timer for Webkit and Opera
+ Y.Lang.later(0, contentBox.focusManager, contentBox.focusManager.focus);
+
+ }
+
+ boundingBox.set("aria-hidden", (!bVisible));
+
+ });
+
+
+ // Hide the menu when one of menu items is clicked.
+
+ boundingBox.delegate("click", function (event) {
+
+ alert("You clicked " + this.one("input").get("value"));
+
+ contentBox.focusManager.blur();
+ menu.hide();
+
+ }, "li");
+
+
+ // Focus each menuitem as the user moves the mouse over
+ // the menu.
+
+ boundingBox.delegate("mouseenter", function (event) {
+
+ var focusManager = contentBox.focusManager;
+
+ if (focusManager.get("focused")) {
+ focusManager.focus(this.one("input"));
+ }
+
+ }, "li");
+
+
+ // Hide the menu if the user clicks outside of it or if the
+ // user doesn't click on the button
+
+ boundingBox.get("ownerDocument").on("mousedown", function (event) {
+
+ var oTarget = event.target;
+
+ if (!oTarget.compareTo(menuButton) &&
+ !menuButton.contains(oTarget) &&
+ !oTarget.compareTo(boundingBox) &&
+ !boundingBox.contains(oTarget)) {
+
+ menu.hide();
+
+ }
+
+ });
+
+ };
+
+
+ menuButton.addClass("yui3-menubutton");
+
+
+ // Hide the list until it is transformed into a menu
+
+ Y.one("#menu-1").setStyle("display", "none");
+
+
+ // Remove the "yui3-menubutton-loading" class from the parent container
+ // now that the necessary YUI dependencies are loaded and the
+ // menu button has been skinned.
+
+ menuButton.ancestor(".yui3-menubutton-loading").removeClass("yui3-menubutton-loading");
+
+
+ // Apply the ARIA roles, states and properties to the anchor.
+
+ menuButton.setAttrs({
+ role: "button",
+ "aria-haspopup": true
+ });
+
+
+ // Remove the "href" attribute from the anchor element to
+ // prevent JAWS and NVDA from reading the value of the "href"
+ // attribute when the anchor is focused.
+
+ if ((Y.UA.gecko || Y.UA.ie) && navigator.userAgent.indexOf("Windows") > -1) {
+
+ menuButton.removeAttribute("href");
+
+ // Since the anchor's "href" attribute has been removed, the
+ // element will not fire the click event in Firefox when the
+ // user presses the enter key. To fix this, dispatch the
+ // "click" event to the anchor when the user presses the
+ // enter key.
+
+ Y.on("key", function (event) {
+
+ menuButton.simulate("click");
+
+ }, menuButton, "down:13");
+
+ }
+
+
+ // Set the "tabIndex" attribute of the anchor element to 0 to
+ // place it in the browser's default tab flow. This is
+ // necessary since 1) anchor elements are not in the default
+ // tab flow in Opera and 2) removing the "href" attribute
+ // prevents the anchor from firing its "click" event
+ // in Firefox.
+
+ menuButton.set("tabIndex", 0);
+
+ // Since there is some intermediary markup (<span>s) between the anchor element with the role
+ // of "button" applied and the text label for the anchor - we need to use the
+ // "aria-labelledby" attribute to ensure that screen readers announce the text label for the
+ // button.
+
+ var menuLabel = menuButton.one("span span"),
+ menuLabelID = Y.stamp(menuLabel);
+
+ menuLabel.set("id", menuLabelID);
+ menuButton.set("aria-labelledby", menuLabelID);
+
+ var showMenu = function (event) {
+
+ // For performance: Defer the creation of the menu until
+ // the first time the button is clicked.
+
+ if (!menu) {
+ initMenu();
+ }
+
+
+ if (!menu.get("visible")) {
+
+ menu.set("align", {
+ node: menuButton,
+ points: [Y.WidgetPositionAlign.TL, Y.WidgetPositionAlign.BL]
+ });
+
+ menu.show();
+
+ }
+
+ // Prevent the anchor element from being focused
+ // when the users mouses down on it.
+ event.preventDefault();
+
+ };
+
+
+ // Bind both a "mousedown" and "click" event listener to
+ // ensure the button's menu can be invoked using both the
+ // mouse and the keyboard.
+
+ menuButton.on("mousedown", showMenu);
+ menuButton.on("click", showMenu);
+
+});</pre>
+
+</div>
+ </div>
+ </div>
+
+ <div class="yui3-u-1-4">
+ <div class="sidebar">
+
+ <div id="toc" class="sidebox">
+ <div class="hd">
+ <h2 class="no-toc">Table of Contents</h2>
+ </div>
+
+ <div class="bd">
+ <ul class="toc">
+<li>
+<a href="#setting-up-the-html">Setting Up the HTML</a>
+</li>
+<li>
+<a href="#progressive-enhancement">Progressive Enhancement</a>
+</li>
+<li>
+<a href="#aria-support">ARIA Support</a>
+</li>
+<li>
+<a href="#keyboard-functionality">Keyboard Functionality</a>
+</li>
+</ul>
+ </div>
+ </div>
+
+
+
+ <div class="sidebox">
+ <div class="hd">
+ <h2 class="no-toc">Examples</h2>
+ </div>
+
+ <div class="bd">
+ <ul class="examples">
+
+
+ <li data-description="Creating an accessible toolbar using the Focus Manager Node Plugin and Node's support for the WAI-ARIA Roles and States.">
+ <a href="node-focusmanager-toolbar.html">Accessible Toolbar</a>
+ </li>
+
+
+
+ <li data-description="Creating an accessible menu button using the Focus Manager Node Plugin, Event's delegation support and mouseenter event, along with the Overlay widget and Node's support for the WAI-ARIA Roles and States.">
+ <a href="node-focusmanager-button.html">Accessible Menu Button</a>
+ </li>
+
+
+ </ul>
+ </div>
+ </div>
+
+
+
+ </div>
+ </div>
+ </div>
+</div>
+
+<script src="../assets/vendor/prettify/prettify-min.js"></script>
+<script>prettyPrint();</script>
+
+<script>
+YUI.Env.Tests = {
+ examples: [],
+ project: '../assets',
+ assets: '../assets/node-focusmanager',
+ name: 'node-focusmanager-button',
+ title: 'Accessible Menu Button',
+ newWindow: '',
+ auto: false
+};
+YUI.Env.Tests.examples.push('node-focusmanager-toolbar');
+YUI.Env.Tests.examples.push('node-focusmanager-button');
+
+</script>
+<script src="../assets/yui/test-runner.js"></script>
+
+
+
+</body>
+</html>