tests/manual/outside.html

	outside.html revision a958fdd529761b111fb3d448b732519434c5d4af
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith<!doctype html>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith<html>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith<head>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith    <title>Outside Events Testbed</title>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith    <style type="text/css">
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith    body {
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        font-family: Lucida Grande, Lucida Sans Unicode, Arial;
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith    }
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith    div.box {
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        border: 1px solid #999;
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        float: left;
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        height: 3em;
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        margin: 0.5em 0 0 10px;
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        padding: 0.2em 0.5em;
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        width: 10em;
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith    }
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith    #outer {
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        margin: 0 auto;
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        width: 755px;
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith    }
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith    h2,p {margin-left: 10px;}
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith    h4 { margin: 0; padding: 0;}
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith    span {
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        color: #000;
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        font-style: italic;
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith    }
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith    #controls,
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith    #events {
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        background: #ccf;
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        height: 6em;
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        width: 96%;
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith    }
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith    #controls div,
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith    #controls form {
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        float: left;
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        margin: 10px 2em 0 0;
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith    }
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith    #events {
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        background: #cfc;
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        width: 9.8em;
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith    }
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith    #events button { margin: 6px 0; }
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith    .checkbox label,
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith    .radio label { display: block; }
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith    button, select {
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        display: block;
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        margin-bottom: 5px;
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith    }
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith    form { margin-top: 1em; }
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith    .outside {
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        background: #ff9 !important;
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        border-color: #f30 !important;
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        color: #f00;
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith    }
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith    </style>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith</head>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith<body>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith    <div id="outer">
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        <h2>Outside Events Testbed</h2>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        <p>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            Each of the boxes below respond to an outside event by temporarily
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            changing color and displaying the originating event target. Poke around
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            at the page and the test controls to trigger each outside event.
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        </p>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        <p>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            In addition to native DOM events, try triggering Luke Smith's
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            <a href="http://yuilibrary.com/gallery/show/event-konami" title="up, up, down, down, left, right, left, right, b, a">Konami event</a>.
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            It will only fire once, so refresh the page if you want to try again.
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        </p>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        <div class="box" id="blur">
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            <h4>blur
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            <input size="3">
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            <input size="3"></h4>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            <span></span>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        </div>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        <div class="box" id="change">
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            <h4>change
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            <input size="3"></h4>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            <span></span>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        </div>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        <div class="box" id="click">
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            <h4>click
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            <input type="button" value="button"><a href="#">link</a></h4>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            <span></span>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        </div>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        <div class="box" id="dblclick">
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            <h4>dblclick</h4>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            <span></span>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        </div>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        <div class="box" id="focus">
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            <h4>focus
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            <input size="3"></h4>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            <span></span>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        </div>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        <div class="box" id="keydown">
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            <h4>keydown
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            <input size="3"></h4>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            <span></span>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        </div>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        <div class="box" id="keypress">
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            <h4>keypress
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            <input size="3"></h4>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            <span></span>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        </div>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        <div class="box" id="keyup">
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            <h4>keyup
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            <input size="3"></h4>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            <span></span>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        </div>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        <div class="box" id="mousedown">
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            <h4>mousedown
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            <input type="button" value="x"></h4>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            <span></span>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        </div>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        <div class="box" id="mousemove">
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            <h4>mousemove</h4>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            <span></span>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        </div>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        <div class="box" id="mouseout">
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            <h4>mouseout</h4>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            <span></span>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        </div>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        <div class="box" id="mouseover">
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            <h4>mouseover</h4>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            <span></span>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        </div>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        <div class="box" id="mouseup">
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            <h4>mouseup
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            <input type="button" value="button"></h4>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            <span></span>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        </div>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        <div class="box" id="select">
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            <h4>select</h4>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            <span></span>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        </div>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        <div class="box" id="submit" style="position: relative;">
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            <h4>submit</h4>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            <form style="position: absolute; right: 3px; top: 3px; margin: 0;"><input type="submit"></form>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            <span></span>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        </div>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        <div class="box" id="konami">
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            <h4>konami
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            <input size="3"></h4>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            <span></span>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        </div>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        <div class="box" id="controls">
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            <h4>Test Controls</h4>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            <div>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith                <select>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith                    <option selected="selected">Option A</option>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith                    <option>Option B</option>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith                    <option>Option C</option>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith                </select>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith                <input type="text" id="text"><br/>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            </div>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            <div>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith                <button>button</button>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith                <a href="?linked" id="link">Link</a>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            </div>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            <div class="checkbox">
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith                <label><input type="checkbox" id="coke">Coke</label>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith                <label><input type="checkbox" id="pepsi">Pepsi</label>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith                <label><input type="checkbox" id="pibb">Pibb</label>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            </div>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            <div class="radio">
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith                <label><input type="radio" name="group" id="yes">Yes</label>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith                <label><input type="radio" name="group" id="no">No</label>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith                <label><input type="radio" name="group" id="maybe">Maybe</label>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            </div>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            <form method="get" action="">
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith                <input id="submitButton" type="submit" value="Submit">
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith            </form>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith        </div>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith    </div>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith    <script src="/build/yui/yui.js"></script>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith    <script src="/dev/yui3-gallery/build/gallery-event-konami/gallery-event-konami.js"></script>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith    <script src="test-event-outside.js"></script>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith</body>
a958fdd529761b111fb3d448b732519434c5d4afLuke Smith</html>