<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>reveal.js - Test Iframes</title> <link rel="stylesheet" href="../dist/reveal.css"> <link rel="stylesheet" href="../node_modules/qunit/qunit/qunit.css"> <script src="../node_modules/qunit/qunit/qunit.js"></script> </head> <body style="overflow: auto;"> <div id="qunit"></div> <div id="qunit-fixture"></div> <div class="deck1"> <div class="reveal" style="display: none;"> <div class="slides"> <section>1.1</section> <section>1.2</section> <section>1.3</section> </div> </div> </div> <div class="deck2"> <div class="reveal" style="display: none;"> <div class="slides"> <section>2.1</section> <section>2.2</section> <section>2.3</section> </div> </div> </div> <script src="../dist/reveal.js"></script> <script src="../plugin/zoom/zoom.js"></script> <script> QUnit.module( 'Multiple reveal.js instances' ); let r1 = new Reveal( document.querySelector( '.deck1 .reveal' ), { embedded: true, keyboard: true, plugins: [RevealZoom()] } ); r1.initialize(); let r2 = new Reveal( document.querySelector( '.deck2 .reveal' ), { embedded: true, keyboard: false } ); r2.initialize(); QUnit.test( 'Can make independent changes', function( assert ) { r1.slide(1); r2.slide(2); assert.strictEqual( r1.getCurrentSlide().textContent, '1.2' ); assert.strictEqual( r2.getCurrentSlide().textContent, '2.3' ); r2.toggleOverview( true ); assert.strictEqual( r1.isOverview(), false ); assert.strictEqual( r2.isOverview(), true ); r2.toggleOverview( false ); assert.strictEqual( r1.getConfig().keyboard, true ); assert.strictEqual( r2.getConfig().keyboard, false ); }); QUnit.test( 'Can register plugins independently', function( assert ) { assert.ok( r1.hasPlugin( 'zoom' ) ); assert.notOk( r2.hasPlugin( 'zoom' ) ); }); </script> </body> </html>