upgrade to gulp 5.0, latest sass, & node-qunit-puppeteer #3608

css/reveal.scss

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 /**
  * reveal.js
  * http://revealjs.com
@@ -8,6 +6,7 @@
  * Copyright (C) Hakim El Hattab, https://hakim.se
  */
 
+@use "sass:math";
 @import 'layout';
 
 /*********************************************

css/theme/source/beige.scss

@@ -6,6 +6,7 @@
 
 
 // Default mixins and settings -----------------
+@use "sass:color";
 @import "../template/mixins";
 @import "../template/settings";
 // ---------------------------------------------
@@ -23,7 +24,7 @@ $headingColor: #333;
 $headingTextShadow: none;
 $backgroundColor: #f7f3de;
 $linkColor: #8b743d;
-$linkColorHover: lighten( $linkColor, 20% );
+$linkColorHover: color.scale( $linkColor, $lightness: 20% );
 $selectionBackgroundColor: rgba(79, 64, 28, 0.99);
 $heading1TextShadow: 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);
 

css/theme/source/black-contrast.scss

@@ -9,6 +9,7 @@
 
 
 // Default mixins and settings -----------------
+@use "sass:color";
 @import "../template/mixins";
 @import "../template/settings";
 // ---------------------------------------------
@@ -32,8 +33,8 @@ $headingLetterSpacing: normal;
 $headingTextTransform: uppercase;
 $headingFontWeight: 600;
 $linkColor: #42affa;
-$linkColorHover: lighten( $linkColor, 15% );
-$selectionBackgroundColor: lighten( $linkColor, 25% );
+$linkColorHover: color.scale( $linkColor, $lightness: 15% );
+$selectionBackgroundColor: color.scale( $linkColor, $lightness: 25% );
 
 $heading1Size: 2.5em;
 $heading2Size: 1.6em;

css/theme/source/black.scss

@@ -6,6 +6,7 @@
 
 
 // Default mixins and settings -----------------
+@use "sass:color";
 @import "../template/mixins";
 @import "../template/settings";
 // ---------------------------------------------
@@ -29,7 +30,7 @@ $headingLetterSpacing: normal;
 $headingTextTransform: uppercase;
 $headingFontWeight: 600;
 $linkColor: #42affa;
-$linkColorHover: lighten( $linkColor, 15% );
+$linkColorHover: color.scale( $linkColor, $lightness: 15% );
 $selectionBackgroundColor: rgba( $linkColor, 0.75 );
 
 $heading1Size: 2.5em;

css/theme/source/blood.scss

@@ -10,7 +10,8 @@
  *
  */
 
- // Default mixins and settings -----------------
+// Default mixins and settings -----------------
+@use "sass:color";
 @import "../template/mixins";
 @import "../template/settings";
 // ---------------------------------------------
@@ -40,7 +41,7 @@ $heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b
 
 // Links
 $linkColor: $blood;
-$linkColorHover: lighten( $linkColor, 20% );
+$linkColorHover: color.scale( $linkColor, $lightness: 20% );
 
 // Text selection
 $selectionBackgroundColor: $blood;

css/theme/source/moon.scss

@@ -5,6 +5,7 @@
 
 
 // Default mixins and settings -----------------
+@use "sass:color";
 @import "../template/mixins";
 @import "../template/settings";
 // ---------------------------------------------
@@ -43,7 +44,7 @@ $headingColor: $base2;
 $headingTextShadow: none;
 $backgroundColor: $base03;
 $linkColor: $blue;
-$linkColorHover: lighten( $linkColor, 20% );
+$linkColorHover: color.scale( $linkColor, $lightness: 20% );
 $selectionBackgroundColor: $magenta;
 
 // Change text colors against light slide backgrounds

css/theme/source/night.scss

@@ -6,6 +6,7 @@
 
 
 // Default mixins and settings -----------------
+@use "sass:color";
 @import "../template/mixins";
 @import "../template/settings";
 // ---------------------------------------------
@@ -21,7 +22,7 @@ $backgroundColor: #111;
 
 $mainFont: 'Open Sans', sans-serif;
 $linkColor: #e7ad52;
