diff --git a/CHANGELOG.md b/CHANGELOG.md index 7f051ff5..df3bee74 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ * Add `header` and `footer` directives ([#22](https://github.com/marp-team/marpit/pull/22)) * Support importing other theme CSS with `@import` (or `@import-theme`) ([#24](https://github.com/marp-team/marpit/pull/24)) * Add PostCSS import rollup plugin to work `@charset` and `@import` at-rules correctly ([#26](https://github.com/marp-team/marpit/pull/26)) +* Change role of pagination layer to pseudo layer on advanced background ([#27](https://github.com/marp-team/marpit/pull/27)) ## v0.0.5 - 2018-05-12 diff --git a/src/markdown/background_image.js b/src/markdown/background_image.js index 537267d0..36807ff0 100644 --- a/src/markdown/background_image.js +++ b/src/markdown/background_image.js @@ -189,29 +189,27 @@ function backgroundImage(md) { t, ] } else if (current && t.type === 'marpit_inline_svg_content_close') { - const { open } = current.meta.marpitBackground - const marpitPagination = open.attrGet('data-marpit-pagination') - - if (marpitPagination) { - const { height, width } = current.meta.marpitBackground - tokens = [ - t, - ...wrapTokens( - 'marpit_advanced_background_foreign_object', - { - tag: 'foreignObject', - width, - height, - 'data-marpit-advanced-background': 'pagination', - }, - wrapTokens('marpit_advanced_pagination_section', { - tag: 'section', - 'data-marpit-advanced-background': 'pagination', - 'data-marpit-pagination': marpitPagination, - }) - ), - ] - } + const { open, height, width } = current.meta.marpitBackground + + tokens = [ + t, + ...wrapTokens( + 'marpit_advanced_background_foreign_object', + { + tag: 'foreignObject', + width, + height, + 'data-marpit-advanced-background': 'pseudo', + }, + wrapTokens('marpit_advanced_pseudo_section', { + tag: 'section', + 'data-marpit-advanced-background': 'pseudo', + 'data-marpit-pagination': open.attrGet( + 'data-marpit-pagination' + ), + }) + ), + ] current = undefined } diff --git a/src/postcss/advanced_background.js b/src/postcss/advanced_background.js index dde5fd99..979597be 100644 --- a/src/postcss/advanced_background.js +++ b/src/postcss/advanced_background.js @@ -17,7 +17,9 @@ section[data-marpit-advanced-background="background"] { padding: 0 !important; } +section[data-marpit-advanced-background="background"]::before, section[data-marpit-advanced-background="background"]::after, +section[data-marpit-advanced-background="content"]::before, section[data-marpit-advanced-background="content"]::after { display: none !important; } @@ -49,12 +51,12 @@ section[data-marpit-advanced-background="background"] > div[data-marpit-advanced } section[data-marpit-advanced-background="content"], -section[data-marpit-advanced-background="pagination"] { +section[data-marpit-advanced-background="pseudo"] { background: transparent !important; } -section[data-marpit-advanced-background="pagination"], -:marpit-container > svg > foreignObject[data-marpit-advanced-background="pagination"] { +section[data-marpit-advanced-background="pseudo"], +:marpit-container > svg > foreignObject[data-marpit-advanced-background="pseudo"] { pointer-events: none !important; } diff --git a/test/markdown/background_image.js b/test/markdown/background_image.js index f0015b2e..ae027d92 100644 --- a/test/markdown/background_image.js +++ b/test/markdown/background_image.js @@ -108,9 +108,9 @@ describe('Marpit background image plugin', () => { lowerCaseTags: false, }) - it('renders the structure for advanced background to another foreignObject', () => { + it('renders advanced background to another foreignObject', () => { const $ = $load(mdSVG().render('![bg](image)')) - assert($('svg[viewBox="0 0 100 100"] > foreignObject').length === 2) + assert($('svg[viewBox="0 0 100 100"] > foreignObject').length === 3) const bg = $('svg > foreignObject:first-child') const bgSection = bg.find( @@ -134,7 +134,9 @@ describe('Marpit background image plugin', () => { it('assigns data attribute to section element of the slide content', () => { const $ = $load(mdSVG().render('![bg](image)\n\n# test')) - const slideSection = $('svg > foreignObject:last-child > section') + const slideSection = $( + 'svg > foreignObject > section[data-marpit-advanced-background="content"]' + ) assert(slideSection.find('h1').length === 1) assert(slideSection.attr('data-marpit-advanced-background') === 'content') @@ -174,24 +176,28 @@ describe('Marpit background image plugin', () => { splitBackgroundKeywords.forEach(keyword => { context(`with the ${keyword} keyword for split background`, () => { const $ = $load(mdSVG().render(`![bg ${keyword}](image)`)) - const foreignObject = $('svg > foreignObject:last-child') + const section = $( + 'svg > foreignObject > section[data-marpit-advanced-background="content"]' + ) + const foreignObject = section.parent() - it('assigns the width attribute of foreignObject for content as 50%', () => { - assert(foreignObject.attr('width') === '50%') - }) + it('assigns the width attribute of foreignObject for content as 50%', () => + assert(foreignObject.attr('width') === '50%')) - it('assigns data attribute of the keyword for split background', () => { - const section = foreignObject.find('> section') + it('assigns data attribute of the keyword for split background', () => assert( section.attr('data-marpit-advanced-background-split') === keyword - ) - }) + )) }) }) it('assigns x attribute of foreignObject for content as 50% with left keyword', () => { const $ = $load(mdSVG().render(`![bg left](image)`)) - const foreignObject = $('svg > foreignObject:last-child') + const section = $( + 'svg > foreignObject > section[data-marpit-advanced-background="content"]' + ) + const foreignObject = section.parent() + assert(foreignObject.attr('x') === '50%') }) @@ -201,7 +207,9 @@ describe('Marpit background image plugin', () => { const $ = $load(mdSVG().render(`![bg right](a) ![bg left](b)`)) it('uses the last defined keyword', () => { - const section = $('svg > foreignObject:last-child > section') + const section = $( + 'svg > foreignObject > section[data-marpit-advanced-background="content"]' + ) assert( section.attr('data-marpit-advanced-background-split') === 'left' ) @@ -292,17 +300,13 @@ describe('Marpit background image plugin', () => { context('with paginate directive', () => { const $ = $load(mdSVG().render(' ![bg](test)')) - it('appends to last', () => { + it('assigns data-marpit-pagination attribute to pseudo layer', () => { const foreignObjects = $('svg > foreignObject') assert(foreignObjects.length === 3) const lastFO = foreignObjects.eq(2) - assert(lastFO.is('[data-marpit-advanced-background="pagination"]')) - assert( - lastFO - .find('> section') - .is('[data-marpit-advanced-background="pagination"]') - ) + assert(lastFO.is('[data-marpit-advanced-background="pseudo"]')) + assert(lastFO.find('> section').is('[data-marpit-pagination="1"]')) }) }) })