Gitiles
Code Review Sign In
korap.ids-mannheim.de / IDS-Mannheim / revealjs / 3290c4b214336a2ddae1146d6947da47057988f8 / . / inst / reveal.js-4.6.1 / test / test-auto-animate.html
blob: a9c71f7802084dee25357b0cc6a5c7fa76e2e428 [file] [log] [blame]
Christophe Dervieuxe1893ae2021-10-07 17:09:02 +0200[diff] [blame]1<!doctype html>
2<html lang="en">
3
4 <head>
5 <meta charset="utf-8">
6
7 <title>reveal.js - Test Auto-Animate</title>
8
9 <link rel="stylesheet" href="../dist/reveal.css">
10 <link rel="stylesheet" href="../node_modules/qunit/qunit/qunit.css">
11 <script src="../node_modules/qunit/qunit/qunit.js"></script>
12 </head>
13
14 <body style="overflow: auto;">
15
16 <div id="qunit"></div>
17 <div id="qunit-fixture"></div>
18
19 <div class="reveal">
20
21 <div class="slides">
22
23 <section data-auto-animate>
24 <h1>h1</h1>
25 <h2>h2</h2>
Christophe Dervieux8afae132021-12-06 15:16:42 +0100[diff] [blame]26 <h3 style="position: absolute; left: 0;">h3</h3>
Christophe Dervieuxe1893ae2021-10-07 17:09:02 +0200[diff] [blame]27 </section>
28
29 <section data-auto-animate>
30 <h1 data-auto-animate-duration="0.1">h1</h1>
31 <h2 style="opacity: 0;">h2</h2>
Christophe Dervieux8afae132021-12-06 15:16:42 +0100[diff] [blame]32 <h3 style="position: absolute; left: 100px;">h3</h3>
Christophe Dervieuxe1893ae2021-10-07 17:09:02 +0200[diff] [blame]33 </section>
34
35 <section data-auto-animate data-auto-animate-duration="0.1">
36 <h1>h1</h1>
37 <h2>h2</h2>
Christophe Dervieux8afae132021-12-06 15:16:42 +0100[diff] [blame]38 <h3>h3</h3>
Christophe Dervieuxe1893ae2021-10-07 17:09:02 +0200[diff] [blame]39 </section>
40
41 <section>
42 <h1>Non-auto-animate slide</h1>
43 </section>
44
45 <section data-auto-animate>
46 <h1 class="fragment">h1</h1>
47 <h2 class="fragment">h2</h2>
48 <h3>h3</h3>
49 </section>
50
51 <section data-auto-animate>
52 <h1 class="fragment">h1</h1>
53 <h2 class="fragment">h2</h2>
54 <h3 class="fragment">h3</h3>
55 </section>
56
57 <section>
58 <h1>Non-auto-animate slide</h1>
59 </section>
60
61 </div>
62
63 </div>
64
65 <script src="../dist/reveal.js"></script>
66 <script>
67
Marc Kupietz09b75752023-10-07 09:32:19 +0200[diff] [blame]68 QUnit.config.testTimeout = 30000;
Christophe Dervieuxe1893ae2021-10-07 17:09:02 +0200[diff] [blame]69 QUnit.config.reorder = false;
70
71 const slides = Array.prototype.map.call( document.querySelectorAll( '.slides section' ), slide => {
72 return {
73 slide: slide,
74 h1: slide.querySelector( 'h1' ),
75 h2: slide.querySelector( 'h2' ),
76 h3: slide.querySelector( 'h3' )
77 };
78 } );
79
80 Reveal.initialize().then( async () => {
81
82 QUnit.module( 'Auto-Animate' );
83
84 QUnit.test( 'Adds data-auto-animate-target', assert => {
85 Reveal.slide(1);
86 assert.strictEqual( slides[0].h1.getAttribute( 'data-auto-animate-target' ), '', 'From elements have blank data-auto-animate-target' );
87 assert.ok( slides[1].h1.getAttribute( 'data-auto-animate-target' ).length > 0, 'To elements have a data-auto-animate-target value' );
88 });
89
90 QUnit.test( 'Ends on correct target styles', assert => {
91 Reveal.slide(1);
92 assert.strictEqual( slides[1].h2.style.opacity, "0" );
93 assert.strictEqual( slides[1].h3.offsetLeft, 100 );
94 });
95
96 QUnit.test( 'Does not add [data-auto-animate] on non auto-animated slides', assert => {
97 Reveal.slide(2);
98 Reveal.next();
99 assert.ok( slides[3].slide.hasAttribute( 'data-auto-animate' ) === false )
100 });
101
102 QUnit.test( 'autoAnimate config option', assert => {
103 Reveal.configure({ autoAnimate: false });
104
105 assert.ok( document.querySelectorAll( 'data-auto-animate-target' ).length === 0, 'Removes all [data-auto-animate-target]' )
106 assert.ok( Array.prototype.every.call( document.querySelectorAll( 'section[data-auto-animate]' ), el => {
107 return el.dataset.autoAnimate === '';
108 }, 'All data-auto-animate attributes are reset' ) );
109
110 Reveal.configure({ autoAnimate: true });
111 });
112
113 QUnit.test( 'Carries forward matching fragment visibility', assert => {
114 Reveal.slide(4);
115 assert.ok( !slides[5].h1.classList.contains( 'visible' ) )
116 Reveal.next();
117 Reveal.next();
118 Reveal.next();
119 assert.ok( slides[5].h1.classList.contains( 'visible' ) )
120 assert.ok( slides[5].h2.classList.contains( 'visible' ) )
121 assert.ok( !slides[5].h3.classList.contains( 'visible' ) )
122 Reveal.next();
123 assert.ok( slides[5].h3.classList.contains( 'visible' ) )
124 Reveal.next();
125 assert.ok( slides[6].slide === Reveal.getCurrentSlide() )
126 });
127
128 QUnit.test( 'Slide specific data-auto-animate-duration', assert => {
129 assert.timeout( 400 );
130 assert.expect( 1 );
131
132 return new Promise( resolve => {
133 let callback = () => {
134 slides[2].h3.removeEventListener( 'transitionend', callback );
135 assert.ok( true, 'Transition ended within time window' );
136 resolve();
137 }
138
139 Reveal.slide(1);
140 Reveal.slide(2);
141
142 slides[2].h3.addEventListener( 'transitionend', callback );
143 } );
144 });
145
146 // QUnit.test( 'Element specific data-auto-animate-duration', assert => {
147 // assert.timeout( 400 );
148 // assert.expect( 1 );
149
150 // return new Promise( resolve => {
151 // let callback = () => {
152 // slides[1].h1.removeEventListener( 'transitionend', callback );
153 // assert.ok( true, 'Transition ended within time window' );
154 // resolve()
155 // }
156
157
158 // Reveal.slide(1);
159 // slides[1].h1.addEventListener( 'transitionend', callback );
160 // } );
161 // });
162
163 } );
164 </script>
165
166 </body>
167</html>