Implement background image sizing with keyword and scale

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## [Unreleased]
 
+* Implement background image sizing with keyword and scale ([#10](https://github.com/marp-team/marpit/pull/10))
+
 ## v0.0.2 - 2018-04-28
 
 * Support background image syntax ([#4](https://github.com/marp-team/marpit/pull/4), [#5](https://github.com/marp-team/marpit/pull/5), and [#8](https://github.com/marp-team/marpit/pull/8))

src/markdown/background_image.js

@@ -1,4 +1,10 @@
 /** @module */
+const bgSizeKeywords = {
+  auto: 'auto',
+  contain: 'contain',
+  cover: 'cover',
+  fit: 'contain',
+}
 
 /**
  * Marpit background image plugin.
@@ -20,6 +26,11 @@ function backgroundImage(md) {
         if (t.meta.marpitImage.options.includes('bg')) {
           t.meta.marpitImage.background = true
           t.hidden = true
+
+          t.meta.marpitImage.options.forEach(opt => {
+            if (bgSizeKeywords[opt])
+              t.meta.marpitImage.backgroundSize = bgSizeKeywords[opt]
+          })
         }
       })
     }
@@ -39,13 +50,17 @@ function backgroundImage(md) {
         tb.children.forEach(t => {
           if (t.type !== 'image') return
 
-          const { background, url } = t.meta.marpitImage
+          const { background, backgroundSize, size, url } = t.meta.marpitImage
 
           if (background && !url.match(/^\s*$/)) {
             slide.meta.marpitDirectives = {
               ...(slide.meta.marpitDirectives || {}),
               backgroundImage: `url("${url}")`,
             }
+
+            if (size || backgroundSize)
+              slide.meta.marpitDirectives.backgroundSize =
+                size || backgroundSize
           }
         })
       })

src/markdown/parse_image.js

@@ -22,6 +22,12 @@ function parseImage(md) {
           url: token.attrGet('src'),
           options,
         }
+
+        options.forEach(opt => {
+          // TODO: Implement cross-browser image zoom without affecting DOM tree
+          // (Pre-released Marp uses `zoom` but it has not supported in Firefox)
+          if (opt.match(/^(\d*\.)?\d+%$/)) token.meta.marpitImage.size = opt
+        })
       }
     })
   })

test/markdown/background_image.js

@@ -60,4 +60,33 @@ describe('Marpit background image plugin', () => {
       assert(firstSlide.meta.marpitDirectives.backgroundImage === 'url(A)')
     })
   })
+
+  context('with sizing keyword / scale', () => {
+    const directives = markdown => {
+      const [parsed] = md().parse(markdown)
+      return parsed.meta.marpitDirectives
+    }
+
+    it('assigns corresponded backgroundSize spot directive', () => {
+      assert(directives('![bg auto](img)').backgroundSize === 'auto')
+      assert(directives('![bg contain](img)').backgroundSize === 'contain')
+      assert(directives('![bg cover](img)').backgroundSize === 'cover')
+      assert(directives('![bg fit](img)').backgroundSize === 'contain')
+    })
+
+    it('assigns specified scale to backgroundSize spot directive', () => {
+      assert(directives('![bg 50%](img)').backgroundSize === '50%')
+      assert(directives('![bg 123.45%](img)').backgroundSize === '123.45%')
+      assert(directives('![bg .25%](img)').backgroundSize === '.25%')
+
+      // The percentage scale is prior to the background keyword.
+      assert(directives('![bg 100% contain](img)').backgroundSize === '100%')
+    })
+
+    it('ignores invalid scale', () => {
+      assert(directives('![bg %](img)').backgroundSize !== '%')
+      assert(directives('![bg .%](img)').backgroundSize !== '.%')
+      assert(directives('![bg 25](img)').backgroundSize !== '25')
+    })
+  })
 })