Permalink
Browse files

Initial commit.

  • Loading branch information...
1 parent 9db22b4 commit ef524026bd091df0a382d58e7c226f52a791c453 @kablamo committed Aug 4, 2012
Showing with 19,792 additions and 1 deletion.
  1. +19 −0 LICENSE
  2. +14 −1 README.md
  3. +15 −0 app.psgi
  4. +46 −0 basicTestCase
  5. +1,029 −0 css/main.css
  6. +167 −0 css/print.css
  7. +57 −0 css/reset.css
  8. +70 −0 include/minireset.css
  9. +144 −0 include/style.css
  10. +523 −0 index.html
  11. +1,039 −0 js/reveal.js
  12. +155 −0 lib/css/arta.css
  13. +50 −0 lib/css/ascetic.css
  14. +105 −0 lib/css/brown_paper.css
  15. +104 −0 lib/css/dark.css
  16. +135 −0 lib/css/default.css
  17. +113 −0 lib/css/far.css
  18. +133 −0 lib/css/github.black.css
  19. +133 −0 lib/css/github.css
  20. +146 −0 lib/css/googlecode.css
  21. +123 −0 lib/css/idea.css
  22. +100 −0 lib/css/ir_black.css
  23. +122 −0 lib/css/magula.css
  24. +117 −0 lib/css/monokai.css
  25. +118 −0 lib/css/monokai.dos.css
  26. +106 −0 lib/css/pojoaque.css
  27. +115 −0 lib/css/rainbow.css
  28. +112 −0 lib/css/school_book.css
  29. +90 −0 lib/css/solarized_dark.css
  30. +90 −0 lib/css/solarized_light.css
  31. +150 −0 lib/css/sunburst.css
  32. +42 −0 lib/css/tomorrow-night-blue.css
  33. +41 −0 lib/css/tomorrow-night-bright.css
  34. +41 −0 lib/css/tomorrow-night-eighties.css
  35. +42 −0 lib/css/tomorrow-night.css
  36. +39 −0 lib/css/tomorrow.css
  37. +85 −0 lib/css/vs.css
  38. +156 −0 lib/css/xcode.css
  39. +116 −0 lib/css/zenburn.css
  40. BIN lib/font/league_gothic-webfont.ttf
  41. +2 −0 lib/font/league_gothic_license
  42. +2 −0 lib/js/classList.js
  43. +25 −0 lib/js/data-markdown.js
  44. +8 −0 lib/js/head.min.js
  45. +5 −0 lib/js/highlight.js
  46. +1,341 −0 lib/js/showdown.js
  47. +417 −0 node_modules/.bin/express
  48. +7 −0 node_modules/express/.npmignore
  49. +811 −0 node_modules/express/History.md
  50. +22 −0 node_modules/express/LICENSE
  51. +29 −0 node_modules/express/Makefile
  52. +145 −0 node_modules/express/Readme.md
  53. +417 −0 node_modules/express/bin/express
  54. +2 −0 node_modules/express/index.js
  55. +510 −0 node_modules/express/lib-cov/application.js
  56. +65 −0 node_modules/express/lib-cov/express.js
  57. +54 −0 node_modules/express/lib-cov/middleware.js
  58. +225 −0 node_modules/express/lib-cov/request.js
  59. +611 −0 node_modules/express/lib-cov/response.js
  60. +40 −0 node_modules/express/lib-cov/router/collection.js
  61. +515 −0 node_modules/express/lib-cov/router/index.js
  62. +9 −0 node_modules/express/lib-cov/router/methods.js
  63. +68 −0 node_modules/express/lib-cov/router/route.js
  64. +151 −0 node_modules/express/lib-cov/utils.js
  65. +81 −0 node_modules/express/lib-cov/view.js
  66. +79 −0 node_modules/express/lib/express.js
  67. +582 −0 node_modules/express/lib/http.js
  68. +52 −0 node_modules/express/lib/https.js
  69. +323 −0 node_modules/express/lib/request.js
  70. +460 −0 node_modules/express/lib/response.js
  71. +53 −0 node_modules/express/lib/router/collection.js
  72. +398 −0 node_modules/express/lib/router/index.js
  73. +79 −0 node_modules/express/lib/router/methods.js
  74. +88 −0 node_modules/express/lib/router/route.js
  75. +152 −0 node_modules/express/lib/utils.js
  76. +460 −0 node_modules/express/lib/view.js
  77. +40 −0 node_modules/express/lib/view/partial.js
  78. +210 −0 node_modules/express/lib/view/view.js
  79. +11 −0 node_modules/express/node_modules/connect/.npmignore
  80. +24 −0 node_modules/express/node_modules/connect/LICENSE
  81. +2 −0 node_modules/express/node_modules/connect/index.js
  82. +81 −0 node_modules/express/node_modules/connect/lib/cache.js
  83. +106 −0 node_modules/express/node_modules/connect/lib/connect.js
  84. +218 −0 node_modules/express/node_modules/connect/lib/http.js
  85. +47 −0 node_modules/express/node_modules/connect/lib/https.js
  86. +46 −0 node_modules/express/node_modules/connect/lib/index.js
  87. +93 −0 node_modules/express/node_modules/connect/lib/middleware/basicAuth.js
  88. +196 −0 node_modules/express/node_modules/connect/lib/middleware/bodyParser.js
  89. +163 −0 node_modules/express/node_modules/connect/lib/middleware/compiler.js
  90. +146 −0 node_modules/express/node_modules/connect/lib/middleware/compress.js
  91. +46 −0 node_modules/express/node_modules/connect/lib/middleware/cookieParser.js
  92. +105 −0 node_modules/express/node_modules/connect/lib/middleware/csrf.js
  93. +222 −0 node_modules/express/node_modules/connect/lib/middleware/directory.js
  94. +100 −0 node_modules/express/node_modules/connect/lib/middleware/errorHandler.js
  95. +76 −0 node_modules/express/node_modules/connect/lib/middleware/favicon.js
  96. +80 −0 node_modules/express/node_modules/connect/lib/middleware/limit.js
  97. +299 −0 node_modules/express/node_modules/connect/lib/middleware/logger.js
  98. +38 −0 node_modules/express/node_modules/connect/lib/middleware/methodOverride.js
  99. +100 −0 node_modules/express/node_modules/connect/lib/middleware/profiler.js
  100. +40 −0 node_modules/express/node_modules/connect/lib/middleware/query.js
  101. +34 −0 node_modules/express/node_modules/connect/lib/middleware/responseTime.js
  102. +379 −0 node_modules/express/node_modules/connect/lib/middleware/router.js
  103. +345 −0 node_modules/express/node_modules/connect/lib/middleware/session.js
  104. +126 −0 node_modules/express/node_modules/connect/lib/middleware/session/cookie.js
  105. +131 −0 node_modules/express/node_modules/connect/lib/middleware/session/memory.js
  106. +137 −0 node_modules/express/node_modules/connect/lib/middleware/session/session.js
  107. +87 −0 node_modules/express/node_modules/connect/lib/middleware/session/store.js
  108. +225 −0 node_modules/express/node_modules/connect/lib/middleware/static.js
  109. +175 −0 node_modules/express/node_modules/connect/lib/middleware/staticCache.js
  110. +44 −0 node_modules/express/node_modules/connect/lib/middleware/vhost.js
  111. +79 −0 node_modules/express/node_modules/connect/lib/patch.js
  112. +75 −0 node_modules/express/node_modules/connect/lib/public/directory.html
  113. +13 −0 node_modules/express/node_modules/connect/lib/public/error.html
  114. BIN node_modules/express/node_modules/connect/lib/public/favicon.ico
  115. BIN node_modules/express/node_modules/connect/lib/public/icons/page.png
  116. BIN node_modules/express/node_modules/connect/lib/public/icons/page_add.png
  117. BIN node_modules/express/node_modules/connect/lib/public/icons/page_attach.png
  118. BIN node_modules/express/node_modules/connect/lib/public/icons/page_code.png
  119. BIN node_modules/express/node_modules/connect/lib/public/icons/page_copy.png
  120. BIN node_modules/express/node_modules/connect/lib/public/icons/page_delete.png
  121. BIN node_modules/express/node_modules/connect/lib/public/icons/page_edit.png
  122. BIN node_modules/express/node_modules/connect/lib/public/icons/page_error.png
  123. BIN node_modules/express/node_modules/connect/lib/public/icons/page_excel.png
  124. BIN node_modules/express/node_modules/connect/lib/public/icons/page_find.png
  125. BIN node_modules/express/node_modules/connect/lib/public/icons/page_gear.png
  126. BIN node_modules/express/node_modules/connect/lib/public/icons/page_go.png
  127. BIN node_modules/express/node_modules/connect/lib/public/icons/page_green.png
  128. BIN node_modules/express/node_modules/connect/lib/public/icons/page_key.png
  129. BIN node_modules/express/node_modules/connect/lib/public/icons/page_lightning.png
  130. BIN node_modules/express/node_modules/connect/lib/public/icons/page_link.png
  131. BIN node_modules/express/node_modules/connect/lib/public/icons/page_paintbrush.png
  132. BIN node_modules/express/node_modules/connect/lib/public/icons/page_paste.png
  133. BIN node_modules/express/node_modules/connect/lib/public/icons/page_red.png
  134. BIN node_modules/express/node_modules/connect/lib/public/icons/page_refresh.png
  135. BIN node_modules/express/node_modules/connect/lib/public/icons/page_save.png
  136. BIN node_modules/express/node_modules/connect/lib/public/icons/page_white.png
  137. BIN node_modules/express/node_modules/connect/lib/public/icons/page_white_acrobat.png
  138. BIN node_modules/express/node_modules/connect/lib/public/icons/page_white_actionscript.png
  139. BIN node_modules/express/node_modules/connect/lib/public/icons/page_white_add.png
  140. BIN node_modules/express/node_modules/connect/lib/public/icons/page_white_c.png
  141. BIN node_modules/express/node_modules/connect/lib/public/icons/page_white_camera.png
  142. BIN node_modules/express/node_modules/connect/lib/public/icons/page_white_cd.png
  143. BIN node_modules/express/node_modules/connect/lib/public/icons/page_white_code.png
  144. BIN node_modules/express/node_modules/connect/lib/public/icons/page_white_code_red.png
  145. BIN node_modules/express/node_modules/connect/lib/public/icons/page_white_coldfusion.png
  146. BIN node_modules/express/node_modules/connect/lib/public/icons/page_white_compressed.png
  147. BIN node_modules/express/node_modules/connect/lib/public/icons/page_white_copy.png
  148. BIN node_modules/express/node_modules/connect/lib/public/icons/page_white_cplusplus.png
  149. BIN node_modules/express/node_modules/connect/lib/public/icons/page_white_csharp.png
  150. BIN node_modules/express/node_modules/connect/lib/public/icons/page_white_cup.png
  151. BIN node_modules/express/node_modules/connect/lib/public/icons/page_white_database.png
  152. BIN node_modules/express/node_modules/connect/lib/public/icons/page_white_delete.png
  153. BIN node_modules/express/node_modules/connect/lib/public/icons/page_white_dvd.png
  154. BIN node_modules/express/node_modules/connect/lib/public/icons/page_white_edit.png
  155. BIN node_modules/express/node_modules/connect/lib/public/icons/page_white_error.png
  156. BIN node_modules/express/node_modules/connect/lib/public/icons/page_white_excel.png
  157. BIN node_modules/express/node_modules/connect/lib/public/icons/page_white_find.png
  158. BIN node_modules/express/node_modules/connect/lib/public/icons/page_white_flash.png
  159. BIN node_modules/express/node_modules/connect/lib/public/icons/page_white_freehand.png
  160. BIN node_modules/express/node_modules/connect/lib/public/icons/page_white_gear.png
  161. BIN node_modules/express/node_modules/connect/lib/public/icons/page_white_get.png
  162. BIN node_modules/express/node_modules/connect/lib/public/icons/page_white_go.png
  163. BIN node_modules/express/node_modules/connect/lib/public/icons/page_white_h.png
  164. BIN node_modules/express/node_modules/connect/lib/public/icons/page_white_horizontal.png
  165. BIN node_modules/express/node_modules/connect/lib/public/icons/page_white_key.png
  166. BIN node_modules/express/node_modules/connect/lib/public/icons/page_white_lightning.png
  167. BIN node_modules/express/node_modules/connect/lib/public/icons/page_white_link.png
  168. BIN node_modules/express/node_modules/connect/lib/public/icons/page_white_magnify.png
  169. BIN node_modules/express/node_modules/connect/lib/public/icons/page_white_medal.png
  170. BIN node_modules/express/node_modules/connect/lib/public/icons/page_white_office.png
  171. BIN node_modules/express/node_modules/connect/lib/public/icons/page_white_paint.png
  172. BIN node_modules/express/node_modules/connect/lib/public/icons/page_white_paintbrush.png
  173. BIN node_modules/express/node_modules/connect/lib/public/icons/page_white_paste.png
  174. BIN node_modules/express/node_modules/connect/lib/public/icons/page_white_php.png
  175. BIN node_modules/express/node_modules/connect/lib/public/icons/page_white_picture.png
  176. BIN node_modules/express/node_modules/connect/lib/public/icons/page_white_powerpoint.png
  177. BIN node_modules/express/node_modules/connect/lib/public/icons/page_white_put.png
  178. BIN node_modules/express/node_modules/connect/lib/public/icons/page_white_ruby.png
  179. BIN node_modules/express/node_modules/connect/lib/public/icons/page_white_stack.png
  180. BIN node_modules/express/node_modules/connect/lib/public/icons/page_white_star.png
  181. BIN node_modules/express/node_modules/connect/lib/public/icons/page_white_swoosh.png
  182. BIN node_modules/express/node_modules/connect/lib/public/icons/page_white_text.png
  183. BIN node_modules/express/node_modules/connect/lib/public/icons/page_white_text_width.png
  184. BIN node_modules/express/node_modules/connect/lib/public/icons/page_white_tux.png
  185. BIN node_modules/express/node_modules/connect/lib/public/icons/page_white_vector.png
  186. BIN node_modules/express/node_modules/connect/lib/public/icons/page_white_visualstudio.png
  187. BIN node_modules/express/node_modules/connect/lib/public/icons/page_white_width.png
  188. BIN node_modules/express/node_modules/connect/lib/public/icons/page_white_word.png
  189. BIN node_modules/express/node_modules/connect/lib/public/icons/page_white_world.png
  190. BIN node_modules/express/node_modules/connect/lib/public/icons/page_white_wrench.png
  191. BIN node_modules/express/node_modules/connect/lib/public/icons/page_white_zip.png
  192. BIN node_modules/express/node_modules/connect/lib/public/icons/page_word.png
  193. BIN node_modules/express/node_modules/connect/lib/public/icons/page_world.png
  194. +141 −0 node_modules/express/node_modules/connect/lib/public/style.css
  195. +451 −0 node_modules/express/node_modules/connect/lib/utils.js
  196. +4 −0 node_modules/express/node_modules/connect/node_modules/formidable/.npmignore
  197. +4 −0 node_modules/express/node_modules/connect/node_modules/formidable/.travis.yml
  198. +14 −0 node_modules/express/node_modules/connect/node_modules/formidable/Makefile
  199. +311 −0 node_modules/express/node_modules/connect/node_modules/formidable/Readme.md
  200. +3 −0 node_modules/express/node_modules/connect/node_modules/formidable/TODO
  201. +70 −0 ..._modules/express/node_modules/connect/node_modules/formidable/benchmark/bench-multipart-parser.js
  202. +43 −0 node_modules/express/node_modules/connect/node_modules/formidable/example/post.js
  203. +48 −0 node_modules/express/node_modules/connect/node_modules/formidable/example/upload.js
  204. +1 −0 node_modules/express/node_modules/connect/node_modules/formidable/index.js
  205. +73 −0 node_modules/express/node_modules/connect/node_modules/formidable/lib/file.js