-$linkColorHover: lighten( $linkColor, 20% );
+$linkColorHover: color.scale( $linkColor, $lightness: 20% );
 $headingFont: 'Montserrat', Impact, sans-serif;
 $headingTextShadow: none;
 $headingLetterSpacing: -0.03em;

css/theme/source/serif.scss

@@ -7,6 +7,7 @@
 
 
 // Default mixins and settings -----------------
+@use "sass:color";
 @import "../template/mixins";
 @import "../template/settings";
 // ---------------------------------------------
@@ -22,7 +23,7 @@ $headingTextShadow: none;
 $headingTextTransform: none;
 $backgroundColor: #F0F1EB;
 $linkColor: #51483D;
-$linkColorHover: lighten( $linkColor, 20% );
+$linkColorHover: color.scale( $linkColor, $lightness: 20% );
 $selectionBackgroundColor: #26351C;
 
 $overlayElementBgColor: 0, 0, 0;

css/theme/source/simple.scss

@@ -8,6 +8,7 @@
 
 
 // Default mixins and settings -----------------
+@use "sass:color";
 @import "../template/mixins";
 @import "../template/settings";
 // ---------------------------------------------
@@ -28,7 +29,7 @@ $headingTextShadow: none;
 $headingTextTransform: none;
 $backgroundColor: #fff;
 $linkColor: #00008B;
-$linkColorHover: lighten( $linkColor, 20% );
+$linkColorHover: color.scale( $linkColor, $lightness: 20% );
 $selectionBackgroundColor: rgba(0, 0, 0, 0.99);
 
 $overlayElementBgColor: 0, 0, 0;

css/theme/source/sky.scss

@@ -6,6 +6,7 @@
 
 
 // Default mixins and settings -----------------
+@use "sass:color";
 @import "../template/mixins";
 @import "../template/settings";
 // ---------------------------------------------
@@ -26,7 +27,7 @@ $headingLetterSpacing: -0.08em;
 $headingTextShadow: none;
 $backgroundColor: #f7fbfc;
 $linkColor: #3b759e;
-$linkColorHover: lighten( $linkColor, 20% );
+$linkColorHover: color.scale( $linkColor, $lightness: 20% );
 $selectionBackgroundColor: #134674;
 
 $overlayElementBgColor: 0, 0, 0;

css/theme/source/solarized.scss

@@ -5,6 +5,7 @@
 
 
 // Default mixins and settings -----------------
+@use "sass:color";
 @import "../template/mixins";
 @import "../template/settings";
 // ---------------------------------------------
@@ -48,7 +49,7 @@ $headingColor: $base01;
 $headingTextShadow: none;
 $backgroundColor: $base3;
 $linkColor: $blue;
-$linkColorHover: lighten( $linkColor, 20% );
+$linkColorHover: color.scale( $linkColor, $lightness: 20% );
 $selectionBackgroundColor: $magenta;
 
 $overlayElementBgColor: 0, 0, 0;

css/theme/source/white-contrast.scss

@@ -9,6 +9,7 @@
 
 
 // Default mixins and settings -----------------
+@use "sass:color";
 @import "../template/mixins";
 @import "../template/settings";
 // ---------------------------------------------
@@ -32,8 +33,8 @@ $headingLetterSpacing: normal;
 $headingTextTransform: uppercase;
 $headingFontWeight: 600;
 $linkColor: #2a76dd;
-$linkColorHover: lighten( $linkColor, 15% );
-$selectionBackgroundColor: lighten( $linkColor, 25% );
+$linkColorHover: color.scale( $linkColor, $lightness: 15% );
+$selectionBackgroundColor: color.scale( $linkColor, $lightness: 25% );
 
 $heading1Size: 2.5em;
 $heading2Size: 1.6em;

css/theme/source/white.scss

@@ -6,6 +6,7 @@
 
 
 // Default mixins and settings -----------------
+@use "sass:color";
 @import "../template/mixins";
 @import "../template/settings";
 // ---------------------------------------------
@@ -29,8 +30,8 @@ $headingLetterSpacing: normal;
 $headingTextTransform: uppercase;
 $headingFontWeight: 600;
 $linkColor: #2a76dd;
