etro 0.7.0 → 0.8.0

package/spec/effect.spec.js

@@ -70,7 +70,8 @@ function compareImageData (original, effect, path) {
   return new Promise(resolve => {
     const result = copyCanvas(original)
     const ctx = result.getContext('2d')
-    effect.apply({ canvas: result, cctx: ctx, movie: new etro.Movie(dummyCanvas) }) // movie should be unique, to prevent caching!
+    const dummyMovie = new etro.Movie({ canvas: dummyCanvas })
+    effect.apply({ canvas: result, cctx: ctx, movie: dummyMovie }) // movie should be unique, to prevent caching!
     const actual = ctx.getImageData(0, 0, result.width, result.height)
 
     getImageData(path).then(expected => {
@@ -114,7 +115,7 @@ describe('Effects', function () {
     let effect
 
     beforeEach(function () {
-      effect = new etro.effect.Base(0, 3)
+      effect = new etro.effect.Base()
     })
 
     it("should be of type 'effect'", function () {
@@ -129,19 +130,46 @@ describe('Effects', function () {
   })
 
   describe('Stack', function () {
-    let effects, stack
+    let stack
 
     beforeEach(function () {
-      effects = [
-        new etro.effect.Brightness(10),
-        new etro.effect.Contrast(1.5)
+      const effects = [
+        new etro.effect.Brightness({ brightness: 10 }),
+        new etro.effect.Contrast({ contrast: 1.5 })
       ]
-      stack = new etro.effect.Stack(effects)
-      stack.attach(new etro.Movie(dummyCanvas))
+      stack = new etro.effect.Stack({ effects })
+      stack.attach(new etro.Movie({ canvas: dummyCanvas }))
     })
 
     it('should attach its children to the target when attached', function () {
-      expect(effects.every(child => child._target === stack._target)).toBe(true)
+      expect(stack.effects.every(child => child._target === stack._target)).toBe(true)
+    })
+
+    it('should attach a new child', function () {
+      const child = new etro.effect.Grayscale()
+      spyOn(child, 'attach')
+
+      stack.effects.push(child)
+
+      expect(child.attach).toHaveBeenCalled()
+    })
+
+    it('should detach each child that is removed', function () {
+      const child = stack.effects[0]
+      spyOn(child, 'detach')
+
+      stack.effects.shift() // remove first element
+
+      expect(child.detach).toHaveBeenCalled()
+    })
+
+    it('should detach a child that is replaced', function () {
+      const child = stack.effects[0]
+      spyOn(child, 'detach')
+
+      stack.effects[0] = new etro.effect.Base()
+
+      expect(child.detach).toHaveBeenCalled()
     })
 
     it('should be the same as applying individual effects', function () {
@@ -149,18 +177,38 @@ describe('Effects', function () {
       const result = copyCanvas(original)
       const resultCtx = result.getContext('2d')
 
-      effects.forEach(effect => effect.apply({
-        canvas: result, cctx: resultCtx, movie: new etro.Movie(dummyCanvas)
+      stack.effects.forEach(effect => effect.apply({
+        canvas: result, cctx: resultCtx, movie: new etro.Movie({ canvas: dummyCanvas })
       }))
       const expected = resultCtx.getImageData(0, 0, result.width, result.height)
 
       resultCtx.drawImage(original, 0, 0) // reset
       stack.apply({
-        canvas: result, cctx: resultCtx, movie: new etro.Movie(dummyCanvas)
+        canvas: result, cctx: resultCtx, movie: new etro.Movie({ canvas: dummyCanvas })
       })
       const actual = resultCtx.getImageData(0, 0, result.width, result.height)
       expect(actual).toEqual(expected)
     })
+
+    it('children array should implement common array methods', function () {
+      const dummy = () => new etro.effect.Base()
+      const calls = {
+        concat: [[dummy()]],
+        every: [layer => true],
+        includes: [dummy()],
+        pop: [],
+        push: [dummy()],
+        unshift: [dummy()]
+      }
+      for (const method in calls) {
+        const args = calls[method]
+        const copy = [...stack.effects]
+        const expectedResult = Array.prototype[method].apply(copy, args)
+        const actualResult = stack.effects[method](...args)
+        expect(actualResult).toEqual(expectedResult)
+        expect(stack.effects).toEqual(copy)
+      }
+    })
   })
 
   describe('Shader', function () {
@@ -168,7 +216,7 @@ describe('Effects', function () {
 
     beforeEach(function () {
       effect = new etro.effect.Shader()
-      effect._target = new etro.Movie(dummyCanvas) // so val doesn't break because it can't cache (it requires a movie)
+      effect._target = new etro.Movie({ canvas: dummyCanvas }) // so val doesn't break because it can't cache (it requires a movie)
     })
 
     it('should construct', function () {})
@@ -176,7 +224,8 @@ describe('Effects', function () {
     it('should not change the target if no arguments are passed', function () {
       const { ctx, imageData: originalData } = createRandomCanvas(2)
       // apply effect to a fake layer containing `ctx`
-      effect.apply({ canvas: ctx.canvas, cctx: ctx, movie: new etro.Movie(dummyCanvas) })
+      const dummyMovie = new etro.Movie({ canvas: dummyCanvas })
+      effect.apply({ canvas: ctx.canvas, cctx: ctx, movie: dummyMovie })
       // Verify no change
       const imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height)
       expect(imageData).toEqual(originalData)
@@ -185,11 +234,12 @@ describe('Effects', function () {
 
   describe('Brightness', function () {
     it('should change the brightness', function () {
-      const effect = new etro.effect.Brightness(5)
-      effect._target = new etro.Movie(dummyCanvas) // so val doesn't break because it can't cache (it requires a movie)
+      const effect = new etro.effect.Brightness({ brightness: 5 })
+      effect._target = new etro.Movie({ canvas: dummyCanvas }) // so val doesn't break because it can't cache (it requires a movie)
       const ctx = createPixel(RED)
       // Apply effect to a fake layer containing `ctx`
-      effect.apply({ canvas: ctx.canvas, cctx: ctx, movie: new etro.Movie(dummyCanvas) })
+      const dummyMovie = new etro.Movie({ canvas: dummyCanvas })
+      effect.apply({ canvas: ctx.canvas, cctx: ctx, movie: dummyMovie })
       // Verify brightness changed
       const imageData = ctx.getImageData(0, 0, 1, 1)
       expect(imageData.data).toEqual(RED.map((c, i) => c % 4 === 3 ? c
@@ -199,11 +249,12 @@ describe('Effects', function () {
 
   describe('Contrast', function () {
     it('should change the contrast', function () {
-      const effect = new etro.effect.Contrast(5)
-      effect._target = new etro.Movie(dummyCanvas) // so val doesn't break because it can't cache (it requires a movie)
+      const effect = new etro.effect.Contrast({ contrast: 5 })
+      effect._target = new etro.Movie({ canvas: dummyCanvas }) // so val doesn't break because it can't cache (it requires a movie)
       const ctx = createPixel(RED)
       // Apply effect to a fake layer containing `ctx`
-      effect.apply({ canvas: ctx.canvas, cctx: ctx, movie: new etro.Movie(dummyCanvas) })
+      const dummyMovie = new etro.Movie({ canvas: dummyCanvas })
+      effect.apply({ canvas: ctx.canvas, cctx: ctx, movie: dummyMovie })
       // Verify brightness changed
       const imageData = ctx.getImageData(0, 0, 1, 1)
       expect(imageData.data).toEqual(RED.map((c, i) => c % 4 === 3 ? c
@@ -211,13 +262,26 @@ describe('Effects', function () {
     })
   })
 
+  describe('Grayscale', function () {
+    it('should desaturate the target', function (done) {
+      const effect = new etro.effect.Grayscale()
+      effect._target = new etro.Movie({ canvas: dummyCanvas }) // so val doesn't break because it can't cache (it requires a movie)
+      const path = 'grayscale.png'
+      whenOriginalLoaded(original =>
+        compareImageData(original, effect, path).then(done))
+    })
+  })
+
   describe('Channels', function () {
     it('should multiply each channel by a constant', function () {
-      const effect = new etro.effect.Channels({ r: 0.5, g: 1.25, b: 2 })
-      effect._target = new etro.Movie(dummyCanvas) // so val doesn't break because it can't cache (it requires a movie)
+      const effect = new etro.effect.Channels({
+        channels: { r: 0.5, g: 1.25, b: 2 }
+      })
+      effect._target = new etro.Movie({ canvas: dummyCanvas }) // so val doesn't break because it can't cache (it requires a movie)
       const ctx = createPixel(RED)
       // Apply effect to a fake layer containing `ctx`
-      effect.apply({ canvas: ctx.canvas, cctx: ctx, movie: new etro.Movie(dummyCanvas) })
+      const dummyMovie = new etro.Movie({ canvas: dummyCanvas })
+      effect.apply({ canvas: ctx.canvas, cctx: ctx, movie: dummyMovie })
       // Verify brightness changed
       const imageData = ctx.getImageData(0, 0, 1, 1)
       expect(imageData.data).toEqual(new Uint8ClampedArray([
@@ -233,14 +297,17 @@ describe('Effects', function () {
     let effect
 
     beforeEach(function () {
-      effect = new etro.effect.ChromaKey({ r: 250 }, 5) // will hit r=255, because threshold is 5
-      effect._target = new etro.Movie(dummyCanvas) // so val doesn't break because it can't cache (it requires a movie)
+      effect = new etro.effect.ChromaKey({
+        target: { r: 250 },
+        threshold: 5
+      }) // will hit r=255, because threshold is 5
+      effect._target = new etro.Movie({ canvas: dummyCanvas }) // so val doesn't break because it can't cache (it requires a movie)
     })
 
     it('should make the target color transparent', function () {
       const ctx = createPixel(RED)
       // Apply effect to a fake layer containing `ctx`
-      effect.apply({ canvas: ctx.canvas, cctx: ctx, movie: new etro.Movie(dummyCanvas) })
+      effect.apply({ canvas: ctx.canvas, cctx: ctx, movie: new etro.Movie({ canvas: dummyCanvas }) })
       // Verify brightness changed
       const imageData = ctx.getImageData(0, 0, 1, 1)
       const alpha = imageData.data[3]
@@ -250,7 +317,7 @@ describe('Effects', function () {
     it('should not make other colors transparent', function () {
       const ctx = createPixel(BLUE)
       // Apply effect to a fake layer containing `ctx`
-      effect.apply({ canvas: ctx.canvas, cctx: ctx, movie: new etro.Movie(dummyCanvas) })
+      effect.apply({ canvas: ctx.canvas, cctx: ctx, movie: new etro.Movie({ canvas: dummyCanvas }) })
       // Verify brightness changed
       const imageData = ctx.getImageData(0, 0, 1, 1)
       const alpha = imageData.data[3]
@@ -260,8 +327,8 @@ describe('Effects', function () {
 
   describe('GaussianBlurHorizontal', function () {
     it('should blur with 5-pixel radius', function (done) {
-      const effect = new etro.effect.GaussianBlurHorizontal(5)
-      effect._target = new etro.Movie(dummyCanvas) // so val doesn't break because it can't cache (it requires a movie)
+      const effect = new etro.effect.GaussianBlurHorizontal({ radius: 5 })
+      effect._target = new etro.Movie({ canvas: dummyCanvas }) // so val doesn't break because it can't cache (it requires a movie)
       const path = 'gaussian-blur-horizontal.png'
       whenOriginalLoaded(original =>
         compareImageData(original, effect, path).then(done))
@@ -270,8 +337,8 @@ describe('Effects', function () {
 
   describe('GaussianBlurVertical', function () {
     it('should blur with 5-pixel radius', function (done) {
-      const effect = new etro.effect.GaussianBlurVertical(5)
-      effect._target = new etro.Movie(dummyCanvas) // so val doesn't break because it can't cache (it requires a movie)
+      const effect = new etro.effect.GaussianBlurVertical({ radius: 5 })
+      effect._target = new etro.Movie({ canvas: dummyCanvas }) // so val doesn't break because it can't cache (it requires a movie)
       const path = 'gaussian-blur-vertical.png'
       whenOriginalLoaded(original =>
         compareImageData(original, effect, path).then(done))
@@ -280,8 +347,8 @@ describe('Effects', function () {
 
   describe('Pixelate', function () {
     it('should decimate to 3-pixel texels', function (done) {
-      const effect = new etro.effect.Pixelate(3)
-      effect._target = new etro.Movie(dummyCanvas) // so val doesn't break because it can't cache (it requires a movie)
+      const effect = new etro.effect.Pixelate({ pixelSize: 3 })
+      effect._target = new etro.Movie({ canvas: dummyCanvas }) // so val doesn't break because it can't cache (it requires a movie)
       const path = 'pixelate.png'
       whenOriginalLoaded(original =>
         compareImageData(original, effect, path).then(done))
@@ -290,60 +357,62 @@ describe('Effects', function () {
 
   describe('Transform', function () {
     it('should translate', function (done) {
-      const effect = new etro.effect.Transform(
-        new etro.effect.Transform.Matrix().translate(-3, 5)
-      )
-      effect._target = new etro.Movie(dummyCanvas) // so val doesn't break because it can't cache (it requires a movie)
+      const effect = new etro.effect.Transform({
+        matrix: new etro.effect.Transform.Matrix().translate(-3, 5)
+      })
+      effect._target = new etro.Movie({ canvas: dummyCanvas }) // so val doesn't break because it can't cache (it requires a movie)
       const path = 'transform/translate.png'
       whenOriginalLoaded(original =>
         compareImageData(original, effect, path).then(done))
     })
 
     it('should translate by non-integers', function (done) {
-      const effect = new etro.effect.Transform(
-        new etro.effect.Transform.Matrix().translate(0.5, 0.5)
-      )
-      effect._target = new etro.Movie(dummyCanvas) // so val doesn't break because it can't cache (it requires a movie)
+      const effect = new etro.effect.Transform({
+        matrix: new etro.effect.Transform.Matrix().translate(0.5, 0.5)
+      })
+      effect._target = new etro.Movie({ canvas: dummyCanvas }) // so val doesn't break because it can't cache (it requires a movie)
       const path = 'transform/translate-fraction.png'
       whenOriginalLoaded(original =>
         compareImageData(original, effect, path).then(done))
     })
 
     it('should scale', function (done) {
-      const effect = new etro.effect.Transform(
-        new etro.effect.Transform.Matrix().scale(2, 2)
-      )
-      effect._target = new etro.Movie(dummyCanvas) // so val doesn't break because it can't cache (it requires a movie)
+      const effect = new etro.effect.Transform({
+        matrix: new etro.effect.Transform.Matrix().scale(2, 2)
+      })
+      effect._target = new etro.Movie({ canvas: dummyCanvas }) // so val doesn't break because it can't cache (it requires a movie)
       const path = 'transform/scale.png'
       whenOriginalLoaded(original =>
         compareImageData(original, effect, path).then(done))
     })
 
     it('should scale by non-integers', function (done) {
-      const effect = new etro.effect.Transform(
-        new etro.effect.Transform.Matrix().scale(0.5, 0.5)
-      )
-      effect._target = new etro.Movie(dummyCanvas) // so val doesn't break because it can't cache (it requires a movie)
+      const effect = new etro.effect.Transform({
+        matrix: new etro.effect.Transform.Matrix().scale(0.5, 0.5)
+      })
+      effect._target = new etro.Movie({ canvas: dummyCanvas }) // so val doesn't break because it can't cache (it requires a movie)
       const path = 'transform/scale-fraction.png'
       whenOriginalLoaded(original =>
         compareImageData(original, effect, path).then(done))
     })
 
     it('should rotate', function (done) {
-      const effect = new etro.effect.Transform(
-        new etro.effect.Transform.Matrix().rotate(Math.PI / 6)
-      )
-      effect._target = new etro.Movie(dummyCanvas) // so val doesn't break because it can't cache (it requires a movie)
+      const effect = new etro.effect.Transform({
+        matrix: new etro.effect.Transform.Matrix().rotate(Math.PI / 6)
+      })
+      effect._target = new etro.Movie({ canvas: dummyCanvas }) // so val doesn't break because it can't cache (it requires a movie)
       const path = 'transform/rotate.png'
       whenOriginalLoaded(original =>
         compareImageData(original, effect, path).then(done))
     })
 
     it('should multiply together', function (done) {
-      const effect = new etro.effect.Transform(
-        new etro.effect.Transform.Matrix().scale(2, 2)
-          .multiply(new etro.effect.Transform.Matrix().translate(-3, 5)))
-      effect._target = new etro.Movie(dummyCanvas) // so val doesn't break because it can't cache (it requires a movie)
+      const effect = new etro.effect.Transform({
+        matrix: new etro.effect.Transform.Matrix()
+          .scale(2, 2)
+          .multiply(new etro.effect.Transform.Matrix().translate(-3, 5))
+      })
+      effect._target = new etro.Movie({ canvas: dummyCanvas }) // so val doesn't break because it can't cache (it requires a movie)
       const path = 'transform/multiply.png'
       whenOriginalLoaded(original =>
         compareImageData(original, effect, path).then(done))

package/spec/event.spec.js

@@ -22,4 +22,18 @@ describe('Events', function () {
     etro.event.publish(o, 'foo', {})
     expect(notified).toEqual(types.slice(2))
   })
+
+  it('unsubscribe removes event listeners', function () {
+    const o = {}
+    let listenerCalled = false
+    const listener = () => {
+      listenerCalled = true
+    }
+
+    etro.event.subscribe(o, 'test', listener)
+    etro.event.unsubscribe(o, listener)
+    etro.event.publish(o, 'test', {})
+
+    expect(listenerCalled).toBe(false)
+  })
 })

package/spec/layer.spec.js

@@ -3,7 +3,7 @@ describe('Layers', function () {
     let layer
 
     beforeEach(function () {
-      layer = new etro.layer.Base(0, 4)
+      layer = new etro.layer.Base({ startTime: 0, duration: 4 })
     })
 
     it("should be of type 'layer'", function () {
@@ -37,11 +37,35 @@ describe('Layers', function () {
     let layer
 
     beforeEach(function () {
-      layer = new etro.layer.Visual(0, 4, { background: 'blue' })
-      layer.attach(
-        { width: 400, height: 400, currentTime: 0, movie: {}, propertyFilters: {} }
-      )
+      layer = new etro.layer.Visual({ startTime: 0, duration: 4, background: 'blue' })
+      const movie = { width: 400, height: 400, currentTime: 0, propertyFilters: {} }
+      movie.movie = movie
+      layer.attach(movie)
       layer.render(0)
+      // Clear cache populated by render()
+      etro.clearCachedValues(movie)
+    })
+
+    it("should use the movie's width when no layer width is given", function () {
+      const width = etro.val(layer, 'width', 0)
+      expect(width).toBe(layer.movie.width)
+    })
+
+    it("should use the movie's height when no layer height is given", function () {
+      const height = etro.val(layer, 'height', 0)
+      expect(height).toBe(layer.movie.height)
+    })
+
+    it('should use the width if provided', function () {
+      layer.width = 4
+      const width = etro.val(layer, 'width', 0)
+      expect(width).toBe(4)
+    })
+
+    it('should use the height if provided', function () {
+      layer.height = 4
+      const height = etro.val(layer, 'height', 0)
+      expect(height).toBe(4)
     })
 
     it('should render the background', function () {
@@ -56,36 +80,96 @@ describe('Layers', function () {
       }
       expect(allBlue).toBe(true)
     })
+
+    it('should call `attach` when an effect is added', function () {
+      const effect = new etro.effect.Base()
+      spyOn(effect, 'attach')
+      layer.effects.push(effect)
+      expect(effect.attach).toHaveBeenCalled()
+    })
+
+    it('should call `detach` when an effect is removed', function () {
+      const effect = new etro.effect.Base()
+      layer.effects.push(effect)
+      spyOn(effect, 'detach')
+      layer.effects.pop()
+      expect(effect.detach).toHaveBeenCalled()
+    })
+
+    it('should call `detach` when an effect is replaced', function () {
+      const effect = new etro.effect.Base()
+      layer.effects.push(effect)
+      spyOn(effect, 'detach')
+      layer.effects[0] = new etro.effect.Base()
+      expect(effect.detach).toHaveBeenCalled()
+    })
   })
 
-  describe('Image', function () {
+  describe('VisualSource', function () {
+    const CustomVisualSource = etro.layer.VisualSourceMixin(etro.layer.Visual)
     let layer
 
     beforeEach(function (done) {
       const image = new Image()
       image.src = '/base/spec/assets/layer/image.jpg'
       image.onload = () => {
-        layer = new etro.layer.Image(0, 4, image)
+        layer = new CustomVisualSource({ startTime: 0, duration: 4, source: image })
         // Simulate attach to movie
-        layer.attach(
-          { width: image.width, height: image.height, currentTime: 0 }
-        )
+        const movie = { width: image.width, height: image.height, currentTime: 0, propertyFilters: [] }
+        movie.movie = movie
+        layer.attach(movie)
         done()
       }
     })
 
+    it("should use the image source's width when no sourceWidth is provided", function () {
+      const sourceWidth = etro.val(layer, 'sourceWidth', 0)
+      expect(sourceWidth).toBe(layer.source.width)
+    })
+
+    it("should use the image source's height when no sourceHeight is provided", function () {
+      const sourceHeight = etro.val(layer, 'sourceHeight', 0)
+      expect(sourceHeight).toBe(layer.source.height)
+    })
+
+    it('should use sourceWidth when no destWidth is provided', function () {
+      const destWidth = etro.val(layer, 'destWidth', 0)
+      const sourceWidth = etro.val(layer, 'sourceWidth', 0)
+      expect(destWidth).toBe(sourceWidth)
+    })
+
+    it('should use sourceHeight when no destHeight is provided', function () {
+      const destHeight = etro.val(layer, 'destHeight', 0)
+      const sourceHeight = etro.val(layer, 'sourceHeight', 0)
+      expect(destHeight).toBe(sourceHeight)
+    })
+
+    it('should use destWidth when no width is provided', function () {
+      const width = etro.val(layer, 'width', 0)
+      const destWidth = etro.val(layer, 'destWidth', 0)
+      expect(width).toBe(destWidth)
+    })
+
+    it('should use destHeight when no height is provided', function () {
+      const height = etro.val(layer, 'height', 0)
+      const destHeight = etro.val(layer, 'destHeight', 0)
+      expect(height).toBe(destHeight)
+    })
+
     it('should render', function () {
       // Render layer (actual outcome)
       layer.render(0)
-      const imageData = layer.cctx.getImageData(0, 0, layer.width, layer.height)
+      const width = etro.val(layer, 'width', 0)
+      const height = etro.val(layer, 'height', 0)
+      const imageData = layer.cctx.getImageData(0, 0, width, height)
 
       // Draw image (expected outcome)
       const testCanv = document.createElement('canvas')
-      testCanv.width = layer.width
-      testCanv.height = layer.height
+      testCanv.width = width
+      testCanv.height = height
       const testCtx = testCanv.getContext('2d')
-      testCtx.drawImage(layer.image, 0, 0, layer.width, layer.height)
-      const testImageData = testCtx.getImageData(0, 0, layer.width, layer.height)
+      testCtx.drawImage(layer.source, 0, 0, width, height)
+      const testImageData = testCtx.getImageData(0, 0, width, height)
 
       // Compare expected outcome with actual outcome
       let equal = true
@@ -94,12 +178,75 @@ describe('Layers', function () {
       }
       expect(equal).toBe(true)
     })
+
+    it('should scale with `imageWidth` and `imageHeight`', function () {
+      const resizedLayer = new etro.layer.Image({
+        startTime: 0,
+        duration: 1,
+        source: layer.source,
+        destWidth: 100,
+        destHeight: 100
+      })
+
+      // Render layer (actual outcome)
+      const movie = {}
+      resizedLayer.attach(movie)
+      resizedLayer.render(0)
+      const imageData = resizedLayer.cctx.getImageData(0, 0, resizedLayer.destWidth, resizedLayer.destHeight)
+
+      // Draw image (expected outcome)
+      const testCanv = document.createElement('canvas')
+      testCanv.width = resizedLayer.destWidth
+      testCanv.height = resizedLayer.destHeight
+      const testCtx = testCanv.getContext('2d')
+      testCtx.drawImage(layer.source, 0, 0, resizedLayer.destWidth, resizedLayer.destHeight)
+      const testImageData = testCtx.getImageData(0, 0, resizedLayer.destWidth, resizedLayer.destHeight)
+
+      // Compare expected outcome with actual outcome
+      expect(imageData.data).toEqual(testImageData.data)
+    })
+
+    it('should be cropped to the clip with and height', function () {
+      const newLayer = new etro.layer.Image({
+        startTime: 0,
+        duration: 1,
+        source: layer.source,
+        sourceWidth: 2,
+        sourceHeight: 3
+      })
+
+      // Render layer (actual outcome)
+      const movie = {}
+      newLayer.attach(movie)
+      newLayer.render(0)
+      const imageData = newLayer.cctx.getImageData(
+        0, 0, newLayer.sourceWidth, newLayer.sourceHeight
+      )
+
+      // Draw image (expected outcome)
+      // testCanv will contain the part of the layer with the image.
+      const testCanv = document.createElement('canvas')
+      testCanv.width = newLayer.sourceWidth
+      testCanv.height = newLayer.sourceHeight
+      const testCtx = testCanv.getContext('2d')
+      testCtx.drawImage(
+        layer.source,
+        0, 0,
+        newLayer.sourceWidth, newLayer.sourceHeight,
+        0, 0,
+        newLayer.sourceWidth, newLayer.sourceHeight
+      )
+      const testImageData = testCtx.getImageData(0, 0, newLayer.sourceWidth, newLayer.sourceHeight)
+
+      // Compare expected image data with actual image data
+      expect(imageData.data).toEqual(testImageData.data)
+    })
   })
 
   describe('Media', function () {
     let layer
     // Media is an abstract mixin, so make a concrete subclass here.
-    const CustomMedia = etro.layer.MediaMixin(etro.layer.Base)
+    const CustomMedia = etro.layer.AudioSourceMixin(etro.layer.Base)
     const source = new Audio()
 
     beforeAll(function (done) {
@@ -108,7 +255,17 @@ describe('Layers', function () {
     })
 
     beforeEach(function () {
-      layer = new CustomMedia(0, source)
+      layer = new CustomMedia({ startTime: 0, source })
+    })
+
+    it('should update its currentTime when the movie seeks', function () {
+      const movie = {
+        actx: new AudioContext(),
+        currentTime: 2 // not 0
+      }
+      layer.attach(movie)
+      etro.event.publish(movie, 'movie.seek', {})
+      expect(layer.currentTime).toBe(2)
     })
 
     it('should have its duration depend on its playbackRate', function () {
@@ -137,7 +294,7 @@ describe('Layers', function () {
 
     it('should play', function () {
       let timesPlayed = 0
-      layer.media.addEventListener('play', () => {
+      layer.source.addEventListener('play', () => {
         timesPlayed++
       })
       for (let i = 0; i < 3; i++) {