| 1 | <!doctype html> |
| 2 | <html lang="en"> |
| 3 | |
| 4 | <head> |
| 5 | <meta charset="utf-8"> |
| 6 | |
| 7 | <title>reveal.js - Test Scroll View</title> |
| 8 | </head> |
| 9 | |
| 10 | <body style="overflow: auto;"> |
| 11 | |
| 12 | <div id="qunit"></div> |
| 13 | <div id="qunit-fixture"></div> |
| 14 | |
| 15 | <div class="reveal" style="opacity: 0; pointer-events: none;"> |
| 16 | |
| 17 | <div class="slides"> |
| 18 | |
| 19 | <section> |
| 20 | <h1>slide 1</h1> |
| 21 | </section> |
| 22 | |
| 23 | <section> |
| 24 | <h1>slide 2</h1> |
| 25 | </section> |
| 26 | |
| 27 | <section> |
| 28 | <h1>slide 3</h1> |
| 29 | <p class="fragment">fragment 1</p> |
| 30 | <p class="fragment">fragment 2</p> |
| 31 | <p class="fragment">fragment 3</p> |
| 32 | </section> |
| 33 | |
| 34 | <section> |
| 35 | <h1>slide 4</h1> |
| 36 | </section> |
| 37 | |
| 38 | </div> |
| 39 | |
| 40 | </div> |
| 41 | |
| 42 | <script type="module"> |
| 43 | import 'reveal.css'; |
| 44 | import 'qunit/qunit/qunit.css'; |
| 45 | import QUnit from 'qunit'; |
| 46 | import Reveal from 'reveal.js'; |
| 47 | |
| 48 | QUnit.config.testTimeout = 30000; |
| 49 | QUnit.config.reorder = false; |
| 50 | QUnit.config.autostart = false; |
| 51 | |
| 52 | function getScrollHeight() { |
| 53 | return Reveal.getViewportElement().scrollHeight; |
| 54 | } |
| 55 | |
| 56 | function getViewportHeight() { |
| 57 | return Reveal.getViewportElement().offsetHeight; |
| 58 | } |
| 59 | |
| 60 | QUnit.module( 'Scroll View' ); |
| 61 | |
| 62 | Reveal.initialize({ view: 'scroll' }).then( async () => { |
| 63 | |
| 64 | QUnit.start(); |
| 65 | |
| 66 | QUnit.test( 'Activates', assert => { |
| 67 | assert.ok( getScrollHeight() > getViewportHeight(), 'Is overflowing' ); |
| 68 | }); |
| 69 | |
| 70 | QUnit.test( 'Can be toggled via API', assert => { |
| 71 | Reveal.toggleScrollView( false ); |
| 72 | assert.ok( getScrollHeight() <= getViewportHeight(), 'Is not overflowing' ); |
| 73 | Reveal.toggleScrollView( true ); |
| 74 | assert.ok( getScrollHeight() > getViewportHeight(), 'Is overflowing' ); |
| 75 | }); |
| 76 | |
| 77 | QUnit.test( 'Changes present slide when scrolling', assert => { |
| 78 | assert.timeout( 200 ); |
| 79 | assert.expect( 2 ); |
| 80 | |
| 81 | const slides = document.querySelectorAll( '.reveal .slides section' ); |
| 82 | |
| 83 | assert.ok( slides[0].classList.contains( 'present' ), 'First slide is present' ); |
| 84 | Reveal.getViewportElement().scrollTop = getViewportHeight() * 1; |
| 85 | |
| 86 | return new Promise( resolve => { |
| 87 | setTimeout(() => { |
| 88 | assert.ok( slides[1].classList.contains( 'present' ), 'Second slide is present' ); |
| 89 | resolve(); |
| 90 | }, 100); |
| 91 | } ); |
| 92 | }); |
| 93 | |
| 94 | QUnit.test( 'Fires slideschanged event when scrolling', assert => { |
| 95 | assert.timeout( 200 ); |
| 96 | assert.expect( 2 ); |
| 97 | |
| 98 | const slides = document.querySelectorAll( '.reveal .slides section' ); |
| 99 | |
| 100 | return new Promise( resolve => { |
| 101 | let callback = ( event ) => { |
| 102 | Reveal.off( 'slidechanged', callback ); |
| 103 | assert.ok( true, 'slidechanged event fired' ); |
| 104 | assert.ok( event.currentSlide.classList.contains( 'present' ), 'slidechanged provides reference to currentSlide' ); |
| 105 | resolve(); |
| 106 | } |
| 107 | |
| 108 | Reveal.on( 'slidechanged', callback ); |
| 109 | Reveal.getViewportElement().scrollTop = getViewportHeight() * 2; |
| 110 | }); |
| 111 | }); |
| 112 | |
| 113 | QUnit.test( 'Fires fragmentshown event when scrolling', assert => { |
| 114 | assert.timeout( 200 ); |
| 115 | assert.expect( 2 ); |
| 116 | |
| 117 | const slides = document.querySelectorAll( '.reveal .slides section' ); |
| 118 | |
| 119 | return new Promise( resolve => { |
| 120 | let callback = ( event ) => { |
| 121 | Reveal.off( 'fragmentshown', callback ); |
| 122 | assert.ok( true, 'fragmentshown event fired' ); |
| 123 | assert.ok( event.fragments.length > 0, 'fragmentshown provides reference to fragment nodes' ); |
| 124 | resolve(); |
| 125 | } |
| 126 | |
| 127 | Reveal.on( 'fragmentshown', callback ); |
| 128 | |
| 129 | Reveal.getViewportElement().scrollTop = 0; |
| 130 | Reveal.next(); |
| 131 | Reveal.next(); |
| 132 | Reveal.getViewportElement().scrollTop += getViewportHeight(); |
| 133 | }); |
| 134 | }); |
| 135 | |
| 136 | QUnit.test( 'Fires fragmenthidden event when scrolling', assert => { |
| 137 | assert.timeout( 200 ); |
| 138 | assert.expect( 2 ); |
| 139 | |
| 140 | const slides = document.querySelectorAll( '.reveal .slides section' ); |
| 141 | |
| 142 | return new Promise( resolve => { |
| 143 | let callback = ( event ) => { |
| 144 | Reveal.off( 'fragmenthidden', callback ); |
| 145 | assert.ok( true, 'fragmenthidden event fired' ); |
| 146 | assert.ok( event.fragments.length > 0, 'fragmenthidden provides reference to fragment nodes' ); |
| 147 | resolve(); |
| 148 | } |
| 149 | |
| 150 | Reveal.on( 'fragmenthidden', callback ); |
| 151 | |
| 152 | Reveal.getViewportElement().scrollTop = 0; |
| 153 | Reveal.next(); |
| 154 | Reveal.next(); |
| 155 | Reveal.next(); |
| 156 | Reveal.getViewportElement().scrollTop -= getViewportHeight(); |
| 157 | }); |
| 158 | }); |
| 159 | |
| 160 | } ); |
| 161 | </script> |
| 162 | |
| 163 | </body> |
| 164 | </html> |
| 165 |