-$linkColorHover: lighten( $linkColor, 15% );
-$selectionBackgroundColor: lighten( $linkColor, 25% );
+$linkColorHover: color.scale( $linkColor, $lightness: 15% );
+$selectionBackgroundColor: color.scale( $linkColor, $lightness: 25% );
 
 $heading1Size: 2.5em;
 $heading2Size: 1.6em;

css/theme/template/exposer.scss

@@ -1,5 +1,7 @@
 // Exposes theme's variables for easy re-use in CSS for plugin authors
 
+@use "sass:color";
+
 :root {
   --r-background-color: #{$backgroundColor};
   --r-main-font: #{$mainFont};
@@ -21,7 +23,7 @@
   --r-heading4-size: #{$heading4Size};
   --r-code-font: #{$codeFont};
   --r-link-color: #{$linkColor};
-  --r-link-color-dark: #{darken($linkColor , 15% )};
+  --r-link-color-dark: #{color.scale( $linkColor, $lightness: -15% )};
   --r-link-color-hover: #{$linkColorHover};
   --r-selection-background-color: #{$selectionBackgroundColor};
   --r-selection-color: #{$selectionColor};

css/theme/template/settings.scss

@@ -1,3 +1,5 @@
+@use "sass:color";
+
 // Base settings for all themes that can optionally be
 // overridden by the super-theme
 
@@ -32,7 +34,7 @@ $codeFont: monospace;
 
 // Links and actions
 $linkColor: #13DAEC;
-$linkColorHover: lighten( $linkColor, 20% );
+$linkColorHover: color.scale( $linkColor, $lightness: 20% );
 
 // Text selection
 $selectionBackgroundColor: #FF5E99;

css/theme/template/theme.scss

@@ -278,8 +278,7 @@
 
 .reveal .roll span:after {
 	color: #fff;
-	// background: darken( var(--r-link-color), 15% );
-	 background: var(--r-link-color-dark);
+	background: var(--r-link-color-dark);
 
 }
 

dist/theme/beige.css

@@ -33,8 +33,8 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
   --r-heading4-size: 1em;
   --r-code-font: monospace;
   --r-link-color: #8b743d;
-  --r-link-color-dark: #564826;
-  --r-link-color-hover: #c0a86e;
+  --r-link-color-dark: rgb(118.15, 98.6, 51.85);
+  --r-link-color-hover: rgb(179.36, 150.84, 82.64);
   --r-selection-background-color: rgba(79, 64, 28, 0.99);
   --r-selection-color: #fff;
   --r-overlay-element-bg-color: 0, 0, 0;

dist/theme/black-contrast.css

@@ -35,9 +35,9 @@ section.has-light-background, section.has-light-background h1, section.has-light
   --r-heading4-size: 1em;
   --r-code-font: monospace;
   --r-link-color: #42affa;
-  --r-link-color-dark: #068de9;
-  --r-link-color-hover: #8dcffc;
-  --r-selection-background-color: #bee4fd;
+  --r-link-color-dark: rgb(19.8216494845, 155.4536082474, 248.7783505155);
+  --r-link-color-hover: rgb(94.35, 187, 250.75);
+  --r-selection-background-color: rgb(113.25, 195, 251.25);
   --r-selection-color: #fff;
   --r-overlay-element-bg-color: 240, 240, 240;
   --r-overlay-element-fg-color: 0, 0, 0;

dist/theme/black.css

@@ -32,8 +32,8 @@ section.has-light-background, section.has-light-background h1, section.has-light
   --r-heading4-size: 1em;
   --r-code-font: monospace;
   --r-link-color: #42affa;
-  --r-link-color-dark: #068de9;
-  --r-link-color-hover: #8dcffc;
+  --r-link-color-dark: rgb(19.8216494845, 155.4536082474, 248.7783505155);
+  --r-link-color-hover: rgb(94.35, 187, 250.75);
   --r-selection-background-color: rgba(66, 175, 250, 0.75);
   --r-selection-color: #fff;
   --r-overlay-element-bg-color: 240, 240, 240;

dist/theme/blood.css

@@ -38,8 +38,8 @@ section.has-light-background, section.has-light-background h1, section.has-light
   --r-heading4-size: 1em;
   --r-code-font: monospace;
   --r-link-color: #a23;
-  --r-link-color-dark: #6a1520;
-  --r-link-color-hover: #dd5566;
+  --r-link-color-dark: rgb(144.5, 28.9, 43.35);
+  --r-link-color-hover: rgb(214.2, 51, 71.4);
   --r-selection-background-color: #a23;
   --r-selection-color: #fff;
   --r-overlay-element-bg-color: 240, 240, 240;

dist/theme/dracula.css

@@ -39,7 +39,7 @@ section.has-light-background, section.has-light-background h1, section.has-light
   --r-heading4-size: 1em;
   --r-code-font: Fira Code, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
   --r-link-color: #FF79C6;
-  --r-link-color-dark: #ff2da5;
+  --r-link-color-dark: rgb(255, 64.6, 174.0089552239);
   --r-link-color-hover: #8BE9FD;
   --r-selection-background-color: #44475A;
   --r-selection-color: #fff;

dist/theme/league.css

@@ -35,8 +35,8 @@ section.has-light-background, section.has-light-background h1, section.has-light
   --r-heading4-size: 1em;
   --r-code-font: monospace;
   --r-link-color: #13DAEC;
-  --r-link-color-dark: #0d99a5;
-  --r-link-color-hover: #71e9f4;
+  --r-link-color-dark: rgb(16.15, 185.3, 200.6);
+  --r-link-color-hover: rgb(66.2, 225.4, 239.8);
   --r-selection-background-color: #FF5E99;
   --r-selection-color: #fff;
   --r-overlay-element-bg-color: 240, 240, 240;

dist/theme/moon.css

@@ -35,8 +35,8 @@ section.has-light-background, section.has-light-background h1, section.has-light
   --r-heading4-size: 1em;
   --r-code-font: monospace;
   --r-link-color: #268bd2;
-  --r-link-color-dark: #1a6091;
-  --r-link-color-hover: #78b9e6;
+  --r-link-color-dark: rgb(32.3, 118.15, 178.5);
+  --r-link-color-hover: rgb(77.5161290323, 162.8774193548, 222.8838709677);
   --r-selection-background-color: #d33682;
   --r-selection-color: #fff;
   --r-overlay-element-bg-color: 240, 240, 240;

dist/theme/night.css

@@ -33,8 +33,8 @@ section.has-light-background, section.has-light-background h1, section.has-light
   --r-heading4-size: 1em;
   --r-code-font: monospace;
   --r-link-color: #e7ad52;
-  --r-link-color-dark: #d08a1d;
-  --r-link-color-hover: #f3d7ac;
+  --r-link-color-dark: rgb(225.2802030457, 153.4573604061, 40.7697969543);
+  --r-link-color-hover: rgb(235.8, 189.4, 116.6);
   --r-selection-background-color: #e7ad52;
   --r-selection-color: #fff;
   --r-overlay-element-bg-color: 240, 240, 240;

dist/theme/serif.css

@@ -36,8 +36,8 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
   --r-heading4-size: 1em;
   --r-code-font: monospace;
   --r-link-color: #51483D;
-  --r-link-color-dark: #25211c;
-  --r-link-color-hover: #8b7c69;
+  --r-link-color-dark: rgb(68.85, 61.2, 51.85);
+  --r-link-color-hover: rgb(122.9830985915, 109.3183098592, 92.6169014085);
   --r-selection-background-color: #26351C;
   --r-selection-color: #fff;
   --r-overlay-element-bg-color: 0, 0, 0;

dist/theme/simple.css

@@ -35,8 +35,8 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
   --r-heading4-size: 1em;
   --r-code-font: monospace;
   --r-link-color: #00008B;
-  --r-link-color-dark: #00003f;
-  --r-link-color-hover: #0000f1;
+  --r-link-color-dark: rgb(0, 0, 118.15);
+  --r-link-color-hover: rgb(0, 0, 213.2);
   --r-selection-background-color: rgba(0, 0, 0, 0.99);
   --r-selection-color: #fff;
   --r-overlay-element-bg-color: 0, 0, 0;

dist/theme/sky.css

@@ -37,8 +37,8 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
   --r-heading4-size: 1em;
   --r-code-font: monospace;
   --r-link-color: #3b759e;
-  --r-link-color-dark: #264c66;
-  --r-link-color-hover: #74a7cb;
+  --r-link-color-dark: rgb(50.15, 99.45, 134.3);
+  --r-link-color-hover: rgb(84.330875576, 146.9815668203, 191.269124424);
   --r-selection-background-color: #134674;
   --r-selection-color: #fff;
   --r-overlay-element-bg-color: 0, 0, 0;

dist/theme/solarized.css

@@ -36,8 +36,8 @@ html * {
   --r-heading4-size: 1em;
   --r-code-font: monospace;
   --r-link-color: #268bd2;
-  --r-link-color-dark: #1a6091;
-  --r-link-color-hover: #78b9e6;
+  --r-link-color-dark: rgb(32.3, 118.15, 178.5);
+  --r-link-color-hover: rgb(77.5161290323, 162.8774193548, 222.8838709677);
   --r-selection-background-color: #d33682;
   --r-selection-color: #fff;
   --r-overlay-element-bg-color: 0, 0, 0;

dist/theme/white-contrast.css

@@ -35,9 +35,9 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
   --r-heading4-size: 1em;
   --r-code-font: monospace;
   --r-link-color: #2a76dd;
-  --r-link-color-dark: #1a53a1;
-  --r-link-color-hover: #6ca0e8;
-  --r-selection-background-color: #98bdef;
+  --r-link-color-dark: rgb(30.7720647773, 99.5566801619, 192.7779352227);
+  --r-link-color-hover: rgb(73.95, 138.55, 226.1);
+  --r-selection-background-color: rgb(95.25, 152.25, 229.5);
   --r-selection-color: #fff;
   --r-overlay-element-bg-color: 0, 0, 0;
   --r-overlay-element-fg-color: 240, 240, 240;

dist/theme/white.css

@@ -32,9 +32,9 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
   --r-heading4-size: 1em;
   --r-code-font: monospace;
   --r-link-color: #2a76dd;
-  --r-link-color-dark: #1a53a1;
-  --r-link-color-hover: #6ca0e8;
-  --r-selection-background-color: #98bdef;
+  --r-link-color-dark: rgb(30.7720647773, 99.5566801619, 192.7779352227);
+  --r-link-color-hover: rgb(73.95, 138.55, 226.1);
+  --r-selection-background-color: rgb(95.25, 152.25, 229.5);
   --r-selection-color: #fff;
   --r-overlay-element-bg-color: 0, 0, 0;
   --r-overlay-element-fg-color: 240, 240, 240;

gulpfile.js

@@ -12,9 +12,8 @@ const resolve = require('@rollup/plugin-node-resolve').default
 const sass = require('sass')
 
 const gulp = require('gulp')
-const tap = require('gulp-tap')
 const zip = require('gulp-zip')
-const header = require('gulp-header')
+const header = require('gulp-header-comment')
 const eslint = require('gulp-eslint')
 const minify = require('gulp-clean-css')
 const connect = require('gulp-connect')
@@ -24,13 +23,21 @@ const root = yargs.argv.root || '.'
 const port = yargs.argv.port || 8000
 const host = yargs.argv.host || 'localhost'
 
-const banner = `/*!
-* reveal.js ${pkg.version}
-* ${pkg.homepage}
-* MIT licensed
-*
-* Copyright (C) 2011-2024 Hakim El Hattab, https://hakim.se
-*/\n`
+const cssLicense = `
+reveal.js ${pkg.version}
+${pkg.homepage}
+MIT licensed
+
+Copyright (C) 2011-2024 Hakim El Hattab, https://hakim.se
+`;
+
+const jsLicense = `/*!
+ * reveal.js ${pkg.version}
+ * ${pkg.homepage}
+ * MIT licensed
+ *
+ * Copyright (C) 2011-2024 Hakim El Hattab, https://hakim.se
+ */\n`;
 
 // Prevents warnings from opening too many test pages
 process.setMaxListeners(20);
@@ -86,7 +93,7 @@ gulp.task('js-es5', () => {
             name: 'Reveal',
             file: './dist/reveal.js',
             format: 'umd',
-            banner: banner,
+            banner: jsLicense,
             sourcemap: true
         });
     });
