| <!doctype html> |
| <html lang="en"> |
| |
| <head> |
| <meta charset="utf-8"> |
| |
| <title>reveal.js - Test Scroll View</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="reveal" style="opacity: 0; pointer-events: none;"> |
| |
| <div class="slides"> |
| |
| <section> |
| <h1>slide 1</h1> |
| </section> |
| |
| <section> |
| <h1>slide 2</h1> |
| </section> |
| |
| <section> |
| <h1>slide 3</h1> |
| <p class="fragment">fragment 1</p> |
| <p class="fragment">fragment 2</p> |
| <p class="fragment">fragment 3</p> |
| </section> |
| |
| <section> |
| <h1>slide 4</h1> |
| </section> |
| |
| </div> |
| |
| </div> |
| |
| <script src="../dist/reveal.js"></script> |
| <script> |
| |
| QUnit.config.testTimeout = 30000; |
| QUnit.config.reorder = false; |
| |
| function getScrollHeight() { |
| return Reveal.getViewportElement().scrollHeight; |
| } |
| |
| function getViewportHeight() { |
| return Reveal.getViewportElement().offsetHeight; |
| } |
| |
| Reveal.initialize({ view: 'scroll' }).then( async () => { |
| |
| QUnit.module( 'Scroll View' ); |
| |
| QUnit.test( 'Activates', assert => { |
| assert.ok( getScrollHeight() > getViewportHeight(), 'Is overflowing' ); |
| }); |
| |
| QUnit.test( 'Can be toggled via API', assert => { |
| Reveal.toggleScrollView( false ); |
| assert.ok( getScrollHeight() <= getViewportHeight(), 'Is not overflowing' ); |
| Reveal.toggleScrollView( true ); |
| assert.ok( getScrollHeight() > getViewportHeight(), 'Is overflowing' ); |
| }); |
| |
| QUnit.test( 'Changes present slide when scrolling', assert => { |
| assert.timeout( 200 ); |
| assert.expect( 2 ); |
| |
| const slides = document.querySelectorAll( '.reveal .slides section' ); |
| |
| assert.ok( slides[0].classList.contains( 'present' ), 'First slide is present' ); |
| Reveal.getViewportElement().scrollTop = getViewportHeight() * 1; |
| |
| return new Promise( resolve => { |
| setTimeout(() => { |
| assert.ok( slides[1].classList.contains( 'present' ), 'Second slide is present' ); |
| resolve(); |
| }, 100); |
| } ); |
| }); |
| |
| QUnit.test( 'Fires slideschanged event when scrolling', assert => { |
| assert.timeout( 200 ); |
| assert.expect( 2 ); |
| |
| const slides = document.querySelectorAll( '.reveal .slides section' ); |
| |
| return new Promise( resolve => { |
| let callback = ( event ) => { |
| Reveal.off( 'slidechanged', callback ); |
| assert.ok( true, 'slidechanged event fired' ); |
| assert.ok( event.currentSlide.classList.contains( 'present' ), 'slidechanged provides reference to currentSlide' ); |
| resolve(); |
| } |
| |
| Reveal.on( 'slidechanged', callback ); |
| Reveal.getViewportElement().scrollTop = getViewportHeight() * 2; |
| }); |
| }); |
| |
| QUnit.test( 'Fires fragmentshown event when scrolling', assert => { |
| assert.timeout( 200 ); |
| assert.expect( 2 ); |
| |
| const slides = document.querySelectorAll( '.reveal .slides section' ); |
| |
| return new Promise( resolve => { |
| let callback = ( event ) => { |
| Reveal.off( 'fragmentshown', callback ); |
| assert.ok( true, 'fragmentshown event fired' ); |
| assert.ok( event.fragments.length > 0, 'fragmentshown provides reference to fragment nodes' ); |
| resolve(); |
| } |
| |
| Reveal.on( 'fragmentshown', callback ); |
| |
| Reveal.getViewportElement().scrollTop = 0; |
| Reveal.next(); |
| Reveal.next(); |
| Reveal.getViewportElement().scrollTop += getViewportHeight(); |
| }); |
| }); |
| |
| QUnit.test( 'Fires fragmenthidden event when scrolling', assert => { |
| assert.timeout( 200 ); |
| assert.expect( 2 ); |
| |
| const slides = document.querySelectorAll( '.reveal .slides section' ); |
| |
| return new Promise( resolve => { |
| let callback = ( event ) => { |
| Reveal.off( 'fragmenthidden', callback ); |
| assert.ok( true, 'fragmenthidden event fired' ); |
| assert.ok( event.fragments.length > 0, 'fragmenthidden provides reference to fragment nodes' ); |
| resolve(); |
| } |
| |
| Reveal.on( 'fragmenthidden', callback ); |
| |
| Reveal.getViewportElement().scrollTop = 0; |
| Reveal.next(); |
| Reveal.next(); |
| Reveal.next(); |
| Reveal.getViewportElement().scrollTop -= getViewportHeight(); |
| }); |
| }); |
| |
| } ); |
| </script> |
| |
| </body> |
| </html> |