Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

just transfering some stuff

  • Loading branch information...
commit a9b40512061d4f371bf6c44a70733c6259b6fe78 1 parent 0152ea0
@deserat authored
View
22 canvas/404.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<title>not found</title>
+
+<style>
+body { text-align: center;}
+h1 { font-size: 50px; }
+body { font: 20px Constantia, 'Hoefler Text', "Adobe Caslon Pro", Baskerville, Georgia, Times, serif; color: #999; text-shadow: 2px 2px 2px rgba(200, 200, 200, 0.5); }
+::-moz-selection{ background:#FF5E99; color:#fff; }
+::selection { background:#FF5E99; color:#fff; }
+details { display:block; }
+a { color: rgb(36, 109, 56); text-decoration:none; }
+a:hover { color: rgb(96, 73, 141) ; text-shadow: 2px 2px 2px rgba(36, 109, 56, 0.5); }
+span[frown] { transform: rotate(90deg); display:inline-block; color: #bbb; }
+</style>
+
+
+
+
+<details>
+ <summary><h1>Not found</h1></summary>
+ <p><span frown>:(</span></p>
+</details>
View
67 canvas/README.markdown
@@ -0,0 +1,67 @@
+# HTML5 Boilerplate [http://html5boilerplate.com](http://html5boilerplate.com)
+
+
+## License:
+
+Major components:
+
+* Modernizr: MIT/BSD license
+* jQuery: MIT/GPL license
+* DD_belatedPNG: MIT license
+* YUI Profiling: BSD license
+* HTML5Doctor CSS reset: Creative Commons 3.0 BY
+* CSS Reset Reloaded: Public Domain
+
+Everything else:
+
+* [The Unlicense](http://unlicense.org) (aka: public domain)
+
+
+## Changelog:
+
+### v.0.9.1 : August 13th, 2010
+* HTML5 Boilerplate is now in the Public Domain
+* Nginx configuration added
+* Font stacks (sans-serif and monospace) simplified
+* Very accessible a:focus styles.
+* Corrected IE=edge,chromeframe enabling (As a result, the base HTML [does not validate](http://bit.ly/cGSSgr))
+* ServerSideIncludes disabled by default.
+* Apache config bugfixes
+* Conditional body tag class combined
+* dd_belatedPNG updated to 0.0.8. Redundant BackgroundImageCache fix removed.
+
+[View full diff and commit history](http://github.com/paulirish/html5-boilerplate/compare/v0.9...v0.9.1)
+
+##### Thanks:
+
+voodootikigod, garowetz, fearphage, christopherjacob, mathias byenens, daniel harttman, rse, chris dary, erik dahlstrom, timwillison, ken nordahl, riddle, elcuervo, andreas kuckartz, 3rdEden, riley willis, majic3
+
+### v0.9 : August 10th, 2010 - Initial release
+
+## Summary:
+
+This is a set of files that a front-end developer can use to get started on a website, with following included:
+
+1. Cross-browser compatible (IE6, yeah we got that.)
+2. HTML5 ready. Use the new tags with certainty.
+3. Optimal caching and compression rules for grade-A performance
+4. Best practice site configuration defaults
+5. Think there's too much? The HTML5 Boilerplate is delete-key friendly. :)
+6. Mobile browser optimizations
+7. Progressive enhancement graceful degredation ........ yeah yeah we got that
+8. IE specific classes for maximum cross-browser control
+9. Want to write unit tests but lazy? A full, hooked up test suite is waiting for you.
+10. Javascript profiling.. in IE6 and IE7? Sure, no problem.
+11. Console.log nerfing so you won't break anyone by mistake.
+12. Never go wrong with your doctype or markup!
+13. An optimal print stylesheet, performance optimized
+14. iOS, Android, Opera Mobile-adaptable markup and CSS skeleton.
+15. IE6 pngfix baked in.
+16. jQuery, waiting for you
+
+## Releases
+
+There are two releases: a documented release, which is exactly what you see here, and a "stripped" release, with most of the descriptive comments stripped out.
+
+Watch the [current tickets](http://github.com/paulirish/html5-boilerplate/issues) to view the areas of active development.
+
View
BIN  canvas/apple-touch-icon.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
16 canvas/crossdomain.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0"?>
+<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
+<cross-domain-policy>
+ <!--
+ If you host a crossdomain.xml file with allow-access-from domain=“*”
+ and don’t understand all of the points described here, you probably
+ have a nasty security vulnerability. ~ simon willison
+
+ Please read: www.adobe.com/devnet/flashplayer/articles/cross_domain_policy.html
+
+ <allow-access-from domain="*" to-ports="*" />
+
+ -->
+</cross-domain-policy>
+
+
View
8 canvas/css/handheld.css
@@ -0,0 +1,8 @@
+* {
+ float: none; /* Screens are not big enough to account for floats */
+ background: #fff; /* As much contrast as possible */
+ color: #000;
+}
+
+/* Slightly reducing font size to reduce need to scroll */
+body { font-size: 80%; }
View
283 canvas/css/style.css
@@ -0,0 +1,283 @@
+/*
+ style.css contains a reset, font normalization and some base styles.
+
+ credit is left where credit is due.
+ additionally, much inspiration was taken from these projects:
+ yui.yahooapis.com/2.8.1/build/base/base.css
+ camendesign.com/design/
+ praegnanz.de/weblog/htmlcssjs-kickstart
+*/
+
+/*
+ html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
+ v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark
+ html5doctor.com/html-5-reset-stylesheet/
+*/
+
+html, body, div, span, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+abbr, address, cite, code,
+del, dfn, em, img, ins, kbd, q, samp,
+small, strong, sub, sup, var,
+b, i,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section, summary,
+time, mark, audio, video {
+ margin:0;
+ padding:0;
+ border:0;
+ outline:0;
+ font-size:100%;
+ vertical-align:baseline;
+ background:transparent;
+}
+
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+ display:block;
+}
+
+nav ul { list-style:none; }
+
+blockquote, q { quotes:none; }
+
+blockquote:before, blockquote:after,
+q:before, q:after { content:''; content:none; }
+
+a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
+
+ins { background-color:#ff9; color:#000; text-decoration:none; }
+
+mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
+
+del { text-decoration: line-through; }
+
+abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
+
+/* tables still need cellspacing="0" in the markup */
+table { border-collapse:collapse; border-spacing:0; }
+
+hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
+
+input, select { vertical-align:middle; }
+/* END RESET CSS */
+
+
+/* fonts.css from the YUI Library: developer.yahoo.com/yui/
+ Refer to developer.yahoo.com/yui/3/cssfonts/ for font sizing percentages
+
+ There are three custom edits:
+ * remove arial, helvetica from explicit font stack
+ * we normalize monospace styles ourselves
+ * table font-size is reset in the HTML5 reset above so there is no need to repeat
+*/
+body { font:13px/1.231 sans-serif; *font-size:small; } /* hack retained to preserve specificity */
+
+select, input, textarea, button { font:99% sans-serif; }
+
+/* normalize monospace sizing
+ * en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome
+ */
+pre, code, kbd, samp { font-family: monospace, sans-serif; }
+
+
+/*
+ * minimal base styles
+ */
+
+
+body, select, input, textarea {
+ /* #444 looks better than black: twitter.com/H_FJ/statuses/11800719859 */
+ color: #444;
+ /* set your base font here, to apply evenly */
+ /* font-family: Georgia, serif; */
+}
+
+/* Headers (h1,h2,etc) have no default font-size or margin,
+ you'll want to define those yourself. */
+h1,h2,h3,h4,h5,h6 { font-weight: bold; }
+
+/* always force a scrollbar in non-IE */
+html { overflow-y: scroll; }
+
+
+/* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */
+a:hover, a:active { outline: none; }
+
+a, a:active, a:visited { color: #607890; }
+a:hover { color: #036; }
+
+
+ul, ol { margin-left: 1.8em; }
+ol { list-style-type: decimal; }
+
+small { font-size: 85%; }
+strong, th { font-weight: bold; }
+
+td, td img { vertical-align: top; }
+
+sub { vertical-align: sub; font-size: smaller; }
+sup { vertical-align: super; font-size: smaller; }
+
+pre {
+ padding: 15px;
+
+ /* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */
+ white-space: pre; /* CSS2 */
+ white-space: pre-wrap; /* CSS 2.1 */
+ white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
+ word-wrap: break-word; /* IE */
+}
+
+textarea { overflow: auto; } /* thnx ivannikolic! www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ */
+
+.ie6 legend, .ie7 legend { margin-left: -7px; } /* thnx ivannikolic! */
+
+/* align checkboxes, radios, text inputs with their label
+ by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css */
+input[type="radio"] { vertical-align: text-bottom; }
+input[type="checkbox"] { vertical-align: bottom; }
+.ie7 input[type="checkbox"] { vertical-align: baseline; }
+.ie6 input { vertical-align: text-bottom; }
+
+/* hand cursor on clickable input elements */
+label, input[type=button], input[type=submit], button { cursor: pointer; }
+
+/* webkit browsers add a 2px margin outside the chrome of form elements */
+button, input, select, textarea { margin: 0; }
+
+/* colors for form validity */
+input:valid, textarea:valid { }
+input:invalid, textarea:invalid {
+ border-radius: 1px;
+ -moz-box-shadow: 0px 0px 5px red;
+ -webkit-box-shadow: 0px 0px 5px red;
+ box-shadow: 0px 0px 5px red;
+}
+.no-boxshadow input:invalid,
+.no-boxshadow textarea:invalid { background-color: #f0dddd; }
+
+
+/* These selection declarations have to be separate.
+ No text-shadow: twitter.com/miketaylr/status/12228805301
+ Also: hot pink. */
+::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }
+::selection { background:#FF5E99; color:#fff; text-shadow: none; }
+
+/* j.mp/webkit-tap-highlight-color */
+a:link { -webkit-tap-highlight-color: #FF5E99; }
+
+/* make buttons play nice in IE:
+ www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */
+button { width: auto; overflow: visible; }
+
+/* bicubic resizing for non-native sized IMG:
+ code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
+.ie7 img { -ms-interpolation-mode: bicubic; }
+
+
+
+/*
+ * Non-semantic helper classes
+ */
+
+/* for image replacement */
+.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
+
+/* Hide for both screenreaders and browsers
+ css-discuss.incutio.com/wiki/Screenreader_Visibility */
+.hidden { display: none; visibility: hidden; }
+
+/* Hide only visually, but have it available for screenreaders
+ www.webaim.org/techniques/css/invisiblecontent/
+ Solution from: j.mp/visuallyhidden - Thanks Jonathan Neal! */
+.visuallyhidden { position: absolute !important;
+ clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+ clip: rect(1px, 1px, 1px, 1px); }
+
+/* Hide visually and from screenreaders, but maintain layout */
+.invisible { visibility: hidden; }
+
+/* >> The Magnificent CLEARFIX << j.mp/phayesclearfix */
+.clearfix:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
+/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
+.clearfix { zoom: 1; }
+
+
+
+
+
+
+ /* Primary Styles
+ Author:
+ */
+
+
+canvas {
+ border:1px solid #333;
+}
+
+
+
+
+
+
+
+
+/*
+ * print styles
+ * inlined to avoid required HTTP connection www.phpied.com/delay-loading-your-print-css/
+ */
+@media print {
+ * { background: transparent !important; color: #444 !important; text-shadow: none !important; }
+
+ a, a:visited { color: #444 !important; text-decoration: underline; }
+
+ a:after { content: " (" attr(href) ")"; }
+
+ abbr:after { content: " (" attr(title) ")"; }
+
+ .ir a:after { content: ""; } /* Don't show links for images */
+
+ pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
+
+ thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
+
+ tr, img { page-break-inside: avoid; }
+
+ @page { margin: 0.5cm; }
+
+ p, h2, h3 { orphans: 3; widows: 3; }
+
+ h2, h3{ page-break-after: avoid; }
+}
+
+
+
+/*
+ * Media queries for responsive design
+ */
+
+@media all and (orientation:portrait) {
+ /* Style adjustments for portrait mode goes here */
+
+}
+
+@media all and (orientation:landscape) {
+ /* Style adjustments for landscape mode goes here */
+
+}
+
+/* Grade-A Mobile Browsers (Opera Mobile, iPhone Safari, Android Chrome)
+ Consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
+@media screen and (max-device-width: 480px) {
+
+
+ /* Uncomment if you don't want iOS and WinMobile to mobile-optimize the text for you
+ j.mp/textsizeadjust
+ html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
+}
+
View
543 canvas/demo/elements.html
@@ -0,0 +1,543 @@
+<!doctype html>
+<html lang="en" class="no-js">
+<head>
+ <meta charset="utf-8">
+
+ <!-- www.phpied.com/conditional-comments-block-downloads/ -->
+ <!--[if IE]><![endif]-->
+
+ <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
+ Remove this if you use the .htaccess -->
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+
+ <title></title>
+ <meta name="description" content="">
+ <meta name="author" content="">
+
+ <!-- Mobile viewport optimized: j.mp/bplateviewport -->
+ <meta name="viewport" content="width=device-width; initial-scale=1.0">
+
+ <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
+ <link rel="shortcut icon" href="/favicon.ico">
+ <link rel="apple-touch-icon" href="/apple-touch-icon.png">
+
+
+ <!-- CSS : implied media="all" -->
+ <link rel="stylesheet" href="../css/style.css?v=1">
+
+ <!-- For the less-enabled mobile browsers like Opera Mini -->
+ <link rel="stylesheet" media="handheld" href="../css/handheld.css?v=1">
+
+
+ <!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
+ <script src="../js/modernizr-1.5.min.js"></script>
+
+</head>
+
+<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
+
+<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
+<!--[if IE 7 ]> <body class="ie7"> <![endif]-->
+<!--[if IE 8 ]> <body class="ie8"> <![endif]-->
+<!--[if IE 9 ]> <body class="ie9"> <![endif]-->
+<!--[if (gt IE 9)|!(IE)]><!--> <body> <!--<![endif]-->
+
+ <div id="container">
+ <header>
+
+ </header>
+
+ <div id="main">
+
+ <!-- demo content lovingly lifted from the azbuka project
+ http://code.google.com/p/azbuka/
+
+ and the bluetrip project
+ http://bluetrip.org/
+
+ and peter beverloo
+ http://peter.sh/examples/?/html/meter-progress.html
+ -->
+
+
+
+ <h1>Title 01 Heading</h1>
+ <hr />
+ <h2>Level 02 Heading</h2>
+ <p>Lorem ipsum <em>emphasised text</em> dolor sit amet, <strong>strong text</strong>
+ consectetur adipisicing elit, <abbr title="">abbreviated text</abbr> sed do eiusmod tempor
+ incididunt ut labore et dolore magna aliqua. Ut
+ <q>quoted text</q> enim ad minim veniam, quis nostrud exercitation <a href="/">link text</a>
+ ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
+ <ins>inserted text</ins> irure dolor in reprehenderit in voluptate velit esse cillum
+ dolore eu fugiat nulla pariatur. Excepteur sint occaecat <code>code text</code> cupidatat
+ non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+ <p>
+ Suspendisse rhoncus, est ac sollicitudin viverra, leo orci sagittis massa, sed condimentum <acronym title="">acronym text</acronym> est tortor a lectus. Curabitur porta feugiat ullamcorper. Integer lacinia mi id odio faucibus eget tincidunt nisl iaculis. Nam adipiscing hendrerit turpis, et porttitor felis sollicitudin et. Donec dictum massa ac neque accumsan tempor. Cras aliquam, ipsum sit amet laoreet hendrerit, purus <del>deleted text</del> sapien convallis dui, et porta leo ipsum ac nunc. Nullam ornare porta dui ac semper. Cras aliquam laoreet hendrerit. Quisque vulputate dolor eget mi porta vel porta nisl pretium. Vivamus non leo magna, quis imperdiet risus. Morbi tempor risus placerat tellus imperdiet fringilla.
+ </p>
+
+ <blockquote>
+ <p>I am not one who was born in the possession of knowledge; I am one who is fond of antiquity, and earnest in seeking it there.</p>
+ </blockquote>
+
+ <p><cite><a href="/">Confucius, The Confucian Analects</a></cite>, (551 BC - 479 BC)</p>
+
+ <h3>Level 03 Heading</h3>
+
+ <p>Extended paragraph. <a href="">Lorem ipsum</a> dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+ exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+ reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+ occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
+ <ol>
+ <li>Unus</li>
+ <li>Duo</li>
+ <li>Tres</li>
+ <li>Quattuor</li>
+ </ol>
+
+ <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+ pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
+ anim id est laborum.</p>
+
+ <h3>Header 3</h3>
+
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
+ ut labore et dolore magna aliqua.</p>
+
+ <h4>Unordered lists</h4>
+ <ul>
+ <li>Lorem ipsum dolor sit amet</li>
+ <li>Consectetur adipisicing elit</li>
+ <li>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li>
+ <li>Ut enim ad minim veniam</li>
+ </ul>
+ <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit, sed do eiusmod tempor incididunt
+ ut labore et dolore magna aliqua.</p>
+
+ <pre><code>body { font:0.8125em/1.618 Arial, sans-serif;
+ background-color:#fff;
+ color:#111;
+ }</code></pre>
+
+ <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+ pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
+ anim id est laborum.</p>
+
+ <h4>Header 4</h4>
+
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
+ ut labore et dolore magna aliqua.</p>
+
+ <dl>
+ <dt>Definition list</dt>
+ <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+ aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+ commodo consequat.</dd>
+ <dt>Lorem ipsum dolor sit amet</dt>
+ <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+ aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+ commodo consequat.</dd>
+
+ </dl>
+
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
+ ut labore et dolore magna aliqua.</p>
+ <h4>Ordered list</h4>
+ <ol>
+ <li>List item</li>
+ <li>List item</li>
+ <li>List item
+ <ol>
+ <li>List item level 2</li>
+ <li>List item level 2
+ <ol>
+ <li>List item level 3</li>
+ <li>List item level 3</li>
+ </ol>
+ </li>
+ </ol>
+ </li>
+ </ol>
+ <h4>Unordered list</h4>
+ <ul>
+ <li>List item 01</li>
+ <li>List item 02</li>
+ <li>List item 03
+ <ul>
+ <li>List item level 2</li>
+ <li>List item level 2
+ <ul>
+ <li>List item level 3</li>
+ <li>List item level 3</li>
+ </ul>
+ </li>
+
+ </ul>
+ </li>
+ </ul>
+
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
+ ut labore et dolore magna aliqua.</p>
+
+
+ <h4>Tables</h4>
+ <table summary="Jimi Hendrix albums">
+ <caption>Jimi Hendrix - albums</caption>
+ <thead>
+ <tr>
+ <th>Album</th>
+ <th>Year</th>
+ <th>Price</th>
+ </tr>
+ </thead>
+ <tfoot>
+ <tr>
+ <td>Album</td>
+ <td>Year</td>
+ <td>Price</td>
+ </tr>
+ </tfoot>
+ <tbody>
+ <tr>
+ <td>Are You Experienced </td>
+ <td>1967</td>
+ <td>$10.00</td>
+ </tr>
+ <tr>
+ <td>Axis: Bold as Love</td>
+ <td>1967</td>
+ <td>$12.00</td>
+ </tr>
+ <tr>
+ <td>Electric Ladyland</td>
+ <td>1968</td>
+ <td>$10.00</td>
+ </tr>
+ <tr>
+ <td>Band of Gypsys</td>
+ <td>1970</td>
+ <td>$12.00</td>
+ </tr>
+ <tbody>
+ </table>
+ <p>
+ I am <a href="http://devkick.com/lab/tripoli/sample.php?abc123">the a tag</a> example<br>
+
+ I am <abbr title="test">the abbr tag</abbr> example<br>
+
+ I am <acronym>the acronym tag</acronym> example<br>
+ I am <b>the b tag</b> example<br>
+ I am <big>the big tag</big> example<br>
+
+ I am <cite>the cite tag</cite> example<br>
+
+ I am <code>the code tag</code> example<br>
+ I am <del>the del tag</del> example<br>
+ I am <dfn>the dfn tag</dfn> example<br>
+
+ I am <em>the em tag</em> example<br>
+
+ I am <font face="verdana">the font tag</font> example<br>
+ I am <i>the i tag</i> example<br>
+ I am <ins>the ins tag</ins> example<br>
+
+ I am <kbd>the kbd tag</kbd> example<br>
+
+ I am <q>the q tag <q>inside</q> a q tag</q> example<br>
+ I am <s>the s tag</s> example<br>
+ I am <samp>the samp tag</samp> example<br>
+
+ I am <small>the small tag</small> example<br>
+ I am <span>the span tag</span> example<br>
+ I am <strike>the strike tag</strike> example<br>
+ I am <strong>the strong tag</strong> example<br>
+
+ I am <sub>the sub tag</sub> example<br>
+ I am <sup>the sup tag</sup> example<br>
+ I am <tt>the tt tag</tt> example<br>
+ I am <var>the var tag</var> example<br>
+
+ I am <u>the u tag</u> example
+ </p>
+
+ <p>This is a &lt;p&gt; with some <code>code</code> inside.</p>
+
+ <h3>What is Lorem Ipsum?</h3>
+ <p><b>Lorem Ipsum</b> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
+
+ <p><strong>This</strong> Lorem Ipsum HTML example is created from the parts of Placeholder Markup with Lorem Ipsum - Jon Tan,
+ Emastic CSS Framework,
+ Tripoli CSS Framework and
+ Baseline CSS Framework .</p>
+
+ <address>Address: somewhere, World</address>
+
+
+
+ <p>
+ <a href="#">Link</a><br>
+ <strong>&lt;strong&gt;</strong><br>
+ <del>&lt;del&gt; deleted</del><br>
+ <dfn>&lt;dfn&gt; dfn</dfn><br>
+ <em>&lt;em&gt; emphasis</em>
+ </p>
+<pre>
+<code>&lt;html&gt;</code>
+ <code>&lt;head&gt;</code>
+ <code>&lt;/head&gt;</code>
+ <code>&lt;body&gt;</code>
+ <code>&lt;div class = "main"&gt; &lt;div&gt;</code>
+ <code>&lt;/body&gt;</code>
+<code>&lt;/html&gt; </code>
+</pre>
+
+ <tt>&lt;tt&gt;
+ Pellentesque tempor, dui ut ultrices viverra, neque urna blandit nisi, id accumsan dolor est vitae risus.
+ </tt>
+
+ <hr>
+
+
+
+ <!-- this following markup from http://bluetrip.org/ -->
+ <dl>
+ <dt>Description list title 01</dt>
+
+ <dd>Description list description 01</dd>
+ <dt>Description list title 02</dt>
+ <dd>Description list description 02</dd>
+ <dd>Description list description 03</dd>
+
+ </dl>
+ <table>
+ <caption>Table Caption</caption>
+
+ <thead>
+ <tr>
+ <th>Table head th</th>
+ <td>Table head td</td>
+ </tr>
+
+ </thead>
+ <tfoot>
+ <tr>
+
+ <th>Table foot th</th>
+ <td>Table foot td</td>
+ </tr>
+ </tfoot>
+
+ <tbody>
+ <tr>
+ <th>Table body th</th>
+
+ <td>Table body td</td>
+ </tr>
+ <tr>
+ <td>Table body td</td>
+
+ <td>Table body td</td>
+ </tr>
+ </tbody>
+
+ </table>
+
+ <hr>
+
+ <form action="#">
+ <fieldset>
+ <legend>Form legend</legend>
+
+ <div><label for="f1">Optional Text input:</label><input type="text" id="f1" value="input text" /></div>
+ <div><label for="rt1">Required Text input:</label><input type="text" id="rt1" required /></div>
+ <div><label for="twp1">Text input with pattern requirement and placeholder:</label><input type="text" pattern="\d{5}(-\d{4})?" title="a US Zip code, with or without the +4 exension" placeholder="12345-6789"/></div>
+ <div><label for="s1">Search input:</label><input type="search" id="s1" /></div>
+ <div><label for="e1">Email input:</label><input type="email" id="e1" /></div>
+ <div><label for="u1">URL input:</label><input type="url" id="u1" /></div>
+ <div><label for="pw">Password input:</label><input type="password" id="pw" value="password" /></div>
+ <div><label for="f2">Radio input:</label><input type="radio" id="f2" /></div>
+
+ <div><label for="f3">Checkbox input:</label><input type="checkbox" id="f3" /></div>
+ <div><label for="f4">Select field:</label><select id="f4"><option>Option 01</option><option>Option 02</option></select></div>
+
+ <div><label for="f5">Textarea:</label><textarea id="f5" cols="30" rows="5" >Textarea text</textarea></div>
+ <div><label for="f6">Input Button:</label> <input type="button" id="f6" value="button text" /></div>
+
+ <div><label for="f7">Submit Button:</label> <input type="submit" id="f7" value="button text" /></div>
+
+ </fieldset>
+
+ </form>
+
+
+ <!-- thx peter beverloo: http://peter.sh/examples/?/html/meter-progress.html -->
+
+
+ <p id="no-support" style="color: red; margin-bottom: 12px;">
+ Your browser does not support these elements yet! Consider downloading a <a href="http://tools.peter.sh/download-latest-chromium.php">Chromium Nightly</a>.<br />
+
+ </p>
+
+ <h3>&lt;progress&gt;</h3>
+ <p>
+ The progress element (spec: <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-progress-element">4.10.16</a>) represents the completion progress of a task and can be both indeterminate as determinate.
+ </p>
+ <ul class="compact">
+ <li>
+ <label>Indeterminate</label>
+ <progress max="100"></progress>
+ </li>
+ <li>
+ <label>Progress: 0%</label>
+ <progress max="10" value="0"></progress>
+ </li>
+ <li>
+ <label>Progress: 100%</label>
+ <progress max="3254" value="3254"></progress>
+ </li>
+ <li>
+ <label>Progress: 57%</label>
+ <progress max="0.7" value="0.4"></progress>
+ </li>
+ <li>
+ <label>Javascript</label>
+ <progress id="progress-javascript-example"></progress>
+ </li>
+ </ul>
+
+ <h3>&lt;meter&gt;</h3>
+ <p>
+ Displaying a scalar measurement within a known range, like hard drive usage, can be done using the meter element (spec: <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-meter-element">4.10.17</a>)
+ </p>
+ <ul class="compact">
+ <li>
+ <label>Meter: empty</label>
+ <meter value="0"></meter>
+ </li>
+ <li>
+ <label>Meter: full</label>
+ <meter value="1"></meter>
+ </li>
+ <li>
+ <label>Meter: "a bit"</label>
+ <meter min=".34" max=".41" value=".36"></meter>
+ </li>
+ <li>
+ <label>Preferred usage</label>
+ <meter min="50" max="250" low="100" high="200" value="120"></meter>
+ </li>
+ <li>
+ <label>Too much traffic</label>
+ <meter min="1024" max="10240" low="2048" high="8192" value="9216"></meter>
+ </li>
+ <li>
+ <label>Optimum value</label>
+ <meter value=".5" optimum=".8"></meter>
+ </li>
+ <li>
+ <label>Javascript</label>
+ <meter id="meter-javascript-example" value="0"></progress>
+ </li>
+ </ul>
+
+ <script>
+ (function () {
+ if (! ('position' in document.createElement ('progress'))) {
+ var elements = document.querySelectorAll ('meter, progress');
+ for (var i = 0, j = elements.length; i < j; i++) {
+ elements [i].style.border = "1px solid red";
+ elements [i].style.height = "12px";
+ elements [i].style.display = "inline-block";
+ elements [i].style.webkitAppearance = "none";
+ }
+
+ return ;
+ }
+
+ document.getElementById ('no-support').style.display = 'none';
+
+ /** Setup the <progress> JavaScript example **/
+ var progressExample = document.getElementById ('progress-javascript-example');
+ progressExample.min = 50;
+ progressExample.max = 122;
+
+ setInterval (function ()
+ {
+ progressExample.value = progressExample.min + Math.random () * (progressExample.max - progressExample.min);
+
+ }, 1000);
+
+ /** We'd like some fancy <meter> examples too **/
+ var meterExample = document.getElementById ('meter-javascript-example');
+ meterExample.min = 0;
+ meterExample.max = 100;
+ meterExample.value = 50;
+ meterExample.low = 20;
+ meterExample.high = 80;
+ meterExample.optimum = 65;
+
+ setInterval (function ()
+ {
+ meterExample.value = meterExample.min + Math.random () * (meterExample.max - meterExample.min);
+ meterExample.optimum = 65 + (5 - Math.random () * 10);
+
+ }, 1000);
+
+ })();
+ </script>
+
+
+
+ </div>
+
+ <div class="png_bg" style="border:1px solid #ddd; width:100px; padding:10px 10px 10px 50px; margin:10px 0; display:inline-block; background:url(test_tubes.png) no-repeat 5px center;">
+ <img src="internet_explorer.png" alt="IE is so awesome" />
+ </div>
+ <footer>
+
+ </footer>
+ </div> <!--! end of #container -->
+
+
+ <!-- Javascript at the bottom for fast page loading -->
+
+ <!-- Grab Google CDN's jQuery. fall back to local if necessary -->
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
+ <script>!window.jQuery && document.write('<script src="../js/jquery-1.4.2.min.js"><\/script>')</script>
+
+
+ <script src="../js/plugins.js?v=1"></script>
+ <script src="../js/script.js?v=1"></script>
+
+ <!--[if lt IE 7 ]>
+ <script src="../js/dd_belatedpng.js?v=1"></script>
+ <script>
+ DD_belatedPNG.fix('img, .png_bg');
+ </script>
+ <![endif]-->
+
+
+ <!-- yui profiler and profileviewer - remove for production -->
+ <script src="../js/profiling/yahoo-profiling.min.js?v=1"></script>
+ <script src="../js/profiling/config.js?v=1"></script>
+ <!-- end profiling code -->
+
+
+ <!-- asynchronous google analytics: mathiasbynens.be/notes/async-analytics-snippet
+ change the UA-XXXXX-X to be your site's ID -->
+ <script>
+ var _gaq = [['_setAccount', 'UA-XXXXX-X'], ['_trackPageview']];
+ (function(d, t) {
+ var g = d.createElement(t),
+ s = d.getElementsByTagName(t)[0];
+ g.async = true;
+ g.src = '//www.google-analytics.com/ga.js';
+ s.parentNode.insertBefore(g, s);
+ })(document, 'script');
+ </script>
+
+</body>
+</html>
View
BIN  canvas/demo/internet_explorer.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  canvas/demo/test_tubes.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN  canvas/favicon.ico
Binary file not shown
View
82 canvas/index.html
@@ -0,0 +1,82 @@
+<!doctype html>
+<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
+<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
+<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
+<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
+<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
+<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
+<head>
+ <meta charset="utf-8">
+
+ <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
+ Remove this if you use the .htaccess -->
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+
+ <title></title>
+ <meta name="description" content="">
+ <meta name="author" content="">
+
+ <!-- Mobile viewport optimized: j.mp/bplateviewport -->
+ <meta name="viewport" content="width=device-width; initial-scale=1.0">
+
+ <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
+ <link rel="shortcut icon" href="/favicon.ico">
+ <link rel="apple-touch-icon" href="/apple-touch-icon.png">
+
+
+ <!-- CSS : implied media="all" -->
+ <link rel="stylesheet" href="css/style.css?v=1">
+
+ <!-- Uncomment if you are specifically targeting less enabled mobile browsers
+ <link rel="stylesheet" media="handheld" href="css/handheld.css?v=1"> -->
+
+
+ <!-- All JavaScript at the bottom, except for Modernizr which enables HTML5 elements & feature detects -->
+ <script src="js/modernizr-1.5.min.js"></script>
+
+</head>
+
+<body>
+
+ <div id="container">
+ <header>
+ Canvas Experiments
+ </header>
+
+ <div id="main">
+ <canvas width="900" height="600" id="play_thang"></canvas>
+ </div>
+
+ <footer>
+
+ </footer>
+ </div> <!--! end of #container -->
+
+
+ <!-- Javascript at the bottom for fast page loading -->
+
+ <!-- Grab Google CDN's jQuery. fall back to local if necessary -->
+ <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" type="text/javascript"></script>
+ <script src="js/script.js?v=1"></script>
+
+ <!--[if lt IE 7 ]>
+ <script src="js/dd_belatedpng.js"></script>
+ <script> DD_belatedPNG.fix('img, .png_bg'); //fix any <img> or .png_bg background-images </script>
+ <![endif]-->
+
+
+ <!-- asynchronous google analytics: mathiasbynens.be/notes/async-analytics-snippet
+ change the UA-XXXXX-X to be your site's ID -->
+ <script>
+ var _gaq = [['_setAccount', 'UA-XXXXX-X'], ['_trackPageview']];
+ (function(d, t) {
+ var g = d.createElement(t),
+ s = d.getElementsByTagName(t)[0];
+ g.async = true;
+ g.src = ('https:' == location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ s.parentNode.insertBefore(g, s);
+ })(document, 'script');
+ </script>
+
+</body>
+</html>
View
13 canvas/js/dd_belatedpng.js
@@ -0,0 +1,13 @@
+/**
+* DD_belatedPNG: Adds IE6 support: PNG images for CSS background-image and HTML <IMG/>.
+* Author: Drew Diller
+* Email: drew.diller@gmail.com
+* URL: http://www.dillerdesign.com/experiment/DD_belatedPNG/
+* Version: 0.0.8a
+* Licensed under the MIT License: http://dillerdesign.com/experiment/DD_belatedPNG/#license
+*
+* Example usage:
+* DD_belatedPNG.fix('.png_bg'); // argument is a CSS selector
+* DD_belatedPNG.fixPng( someNode ); // argument is an HTMLDomElement
+**/
+var DD_belatedPNG={ns:"DD_belatedPNG",imgSize:{},delay:10,nodesFixed:0,createVmlNameSpace:function(){if(document.namespaces&&!document.namespaces[this.ns]){document.namespaces.add(this.ns,"urn:schemas-microsoft-com:vml")}},createVmlStyleSheet:function(){var b,a;b=document.createElement("style");b.setAttribute("media","screen");document.documentElement.firstChild.insertBefore(b,document.documentElement.firstChild.firstChild);if(b.styleSheet){b=b.styleSheet;b.addRule(this.ns+"\\:*","{behavior:url(#default#VML)}");b.addRule(this.ns+"\\:shape","position:absolute;");b.addRule("img."+this.ns+"_sizeFinder","behavior:none; border:none; position:absolute; z-index:-1; top:-10000px; visibility:hidden;");this.screenStyleSheet=b;a=document.createElement("style");a.setAttribute("media","print");document.documentElement.firstChild.insertBefore(a,document.documentElement.firstChild.firstChild);a=a.styleSheet;a.addRule(this.ns+"\\:*","{display: none !important;}");a.addRule("img."+this.ns+"_sizeFinder","{display: none !important;}")}},readPropertyChange:function(){var b,c,a;b=event.srcElement;if(!b.vmlInitiated){return}if(event.propertyName.search("background")!=-1||event.propertyName.search("border")!=-1){DD_belatedPNG.applyVML(b)}if(event.propertyName=="style.display"){c=(b.currentStyle.display=="none")?"none":"block";for(a in b.vml){if(b.vml.hasOwnProperty(a)){b.vml[a].shape.style.display=c}}}if(event.propertyName.search("filter")!=-1){DD_belatedPNG.vmlOpacity(b)}},vmlOpacity:function(b){if(b.currentStyle.filter.search("lpha")!=-1){var a=b.currentStyle.filter;a=parseInt(a.substring(a.lastIndexOf("=")+1,a.lastIndexOf(")")),10)/100;b.vml.color.shape.style.filter=b.currentStyle.filter;b.vml.image.fill.opacity=a}},handlePseudoHover:function(a){setTimeout(function(){DD_belatedPNG.applyVML(a)},1)},fix:function(a){if(this.screenStyleSheet){var c,b;c=a.split(",");for(b=0;b<c.length;b++){this.screenStyleSheet.addRule(c[b],"behavior:expression(DD_belatedPNG.fixPng(this))")}}},applyVML:function(a){a.runtimeStyle.cssText="";this.vmlFill(a);this.vmlOffsets(a);this.vmlOpacity(a);if(a.isImg){this.copyImageBorders(a)}},attachHandlers:function(i){var d,c,g,e,b,f;d=this;c={resize:"vmlOffsets",move:"vmlOffsets"};if(i.nodeName=="A"){e={mouseleave:"handlePseudoHover",mouseenter:"handlePseudoHover",focus:"handlePseudoHover",blur:"handlePseudoHover"};for(b in e){if(e.hasOwnProperty(b)){c[b]=e[b]}}}for(f in c){if(c.hasOwnProperty(f)){g=function(){d[c[f]](i)};i.attachEvent("on"+f,g)}}i.attachEvent("onpropertychange",this.readPropertyChange)},giveLayout:function(a){a.style.zoom=1;if(a.currentStyle.position=="static"){a.style.position="relative"}},copyImageBorders:function(b){var c,a;c={borderStyle:true,borderWidth:true,borderColor:true};for(a in c){if(c.hasOwnProperty(a)){b.vml.color.shape.style[a]=b.currentStyle[a]}}},vmlFill:function(e){if(!e.currentStyle){return}else{var d,f,g,b,a,c;d=e.currentStyle}for(b in e.vml){if(e.vml.hasOwnProperty(b)){e.vml[b].shape.style.zIndex=d.zIndex}}e.runtimeStyle.backgroundColor="";e.runtimeStyle.backgroundImage="";f=true;if(d.backgroundImage!="none"||e.isImg){if(!e.isImg){e.vmlBg=d.backgroundImage;e.vmlBg=e.vmlBg.substr(5,e.vmlBg.lastIndexOf('")')-5)}else{e.vmlBg=e.src}g=this;if(!g.imgSize[e.vmlBg]){a=document.createElement("img");g.imgSize[e.vmlBg]=a;a.className=g.ns+"_sizeFinder";a.runtimeStyle.cssText="behavior:none; position:absolute; left:-10000px; top:-10000px; border:none; margin:0; padding:0;";c=function(){this.width=this.offsetWidth;this.height=this.offsetHeight;g.vmlOffsets(e)};a.attachEvent("onload",c);a.src=e.vmlBg;a.removeAttribute("width");a.removeAttribute("height");document.body.insertBefore(a,document.body.firstChild)}e.vml.image.fill.src=e.vmlBg;f=false}e.vml.image.fill.on=!f;e.vml.image.fill.color="none";e.vml.color.shape.style.backgroundColor=d.backgroundColor;e.runtimeStyle.backgroundImage="none";e.runtimeStyle.backgroundColor="transparent"},vmlOffsets:function(d){var h,n,a,e,g,m,f,l,j,i,k;h=d.currentStyle;n={W:d.clientWidth+1,H:d.clientHeight+1,w:this.imgSize[d.vmlBg].width,h:this.imgSize[d.vmlBg].height,L:d.offsetLeft,T:d.offsetTop,bLW:d.clientLeft,bTW:d.clientTop};a=(n.L+n.bLW==1)?1:0;e=function(b,p,q,c,s,u){b.coordsize=c+","+s;b.coordorigin=u+","+u;b.path="m0,0l"+c+",0l"+c+","+s+"l0,"+s+" xe";b.style.width=c+"px";b.style.height=s+"px";b.style.left=p+"px";b.style.top=q+"px"};e(d.vml.color.shape,(n.L+(d.isImg?0:n.bLW)),(n.T+(d.isImg?0:n.bTW)),(n.W-1),(n.H-1),0);e(d.vml.image.shape,(n.L+n.bLW),(n.T+n.bTW),(n.W),(n.H),1);g={X:0,Y:0};if(d.isImg){g.X=parseInt(h.paddingLeft,10)+1;g.Y=parseInt(h.paddingTop,10)+1}else{for(j in g){if(g.hasOwnProperty(j)){this.figurePercentage(g,n,j,h["backgroundPosition"+j])}}}d.vml.image.fill.position=(g.X/n.W)+","+(g.Y/n.H);m=h.backgroundRepeat;f={T:1,R:n.W+a,B:n.H,L:1+a};l={X:{b1:"L",b2:"R",d:"W"},Y:{b1:"T",b2:"B",d:"H"}};if(m!="repeat"||d.isImg){i={T:(g.Y),R:(g.X+n.w),B:(g.Y+n.h),L:(g.X)};if(m.search("repeat-")!=-1){k=m.split("repeat-")[1].toUpperCase();i[l[k].b1]=1;i[l[k].b2]=n[l[k].d]}if(i.B>n.H){i.B=n.H}d.vml.image.shape.style.clip="rect("+i.T+"px "+(i.R+a)+"px "+i.B+"px "+(i.L+a)+"px)"}else{d.vml.image.shape.style.clip="rect("+f.T+"px "+f.R+"px "+f.B+"px "+f.L+"px)"}},figurePercentage:function(d,c,f,a){var b,e;e=true;b=(f=="X");switch(a){case"left":case"top":d[f]=0;break;case"center":d[f]=0.5;break;case"right":case"bottom":d[f]=1;break;default:if(a.search("%")!=-1){d[f]=parseInt(a,10)/100}else{e=false}}d[f]=Math.ceil(e?((c[b?"W":"H"]*d[f])-(c[b?"w":"h"]*d[f])):parseInt(a,10));if(d[f]%2===0){d[f]++}return d[f]},fixPng:function(c){c.style.behavior="none";var g,b,f,a,d;if(c.nodeName=="BODY"||c.nodeName=="TD"||c.nodeName=="TR"){return}c.isImg=false;if(c.nodeName=="IMG"){if(c.src.toLowerCase().search(/\.png$/)!=-1){c.isImg=true;c.style.visibility="hidden"}else{return}}else{if(c.currentStyle.backgroundImage.toLowerCase().search(".png")==-1){return}}g=DD_belatedPNG;c.vml={color:{},image:{}};b={shape:{},fill:{}};for(a in c.vml){if(c.vml.hasOwnProperty(a)){for(d in b){if(b.hasOwnProperty(d)){f=g.ns+":"+d;c.vml[a][d]=document.createElement(f)}}c.vml[a].shape.stroked=false;c.vml[a].shape.appendChild(c.vml[a].fill);c.parentNode.insertBefore(c.vml[a].shape,c)}}c.vml.image.shape.fillcolor="none";c.vml.image.fill.type="tile";c.vml.color.fill.on=false;g.attachHandlers(c);g.giveLayout(c);g.giveLayout(c.offsetParent);c.vmlInitiated=true;g.applyVML(c)}};try{document.execCommand("BackgroundImageCache",false,true)}catch(r){}DD_belatedPNG.createVmlNameSpace();DD_belatedPNG.createVmlStyleSheet();
View
28 canvas/js/modernizr-1.5.min.js
@@ -0,0 +1,28 @@
+/*!
+ * Modernizr JavaScript library 1.5
+ * http://www.modernizr.com/
+ *
+ * Copyright (c) 2009-2010 Faruk Ates - http://farukat.es/
+ * Dual-licensed under the BSD and MIT licenses.
+ * http://www.modernizr.com/license/
+ *
+ * Featuring major contributions by
+ * Paul Irish - http://paulirish.com
+ */
+ window.Modernizr=function(i,e,I){function C(a,b){for(var c in a)if(m[a[c]]!==I&&(!b||b(a[c],D)))return true}function r(a,b){var c=a.charAt(0).toUpperCase()+a.substr(1);return!!C([a,"Webkit"+c,"Moz"+c,"O"+c,"ms"+c,"Khtml"+c],b)}function P(){j[E]=function(a){for(var b=0,c=a.length;b<c;b++)J[a[b]]=!!(a[b]in n);return J}("autocomplete autofocus list placeholder max min multiple pattern required step".split(" "));j[Q]=function(a){for(var b=0,c,h=a.length;b<h;b++){n.setAttribute("type",a[b]);if(c=n.type!==
+ "text"){n.value=K;/tel|search/.test(n.type)||(c=/url|email/.test(n.type)?n.checkValidity&&n.checkValidity()===false:n.value!=K)}L[a[b]]=!!c}return L}("search tel url email datetime date month week time datetime-local number range color".split(" "))}var j={},s=e.documentElement,D=e.createElement("modernizr"),m=D.style,n=e.createElement("input"),E="input",Q=E+"types",K=":)",M=Object.prototype.toString,y=" -o- -moz- -ms- -webkit- -khtml- ".split(" "),d={},L={},J={},N=[],u=function(){var a={select:"input",
+ change:"input",submit:"form",reset:"form",error:"img",load:"img",abort:"img"},b={};return function(c,h){var t=arguments.length==1;if(t&&b[c])return b[c];h=h||document.createElement(a[c]||"div");c="on"+c;var g=c in h;if(!g&&h.setAttribute){h.setAttribute(c,"return;");g=typeof h[c]=="function"}h=null;return t?(b[c]=g):g}}(),F={}.hasOwnProperty,O;O=typeof F!=="undefined"&&typeof F.call!=="undefined"?function(a,b){return F.call(a,b)}:function(a,b){return b in a&&typeof a.constructor.prototype[b]==="undefined"};
+ d.canvas=function(){return!!e.createElement("canvas").getContext};d.canvastext=function(){return!!(d.canvas()&&typeof e.createElement("canvas").getContext("2d").fillText=="function")};d.geolocation=function(){return!!navigator.geolocation};d.crosswindowmessaging=function(){return!!i.postMessage};d.websqldatabase=function(){var a=!!i.openDatabase;if(a)try{a=!!openDatabase("testdb","1.0","html5 test db",2E5)}catch(b){a=false}return a};d.indexedDB=function(){return!!i.indexedDB};d.hashchange=function(){return u("hashchange",
+ i)&&(document.documentMode===I||document.documentMode>7)};d.historymanagement=function(){return!!(i.history&&history.pushState)};d.draganddrop=function(){return u("drag")&&u("dragstart")&&u("dragenter")&&u("dragover")&&u("dragleave")&&u("dragend")&&u("drop")};d.websockets=function(){return"WebSocket"in i};d.rgba=function(){m.cssText="background-color:rgba(150,255,150,.5)";return(""+m.backgroundColor).indexOf("rgba")!==-1};d.hsla=function(){m.cssText="background-color:hsla(120,40%,100%,.5)";return(""+
+ m.backgroundColor).indexOf("rgba")!==-1};d.multiplebgs=function(){m.cssText="background:url(//:),url(//:),red url(//:)";return/(url\s*\(.*?){3}/.test(m.background)};d.backgroundsize=function(){return r("backgroundSize")};d.borderimage=function(){return r("borderImage")};d.borderradius=function(){return r("borderRadius","",function(a){return(""+a).indexOf("orderRadius")!==-1})};d.boxshadow=function(){return r("boxShadow")};d.opacity=function(){var a=y.join("opacity:.5;")+"";m.cssText=a;return(""+m.opacity).indexOf("0.5")!==
+ -1};d.cssanimations=function(){return r("animationName")};d.csscolumns=function(){return r("columnCount")};d.cssgradients=function(){var a=("background-image:"+y.join("gradient(linear,left top,right bottom,from(#9f9),to(white));background-image:")+y.join("linear-gradient(left top,#9f9, white);background-image:")).slice(0,-17);m.cssText=a;return(""+m.backgroundImage).indexOf("gradient")!==-1};d.cssreflections=function(){return r("boxReflect")};d.csstransforms=function(){return!!C(["transformProperty",
+ "WebkitTransform","MozTransform","OTransform","msTransform"])};d.csstransforms3d=function(){var a=!!C(["perspectiveProperty","WebkitPerspective","MozPerspective","OPerspective","msPerspective"]);if(a){var b=document.createElement("style"),c=e.createElement("div");b.textContent="@media ("+y.join("transform-3d),(")+"modernizr){#modernizr{height:3px}}";e.getElementsByTagName("head")[0].appendChild(b);c.id="modernizr";s.appendChild(c);a=c.offsetHeight===3;b.parentNode.removeChild(b);c.parentNode.removeChild(c)}return a};
+ d.csstransitions=function(){return r("transitionProperty")};d.fontface=function(){var a;if(/*@cc_on@if(@_jscript_version>=5)!@end@*/0)a=true;else{var b=e.createElement("style"),c=e.createElement("span"),h,t=false,g=e.body,o,w;b.textContent="@font-face{font-family:testfont;src:url('data:font/ttf;base64,AAEAAAAMAIAAAwBAT1MvMliohmwAAADMAAAAVmNtYXCp5qrBAAABJAAAANhjdnQgACICiAAAAfwAAAAEZ2FzcP//AAMAAAIAAAAACGdseWYv5OZoAAACCAAAANxoZWFk69bnvwAAAuQAAAA2aGhlYQUJAt8AAAMcAAAAJGhtdHgGDgC4AAADQAAAABRsb2NhAIQAwgAAA1QAAAAMbWF4cABVANgAAANgAAAAIG5hbWUgXduAAAADgAAABPVwb3N03NkzmgAACHgAAAA4AAECBAEsAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAACAAMDAAAAAAAAgAACbwAAAAoAAAAAAAAAAFBmRWQAAAAgqS8DM/8zAFwDMwDNAAAABQAAAAAAAAAAAAMAAAADAAAAHAABAAAAAABGAAMAAQAAAK4ABAAqAAAABgAEAAEAAgAuqQD//wAAAC6pAP///9ZXAwAAAAAAAAACAAAABgBoAAAAAAAvAAEAAAAAAAAAAAAAAAAAAAABAAIAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAEACoAAAAGAAQAAQACAC6pAP//AAAALqkA////1lcDAAAAAAAAAAIAAAAiAogAAAAB//8AAgACACIAAAEyAqoAAwAHAC6xAQAvPLIHBADtMrEGBdw8sgMCAO0yALEDAC88sgUEAO0ysgcGAfw8sgECAO0yMxEhESczESMiARDuzMwCqv1WIgJmAAACAFUAAAIRAc0ADwAfAAATFRQWOwEyNj0BNCYrASIGARQGKwEiJj0BNDY7ATIWFX8aIvAiGhoi8CIaAZIoN/43KCg3/jcoAWD0JB4eJPQkHh7++EY2NkbVRjY2RgAAAAABAEH/+QCdAEEACQAANjQ2MzIWFAYjIkEeEA8fHw8QDxwWFhwWAAAAAQAAAAIAAIuYbWpfDzz1AAsEAAAAAADFn9IuAAAAAMWf0i797/8zA4gDMwAAAAgAAgAAAAAAAAABAAADM/8zAFwDx/3v/98DiAABAAAAAAAAAAAAAAAAAAAABQF2ACIAAAAAAVUAAAJmAFUA3QBBAAAAKgAqACoAWgBuAAEAAAAFAFAABwBUAAQAAgAAAAEAAQAAAEAALgADAAMAAAAQAMYAAQAAAAAAAACLAAAAAQAAAAAAAQAhAIsAAQAAAAAAAgAFAKwAAQAAAAAAAwBDALEAAQAAAAAABAAnAPQAAQAAAAAABQAKARsAAQAAAAAABgAmASUAAQAAAAAADgAaAUsAAwABBAkAAAEWAWUAAwABBAkAAQBCAnsAAwABBAkAAgAKAr0AAwABBAkAAwCGAscAAwABBAkABABOA00AAwABBAkABQAUA5sAAwABBAkABgBMA68AAwABBAkADgA0A/tDb3B5cmlnaHQgMjAwOSBieSBEYW5pZWwgSm9obnNvbi4gIFJlbGVhc2VkIHVuZGVyIHRoZSB0ZXJtcyBvZiB0aGUgT3BlbiBGb250IExpY2Vuc2UuIEtheWFoIExpIGdseXBocyBhcmUgcmVsZWFzZWQgdW5kZXIgdGhlIEdQTCB2ZXJzaW9uIDMuYmFlYzJhOTJiZmZlNTAzMiAtIHN1YnNldCBvZiBKdXJhTGlnaHRiYWVjMmE5MmJmZmU1MDMyIC0gc3Vic2V0IG9mIEZvbnRGb3JnZSAyLjAgOiBKdXJhIExpZ2h0IDogMjMtMS0yMDA5YmFlYzJhOTJiZmZlNTAzMiAtIHN1YnNldCBvZiBKdXJhIExpZ2h0VmVyc2lvbiAyIGJhZWMyYTkyYmZmZTUwMzIgLSBzdWJzZXQgb2YgSnVyYUxpZ2h0aHR0cDovL3NjcmlwdHMuc2lsLm9yZy9PRkwAQwBvAHAAeQByAGkAZwBoAHQAIAAyADAAMAA5ACAAYgB5ACAARABhAG4AaQBlAGwAIABKAG8AaABuAHMAbwBuAC4AIAAgAFIAZQBsAGUAYQBzAGUAZAAgAHUAbgBkAGUAcgAgAHQAaABlACAAdABlAHIAbQBzACAAbwBmACAAdABoAGUAIABPAHAAZQBuACAARgBvAG4AdAAgAEwAaQBjAGUAbgBzAGUALgAgAEsAYQB5AGEAaAAgAEwAaQAgAGcAbAB5AHAAaABzACAAYQByAGUAIAByAGUAbABlAGEAcwBlAGQAIAB1AG4AZABlAHIAIAB0AGgAZQAgAEcAUABMACAAdgBlAHIAcwBpAG8AbgAgADMALgBiAGEAZQBjADIAYQA5ADIAYgBmAGYAZQA1ADAAMwAyACAALQAgAHMAdQBiAHMAZQB0ACAAbwBmACAASgB1AHIAYQBMAGkAZwBoAHQAYgBhAGUAYwAyAGEAOQAyAGIAZgBmAGUANQAwADMAMgAgAC0AIABzAHUAYgBzAGUAdAAgAG8AZgAgAEYAbwBuAHQARgBvAHIAZwBlACAAMgAuADAAIAA6ACAASgB1AHIAYQAgAEwAaQBnAGgAdAAgADoAIAAyADMALQAxAC0AMgAwADAAOQBiAGEAZQBjADIAYQA5ADIAYgBmAGYAZQA1ADAAMwAyACAALQAgAHMAdQBiAHMAZQB0ACAAbwBmACAASgB1AHIAYQAgAEwAaQBnAGgAdABWAGUAcgBzAGkAbwBuACAAMgAgAGIAYQBlAGMAMgBhADkAMgBiAGYAZgBlADUAMAAzADIAIAAtACAAcwB1AGIAcwBlAHQAIABvAGYAIABKAHUAcgBhAEwAaQBnAGgAdABoAHQAdABwADoALwAvAHMAYwByAGkAcAB0AHMALgBzAGkAbAAuAG8AcgBnAC8ATwBGAEwAAAAAAgAAAAAAAP+BADMAAAAAAAAAAAAAAAAAAAAAAAAAAAAFAAAAAQACAQIAEQt6ZXJva2F5YWhsaQ==')}";
+ e.getElementsByTagName("head")[0].appendChild(b);c.setAttribute("style","font:99px _,arial,helvetica;position:absolute;visibility:hidden");if(!g){g=s.appendChild(e.createElement("fontface"));t=true}c.innerHTML="........";c.id="fonttest";g.appendChild(c);h=c.offsetWidth*c.offsetHeight;c.style.font="99px testfont,_,arial,helvetica";a=h!==c.offsetWidth*c.offsetHeight;var v=function(){if(g.parentNode){a=j.fontface=h!==c.offsetWidth*c.offsetHeight;s.className=s.className.replace(/(no-)?fontface\b/,"")+
+ (a?" ":" no-")+"fontface"}};setTimeout(v,75);setTimeout(v,150);addEventListener("load",function(){v();(w=true)&&o&&o(a);setTimeout(function(){t||(g=c);g.parentNode.removeChild(g);b.parentNode.removeChild(b)},50)},false)}j._fontfaceready=function(p){w||a?p(a):(o=p)};return a||h!==c.offsetWidth};d.video=function(){var a=e.createElement("video"),b=!!a.canPlayType;if(b){b=new Boolean(b);b.ogg=a.canPlayType('video/ogg; codecs="theora"');b.h264=a.canPlayType('video/mp4; codecs="avc1.42E01E"');b.webm=a.canPlayType('video/webm; codecs="vp8, vorbis"')}return b};
+ d.audio=function(){var a=e.createElement("audio"),b=!!a.canPlayType;if(b){b=new Boolean(b);b.ogg=a.canPlayType('audio/ogg; codecs="vorbis"');b.mp3=a.canPlayType("audio/mpeg;");b.wav=a.canPlayType('audio/wav; codecs="1"');b.m4a=a.canPlayType("audio/x-m4a;")||a.canPlayType("audio/aac;")}return b};d.localStorage=function(){return"localStorage"in i&&i.localStorage!==null};d.sessionStorage=function(){try{return"sessionStorage"in i&&i.sessionStorage!==null}catch(a){return false}};d.webworkers=function(){return!!i.Worker};
+ d.applicationCache=function(){var a=i.applicationCache;return!!(a&&typeof a.status!="undefined"&&typeof a.update=="function"&&typeof a.swapCache=="function")};d.svg=function(){return!!e.createElementNS&&!!e.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect};d.smil=function(){return!!e.createElementNS&&/SVG/.test(M.call(e.createElementNS("http://www.w3.org/2000/svg","animate")))};d.svgclippaths=function(){return!!e.createElementNS&&/SVG/.test(M.call(e.createElementNS("http://www.w3.org/2000/svg",
+ "clipPath")))};for(var z in d)if(O(d,z))N.push(((j[z.toLowerCase()]=d[z]())?"":"no-")+z.toLowerCase());j[E]||P();j.addTest=function(a,b){a=a.toLowerCase();if(!j[a]){b=!!b();s.className+=" "+(b?"":"no-")+a;j[a]=b;return j}};m.cssText="";D=n=null;(function(){var a=e.createElement("div");a.innerHTML="<elem></elem>";return a.childNodes.length!==1})()&&function(a,b){function c(f,k){if(o[f])o[f].styleSheet.cssText+=k;else{var l=t[G],q=b[A]("style");q.media=f;l.insertBefore(q,l[G]);o[f]=q;c(f,k)}}function h(f,
+ k){for(var l=new RegExp("\\b("+w+")\\b(?!.*[;}])","gi"),q=function(B){return".iepp_"+B},x=-1;++x<f.length;){k=f[x].media||k;h(f[x].imports,k);c(k,f[x].cssText.replace(l,q))}}for(var t=b.documentElement,g=b.createDocumentFragment(),o={},w="abbr|article|aside|audio|canvas|command|datalist|details|figure|figcaption|footer|header|hgroup|keygen|mark|meter|nav|output|progress|section|source|summary|time|video",v=w.split("|"),p=[],H=-1,G="firstChild",A="createElement";++H<v.length;){b[A](v[H]);g[A](v[H])}g=
+ g.appendChild(b[A]("div"));a.attachEvent("onbeforeprint",function(){for(var f,k=b.getElementsByTagName("*"),l,q,x=new RegExp("^"+w+"$","i"),B=-1;++B<k.length;)if((f=k[B])&&(q=f.nodeName.match(x))){l=new RegExp("^\\s*<"+q+"(.*)\\/"+q+">\\s*$","i");g.innerHTML=f.outerHTML.replace(/\r|\n/g," ").replace(l,f.currentStyle.display=="block"?"<div$1/div>":"<span$1/span>");l=g.childNodes[0];l.className+=" iepp_"+q;l=p[p.length]=[f,l];f.parentNode.replaceChild(l[1],l[0])}h(b.styleSheets,"all")});a.attachEvent("onafterprint",
+ function(){for(var f=-1,k;++f<p.length;)p[f][1].parentNode.replaceChild(p[f][0],p[f][1]);for(k in o)t[G].removeChild(o[k]);o={};p=[]})}(this,e);j._enableHTML5=true;j._version="1.5";s.className=s.className.replace(/\bno-js\b/,"")+" js";s.className+=" "+N.join(" ");return j}(this,this.document);
View
158 canvas/js/script.js
@@ -0,0 +1,158 @@
+/* Author: vance.dubberly@ff0000.com
+
+*/
+
+
+var c; // canvas
+
+var keys; // keys currently pressed
+var dot; // the dot
+var ctx;
+
+var CANVAS_HEIGHT = 600;
+var CANVAS_WIDTH = 900;
+
+var things = [];
+
+
+// The all powerful Dot
+var Dot = function(ctx, left, top) {
+
+ this.ctx = ctx;
+
+ var t = top;
+ var l = left;
+ var ol;
+ var ot;
+ var tt;
+ var tl;
+ var tail_distance = 20;
+
+ this.draw = function() {
+ var ctx = this.ctx;
+
+ ctx.fillStyle = 'rgba(0,0,0,0.9)';
+ ctx.strokeStyle = 'rgba(0,153,255,0)';
+
+ this.decidePostion();
+ this.tailPosition();
+
+ ctx.beginPath();
+ ctx.arc(l,t,10,0,Math.PI*2,true);
+ ctx.fill();
+ ctx.closePath();
+
+ ctx.beginPath();
+ ctx.arc(tl,tt,6,0,Math.PI*2,true);
+ ctx.fill();
+ ctx.closePath();
+
+ }
+
+ this.decidePostion = function() {
+ var len = keys.length;
+ ol = l;
+ ot = t;
+ for (var i=0;i<len;i++ ) {
+ this.bodyPosition(keys[i]);
+ }
+ }
+
+ this.tailPosition = function() {
+ dl = ol - l; // distance moved left aka delta left
+ dt = ot - t; // distance moved top aka delta top
+
+ distance = Math.sqrt((dl*dl) + (dt*dt)); // absolute distance moved.
+
+ ratio = tail_distance / distance;
+
+ tl = l + ( dl * ratio ); // tail top postion
+ tt = t + ( dt * ratio ); // tail left position
+
+ tl = ( isNaN(tl) ) ? l : tl;
+ tt = ( isNaN(tt) ) ? t : tt;
+ }
+
+ this.bodyPosition = function(code) {
+ switch (code) {
+ case 37:
+ l = (l - 2 < 0) ? 0 : l - 2;
+ break;
+ case 39:
+ l = (l + 2 >= CANVAS_WIDTH ) ? CANVAS_WIDTH : l + 2;
+ break;
+ case 38:
+ t = ( t - 2 < 0 ) ? 0 : t - 2 ;
+ break;
+ case 40:
+ t = (t + 2 >= CANVAS_HEIGHT ) ? CANVAS_HEIGHT : t + 2;
+ break;
+ }
+ }
+}
+
+
+var Box = function(ctx,left, top, width, height) {
+ var ctx = ctx;
+ var l = left;
+ var t = top;
+ var w = width;
+ var h = height;
+
+ this.draw = function() {
+ ctx.fillStyle = "rgb(255,0,0)";
+ ctx.fillRect (l, t, w, h);
+ }
+}
+
+function addKey(e) {
+ console.log('addkey');
+ console.log(keys);
+ if ( dojo.indexOf(keys, e.keyCode) != -1) {
+ console.log('key already tracked');
+ } else {
+ keys.push(e.keyCode)
+ }
+}
+
+function removeKey(e) {
+ var new_keys = [];
+ var code = e.keyCode;
+ var len = keys.length; //speed optimization
+ for ( var i=0;i<len;i++ ) {
+ if ( keys[i] != code ) {
+ new_keys.push(keys[i]);
+ }
+ }
+ keys = new_keys;
+}
+
+
+function draw() {
+ ctx.clearRect(0,0,CANVAS_WIDTH,CANVAS_HEIGHT);
+
+ var len = things.length;
+ for (var i=0;i<len;i++) {
+ things[i].draw();
+ }
+
+
+}
+
+dojo.addOnLoad(function() {
+ c = dojo.byId("play_thang");
+ ctx = c.getContext('2d');
+
+ things.push(new Dot(ctx, 150, 150 ));
+ things.push(new Dot(ctx, 250, 250 ));
+
+ var box = new Box(ctx, 250, 250, 250, 250 )
+ things.push(box);
+
+ keys = [];
+
+ dojo.connect(dojo.byId('play_thing'), 'onkeydown', addKey);
+ dojo.connect(dojo.byId('play_thing'), 'onkeyup', removeKey);
+
+ setInterval(draw,10);
+});
View
68 canvas/nginx.conf
@@ -0,0 +1,68 @@
+user www www;
+worker_processes 5;
+error_log logs/error.log;
+pid logs/nginx.pid;
+worker_rlimit_nofile 8192;
+
+events {
+ worker_connections 4096;
+}
+
+http {
+ include mime.types;
+ default_type application/octet-stream;
+ log_format main '$remote_addr - $remote_user [$time_local] $status '
+ '"$request" $body_bytes_sent "$http_referer" '
+ '"$http_user_agent" "$http_x_forwarded_for"';
+ access_log logs/access.log main;
+
+ keepalive_timeout 65;
+
+ sendfile on;
+ tcp_nopush on;
+ tcp_nodelay off;
+
+ gzip on;
+ gzip_http_version 1.0;
+ gzip_comp_level 2;
+ gzip_min_length 1100;
+ gzip_buffers 4 8k;
+ gzip_proxied any;
+ gzip_types text/html text/plain text/xml application/xml application/xml+rss text/css text/javascript application/javascript application/json;
+
+ gzip_static on;
+
+ gzip_proxied expired no-cache no-store private auth;
+ gzip_disable "MSIE [1-6]\.";
+ gzip_vary on;
+
+ server {
+ listen 80 default deferred;
+ server_name example.com;
+ expires 1M;
+
+ root /sites/example.com/public;
+
+ #static assets
+ location ~* ^.+\.(manifest)$ {
+ expires -1D;
+ root /sites/example.com/public;
+ access_log logs/static.log;
+ }
+ location ~* ^.+\.(ico|ogg|ogv|svg|svgz|eot|otf|woff|mp4|ttf|css|rss|atom|js|jpg|jpeg|gif|png|ico|zip|tgz|gz|rar|bz2|doc|xls|exe|ppt|tar|mid|midi|wav|bmp|rtf)$ {
+ # only set expires max IFF the file is a static file and exists
+ if (-f $request_filename) {
+ expires max;
+ root /sites/example.com/public;
+ access_log logs/static.log;
+ }
+ }
+
+ }
+ server {
+ server_name www.example.com;
+ rewrite ^(.*) http://example.com$1 permanent;
+ }
+
+}
+
View
5 canvas/robots.txt
@@ -0,0 +1,5 @@
+# www.robotstxt.org/
+# www.google.com/support/webmasters/bin/answer.py?hl=en&answer=156449
+
+User-agent: *
+
View
31 canvas/test/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <title>QUnit Tests</title>
+ <link rel="stylesheet" href="qunit/qunit.css" media="screen">
+
+<!-- reference your own javascript files here -->
+
+ <script src="../js/modernizr-1.5.min.js"></script>
+
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
+ <script src="../js/plugins.js"></script>
+ <script src="../js/script.js"></script>
+
+
+<!-- test runner files -->
+ <script src="qunit/qunit.js"></script>
+ <script src="tests.js"></script>
+
+
+
+</head>
+<body class="flora">
+ <h1 id="qunit-header">QUnit Test Suite</h1>
+ <h2 id="qunit-banner"></h2>
+ <div id="qunit-testrunner-toolbar"></div>
+ <h2 id="qunit-userAgent"></h2>
+ <ol id="qunit-tests"></ol>
+ <div id="qunit-fixture">test markup</div>
+ </body>
+</html>
View
148 canvas/test/qunit/qunit.css
@@ -0,0 +1,148 @@
+/** Font Family and Sizes */
+
+#qunit-tests, #qunit-header, #qunit-banner, #qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult {
+ font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial;
+}
+
+#qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult, #qunit-tests li { font-size: small; }
+#qunit-tests { font-size: smaller; }
+
+
+/** Resets */
+
+#qunit-tests, #qunit-tests li ol, #qunit-header, #qunit-banner, #qunit-userAgent, #qunit-testresult {
+ margin: 0;
+ padding: 0;
+}
+
+
+/** Header */
+
+#qunit-header {
+ padding: 0.5em 0 0.5em 1em;
+
+ color: #fff;
+ text-shadow: rgba(0, 0, 0, 0.5) 4px 4px 1px;
+ background-color: #0d3349;
+
+ border-radius: 15px 15px 0 0;
+ -moz-border-radius: 15px 15px 0 0;
+ -webkit-border-top-right-radius: 15px;
+ -webkit-border-top-left-radius: 15px;
+}
+
+#qunit-banner {
+ height: 5px;
+}
+
+#qunit-testrunner-toolbar {
+ padding: 0em 0 0.5em 2em;
+}
+
+#qunit-userAgent {
+ padding: 0.5em 0 0.5em 2.5em;
+ background-color: #2b81af;
+ color: #fff;
+ text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 1px;
+}
+
+
+/** Tests: Pass/Fail */
+
+#qunit-tests {
+ list-style-position: inside;
+}
+
+#qunit-tests li {
+ padding: 0.4em 0.5em 0.4em 2.5em;
+ border-bottom: 1px solid #fff;
+ list-style-position: inside;
+}
+
+#qunit-tests li strong {
+ cursor: pointer;
+}
+
+#qunit-tests li ol {
+ margin-top: 0.5em;
+ padding: 0.5em;
+
+ background-color: #fff;
+
+ border-radius: 15px;
+ -moz-border-radius: 15px;
+ -webkit-border-radius: 15px;
+
+ box-shadow: inset 0px 2px 13px #999;
+ -moz-box-shadow: inset 0px 2px 13px #999;
+ -webkit-box-shadow: inset 0px 2px 13px #999;
+}
+
+#qunit-tests li li {
+ margin: 0.5em;
+ padding: 0.4em 0.5em 0.4em 0.5em;
+ background-color: #fff;
+ border-bottom: none;
+ list-style-position: inside;
+}
+
+/*** Passing Styles */
+
+#qunit-tests li li.pass {
+ color: #5E740B;
+ background-color: #fff;
+ border-left: 26px solid #C6E746;
+}
+
+#qunit-tests li.pass { color: #528CE0; background-color: #D2E0E6; }
+#qunit-tests li.pass span.test-name { color: #366097; }
+
+#qunit-tests li li.pass span.test-actual,
+#qunit-tests li li.pass span.test-expected { color: #999999; }
+
+strong b.pass { color: #5E740B; }
+
+#qunit-banner.qunit-pass { background-color: #C6E746; }
+
+/*** Failing Styles */
+
+#qunit-tests li li.fail {
+ color: #710909;
+ background-color: #fff;
+ border-left: 26px solid #EE5757;
+}
+
+#qunit-tests li.fail { color: #000000; background-color: #EE5757; }
+#qunit-tests li.fail span.test-name,
+#qunit-tests li.fail span.module-name { color: #000000; }
+
+#qunit-tests li li.fail span.test-actual { color: #EE5757; }
+#qunit-tests li li.fail span.test-expected { color: green; }
+
+strong b.fail { color: #710909; }
+
+#qunit-banner.qunit-fail,
+#qunit-testrunner-toolbar { background-color: #EE5757; }
+
+
+/** Footer */
+
+#qunit-testresult {
+ padding: 0.5em 0.5em 0.5em 2.5em;
+
+ color: #2b81af;
+ background-color: #D2E0E6;
+
+ border-radius: 0 0 15px 15px;
+ -moz-border-radius: 0 0 15px 15px;
+ -webkit-border-bottom-right-radius: 15px;
+ -webkit-border-bottom-left-radius: 15px;
+}
+
+/** Fixture */
+
+#qunit-fixture {
+ position: absolute;
+ top: -10000px;
+ left: -10000px;
+}
View
1,265 canvas/test/qunit/qunit.js
@@ -0,0 +1,1265 @@
+/*
+ * QUnit - A JavaScript Unit Testing Framework
+ *
+ * http://docs.jquery.com/QUnit
+ *
+ * Copyright (c) 2009 John Resig, Jörn Zaefferer
+ * Dual licensed under the MIT (MIT-LICENSE.txt)
+ * and GPL (GPL-LICENSE.txt) licenses.
+ */
+
+(function(window) {
+
+var QUnit = {
+
+ // call on start of module test to prepend name to all tests
+ module: function(name, testEnvironment) {
+ config.currentModule = name;
+
+ synchronize(function() {
+ if ( config.currentModule ) {
+ QUnit.moduleDone( config.currentModule, config.moduleStats.bad, config.moduleStats.all );
+ }
+
+ config.currentModule = name;
+ config.moduleTestEnvironment = testEnvironment;
+ config.moduleStats = { all: 0, bad: 0 };
+
+ QUnit.moduleStart( name, testEnvironment );
+ });
+ },
+
+ asyncTest: function(testName, expected, callback) {
+ if ( arguments.length === 2 ) {
+ callback = expected;
+ expected = 0;
+ }
+
+ QUnit.test(testName, expected, callback, true);
+ },
+
+ test: function(testName, expected, callback, async) {
+ var name = '<span class="test-name">' + testName + '</span>', testEnvironment, testEnvironmentArg;
+
+ if ( arguments.length === 2 ) {
+ callback = expected;
+ expected = null;
+ }
+ // is 2nd argument a testEnvironment?
+ if ( expected && typeof expected === 'object') {
+ testEnvironmentArg = expected;
+ expected = null;
+ }
+
+ if ( config.currentModule ) {
+ name = '<span class="module-name">' + config.currentModule + "</span>: " + name;
+ }
+
+ if ( !validTest(config.currentModule + ": " + testName) ) {
+ return;
+ }
+
+ synchronize(function() {
+
+ testEnvironment = extend({
+ setup: function() {},
+ teardown: function() {}
+ }, config.moduleTestEnvironment);
+ if (testEnvironmentArg) {
+ extend(testEnvironment,testEnvironmentArg);
+ }
+
+ QUnit.testStart( testName, testEnvironment );
+
+ // allow utility functions to access the current test environment
+ QUnit.current_testEnvironment = testEnvironment;
+
+ config.assertions = [];
+ config.expected = expected;
+
+ var tests = id("qunit-tests");
+ if (tests) {
+ var b = document.createElement("strong");
+ b.innerHTML = "Running " + name;
+ var li = document.createElement("li");
+ li.appendChild( b );
+ li.id = "current-test-output";
+ tests.appendChild( li )
+ }
+
+ try {
+ if ( !config.pollution ) {
+ saveGlobal();
+ }
+
+ testEnvironment.setup.call(testEnvironment);
+ } catch(e) {
+ QUnit.ok( false, "Setup failed on " + name + ": " + e.message );
+ }
+ });
+
+ synchronize(function() {
+ if ( async ) {
+ QUnit.stop();
+ }
+
+ try {
+ callback.call(testEnvironment);
+ } catch(e) {
+ fail("Test " + name + " died, exception and test follows", e, callback);
+ QUnit.ok( false, "Died on test #" + (config.assertions.length + 1) + ": " + e.message );
+ // else next test will carry the responsibility
+ saveGlobal();
+
+ // Restart the tests if they're blocking
+ if ( config.blocking ) {
+ start();
+ }
+ }
+ });
+
+ synchronize(function() {
+ try {
+ checkPollution();
+ testEnvironment.teardown.call(testEnvironment);
+ } catch(e) {
+ QUnit.ok( false, "Teardown failed on " + name + ": " + e.message );
+ }
+ });
+
+ synchronize(function() {
+ try {
+ QUnit.reset();
+ } catch(e) {
+ fail("reset() failed, following Test " + name + ", exception and reset fn follows", e, reset);
+ }
+
+ if ( config.expected && config.expected != config.assertions.length ) {
+ QUnit.ok( false, "Expected " + config.expected + " assertions, but " + config.assertions.length + " were run" );
+ }
+
+ var good = 0, bad = 0,
+ tests = id("qunit-tests");
+
+ config.stats.all += config.assertions.length;
+ config.moduleStats.all += config.assertions.length;
+
+ if ( tests ) {
+ var ol = document.createElement("ol");
+
+ for ( var i = 0; i < config.assertions.length; i++ ) {
+ var assertion = config.assertions[i];
+
+ var li = document.createElement("li");
+ li.className = assertion.result ? "pass" : "fail";
+ li.innerHTML = assertion.message || "(no message)";
+ ol.appendChild( li );
+
+ if ( assertion.result ) {
+ good++;
+ } else {
+ bad++;
+ config.stats.bad++;
+ config.moduleStats.bad++;
+ }
+ }
+ if (bad == 0) {
+ ol.style.display = "none";
+ }
+
+ var b = document.createElement("strong");
+ b.innerHTML = name + " <b style='color:black;'>(<b class='fail'>" + bad + "</b>, <b class='pass'>" + good + "</b>, " + config.assertions.length + ")</b>";
+
+ addEvent(b, "click", function() {
+ var next = b.nextSibling, display = next.style.display;
+ next.style.display = display === "none" ? "block" : "none";
+ });
+
+ addEvent(b, "dblclick", function(e) {
+ var target = e && e.target ? e.target : window.event.srcElement;
+ if ( target.nodeName.toLowerCase() == "span" || target.nodeName.toLowerCase() == "b" ) {
+ target = target.parentNode;
+ }
+ if ( window.location && target.nodeName.toLowerCase() === "strong" ) {
+ window.location.search = "?" + encodeURIComponent(getText([target]).replace(/\(.+\)$/, "").replace(/(^\s*|\s*$)/g, ""));
+ }
+ });
+
+ var li = id("current-test-output");
+ li.id = "";
+ li.className = bad ? "fail" : "pass";
+ li.removeChild( li.firstChild );
+ li.appendChild( b );
+ li.appendChild( ol );
+
+ if ( bad ) {
+ var toolbar = id("qunit-testrunner-toolbar");
+ if ( toolbar ) {
+ toolbar.style.display = "block";
+ id("qunit-filter-pass").disabled = null;
+ id("qunit-filter-missing").disabled = null;
+ }
+ }
+
+ } else {
+ for ( var i = 0; i < config.assertions.length; i++ ) {
+ if ( !config.assertions[i].result ) {
+ bad++;
+ config.stats.bad++;
+ config.moduleStats.bad++;
+ }
+ }
+ }
+
+ QUnit.testDone( testName, bad, config.assertions.length );
+
+ if ( !window.setTimeout && !config.queue.length ) {
+ done();
+ }
+ });
+
+ if ( window.setTimeout && !config.doneTimer ) {
+ config.doneTimer = window.setTimeout(function(){
+ if ( !config.queue.length ) {
+ done();
+ } else {
+ synchronize( done );
+ }
+ }, 13);
+ }
+ },
+
+ /**
+ * Specify the number of expected assertions to gurantee that failed test (no assertions are run at all) don't slip through.
+ */
+ expect: function(asserts) {
+ config.expected = asserts;
+ },
+
+ /**
+ * Asserts true.
+ * @example ok( "asdfasdf".length > 5, "There must be at least 5 chars" );
+ */
+ ok: function(a, msg) {
+ msg = escapeHtml(msg);
+ QUnit.log(a, msg);
+
+ config.assertions.push({
+ result: !!a,
+ message: msg
+ });
+ },
+
+ /**
+ * Checks that the first two arguments are equal, with an optional message.
+ * Prints out both actual and expected values.
+ *
+ * Prefered to ok( actual == expected, message )
+ *
+ * @example equal( format("Received {0} bytes.", 2), "Received 2 bytes." );
+ *
+ * @param Object actual
+ * @param Object expected
+ * @param String message (optional)
+ */
+ equal: function(actual, expected, message) {
+ push(expected == actual, actual, expected, message);
+ },
+
+ notEqual: function(actual, expected, message) {
+ push(expected != actual, actual, expected, message);
+ },
+
+ deepEqual: function(actual, expected, message) {
+ push(QUnit.equiv(actual, expected), actual, expected, message);
+ },
+
+ notDeepEqual: function(actual, expected, message) {
+ push(!QUnit.equiv(actual, expected), actual, expected, message);
+ },
+
+ strictEqual: function(actual, expected, message) {
+ push(expected === actual, actual, expected, message);
+ },
+
+ notStrictEqual: function(actual, expected, message) {
+ push(expected !== actual, actual, expected, message);
+ },
+
+ raises: function(fn, message) {
+ try {
+ fn();
+ ok( false, message );
+ }
+ catch (e) {
+ ok( true, message );
+ }
+ },
+
+ start: function() {
+ // A slight delay, to avoid any current callbacks
+ if ( window.setTimeout ) {
+ window.setTimeout(function() {
+ if ( config.timeout ) {
+ clearTimeout(config.timeout);
+ }
+
+ config.blocking = false;
+ process();
+ }, 13);
+ } else {
+ config.blocking = false;
+ process();
+ }
+ },
+
+ stop: function(timeout) {
+ config.blocking = true;
+
+ if ( timeout && window.setTimeout ) {
+ config.timeout = window.setTimeout(function() {
+ QUnit.ok( false, "Test timed out" );
+ QUnit.start();
+ }, timeout);
+ }
+ }
+
+};
+
+// Backwards compatibility, deprecated
+QUnit.equals = QUnit.equal;
+QUnit.same = QUnit.deepEqual;
+
+// Maintain internal state
+var config = {
+ // The queue of tests to run
+ queue: [],
+
+ // block until document ready
+ blocking: true
+};
+
+// Load paramaters
+(function() {
+ var location = window.location || { search: "", protocol: "file:" },
+ GETParams = location.search.slice(1).split('&');
+
+ for ( var i = 0; i < GETParams.length; i++ ) {
+ GETParams[i] = decodeURIComponent( GETParams[i] );
+ if ( GETParams[i] === "noglobals" ) {
+ GETParams.splice( i, 1 );
+ i--;
+ config.noglobals = true;
+ } else if ( GETParams[i].search('=') > -1 ) {
+ GETParams.splice( i, 1 );
+ i--;
+ }
+ }
+
+ // restrict modules/tests by get parameters
+ config.filters = GETParams;
+
+ // Figure out if we're running the tests from a server or not
+ QUnit.isLocal = !!(location.protocol === 'file:');
+})();
+
+// Expose the API as global variables, unless an 'exports'
+// object exists, in that case we assume we're in CommonJS
+if ( typeof exports === "undefined" || typeof require === "undefined" ) {
+ extend(window, QUnit);
+ window.QUnit = QUnit;
+} else {
+ extend(exports, QUnit);
+ exports.QUnit = QUnit;
+}
+
+// define these after exposing globals to keep them in these QUnit namespace only
+extend(QUnit, {
+ config: config,
+
+ // Initialize the configuration options
+ init: function() {
+ extend(config, {
+ stats: { all: 0, bad: 0 },
+ moduleStats: { all: 0, bad: 0 },
+ started: +new Date,
+ updateRate: 1000,
+ blocking: false,
+ autostart: true,
+ autorun: false,
+ assertions: [],
+ filters: [],
+ queue: []
+ });
+
+ var tests = id("qunit-tests"),
+ banner = id("qunit-banner"),
+ result = id("qunit-testresult");
+
+ if ( tests ) {
+ tests.innerHTML = "";
+ }
+
+ if ( banner ) {
+ banner.className = "";
+ }
+
+ if ( result ) {
+ result.parentNode.removeChild( result );
+ }
+ },
+
+ /**
+ * Resets the test setup. Useful for tests that modify the DOM.
+ */
+ reset: function() {
+ if ( window.jQuery ) {
+ jQuery("#main, #qunit-fixture").html( config.fixture );
+ }
+ },
+
+ /**
+ * Trigger an event on an element.
+ *
+ * @example triggerEvent( document.body, "click" );
+ *
+ * @param DOMElement elem
+ * @param String type
+ */
+ triggerEvent: function( elem, type, event ) {
+ if ( document.createEvent ) {
+ event = document.createEvent("MouseEvents");
+ event.initMouseEvent(type, true, true, elem.ownerDocument.defaultView,
+ 0, 0, 0, 0, 0, false, false, false, false, 0, null);
+ elem.dispatchEvent( event );
+
+ } else if ( elem.fireEvent ) {
+ elem.fireEvent("on"+type);
+ }
+ },
+
+ // Safe object type checking
+ is: function( type, obj ) {
+ return QUnit.objectType( obj ) == type;
+ },
+
+ objectType: function( obj ) {
+ if (typeof obj === "undefined") {
+ return "undefined";
+
+ // consider: typeof null === object
+ }
+ if (obj === null) {
+ return "null";
+ }
+
+ var type = Object.prototype.toString.call( obj )
+ .match(/^\[object\s(.*)\]$/)[1] || '';
+
+ switch (type) {
+ case 'Number':
+ if (isNaN(obj)) {
+ return "nan";
+ } else {
+ return "number";
+ }
+ case 'String':
+ case 'Boolean':
+ case 'Array':
+ case 'Date':
+ case 'RegExp':
+ case 'Function':
+ return type.toLowerCase();
+ }
+ if (typeof obj === "object") {
+ return "object";
+ }
+ return undefined;
+ },
+
+ // Logging callbacks
+ begin: function() {},
+ done: function(failures, total) {},
+ log: function(result, message) {},
+ testStart: function(name, testEnvironment) {},
+ testDone: function(name, failures, total) {},
+ moduleStart: function(name, testEnvironment) {},
+ moduleDone: function(name, failures, total) {}
+});
+
+if ( typeof document === "undefined" || document.readyState === "complete" ) {
+ config.autorun = true;
+}
+
+addEvent(window, "load", function() {
+ QUnit.begin();
+
+ // Initialize the config, saving the execution queue
+ var oldconfig = extend({}, config);
+ QUnit.init();
+ extend(config, oldconfig);
+
+ config.blocking = false;
+
+ var userAgent = id("qunit-userAgent");
+ if ( userAgent ) {
+ userAgent.innerHTML = navigator.userAgent;
+ }
+
+ var toolbar = id("qunit-testrunner-toolbar");
+ if ( toolbar ) {
+ toolbar.style.display = "none";
+
+ var filter = document.createElement("input");
+ filter.type = "checkbox";
+ filter.id = "qunit-filter-pass";
+ filter.disabled = true;
+ addEvent( filter, "click", function() {
+ var li = document.getElementsByTagName("li");
+ for ( var i = 0; i < li.length; i++ ) {
+ if ( li[i].className.indexOf("pass") > -1 ) {
+ li[i].style.display = filter.checked ? "none" : "";
+ }
+ }
+ });
+ toolbar.appendChild( filter );
+
+ var label = document.createElement("label");
+ label.setAttribute("for", "qunit-filter-pass");
+ label.innerHTML = "Hide passed tests";
+ toolbar.appendChild( label );
+
+ var missing = document.createElement("input");
+ missing.type = "checkbox";
+ missing.id = "qunit-filter-missing";
+ missing.disabled = true;
+ addEvent( missing, "click", function() {
+ var li = document.getElementsByTagName("li");
+ for ( var i = 0; i < li.length; i++ ) {
+ if ( li[i].className.indexOf("fail") > -1 && li[i].innerHTML.indexOf('missing test - untested code is broken code') > - 1 ) {
+ li[i].parentNode.parentNode.style.display = missing.checked ? "none" : "block";
+ }
+ }
+ });
+ toolbar.appendChild( missing );
+
+ label = document.createElement("label");
+ label.setAttribute("for", "qunit-filter-missing");
+ label.innerHTML = "Hide missing tests (untested code is broken code)";
+ toolbar.appendChild( label );
+ }
+
+ var main = id('main') || id('qunit-fixture');
+ if ( main ) {
+ config.fixture = main.innerHTML;
+ }
+
+ if (config.autostart) {
+ QUnit.start();
+ }
+});
+
+function done() {
+ if ( config.doneTimer && window.clearTimeout ) {
+ window.clearTimeout( config.doneTimer );
+ config.doneTimer = null;
+ }
+
+ if ( config.queue.length ) {
+ config.doneTimer = window.setTimeout(function(){
+ if ( !config.queue.length ) {
+ done();
+ } else {
+ synchronize( done );
+ }
+ }, 13);
+
+ return;
+ }
+
+ config.autorun = true;
+
+ // Log the last module results
+ if ( config.currentModule ) {
+ QUnit.moduleDone( config.currentModule, config.moduleStats.bad, config.moduleStats.all );
+ }
+
+ var banner = id("qunit-banner"),
+ tests = id("qunit-tests"),
+ html = ['Tests completed in ',
+ +new Date - config.started, ' milliseconds.<br/>',
+ '<span class="passed">', config.stats.all - config.stats.bad, '</span> tests of <span class="total">', config.stats.all, '</span> passed, <span class="failed">', config.stats.bad,'</span> failed.'].join('');
+
+ if ( banner ) {
+ banner.className = (config.stats.bad ? "qunit-fail" : "qunit-pass");
+ }
+
+ if ( tests ) {
+ var result = id("qunit-testresult");
+
+ if ( !result ) {
+ result = document.createElement("p");
+ result.id = "qunit-testresult";
+ result.className = "result";
+ tests.parentNode.insertBefore( result, tests.nextSibling );
+ }
+
+ result.innerHTML = html;
+ }
+
+ QUnit.done( config.stats.bad, config.stats.all );
+}
+
+function validTest( name ) {
+ var i = config.filters.length,
+ run = false;
+
+ if ( !i ) {
+ return true;
+ }
+
+ while ( i-- ) {
+ var filter = config.filters[i],
+ not = filter.charAt(0) == '!';
+
+ if ( not ) {
+ filter = filter.slice(1);
+ }
+
+ if ( name.indexOf(filter) !== -1 ) {
+ return !not;
+ }
+
+ if ( not ) {
+ run = true;
+ }
+ }
+
+ return run;
+}
+
+function escapeHtml(s) {
+ s = s === null ? "" : s + "";
+ return s.replace(/[\&"<>\\]/g, function(s) {
+ switch(s) {
+ case "&": return "&amp;";
+ case "\\": return "\\\\";
+ case '"': return '\"';
+ case "<": return "&lt;";
+ case ">": return "&gt;";
+ default: return s;
+ }
+ });
+}
+
+function push(result, actual, expected, message) {
+ message = escapeHtml(message) || (result ? "okay" : "failed");
+ message = '<span class="test-message">' + message + "</span>";
+ expected = escapeHtml(QUnit.jsDump.parse(expected));
+ actual = escapeHtml(QUnit.jsDump.parse(actual));
+ var output = message + ', expected: <span class="test-expected">' + expected + '</span>';
+ if (actual != expected) {
+ output += ' result: <span class="test-actual">' + actual + '</span>, diff: ' + QUnit.diff(expected, actual);
+ }
+
+ // can't use ok, as that would double-escape messages
+ QUnit.log(result, output);
+ config.assertions.push({
+ result: !!result,
+ message: output
+ });
+}
+
+function synchronize( callback ) {
+ config.queue.push( callback );
+
+ if ( config.autorun && !config.blocking ) {
+ process();
+ }
+}
+
+function process() {
+ var start = (new Date()).getTime();
+
+ while ( config.queue.length && !config.blocking ) {
+ if ( config.updateRate <= 0 || (((new Date()).getTime() - start) < config.updateRate) ) {
+ config.queue.shift()();
+
+ } else {
+ setTimeout( process, 13 );
+ break;