Sorry, we could not display the entire diff because too many files (806) changed.
View
19 LICENSE
@@ -0,0 +1,19 @@
+Copyright (C) 2012 Hakim El Hattab, http://hakim.se
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
View
15 README.md
@@ -1,2 +1,15 @@
selenium-2012-yapceu-slides
-===========================
+===========================
+
+How to create Selenium tests with Perl. Topics include:
+
+- The Selenium IDE
+- Mysteriously unreliable tests which sometimes pass, sometimes don't
+- Test::WWW::Selenium
+- Test::WWW::Selenium::More
+- Using Moose roles to compose your tests
+
+HTML version
+------------
+http://kablamo.org/selenium-2012-yapceu-slides/
+
View
15 app.psgi
@@ -0,0 +1,15 @@
+use Plack::Builder;
+
+builder {
+ # These files can be served directly
+ enable 'Static',
+ path => qr{\.(gif|png|jpg|swf|ico|mov|mp3|pdf|js|css)$},
+ root => "./include";
+
+ enable 'TemplateToolkit',
+ INCLUDE_PATH => "./tt", # required
+ extension => '.tt',
+ pass_through => 1; # delegate missing templates to $app
+
+ $app;
+}
View
46 basicTestCase
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head profile="http://selenium-ide.openqa.org/profiles/test-case">
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<link rel="selenium.base" href="http://localhost:5000/" />
+<title>basicTestCase</title>
+</head>
+<body>
+<table cellpadding="1" cellspacing="1" border="1">
+<thead>
+<tr><td rowspan="1" colspan="3">basicTestCase</td></tr>
+</thead><tbody>
+<tr>
+ <td>open</td>
+ <td>/index.tt</td>
+ <td></td>
+</tr>
+<tr>
+ <td>type</td>
+ <td>id=searchInput</td>
+ <td>cat pictures</td>
+</tr>
+<tr>
+ <td>click</td>
+ <td>id=searchButton</td>
+ <td></td>
+</tr>
+<tr>
+ <td>verifyText</td>
+ <td>xpath=//div[@id=&quot;howMany&quot;]</td>
+ <td>2 bajillion results</td>
+</tr>
+<tr>
+ <td>click</td>
+ <td>link=2</td>
+ <td></td>
+</tr>
+<tr>
+ <td>verifyText</td>
+ <td>css=div#howMany</td>
+ <td>2 bajillion results</td>
+</tr>
+</tbody></table>
+</body>
+</html>
View
1,029 css/main.css
@@ -0,0 +1,1029 @@
+@charset "UTF-8";
+:focus {outline: none}
+del {color: #999}
+.del {color: #999}
+a {color: greenyellow}
+/**
+ * Main styles for reveal.js
+ *
+ * @author Hakim El Hattab
+ */
+
+
+/*********************************************
+ * FONT-FACE DEFINITIONS
+ *********************************************/
+
+@font-face {
+ font-family: 'League Gothic';
+ src: url('../lib/font/league_gothic-webfont.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+
+/*********************************************
+ * GLOBAL STYLES
+ *********************************************/
+
+html, body {
+ padding: 0;
+ margin: 0;
+ width: 100%;
+ height: 100%;
+ min-height: 600px;
+}
+
+body {
+ position: relative;
+ padding: 0;
+ margin: 0;
+ overflow: hidden;
+
+ font-family: 'Lato', Times, 'Times New Roman', serif;
+ font-size: 46px;
+ font-weight: 200;
+ letter-spacing: -0.02em;
+ color: #eee;
+
+ background: #1c1e20;
+ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM1NTVhNWYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMWMxZTIwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
+ background: -moz-radial-gradient(center, ellipse cover, rgba(85,90,95,1) 0%, rgba(28,30,32,1) 100%);
+ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(85,90,95,1)), color-stop(100%,rgba(28,30,32,1)));
+ background: -webkit-radial-gradient(center, ellipse cover, rgba(85,90,95,1) 0%,rgba(28,30,32,1) 100%);
+ background: -o-radial-gradient(center, ellipse cover, rgba(85,90,95,1) 0%,rgba(28,30,32,1) 100%);
+ background: -ms-radial-gradient(center, ellipse cover, rgba(85,90,95,1) 0%,rgba(28,30,32,1) 100%);
+ background: radial-gradient(center, ellipse cover, rgba(85,90,95,1) 0%,rgba(28,30,32,1) 100%);
+}
+
+/*********************************************
+ * HEADERS
+ *********************************************/
+.reveal h1,
+.reveal h2,
+.reveal h3,
+.reveal h4 {
+ margin: 0 0 20px 0;
+
+ color: #eee;
+
+ font-family: 'League Gothic', sans-serif;
+ line-height: 0.9em;
+ letter-spacing: 0.02em;
+
+ text-transform: uppercase;
+ text-shadow: 0px 0px 6px rgba(0,0,0,0.2);
+}
+
+.reveal h1 { font-size: 156px; }
+.reveal h2 { font-size: 96px; }
+.reveal h3 { font-size: 76px; }
+.reveal h4 { font-size: 46px; }
+
+.reveal h1.inverted,
+.reveal h2.inverted,
+.reveal h3.inverted,
+.reveal h4.inverted {
+ color: #fff;
+ text-shadow: 0px 0px 2px rgba(0,0,0,0.2);
+}
+
+.reveal h1 {
+ text-shadow: 0 1px 0 #ccc,
+ 0 2px 0 #c9c9c9,
+ 0 3px 0 #bbb,
+ 0 4px 0 #b9b9b9,
+ 0 5px 0 #aaa,
+ 0 6px 1px rgba(0,0,0,.1),
+ 0 0 5px rgba(0,0,0,.1),
+ 0 1px 3px rgba(0,0,0,.3),
+ 0 3px 5px rgba(0,0,0,.2),
+ 0 5px 10px rgba(0,0,0,.25),
+ 0 20px 20px rgba(0,0,0,.15);
+}
+
+
+/*********************************************
+ * VIEW FRAGMENTS
+ *********************************************/
+
+.reveal .slides section .fragment {
+ opacity: 0;
+
+ -webkit-transition: all .2s ease;
+ -moz-transition: all .2s ease;
+ -ms-transition: all .2s ease;
+ -o-transition: all .2s ease;
+ transition: all .2s ease;
+}
+ .reveal .slides section .fragment.visible {
+ opacity: 1;
+ }
+
+
+/*********************************************
+ * DEFAULT ELEMENT STYLES
+ *********************************************/
+
+.reveal .slides section {
+ line-height: 1.2em;
+ font-weight: normal;
+}
+
+.reveal strong,
+.reveal b {
+ font-weight: bold;
+}
+
+.reveal em,
+.reveal i {
+ font-style: italic;
+}
+
+.reveal ol,
+.reveal ul {
+ display: inline-block;
+
+ text-align: left;
+ margin: 0 auto;
+}
+
+.reveal ol {
+ list-style-type: decimal;
+}
+
+.reveal ul {
+ list-style-type: disc;
+}
+
+.reveal ul ul {
+ list-style-type: square;
+}
+
+.reveal ul ul ul {
+ list-style-type: circle;
+}
+
+.reveal ul ul,
+.reveal ul ol,
+.reveal ol ol,
+.reveal ol ul {
+ display: block;
+ margin-left: 40px;
+}
+
+.reveal p {
+ margin-bottom: 10px;
+}
+
+.reveal blockquote {
+ display: block;
+ position: relative;
+ width: 70%;
+ margin: 5px auto;
+ padding: 5px;
+
+ font-style: italic;
+ background: rgba(255, 255, 255, 0.05);
+ box-shadow: 0px 0px 2px rgba(0,0,0,0.2);
+}
+ .reveal blockquote:before {
+ content: '';
+ }
+ .reveal blockquote:after {
+ content: '';
+ }
+
+.reveal pre {
+ display: block;
+ position: relative;
+ width: 100%;
+ margin: 10px auto;
+
+ text-align: left;
+ font-size: 30px;
+ font-family: monospace;
+ line-height: 1.2em;
+
+ word-wrap: break-word;
+
+ /* box-shadow: 0px 0px 6px rgba(0,0,0,0.3); */
+}
+
+.reveal code {
+ font-family: monospace;
+}
+
+.reveal table th,
+.reveal table td {
text-align: left;
+   padding-right: .3em;
+}
+
+.reveal table th {
text-shadow: rgb(255,255,255) 1px 1px 2px;
+}
+
+.reveal sup {
+ vertical-align: super;
+}
+.reveal sub {
+ vertical-align: sub;
+}
+
+.reveal small {
+ font-size: 60%;
+ line-height: 1em;
+ vertical-align: top;
+}
+
+.reveal small * {
+ vertical-align: top;
+}
+
+.reveal q {
+ font-style: italic;
+}
+ .reveal q:before {
+ content: '';
+ }
+ .reveal q:after {
+ content: '';
+ }
+
+.reveal a:not(.image) {
+ color: hsl(185, 85%, 50%);
+ text-decoration: none;
+
+ -webkit-transition: color .15s ease;
+ -moz-transition: color .15s ease;
+ -ms-transition: color .15s ease;
+ -o-transition: color .15s ease;
+ transition: color .15s ease;
+}
+
+ .reveal a:not(.image):hover {
+ color: hsl(185, 85%, 70%);
+
+ text-shadow: none;
+ border: none;
+ border-radius: 2px;
+ }
+
+.reveal section img {
+ margin: 30px 0 0 0;
+ background: rgba(255,255,255,0.12);
+ border: 4px solid #eee;
+
+ -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+ -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+
+ -webkit-transition: all .2s linear;
+ -moz-transition: all .2s linear;
+ -ms-transition: all .2s linear;
+ -o-transition: all .2s linear;
+ transition: all .2s linear;
+}
+
+ .reveal a:hover img {
+ background: rgba(255,255,255,0.2);
+ border-color: #13DAEC;
+
+ -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
+ -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
+ }
+
+
+/*********************************************
+ * CONTROLS
+ *********************************************/
+
+.reveal .controls {
+ display: none;
+ position: fixed;
+ width: 100px;
+ height: 100px;
+ z-index: 30;
+
+ right: 0;
+ bottom: 0;
+}
+
+ .reveal .controls a {
+ font-size: 30px;
+ position: absolute;
+ opacity: 0.1;
+ color: #fff;
+ }
+ .reveal .controls a.enabled {
+ opacity: 0.6;
+ color: hsl(185, 85%, 70%);
+
+ text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3);
+ }
+ .reveal .controls a.enabled:active {
+ margin-top: 1px;
+ }
+
+ .reveal .controls .left {
+ top: 30px;
+ }
+
+ .reveal .controls .right {
+ left: 60px;
+ top: 30px;
+ }
+
+ .reveal .controls .up {
+ left: 30px;
+ }
+
+ .reveal .controls .down {
+ left: 30px;
+ top: 60px;
+
+ }
+
+
+/*********************************************
+ * PROGRESS BAR
+ *********************************************/
+
+.reveal .progress {
+ position: fixed;
+ display: none;
+ height: 3px;
+ width: 100%;
+ bottom: 0;
+ left: 0;
+
+ background: rgba(0,0,0,0.2);
+}
+
+ .reveal .progress span {
+ display: block;
+ background: hsl(185, 85%, 50%);
+ height: 100%;
+ width: 0px;
+
+ -webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+ -moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+ -ms-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+ -o-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+ transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+ }
+
+/*********************************************
+ * ROLLING LINKS
+ *********************************************/
+
+.reveal .roll {
+ display: inline-block;
+ overflow: hidden;
+
+ vertical-align: top;
+
+ -webkit-perspective: 400px;
+ -moz-perspective: 400px;
+ -ms-perspective: 400px;
+ perspective: 400px;
+
+ -webkit-perspective-origin: 50% 50%;
+ -moz-perspective-origin: 50% 50%;
+ -ms-perspective-origin: 50% 50%;
+ perspective-origin: 50% 50%;
+}
+ .reveal .roll:hover {
+ background: none;
+ text-shadow: none;
+ }
+.reveal .roll span {
+ display: block;
+ position: relative;
+ padding: 0 2px;
+
+ pointer-events: none;
+
+ -webkit-transition: all 400ms ease;
+ -moz-transition: all 400ms ease;
+ -ms-transition: all 400ms ease;
+ transition: all 400ms ease;
+
+ -webkit-transform-origin: 50% 0%;
+ -moz-transform-origin: 50% 0%;
+ -ms-transform-origin: 50% 0%;
+ transform-origin: 50% 0%;
+
+ -webkit-transform-style: preserve-3d;
+ -moz-transform-style: preserve-3d;
+ -ms-transform-style: preserve-3d;
+ transform-style: preserve-3d;
+}
+ .reveal .roll:hover span {
+ background: rgba(0,0,0,0.5);
+
+ -webkit-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
+ -moz-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
+ -ms-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
+ transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
+ }
+.reveal .roll span:after {
+ content: attr(data-title);
+
+ display: block;
+ position: absolute;
+ left: 0;
+ top: 0;
+ padding: 0 2px;
+
+ color: #fff;
+ background: hsl(185, 60%, 35%);
+
+ -webkit-transform-origin: 50% 0%;
+ -moz-transform-origin: 50% 0%;
+ -ms-transform-origin: 50% 0%;
+ transform-origin: 50% 0%;
+
+ -webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
+ -moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
+ -ms-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
+ transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
+}
+
+
+/*********************************************
+ * SLIDES
+ *********************************************/
+
+.reveal .slides {
+ position: absolute;
+ width: 900px;
+ height: 600px;
+
+ left: 50%;
+ top: 50%;
+ margin-left: -450px;
+ margin-top: -320px;
+ padding: 0px 0px;
+
+ text-align: center;
+
+ -webkit-transition: -webkit-perspective .4s ease;
+ -moz-transition: -moz-perspective .4s ease;
+ -ms-transition: -ms-perspective .4s ease;
+ -o-transition: -o-perspective .4s ease;
+ transition: perspective .4s ease;
+
+ -webkit-perspective: 600px;
+ -moz-perspective: 600px;
+ -ms-perspective: 600px;
+ perspective: 600px;
+
+ -webkit-perspective-origin: 50% 25%;
+ -moz-perspective-origin: 50% 25%;
+ -ms-perspective-origin: 50% 25%;
+ perspective-origin: 50% 25%;
+}
+
+.reveal .slides>section,
+.reveal .slides>section>section {
+ display: none;
+ position: absolute;
+ width: 100%;
+ min-height: 600px;
+
+ z-index: 10;
+
+ -webkit-transform-style: preserve-3d;
+ -moz-transform-style: preserve-3d;
+ -ms-transform-style: preserve-3d;
+ transform-style: preserve-3d;
+
+ -webkit-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+ -moz-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+ -ms-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+ -o-transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+ transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
+}
+
+.reveal .slides>section.present {
+ display: block;
+ z-index: 11;
+ opacity: 1;
+}
+
+
+/*********************************************
+ * DEFAULT TRANSITION
+ *********************************************/
+
+.reveal .slides>section.past {
+ display: block;
+ opacity: 0;
+
+ -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
+ -moz-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
+ -ms-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
+ transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0);
+}
+.reveal .slides>section.future {
+ display: block;
+ opacity: 0;
+
+ -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
+ -moz-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
+ -ms-transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
+ transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0);
+}
+
+.reveal .slides>section>section.past {
+ display: block;
+ opacity: 0;
+
+ -webkit-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
+ -moz-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
+ -ms-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
+ transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0);
+}
+.reveal .slides>section>section.future {
+ display: block;
+ opacity: 0;
+
+ -webkit-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
+ -moz-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
+ -ms-transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
+ transform: translate3d(0, 50%, 0) rotateX(-70deg) translate3d(0, 50%, 0);
+}
+
+
+/*********************************************
+ * CONCAVE TRANSITION
+ *********************************************/
+
+.reveal.concave .slides>section.past {
+ -webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
+ -moz-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
+ -ms-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
+ transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0);
+}
+.reveal.concave .slides>section.future {
+ -webkit-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
+ -moz-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
+ -ms-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
+ transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0);
+}
+
+.reveal.concave .slides>section>section.past {
+ -webkit-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
+ -moz-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
+ -ms-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
+ transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0);
+}
+.reveal.concave .slides>section>section.future {
+ -webkit-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
+ -moz-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
+ -ms-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
+ transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0);
+}
+
+
+/*********************************************
+ * LINEAR TRANSITION
+ *********************************************/
+
+.reveal.linear .slides>section.past {
+ -webkit-transform: translate(-150%, 0);
+ -moz-transform: translate(-150%, 0);
+ -ms-transform: translate(-150%, 0);
+ -o-transform: translate(-150%, 0);
+ transform: translate(-150%, 0);
+}
+.reveal.linear .slides>section.future {
+ -webkit-transform: translate(150%, 0);
+ -moz-transform: translate(150%, 0);
+ -ms-transform: translate(150%, 0);
+ -o-transform: translate(150%, 0);
+ transform: translate(150%, 0);
+}
+
+.reveal.linear .slides>section>section.past {
+ -webkit-transform: translate(0, -150%);
+ -moz-transform: translate(0, -150%);
+ -ms-transform: translate(0, -150%);
+ -o-transform: translate(0, -150%);
+ transform: translate(0, -150%);
+}
+.reveal.linear .slides>section>section.future {
+ -webkit-transform: translate(0, 150%);
+ -moz-transform: translate(0, 150%);
+ -ms-transform: translate(0, 150%);
+ -o-transform: translate(0, 150%);
+ transform: translate(0, 150%);
+}
+
+/*********************************************
+ * BOX TRANSITION
+ *********************************************/
+
+.reveal.cube .slides {
+ margin-top: -350px;
+
+ -webkit-perspective-origin: 50% 25%;
+ -moz-perspective-origin: 50% 25%;
+ -ms-perspective-origin: 50% 25%;
+ perspective-origin: 50% 25%;
+
+ -webkit-perspective: 1300px;
+ -moz-perspective: 1300px;
+ -ms-perspective: 1300px;
+ perspective: 1300px;
+}
+
+.reveal.cube .slides section {
+ padding: 30px;
+
+ -webkit-backface-visibility: hidden;
+ -moz-backface-visibility: hidden;
+ -ms-backface-visibility: hidden;
+ backface-visibility: hidden;
+
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+ .reveal.cube .slides section:not(.stack):before {
+ content: '';
+ position: absolute;
+ display: block;
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ background: #232628;
+ border-radius: 4px;
+
+ -webkit-transform: translateZ( -20px );
+ -moz-transform: translateZ( -20px );
+ -ms-transform: translateZ( -20px );
+ -o-transform: translateZ( -20px );
+ transform: translateZ( -20px );
+ }
+ .reveal.cube .slides section:not(.stack):after {
+ content: '';
+ position: absolute;
+ display: block;
+ width: 90%;
+ height: 30px;
+ left: 5%;
+ bottom: 0;
+ background: none;
+ z-index: 1;
+
+ border-radius: 4px;
+ box-shadow: 0px 95px 25px rgba(0,0,0,0.2);
+
+ -webkit-transform: translateZ(-90px) rotateX( 65deg );
+ -moz-transform: translateZ(-90px) rotateX( 65deg );
+ -ms-transform: translateZ(-90px) rotateX( 65deg );
+ -o-transform: translateZ(-90px) rotateX( 65deg );
+ transform: translateZ(-90px) rotateX( 65deg );
+ }
+
+.reveal.cube .slides>section.stack {
+ padding: 0;
+ background: none;
+}
+
+.reveal.cube .slides>section.past {
+ -webkit-transform-origin: 100% 0%;
+ -moz-transform-origin: 100% 0%;
+ -ms-transform-origin: 100% 0%;
+ transform-origin: 100% 0%;
+
+ -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg);
+ -moz-transform: translate3d(-100%, 0, 0) rotateY(-90deg);
+ -ms-transform: translate3d(-100%, 0, 0) rotateY(-90deg);
+ transform: translate3d(-100%, 0, 0) rotateY(-90deg);
+}
+
+.reveal.cube .slides>section.future {
+ -webkit-transform-origin: 0% 0%;
+ -moz-transform-origin: 0% 0%;
+ -ms-transform-origin: 0% 0%;
+ transform-origin: 0% 0%;
+
+ -webkit-transform: translate3d(100%, 0, 0) rotateY(90deg);
+ -moz-transform: translate3d(100%, 0, 0) rotateY(90deg);
+ -ms-transform: translate3d(100%, 0, 0) rotateY(90deg);
+ transform: translate3d(100%, 0, 0) rotateY(90deg);
+}
+
+.reveal.cube .slides>section>section.past {
+ -webkit-transform-origin: 0% 100%;
+ -moz-transform-origin: 0% 100%;
+ -ms-transform-origin: 0% 100%;
+ transform-origin: 0% 100%;
+
+ -webkit-transform: translate3d(0, -100%, 0) rotateX(90deg);
+ -moz-transform: translate3d(0, -100%, 0) rotateX(90deg);
+ -ms-transform: translate3d(0, -100%, 0) rotateX(90deg);
+ transform: translate3d(0, -100%, 0) rotateX(90deg);
+}
+
+.reveal.cube .slides>section>section.future {
+ -webkit-transform-origin: 0% 0%;
+ -moz-transform-origin: 0% 0%;
+ -ms-transform-origin: 0% 0%;
+ transform-origin: 0% 0%;
+
+ -webkit-transform: translate3d(0, 100%, 0) rotateX(-90deg);
+ -moz-transform: translate3d(0, 100%, 0) rotateX(-90deg);
+ -ms-transform: translate3d(0, 100%, 0) rotateX(-90deg);
+ transform: translate3d(0, 100%, 0) rotateX(-90deg);
+}
+
+
+/*********************************************
+ * PAGE TRANSITION
+ *********************************************/
+
+.reveal.page .slides {
+ margin-top: -350px;
+
+ -webkit-perspective-origin: 50% 50%;
+ -moz-perspective-origin: 50% 50%;
+ -ms-perspective-origin: 50% 50%;
+ perspective-origin: 50% 50%;
+
+ -webkit-perspective: 3000px;
+ -moz-perspective: 3000px;
+ -ms-perspective: 3000px;
+ perspective: 3000px;
+}
+
+.reveal.page .slides section {
+ padding: 30px;
+
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+ .reveal.page .slides section.past {
+ z-index: 12;
+ }
+ .reveal.page .slides section:not(.stack):before {
+ content: '';
+ position: absolute;
+ display: block;
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ background: rgba(0,0,0,0.2);
+
+ -webkit-transform: translateZ( -20px );
+ -moz-transform: translateZ( -20px );
+ -ms-transform: translateZ( -20px );
+ -o-transform: translateZ( -20px );
+ transform: translateZ( -20px );
+ }
+ .reveal.page .slides section:not(.stack):after {
+ content: '';
+ position: absolute;
+ display: block;
+ width: 90%;
+ height: 30px;
+ left: 5%;
+ bottom: 0;
+ background: none;
+ z-index: 1;
+
+ border-radius: 4px;
+ box-shadow: 0px 95px 25px rgba(0,0,0,0.2);
+
+ -webkit-transform: translateZ(-90px) rotateX( 65deg );
+ }
+
+.reveal.page .slides>section.stack {
+ padding: 0;
+ background: none;
+}
+
+.reveal.page .slides>section.past {
+ -webkit-transform-origin: 0% 0%;
+ -moz-transform-origin: 0% 0%;
+ -ms-transform-origin: 0% 0%;
+ transform-origin: 0% 0%;
+
+ -webkit-transform: translate3d(-40%, 0, 0) rotateY(-80deg);
+ -moz-transform: translate3d(-40%, 0, 0) rotateY(-80deg);
+ -ms-transform: translate3d(-40%, 0, 0) rotateY(-80deg);
+ transform: translate3d(-40%, 0, 0) rotateY(-80deg);
+}
+
+.reveal.page .slides>section.future {
+ -webkit-transform-origin: 100% 0%;
+ -moz-transform-origin: 100% 0%;
+ -ms-transform-origin: 100% 0%;
+ transform-origin: 100% 0%;
+
+ -webkit-transform: translate3d(0, 0, 0);
+ -moz-transform: translate3d(0, 0, 0);
+ -ms-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+}
+
+.reveal.page .slides>section>section.past {
+ -webkit-transform-origin: 0% 0%;
+ -moz-transform-origin: 0% 0%;
+ -ms-transform-origin: 0% 0%;
+ transform-origin: 0% 0%;
+
+ -webkit-transform: translate3d(0, -40%, 0) rotateX(80deg);
+ -moz-transform: translate3d(0, -40%, 0) rotateX(80deg);
+ -ms-transform: translate3d(0, -40%, 0) rotateX(80deg);
+ transform: translate3d(0, -40%, 0) rotateX(80deg);
+}
+
+.reveal.page .slides>section>section.future {
+ -webkit-transform-origin: 0% 100%;
+ -moz-transform-origin: 0% 100%;
+ -ms-transform-origin: 0% 100%;
+ transform-origin: 0% 100%;
+
+ -webkit-transform: translate3d(0, 0, 0);
+ -moz-transform: translate3d(0, 0, 0);
+ -ms-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+}
+
+
+/*********************************************
+ * OVERVIEW
+ *********************************************/
+
+.reveal.overview .slides {
+ -webkit-perspective: 700px;
+ -moz-perspective: 700px;
+ -ms-perspective: 700px;
+ perspective: 700px;
+}
+
+.reveal.overview .slides section {
+ padding: 20px 0;
+ opacity: 1;
+ cursor: pointer;
+ background: rgba(0,0,0,0.1);
+}
+.reveal.overview .slides section .fragment {
+ opacity: 1;
+}
+.reveal.overview .slides section:after,
+.reveal.overview .slides section:before {
+ display: none !important;
+}
+.reveal.overview .slides section>section {
+ opacity: 1;
+ cursor: pointer;
+}
+ .reveal.overview .slides section:hover {
+ background: rgba(0,0,0,0.3);
+ }
+
+ .reveal.overview .slides section.present {
+ background: rgba(0,0,0,0.3);
+ }
+.reveal.overview .slides>section.stack {
+ background: none;
+ padding: 0;
+}
+
+
+/*********************************************
+ * FALLBACK
+ *********************************************/
+
+.no-transforms {
+ overflow-y: auto;
+}
+
+.no-transforms .slides section {
+ -webkit-transform: none;
+ -moz-transform: none;
+ -ms-transform: none;
+ transform: none;
+
+ display: block!important;
+ opacity: 1!important;
+ position: relative!important;
+}
+
+
+/*********************************************
+ * DEFAULT STATES
+ *********************************************/
+
+.state-background {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ background: rgba( 0, 0, 0, 0 );
+
+ -webkit-transition: background 800ms ease;
+ -moz-transition: background 800ms ease;
+ -ms-transition: background 800ms ease;
+ -o-transition: background 800ms ease;
+ transition: background 800ms ease;
+}
+.alert .state-background {
+ background: rgba( 200, 50, 30, 0.6 );
+}
+.soothe .state-background {
+ background: rgba( 50, 200, 90, 0.4 );
+}
+.blackout .state-background {
+ background: rgba( 0, 0, 0, 0.6 );
+}
+.code .state-background {
+ background: rgba( 0, 43, 54, 1 );
+}
+
+
+/*********************************************
+ * SPEAKER NOTES
+ *********************************************/
+
+.reveal aside.notes {
+ display: none;
+}
+
+
+/*********************************************
+ * NEON THEME
+ *********************************************/
+
+.theme-neon .reveal a,
+.theme-neon .reveal a:hover,
+.theme-neon .reveal .controls a.enabled {
+ color: #5de048;
+}
+
+.theme-neon .reveal .progress span,
+.theme-neon .reveal .roll span:after {
+ background: #5de048;
+}
+
+.theme-neon .reveal a.image:hover img {
+ border-color: #5de048;
+}
+
+
+/*********************************************
+ * BEIGE THEME
+ *********************************************/
+
+.theme-beige body {
+ color: #333;
+
+ background: #f7f3de;
+ background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(247,242,211,1) 100%);
+ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(247,242,211,1)));
+ background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%);
+ background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%);
+ background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%);
+ background: radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(247,242,211,1) 100%);
+}
+
+.theme-beige .reveal h1,
+.theme-beige .reveal h2,
+.theme-beige .reveal h3,
+.theme-beige .reveal h4,
+.theme-beige .reveal h5,
+.theme-beige .reveal h6 {
+ color: #333;
+ text-shadow: none;
+}
+
+.theme-beige .reveal a,
+.theme-beige .reveal a:hover {
+ color: #8b743d;
+ color: #999;
+ color: rgba( 0, 43, 154, 1 );
+}
+
+.theme-beige .reveal .controls a.enabled {
+ color: #8b743d;
+ color: rgba( 0, 43, 154, 1 );
+ color: #000;
+}
+
+.theme-beige .reveal .progress span,
+.theme-beige .reveal .roll span:after {
+ background: #8b743d;
+}
+
+.theme-beige .reveal a.image:hover img {
+ border-color: #8b743d;
+}
View
167 css/print.css
@@ -0,0 +1,167 @@
+/* Default Print Stylesheet Template
+ by Rob Glazebrook of CSSnewbie.com
+ Last Updated: June 4, 2008
+
+ Feel free (nay, compelled) to edit, append, and
+ manipulate this file as you see fit. */
+
+
+/* SECTION 1: Set default width, margin, float, and
+ background. This prevents elements from extending
+ beyond the edge of the printed page, and prevents
+ unnecessary background images from printing */
+body {
+ background: #fff url(none);
+ font-size: 13pt;
+ width: auto;
+ height: auto;
+ border: 0;
+ margin: 0 5%;
+ padding: 0;
+ float: none !important;
+ overflow: visible;
+}
+html {
+ background: #fff;
+ width: auto;
+ height: auto;
+ overflow: visible;
+}
+
+/* SECTION 2: Remove any elements not needed in print.
+ This would include navigation, ads, sidebars, etc. */
+.nestedarrow,
+.controls a,
+.reveal .progress span,
+.reveal.overview {
+ display:none;
+}
+
+/* SECTION 3: Set body font face, size, and color.
+ Consider using a serif font for readability. */
+body, p, td, li, div, a {
+ font-size: 13pt;
+ font-family: Georgia, "Times New Roman", Times, serif !important;
+ color: #000;
+}
+
+/* SECTION 4: Set heading font face, sizes, and color.
+ Diffrentiate your headings from your body text.
+ Perhaps use a large sans-serif for distinction. */
+h1,h2,h3,h4,h5,h6 {
+ color: #000!important;
+ height: auto;
+ line-height: normal;
+ font-family: Georgia, "Times New Roman", Times, serif !important;
+ text-shadow: 0 0 0 #000 !important;
+ text-align: left;
+ letter-spacing: normal;
+}
+/* Need to reduce the size of the fonts for printing */
+h1 { font-size: 26pt !important; }
+h2 { font-size: 22pt !important; }
+h3 { font-size: 20pt !important; }
+h4 { font-size: 20pt !important; font-variant: small-caps; }
+h5 { font-size: 19pt !important; }
+h6 { font-size: 18pt !important; font-style: italic; }
+
+/* SECTION 5: Make hyperlinks more usable.
+ Ensure links are underlined, and consider appending
+ the URL to the end of the link for usability. */
+a:link,
+a:visited {
+ color: #000 !important;
+ font-weight: bold;
+ text-decoration: underline;
+}
+.reveal a:link:after,
+.reveal a:visited:after {
+ content: " (" attr(href) ") ";
+ color: #222 !important;
+ font-size: 90%;
+}
+
+
+/* SECTION 6: more reveal.js specific additions by @skypanther */
+ul, ol, div, p {
+ visibility: visible;
+ position: static;
+ width: auto;
+ height: auto;
+ display: block;
+ overflow: visible;
+ margin: auto;
+ text-align: left !important;
+}
+.reveal .slides {
+ position: static;
+ width: auto;
+ height: auto;
+
+ left: auto;
+ top: auto;
+ margin-left: auto;
+ margin-top: auto;
+ padding: auto;
+
+ overflow: visible;
+ display: block;
+
+ text-align: center;
+ -webkit-perspective: none;
+ -moz-perspective: none;
+ -ms-perspective: none;
+ perspective: none;
+
+ -webkit-perspective-origin: 50% 50%; /* there isn't a none/auto value but 50-50 is the default */
+ -moz-perspective-origin: 50% 50%;
+ -ms-perspective-origin: 50% 50%;
+ perspective-origin: 50% 50%;
+}
+.reveal .slides>section, .reveal .slides>section>section,
+.reveal .slides>section.past, .reveal .slides>section.future,
+.reveal.linear .slides>section, .reveal.linear .slides>section>section,
+.reveal.linear .slides>section.past, .reveal.linear .slides>section.future {
+
+ visibility: visible;
+ position: static;
+ width: 90%;
+ height: auto;
+ display: block;
+ overflow: visible;
+
+ left: 0%;
+ top: 0%;
+ margin-left: 0px;
+ margin-top: 0px;
+ padding: 20px 0px;
+
+ opacity: 1;
+
+ -webkit-transform-style: flat;
+ -moz-transform-style: flat;
+ -ms-transform-style: flat;
+ transform-style: flat;
+
+ -webkit-transform: none;
+ -moz-transform: none;
+ -ms-transform: none;
+ transform: none;
+}
+.reveal section {
+ page-break-after: always !important;
+ display: block !important;
+}
+.reveal section.stack {
+ page-break-after: avoid !important;
+}
+.reveal section .fragment {
+ opacity: 1 !important;
+}
+.reveal section img {
+ display: block;
+ margin: 15px 0px;
+ background: rgba(255,255,255,1);
+ border: 1px solid #666;
+ box-shadow: none;
+}
View
57 css/reset.css
@@ -0,0 +1,57 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+ v2.0 | 20110126
+ License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+ display: block;
+}
+body {
+ line-height: 1;
+}
+ol, ul {
+ list-style: none;
+}
+blockquote, q {
+ quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+ content: '';
+ content: none;
+}
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+
+
+/* HTML5BP:
+ 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; }
+
View
70 include/minireset.css
@@ -0,0 +1,70 @@
+@import url(http://fonts.googleapis.com/css?family=Economica:400,700);
+/* === mini reset === */
+html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, input, textarea, table, caption, tbody, tfoot, thead, tr, th, td {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ outline: 0;
+ vertical-align: baseline;
+ background: transparent;
+}
+body {line-height: 1}
+ol, ul {list-style: disc inside none;}
+html, body, div, form, fieldset, legend, label {margin: 0; padding: 0}
+table {border-collapse: collapse; border-spacing: 0}
+th, td {text-align: left; vertical-align: top}
+h1, h2, h3, h4, h5, h6, th, td, caption {font-weight:normal}
+img {border: 0}
+input:hover {outline: 0}
+input:active {outline: 0}
+/* === clearing floats === */
+/* clear floated elements */
+/* http://sonspring.com/journal/clearing-floats */
+html body * span.clear,
+html body * div.clear,
+html body * li.clear,
+html body * dd.clear {
+ background: none;
+ border: 0;
+ clear: both;
+ display: block;
+ float: none;
+ overflow: hidden;
+ font-size: 12px;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ visibility: hidden;
+ width: 0;
+ height: 0;
+}
+/* http://www.positioniseverything.net/easyclearing.html */
+.clearfix:after {clear: both; content: '.'; display: block; visibility: hidden; height: 0;}
+.clearfix {display: inline-block;}
+* html .clearfix {height: 1%;}
+.clearfix {display: block;}
+/* === layout === */
+/* basic html */
+body {background: @color8; color: @color9; padding: 0 0 40px}
+/* headings */
+h1 {font-size: 2.0em}
+h2 {font-size: 1.5em}
+h3 {font-size: 1.4em}
+h4 {font-size: 1.3em}
+h5 {font-size: 1.2em}
+h6 {font-size: 1.1em}
+/* boxes */
+.box {
+ background:#444;
+ margin-bottom:20px;
+ padding:10px 10px 1px 10px;
+}
+/* menus */
+ul.menu {list-style:none; padding: .5em; border-top:1px solid #555; width: 10em; background: #444}
+ul.menu li {margin:0; padding-left: 1em; padding-right: 1em}
+ul.menu li {margin:0; padding-left: 1em; padding-right: 1em}
+ul.menu li a {display:block; padding: .5em; border-bottom:1px solid #555}
+ul.menu li a:active {background:#555}
+/* submenus */
+ul.menu ul {list-style:none; margin:0}
+ul.menu ul li a {padding-left:30px}
View
144 include/style.css
@@ -0,0 +1,144 @@
+body {font-size: 10pt; font-family: sans-serif; color: #333; margin: 0}
+
+.top {
+ color: #333;
+ width: 100%;
+ padding: 4em;
+ padding-top: 2em;
+ padding-bottom: 2em;
+ margin: 0;
+ margin-top: 2em;
+}
+.top h1 {
+ float: left;
+ font-size: 6em;
+}
+.top h2 {
+ float: left;
+ padding-top: 1em;
+ padding-left: 2em;
+ font-size: 2em;
+}
+a.login {
+ padding-left: 3em;
+ font-size: 1.3em;
+}
+
+form {margin: 0; padding: 0}
+input, textarea, label {
+ margin: .3em;
+ margin-right: 2em;
+ margin-left: 0;
+ padding: .5em;
+ font: 10pt sans-serif;
+ -moz-border-radius: 4px;
+ -webkit-border-radius: 4px;
+ background: #fff;
+ color: #333;
+ float: left;
+ border: solid 1px #aaa;
+}
+label {
+ border: 0px;
+ margin-bottom:0;
+ padding-left: 0em;
+ padding-right: 1em;
+ padding-bottom: .1em;
+ width: 8em;
+ font-size: 2em;
+}
+select {
+ padding: .5em;
+ padding-bottom: .4em;
+ font: 10pt sans-serif;
+ font-size: 1em;
+ -moz-border-radius: 4px;
+ -webkit-border-radius: 4px;
+ background: #fff;
+ color: #333;
+ border: solid 1px #777;
+}
+input {background: #eee; font-size: 1.5em}
+input.withPadding, label.withPadding {padding: .5em}
+
+button, button:visited, .btn, .btn:visited {
+ font: 10pt sans-serif;
+ display: inline-block;
+ padding-top: .5em;
+ padding-left: 1.1em;
+ padding-right: 1.1em;
+ padding-bottom: .5em;
+ margin: .3em;
+ margin-left: 0;
+ margin-right: .6em;
+ color: #333;
+ text-decoration: none;
+ -moz-border-radius: 4px;
+ -webkit-border-radius: 4px;
+ text-shadow: 0 -0px 0px rgba(0,0,0,0.25);
+ border: solid 1px #999;
+ position: relative;
+ cursor: pointer;
+ font-size: 1.5em;
+ font-weight: bold;
+ background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ccc), color-stop(.95, #fff));
+ background: -moz-linear-gradient(bottom, #ccc, #fff);
+}
+button:hover, .btn:hover {
+ border: solid 1px #666;
+}
+button:active, .btn:active {
+background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #aaa), color-stop(.05, #eee));
+background: -moz-linear-gradient(bottom, #aaa, #eee);
+}
+.wide {padding-left: 2.5em; padding-right: 2.5em}
+
+
+
+.box {
+ margin: 4em;
+ background: transparent;
+}
+.title {
+ font-size: 8em;
+}
+.header {
+ float: left;
+ margin-top: 0em;
+ font-size: 2em;
+}
+.login {
+}
+#howMany {
+ margin-top: 2em;
+ margin-bottom: 2em;
+ font-size: 2em;
+}
+.result {
+ margin-top: 1em;
+ margin-bottom: 0em;
+ font-size: 2em;
+}
+.paging {
+ margin-top 0em;
+ margin-bottom: 2em;
+ font-size: 2em;
+}
+
+#searchForm {
+ float: left;
+}
+#searchInput {
+ float: left;
+ margin-left: 3em;
+ margin-right: 0;
+ -moz-border-radius: 0px;
+ -webkit-border-radius: 0px;
+ width: 20em;
+}
+#searchButton {
+ float: left;
+ margin-left: 0;
+ -moz-border-radius: 0px;
+ -webkit-border-radius: 0px;
+}
View
523 index.html
@@ -0,0 +1,523 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title>reveal.js - HTML5 Presentations</title>
+ <meta name="description" content="Selenium and Perl">
+ <meta name="author" content="Eric Johnson (@kablamo)">
+ <meta name="apple-mobile-web-app-capable" content="yes" />
+ <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+ <link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
+ <link rel="stylesheet" href="css/reset.css">
+ <link rel="stylesheet" href="css/main.css">
+ <link rel="stylesheet" href="css/print.css" type="text/css" media="print">
+ <link rel="stylesheet" href="lib/css/solarized_dark.css">
+ </head>
+ <body>
+
+ <div class="reveal">
+
+ <!-- Used to fade in a background when a specific slide state is reached -->
+ <div class="state-background"></div>
+
+ <div class="slides">
+ <section>
+ <br>
+ <h1>Selenium<br>and<br>Perl</h1>
+ <h4>by Eric Johnson (@kablamo)</h4>
+ <script>if( navigator.userAgent.match( /(iPhone|iPad|iPod|Android)/i ) ) document.write( '<p style="color: rgba(0,0,0,0.3); text-shadow: none;">('+'Tap to navigate'+')</p>' );</script>
+ </section>
+
+ <section>
+ <h2>What is Selenium?</h2>
+ <ul>
+ <li class="fragment">A tool for testing your website</li>
+ <li class="fragment">Written in Java</li>
+ <li class="fragment">Similar to Test::WWW::Mechanize</li>
+ <li class="fragment">But tests at the browser level</li>
+ <li class="fragment">Exercises your JavaScript</li>
+ <li class="fragment">Tests your site in any browser</li>
+ </ul>
+ </section>
+
+ <section>
+ <h2>Selenium IDE</h2>
+ <ul>
+ <li class="fragment">Firefox plugin</li>
+ <li class="fragment">Designer can create tests</li>
+ <li class="fragment">Records your actions in the browser</li>
+ <li class="fragment">Replays them</li>
+ </ul>
+ </section>
+
+ <section>
+ <h2>Demo</h2>
+ </section>
+
+ <section>
+ <h2>Problems</h2>
+ <ul>
+ <li class="fragment">Unreliable tests</li>
+ <li class="fragment">It's not Perl</li>
+ <li class="fragment">Repetition: can't easily use libraries</li>
+ <li class="fragment">Lack of automation</li>
+ </ul>
+ </section>
+
+ <section>
+ <h2>Unreliable tests</h2>
+ <ul>
+ <h4 class="fragment">Problem</h4>
+ <div class="fragment">waitForPageToLoad does not handle ajax requests</div><br>
+ <h4 class="fragment">Solution</h4>
+ <div class="fragment">waitForTextPresent</div>
+ </ul>
+ </section>
+
+ <section>
+ <h2>Problems</h2>
+ <ul>
+ <del><li>Unreliable tests</li></del>
+ <li>It's not Perl</li>
+ <li>Repetition: can't easily use libraries</li>
+ <li>Lack of automation</li>
+ </ul>
+ </section>
+
+ <section>
+ <h2>Test::WWW::Selenium</h2>
+ </section>
+
+ <section>
+ <h2>4 ingredients</h2>
+ <ol>
+ <li class="fragment">Perl test</li>
+ <li class="fragment">Selenium server</li>
+ <li class="fragment">Web browser</li>
+ <li class="fragment">Website</li>
+ </ol>
+ </section>
+
+ <section data-state="code">
+ <pre><code contenteditable class="Perl">use Test::Most;
+use Test::WWW::Selenium;
+
+my $s = Test::WWW::Selenium->new(
+ host => "localhost",
+ port => 4444,
+ browser => "*firefox",
+ browser_url => "http://localhost:5000",
+);
+
+$s->open_ok("/index.tt");
+$s->wait_for_page_to_load_ok;
+$s->type_ok(searchInput => "cat pictures");
+$s->click_ok("searchButton");
+$s->wait_for_page_to_load_ok;
+$s->is_text_present_ok('2 bajillion results');
+
+done_testing;</code></pre>
+ </section>
+
+ <section data-state="code">
+ <pre><code contenteditable class="Perl">use Test::Most;
+use Test::WWW::Selenium;
+
+my $s = Test::WWW::Selenium->new(
+ host => "localhost",
+ port => 4444,
+ browser => "*firefox",
+ browser_url => "http://localhost:5000",
+);
+
+$s->open_ok("/index.tt"); sleep 2;
+$s->wait_for_page_to_load_ok; sleep 2;
+$s->type_ok(searchInput => "cat pics"); sleep 2;
+$s->click_ok("searchButton"); sleep 2;
+$s->wait_for_page_to_load_ok; sleep 2;
+$s->is_text_present_ok('2 bajillion results');
+
+done_testing;</code></pre>
+ </section>
+
+ <section>
+ <h2>Problems</h2>
+ <ul>
+ <del><li>Unreliable tests</li></del>
+ <del><li>It's not Perl</li></del>
+ <li>Repetition: can't easily use libraries</li>
+ <li class="fragment">Designers can't easily write tests</li>
+ <li>Lack of automation</li>
+ </ul>
+ </section>
+
+ <section data-state="code">
+ <pre><code contenteditable class="Perl">use Test::Most;
+use Test::WWW::Selenium;
+
+my $s = Test::WWW::Selenium->new(
+ host => "localhost",
+ port => 4444,
+ browser => "*firefox",
+ browser_url => "http://localhost:5000",
+);
+
+$s->open_ok("/index.tt");
+$s->wait_for_page_to_load_ok;
+$s->type_ok(searchInput => "cat pictures");
+$s->click_ok("searchButton");
+$s->wait_for_page_to_load_ok;
+$s->is_text_present_ok('2 bajillion results');
+
+done_testing;</code></pre>
+ </section>
+
+ <section data-state="code">
+ <pre><code contenteditable class="Perl">use Test::Most;
+use MySelenium;
+
+my $s = MySelenium->new;
+
+$s->open_ok("/index.tt");
+$s->wait_for_page_to_load_ok;
+$s->type_ok(searchInput => "cat pictures");
+$s->click_ok("searchButton");
+$s->wait_for_page_to_load_ok;
+$s->is_text_present_ok('2 bajillion results');
+
+done_testing;</code></pre>
+ </section>
+
+ <section data-state="code">
+ <pre><code contenteditable class="Perl">package MySelenium;
+use Moose;
+extend 'Test::WWW::Selenium'; </code></pre>
+ </section>
+
+ <section>
+ <h2>Unfortunately</h2>
+ <div class="fragment">Moose cannot extend non Moose libraries</div>
+ </section>
+
+ <section>
+ <h2>Fortunately</h2>
+ <div class="fragment">MooseX::NonMoose can extend non Moose libraries</div>
+ </section>
+
+ <section data-state="code">
+ <pre><code contenteditable class="Perl">package MySelenium;
+use Moose;
+use MooseX::NonMoose;
+extend 'Test::WWW::Selenium'; </code></pre>
+ </section>
+
+ <section>
+ <h2>Unfortunately</h2>
+ <div class="fragment">MooseX::NonMoose does not work on parents that use AUTOLOAD</div>
+ </section>
+
+ <section>
+ <h2>Problems</h2>
+ <ul>
+ <del><li>Unreliable tests</li></del>
+ <del><li>It's not Perl</li></del>
+ <li class="fragment">Test::WWW::Selenium !<3 Moose</li>
+ <li>Repetition: can't easily use libraries</li>
+ <li>Designers can't easily write tests</li>
+ <li>Lack of automation</li>
+ </ul>
+ </section>
+
+ <section>
+ <h2>Fortunately</h2>
+ <div class="fragment">Test::WWW::Selenium::More</div>
+ </section>
+
+ <section data-state="code">
+ <pre><code contenteditable class="Perl">package MySelenium;
+use Moose;
+extends 'Test::WWW::Selenium::More';
+
+has host => (...);
+has port => (...);
+has browser => (...);
+has browser_url => (
+ is => 'rw',
+ isa => 'Str',
+ default => 'http://localhost:5000'
+);
+
+no Moose; </code></pre>
+ </section>
+
+ <section data-state="code">
+ <pre><code contenteditable class="Perl">use Test::Most;
+use MySelenium;
+
+my $s = MySelenium->new;
+
+$s->note('Are there enough cat pictures?');
+$s->open_ok("/index.tt");
+$s->type_ok(searchInput => "cat pictures");
+$s->click_ok("searchButton");
+$s->wait_for_page_to_load_ok;
+$s->is_text_present_ok('2 bajillion results');
+
+done_testing;</code></pre>
+ </section>
+
+ <section data-state="code">
+ <pre><code contenteditable class="Perl">use Test::Most;
+use MySelenium;
+
+my $s = MySelenium->new;
+
+$s->note('Are there enough cat pictures?');
+$s->open_ok("/index.tt");
+$s->type_ok(searchInput => "cat pictures");
+$s->click_ok("searchButton");
+$s->wait_for_page_to_load_ok;
+$s->is_text_present_ok('2 bajillion results');
+
+$s->note('Check results as a logged in user');
+$s->login_ok('bob'); # not in the Selenium API
+$s->is_text_present_ok('2 bajillion results');
+
+done_testing; </code></pre>
+ </section>
+
+ <section data-state="code">
+ <pre><code contenteditable class="Perl">package MySelenium;
+use Moose;
+extends 'Test::WWW::Selenium::More';
+
+has host => (...);
+has port => (...);
+has browser => (...);
+has browser_url => (is => 'rw', isa => 'Str',
+ default => 'http://localhost:5000');
+
+sub login_ok {
+ my ($self, $username, $password) = @_;
+ $self->open_ok('/login.tt');
+ $self->type_ok(username => $username);
+ $self->type_ok(password => $password);
+ $self->click_ok('login');
+}
+
+no Moose;</code></pre>
+ </section>