2013-10-14 13:37:48 +02:00
<!doctype html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< title > reveal.js - Test Markdown Attributes< / title >
2020-03-06 20:12:20 +01:00
< link rel = "stylesheet" href = "../dist/reveal.css" >
2018-01-22 15:35:15 +01:00
< link rel = "stylesheet" href = "qunit-2.5.0.css" >
2013-10-14 13:37:48 +02:00
< / head >
< body style = "overflow: auto;" >
< div id = "qunit" > < / div >
2013-11-30 23:06:47 +01:00
< div id = "qunit-fixture" > < / div >
2013-10-14 13:37:48 +02:00
2013-11-30 23:06:47 +01:00
< div class = "reveal" style = "display: none;" >
2013-10-14 13:37:48 +02:00
< div class = "slides" >
2014-02-17 21:15:02 +01:00
<!-- <section data - markdown="example.md" data - separator="^\n\n\n" data - separator - vertical="^\n\n"></section> -->
2013-10-14 13:37:48 +02:00
<!-- Slides are separated by three lines, vertical slides by two lines, attributes are one any line starting with (spaces and) two dashes -->
< section data-markdown data-separator = "^\n\n\n"
2014-02-17 21:15:02 +01:00
data-separator-vertical="^\n\n"
data-separator-notes="^Note:"
2013-11-27 22:48:01 +01:00
data-attributes="--\s(.*?)$"
2013-10-29 14:28:29 +01:00
data-charset="utf-8">
2013-10-14 13:37:48 +02:00
< script type = "text/template" >
# Test attributes in Markdown
## Slide 1
## Slide 2
2013-11-27 22:48:01 +01:00
<!-- - - id="slide2" data - transition="zoom" data - background="#A0C66B" -->
2013-10-14 13:37:48 +02:00
## Slide 2.1
2013-11-27 22:48:01 +01:00
<!-- - - data - background="#ff0000" data - transition="fade" -->
2013-10-14 13:37:48 +02:00
## Slide 2.2
[Link to Slide2](#/slide2)
## Slide 3
2013-11-27 22:48:01 +01:00
<!-- - - data - transition="zoom" data - background="#C6916B" -->
2013-10-14 13:37:48 +02:00
2013-10-29 14:29:01 +01:00
## Slide 4
< / script >
< / section >
< section data-markdown data-separator = "^\n\n\n"
2014-02-17 21:15:02 +01:00
data-separator-vertical="^\n\n"
data-separator-notes="^Note:"
2013-10-29 14:29:01 +01:00
data-charset="utf-8">
< script type = "text/template" >
# Test attributes in Markdown with default separator
## Slide 1 Def
## Slide 2 Def
2013-11-30 23:06:47 +01:00
<!-- .slide: id="slide2def" data - transition="concave" data - background="#A7C66B" -->
2013-10-29 14:29:01 +01:00
## Slide 2.1 Def
2013-11-30 23:06:47 +01:00
<!-- .slide: data - background="#f70000" data - transition="page" -->
2013-10-29 14:29:01 +01:00
## Slide 2.2 Def
[Link to Slide2](#/slide2def)
## Slide 3 Def
2013-11-30 23:06:47 +01:00
<!-- .slide: data - transition="concave" data - background="#C7916B" -->
2013-10-29 14:29:01 +01:00
2013-10-14 13:37:48 +02:00
## Slide 4
< / script >
< / section >
2013-11-30 23:06:47 +01:00
< section data-markdown >
< script type = "text/template" >
<!-- .slide: data - background="#ff0000" -->
## Hello world
< / script >
< / section >
< section data-markdown >
< script type = "text/template" >
## Hello world
<!-- .slide: data - background="#ff0000" -->
< / script >
< / section >
< section data-markdown >
< script type = "text/template" >
## Hello world
Test
<!-- .slide: data - background="#ff0000" -->
More Test
< / script >
< / section >
2013-11-06 11:06:03 +01:00
2013-10-14 13:37:48 +02:00
< / div >
< / div >
2018-01-22 15:35:15 +01:00
< script src = "qunit-2.5.0.js" > < / script >
2020-03-07 18:19:08 +01:00
< script src = "../dist/reveal.min.js" > < / script >
2013-10-14 13:37:48 +02:00
2020-03-07 18:19:08 +01:00
< script >
Reveal.initialize({
dependencies: [
{ src: '../plugin/markdown/marked.js' },
{ src: '../plugin/markdown/markdown.js' },
]
}).then( function() {
QUnit.module( 'Markdown' );
QUnit.test( 'Vertical separator', function( assert ) {
assert.strictEqual( document.querySelectorAll( '.reveal .slides>section>section' ).length, 6, 'found six vertical slides' );
});
QUnit.test( 'Id on slide', function( assert ) {
assert.strictEqual( document.querySelectorAll( '.reveal .slides>section>section#slide2' ).length, 1, 'found one slide with id slide2' );
assert.strictEqual( document.querySelectorAll( '.reveal .slides>section>section a[href="#/slide2"]' ).length, 1, 'found one slide with a link to slide2' );
});
QUnit.test( 'data-background attributes', function( assert ) {
assert.strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-background="#A0C66B"]' ).length, 1, 'found one vertical slide with data-background="#A0C66B"' );
assert.strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-background="#ff0000"]' ).length, 1, 'found one vertical slide with data-background="#ff0000"' );
assert.strictEqual( document.querySelectorAll( '.reveal .slides>section[data-background="#C6916B"]' ).length, 1, 'found one slide with data-background="#C6916B"' );
});
QUnit.test( 'data-transition attributes', function( assert ) {
assert.strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-transition="zoom"]' ).length, 1, 'found one vertical slide with data-transition="zoom"' );
assert.strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-transition="fade"]' ).length, 1, 'found one vertical slide with data-transition="fade"' );
assert.strictEqual( document.querySelectorAll( '.reveal .slides section [data-transition="zoom"]' ).length, 1, 'found one slide with data-transition="zoom"' );
});
QUnit.test( 'data-background attributes with default separator', function( assert ) {
assert.strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-background="#A7C66B"]' ).length, 1, 'found one vertical slide with data-background="#A0C66B"' );
assert.strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-background="#f70000"]' ).length, 1, 'found one vertical slide with data-background="#ff0000"' );
assert.strictEqual( document.querySelectorAll( '.reveal .slides>section[data-background="#C7916B"]' ).length, 1, 'found one slide with data-background="#C6916B"' );
});
QUnit.test( 'data-transition attributes with default separator', function( assert ) {
assert.strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-transition="concave"]' ).length, 1, 'found one vertical slide with data-transition="zoom"' );
assert.strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-transition="page"]' ).length, 1, 'found one vertical slide with data-transition="fade"' );
assert.strictEqual( document.querySelectorAll( '.reveal .slides section [data-transition="concave"]' ).length, 1, 'found one slide with data-transition="zoom"' );
});
QUnit.test( 'data-transition attributes with inline content', function( assert ) {
assert.strictEqual( document.querySelectorAll( '.reveal .slides>section[data-background="#ff0000"]' ).length, 3, 'found three horizontal slides with data-background="#ff0000"' );
});
} );
< / script >
2013-10-14 13:37:48 +02:00
< / body >
< / html >
