Gitiles
Code Review Sign In
korap.ids-mannheim.de / IDS-Mannheim / revealjs / 9ec17790abe9e0abbe86e0040222908bad42041a / . / inst / reveal.js-4.2.1 / test / test-auto-animate.html
blob: 4c8463eb39cdb0c8a818308cf6c2c3957c65b83d [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
68 QUnit.config.reorder = false;
69
70 const slides = Array.prototype.map.call( document.querySelectorAll( '.slides section' ), slide => {
71 return {
72 slide: slide,
73 h1: slide.querySelector( 'h1' ),
74 h2: slide.querySelector( 'h2' ),
75 h3: slide.querySelector( 'h3' )
76 };
77 } );
78
79 Reveal.initialize().then( async () => {
80
81 QUnit.module( 'Auto-Animate' );
82
83 QUnit.test( 'Adds data-auto-animate-target', assert => {
84 Reveal.slide(1);
85 assert.strictEqual( slides[0].h1.getAttribute( 'data-auto-animate-target' ), '', 'From elements have blank data-auto-animate-target' );
86 assert.ok( slides[1].h1.getAttribute( 'data-auto-animate-target' ).length > 0, 'To elements have a data-auto-animate-target value' );
87 });
88
89 QUnit.test( 'Ends on correct target styles', assert => {
90 Reveal.slide(1);
91 assert.strictEqual( slides[1].h2.style.opacity, "0" );
92 assert.strictEqual( slides[1].h3.offsetLeft, 100 );
93 });
94
95 QUnit.test( 'Does not add [data-auto-animate] on non auto-animated slides', assert => {
96 Reveal.slide(2);
97 Reveal.next();
98 assert.ok( slides[3].slide.hasAttribute( 'data-auto-animate' ) === false )
99 });
100
101 QUnit.test( 'autoAnimate config option', assert => {
102 Reveal.configure({ autoAnimate: false });
103
104 assert.ok( document.querySelectorAll( 'data-auto-animate-target' ).length === 0, 'Removes all [data-auto-animate-target]' )
105 assert.ok( Array.prototype.every.call( document.querySelectorAll( 'section[data-auto-animate]' ), el => {
106 return el.dataset.autoAnimate === '';
107 }, 'All data-auto-animate attributes are reset' ) );
108
109 Reveal.configure({ autoAnimate: true });
110 });
111
112 QUnit.test( 'Carries forward matching fragment visibility', assert => {
113 Reveal.slide(4);
114 assert.ok( !slides[5].h1.classList.contains( 'visible' ) )
115 Reveal.next();
116 Reveal.next();
117 Reveal.next();
118 assert.ok( slides[5].h1.classList.contains( 'visible' ) )
119 assert.ok( slides[5].h2.classList.contains( 'visible' ) )
120 assert.ok( !slides[5].h3.classList.contains( 'visible' ) )
121 Reveal.next();
122 assert.ok( slides[5].h3.classList.contains( 'visible' ) )
123 Reveal.next();
124 assert.ok( slides[6].slide === Reveal.getCurrentSlide() )
125 });
126
127 QUnit.test( 'Slide specific data-auto-animate-duration', assert => {
128 assert.timeout( 400 );
129 assert.expect( 1 );
130
131 return new Promise( resolve => {
132 let callback = () => {
133 slides[2].h3.removeEventListener( 'transitionend', callback );
134 assert.ok( true, 'Transition ended within time window' );
135 resolve();
136 }
137
138 Reveal.slide(1);
139 Reveal.slide(2);
140
141 slides[2].h3.addEventListener( 'transitionend', callback );
142 } );
143 });
144
145 // QUnit.test( 'Element specific data-auto-animate-duration', assert => {
146 // assert.timeout( 400 );
147 // assert.expect( 1 );
148
149 // return new Promise( resolve => {
150 // let callback = () => {
151 // slides[1].h1.removeEventListener( 'transitionend', callback );
152 // assert.ok( true, 'Transition ended within time window' );
153 // resolve()
154 // }
155
156
157 // Reveal.slide(1);
158 // slides[1].h1.addEventListener( 'transitionend', callback );
159 // } );
160 // });
161
162 } );
163 </script>
164
165 </body>
166</html>