@@ -108,7 +115,7 @@ gulp.task('js-es6', () => {
         return bundle.write({
             file: './dist/reveal.esm.js',
             format: 'es',
-            banner: banner,
+            banner: jsLicense,
             sourcemap: true
         });
     });
@@ -161,6 +168,7 @@ function compileSass() {
     const transformedFile = vinylFile.clone();
 
     sass.render({
+        silenceDeprecations: ['legacy-js-api'],
         data: transformedFile.contents.toString(),
         file: transformedFile.path,
     }, ( err, result ) => {
@@ -184,7 +192,7 @@ gulp.task('css-core', () => gulp.src(['css/reveal.scss'])
     .pipe(compileSass())
     .pipe(autoprefixer())
     .pipe(minify({compatibility: 'ie9'}))
-    .pipe(header(banner))
+    .pipe(header(cssLicense))
     .pipe(gulp.dest('./dist')))
 
 gulp.task('css', gulp.parallel('css-themes', 'css-core'))

package.json

@@ -42,25 +42,26 @@
     "core-js": "^3.33.1",
     "fitty": "^2.3.7",
     "glob": "^10.3.10",
-    "gulp": "^4.0.2",
+    "gulp": "^5.0.0",
     "gulp-autoprefixer": "^8.0.0",
     "gulp-clean-css": "^4.3.0",
     "gulp-connect": "^5.7.0",
     "gulp-eslint": "^6.0.0",
-    "gulp-header": "^2.0.9",
-    "gulp-tap": "^2.0.0",
+    "gulp-header-comment": "^0.10.0",
     "gulp-zip": "^5.1.0",
     "highlight.js": "^11.9.0",
     "marked": "^4.3.0",
-    "node-qunit-puppeteer": "^2.1.2",
-    "qunit": "^2.20.0",
+    "node-qunit-puppeteer": "^2.2.0",
+    "through2": "^4.0.2",
+    "qunit": "^2.22.0",
     "rollup": "^4.1.5",
-    "sass": "^1.69.5",
+    "sass": "^1.79.4",
     "yargs": "^17.7.2"
   },
   "overrides": {
-    "chokidar": "3.5.3",
-    "glob-parent": "6.0.2"
+    "gulp-header-comment": {
+      "moment": "2.30.1"
+    }
   },
   "browserslist": "> 2%, not dead",
   "eslintConfig": {

test/test-iframes.html

@@ -36,68 +36,66 @@
 
 			QUnit.config.testTimeout = 30000;
 
-			Reveal.initialize({ viewDistance: 2 }).then( () => {
+			Reveal.initialize({ viewDistance: 2 });
 
-				var defaultIframe = document.querySelector( '.default-iframe' ),
-					preloadIframe = document.querySelector( '.preload-iframe' );
+			var defaultIframe = document.querySelector( '.default-iframe' ),
+				preloadIframe = document.querySelector( '.preload-iframe' );
 
-				QUnit.module( 'Iframe' );
+			QUnit.module( 'Iframe' );
 
-				QUnit.test( 'Using default settings', function( assert ) {
+			QUnit.test( 'Using default settings', function( assert ) {
 
-					Reveal.slide(1);
-					assert.strictEqual( defaultIframe.hasAttribute( 'src' ), false, 'not preloaded when within viewDistance' );
+				Reveal.slide(1);
+				assert.strictEqual( defaultIframe.hasAttribute( 'src' ), false, 'not preloaded when within viewDistance' );
 
-					Reveal.slide(2);
-					assert.strictEqual( defaultIframe.hasAttribute( 'src' ), true, 'loaded when slide becomes visible' );
+				Reveal.slide(2);
+				assert.strictEqual( defaultIframe.hasAttribute( 'src' ), true, 'loaded when slide becomes visible' );
 
-					Reveal.slide(1);
-					assert.strictEqual( defaultIframe.hasAttribute( 'src' ), false, 'unloaded when slide becomes invisible' );
+				Reveal.slide(1);
+				assert.strictEqual( defaultIframe.hasAttribute( 'src' ), false, 'unloaded when slide becomes invisible' );
 
-				});
+			});
 
-				QUnit.test( 'Using data-preload', function( assert ) {
+			QUnit.test( 'Using data-preload', function( assert ) {
 
-					Reveal.slide(1);
-					assert.strictEqual( preloadIframe.hasAttribute( 'src' ), true, 'preloaded within viewDistance' );
+				Reveal.slide(1);
+				assert.strictEqual( preloadIframe.hasAttribute( 'src' ), true, 'preloaded within viewDistance' );
 
-					Reveal.slide(2);
-					assert.strictEqual( preloadIframe.hasAttribute( 'src' ), true, 'loaded when slide becoems visible' );
+				Reveal.slide(2);
+				assert.strictEqual( preloadIframe.hasAttribute( 'src' ), true, 'loaded when slide becomes visible' );
 
-					Reveal.slide(0);
-					assert.strictEqual( preloadIframe.hasAttribute( 'src' ), false, 'unloads outside of viewDistance' );
+				Reveal.slide(0);
+				assert.strictEqual( preloadIframe.hasAttribute( 'src' ), false, 'unloads outside of viewDistance' );
 
-				});
+			});
 
-				QUnit.test( 'Using preloadIframes: true', function( assert ) {
+			QUnit.test( 'Using preloadIframes: true', function( assert ) {
 
-					Reveal.configure({ preloadIframes: true });
+				Reveal.configure({ preloadIframes: true });
 
-					Reveal.slide(1);
-					assert.strictEqual( defaultIframe.hasAttribute( 'src' ), true, 'preloaded within viewDistance' );
-					assert.strictEqual( preloadIframe.hasAttribute( 'src' ), true, 'preloaded within viewDistance' );
+				Reveal.slide(1);
+				assert.strictEqual( defaultIframe.hasAttribute( 'src' ), true, 'preloaded within viewDistance' );
+				assert.strictEqual( preloadIframe.hasAttribute( 'src' ), true, 'preloaded within viewDistance' );
 
-					Reveal.slide(2);
-					assert.strictEqual( defaultIframe.hasAttribute( 'src' ), true, 'loaded when slide becomes visible' );
-					assert.strictEqual( preloadIframe.hasAttribute( 'src' ), true, 'loaded when slide becomes visible' );
+				Reveal.slide(2);
+				assert.strictEqual( defaultIframe.hasAttribute( 'src' ), true, 'loaded when slide becomes visible' );
+				assert.strictEqual( preloadIframe.hasAttribute( 'src' ), true, 'loaded when slide becomes visible' );
 
-				});
+			});
 
-				QUnit.test( 'Using preloadIframes: false', function( assert ) {
+			QUnit.test( 'Using preloadIframes: false', function( assert ) {
 
-					Reveal.configure({ preloadIframes: false });
+				Reveal.configure({ preloadIframes: false });
 
-					Reveal.slide(0);
-					assert.strictEqual( defaultIframe.hasAttribute( 'src' ), false, 'not preloaded within viewDistance' );
-					assert.strictEqual( preloadIframe.hasAttribute( 'src' ), false, 'not preloaded within viewDistance' );
+				Reveal.slide(0);
+				assert.strictEqual( defaultIframe.hasAttribute( 'src' ), false, 'not preloaded within viewDistance' );
+				assert.strictEqual( preloadIframe.hasAttribute( 'src' ), false, 'not preloaded within viewDistance' );
 
-					Reveal.slide(2);
-					assert.strictEqual( defaultIframe.hasAttribute( 'src' ), true, 'loaded when slide becomes visible' );
-					assert.strictEqual( preloadIframe.hasAttribute( 'src' ), true, 'loaded when slide becomes visible' );
+				Reveal.slide(2);
+				assert.strictEqual( defaultIframe.hasAttribute( 'src' ), true, 'loaded when slide becomes visible' );
+				assert.strictEqual( preloadIframe.hasAttribute( 'src' ), true, 'loaded when slide becomes visible' );
 
-				});
-
-			} );
+			});
 		</script>
 
 	</body>