Canvas: implement global composition and blending.

components/canvas/canvas_msg.rs

@@ -2,7 +2,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-use canvas_paint_task::{FillOrStrokeStyle, LineCapStyle, LineJoinStyle};
+use canvas_paint_task::{FillOrStrokeStyle, LineCapStyle, LineJoinStyle, CompositionOrBlending};
 use geom::matrix2d::Matrix2D;
 use geom::point::Point2D;
 use geom::rect::Rect;
@@ -46,6 +46,7 @@ pub enum Canvas2dMsg {
     SetLineJoin(LineJoinStyle),
     SetMiterLimit(f32),
     SetGlobalAlpha(f32),
+    SetGlobalComposition(CompositionOrBlending),
     SetTransform(Matrix2D<f32>),
 }
 

components/canvas/canvas_paint_task.rs

@@ -4,8 +4,9 @@
 
 use azure::azure::AzFloat;
 use azure::azure_hl::{DrawTarget, SurfaceFormat, BackendType, StrokeOptions, DrawOptions, Pattern};
-use azure::azure_hl::{ColorPattern, PathBuilder, JoinStyle, CapStyle, DrawSurfaceOptions, Filter};
+use azure::azure_hl::{ColorPattern, PathBuilder, DrawSurfaceOptions, Filter};
 use azure::azure_hl::{GradientStop, LinearGradientPattern, RadialGradientPattern, ExtendMode};
+use azure::azure_hl::{JoinStyle, CapStyle, CompositionOp};
 use canvas_msg::{CanvasMsg, Canvas2dMsg, CanvasCommonMsg};
 use geom::matrix2d::Matrix2D;
 use geom::point::Point2D;
@@ -244,6 +245,7 @@ impl<'a> CanvasPaintTask<'a> {
                             Canvas2dMsg::SetMiterLimit(limit) => painter.set_miter_limit(limit),
                             Canvas2dMsg::SetTransform(ref matrix) => painter.set_transform(matrix),
                             Canvas2dMsg::SetGlobalAlpha(alpha) => painter.set_global_alpha(alpha),
+                            Canvas2dMsg::SetGlobalComposition(op) => painter.set_global_composition(op),
                             Canvas2dMsg::GetImageData(dest_rect, canvas_size, chan) => painter.get_image_data(dest_rect, canvas_size, chan),
                             Canvas2dMsg::PutImageData(imagedata, image_data_rect, dirty_rect)
                                 => painter.put_image_data(imagedata, image_data_rect, dirty_rect),
@@ -477,6 +479,10 @@ impl<'a> CanvasPaintTask<'a> {
         self.state.draw_options.alpha = alpha;
     }
 
+    fn set_global_composition(&mut self, op: CompositionOrBlending) {
+        self.state.draw_options.set_composition_op(op.to_azure_style());
+    }
+
     fn create(size: Size2D<i32>) -> DrawTarget {
         DrawTarget::new(BackendType::Skia, size, SurfaceFormat::B8G8R8A8)
     }
@@ -715,6 +721,185 @@ impl LineJoinStyle {
     }
 }
 
+#[derive(Copy, Clone, PartialEq)]
+pub enum CompositionStyle {
+    SrcIn,
+    SrcOut,
+    SrcOver,
+    SrcAtop,
+    DestIn,
+    DestOut,
+    DestOver,
+    DestAtop,
+    Copy,
+    Lighter,
+    Xor,
+}
+
+impl CompositionStyle {
+    fn to_azure_style(&self) -> CompositionOp {
+        match *self {
+            CompositionStyle::SrcIn    => CompositionOp::In,
+            CompositionStyle::SrcOut   => CompositionOp::Out,
+            CompositionStyle::SrcOver  => CompositionOp::Over,
+            CompositionStyle::SrcAtop  => CompositionOp::Atop,
+            CompositionStyle::DestIn   => CompositionOp::DestIn,
+            CompositionStyle::DestOut  => CompositionOp::DestOut,
+            CompositionStyle::DestOver => CompositionOp::DestOver,
+            CompositionStyle::DestAtop => CompositionOp::DestAtop,
+            CompositionStyle::Copy     => CompositionOp::Source,
+            CompositionStyle::Lighter  => CompositionOp::Add,
+            CompositionStyle::Xor      => CompositionOp::Xor,
+        }
+    }
+
+    pub fn from_str(string: &str) -> Option<CompositionStyle> {
+        match string {
+            "source-in"        => Some(CompositionStyle::SrcIn),
+            "source-out"       => Some(CompositionStyle::SrcOut),
+            "source-over"      => Some(CompositionStyle::SrcOver),
+            "source-atop"      => Some(CompositionStyle::SrcAtop),
+            "destination-in"   => Some(CompositionStyle::DestIn),
+            "destination-out"  => Some(CompositionStyle::DestOut),
+            "destination-over" => Some(CompositionStyle::DestOver),
+            "destination-atop" => Some(CompositionStyle::DestAtop),
+            "copy"             => Some(CompositionStyle::Copy),
+            "lighter"          => Some(CompositionStyle::Lighter),
+            "xor"              => Some(CompositionStyle::Xor),
+            _ => None
+        }
+    }
+
+    pub fn to_str(&self) -> &str {
+        match *self {
+            CompositionStyle::SrcIn    => "source-in",
+            CompositionStyle::SrcOut   => "source-out",
+            CompositionStyle::SrcOver  => "source-over",
+            CompositionStyle::SrcAtop  => "source-atop",
+            CompositionStyle::DestIn   => "destination-in",
+            CompositionStyle::DestOut  => "destination-out",
+            CompositionStyle::DestOver => "destination-over",
+            CompositionStyle::DestAtop => "destination-atop",
+            CompositionStyle::Copy     => "copy",
+            CompositionStyle::Lighter  => "lighter",
+            CompositionStyle::Xor      => "xor",
+        }
+    }
+}
+
+#[derive(Copy, Clone, PartialEq)]
+pub enum BlendingStyle {
+    Multiply,
+    Screen,
+    Overlay,
+    Darken,
+    Lighten,
+    ColorDodge,
+    ColorBurn,
+    HardLight,
+    SoftLight,
+    Difference,
+    Exclusion,
+    Hue,
+    Saturation,
+    Color,
+    Luminosity,
+}
+
+impl BlendingStyle {
+    fn to_azure_style(&self) -> CompositionOp {
+        match *self {
+            BlendingStyle::Multiply   => CompositionOp::Multiply,
+            BlendingStyle::Screen     => CompositionOp::Screen,
+            BlendingStyle::Overlay    => CompositionOp::Overlay,
+            BlendingStyle::Darken     => CompositionOp::Darken,
+            BlendingStyle::Lighten    => CompositionOp::Lighten,
+            BlendingStyle::ColorDodge => CompositionOp::ColorDodge,
+            BlendingStyle::ColorBurn  => CompositionOp::ColorBurn,
+            BlendingStyle::HardLight  => CompositionOp::HardLight,
+            BlendingStyle::SoftLight  => CompositionOp::SoftLight,
+            BlendingStyle::Difference => CompositionOp::Difference,
+            BlendingStyle::Exclusion  => CompositionOp::Exclusion,
+            BlendingStyle::Hue        => CompositionOp::Hue,
+            BlendingStyle::Saturation => CompositionOp::Saturation,
+            BlendingStyle::Color      => CompositionOp::Color,
+            BlendingStyle::Luminosity => CompositionOp::Luminosity,
+        }
+    }
+
+    pub fn from_str(string: &str) -> Option<BlendingStyle> {
+        match string {
+            "multiply"    => Some(BlendingStyle::Multiply),
+            "screen"      => Some(BlendingStyle::Screen),
+            "overlay"     => Some(BlendingStyle::Overlay),
+            "darken"      => Some(BlendingStyle::Darken),
+            "lighten"     => Some(BlendingStyle::Lighten),
+            "color-dodge" => Some(BlendingStyle::ColorDodge),
+            "color-burn"  => Some(BlendingStyle::ColorBurn),
+            "hard-light"  => Some(BlendingStyle::HardLight),
+            "soft-light"  => Some(BlendingStyle::SoftLight),
+            "difference"  => Some(BlendingStyle::Difference),
+            "exclusion"   => Some(BlendingStyle::Exclusion),
+            "hue"         => Some(BlendingStyle::Hue),
+            "saturation"  => Some(BlendingStyle::Saturation),
+            "color"       => Some(BlendingStyle::Color),
+            "luminosity"  => Some(BlendingStyle::Luminosity),
+            _ => None
+        }
+    }
+
+    pub fn to_str(&self) -> &str {
+        match *self {
+            BlendingStyle::Multiply   => "multiply",
+            BlendingStyle::Screen     => "screen",
+            BlendingStyle::Overlay    => "overlay",
+            BlendingStyle::Darken     => "darken",
+            BlendingStyle::Lighten    => "lighten",
+            BlendingStyle::ColorDodge => "color-dodge",
+            BlendingStyle::ColorBurn  => "color-burn",
+            BlendingStyle::HardLight  => "hard-light",
+            BlendingStyle::SoftLight  => "soft-light",
+            BlendingStyle::Difference => "difference",
+            BlendingStyle::Exclusion  => "exclusion",
+            BlendingStyle::Hue        => "hue",
+            BlendingStyle::Saturation => "saturation",
+            BlendingStyle::Color      => "color",
+            BlendingStyle::Luminosity => "luminosity",
+        }
+    }
+}
+
+#[derive(Copy, Clone, PartialEq)]
+pub enum CompositionOrBlending {
+    Composition(CompositionStyle),
+    Blending(BlendingStyle),
+}
+
+impl CompositionOrBlending {
+    fn to_azure_style(&self) -> CompositionOp {
+        match *self {
+            CompositionOrBlending::Composition(op) => op.to_azure_style(),
+            CompositionOrBlending::Blending(op) => op.to_azure_style(),
+        }
+    }
+
+    pub fn default() -> CompositionOrBlending {
+        CompositionOrBlending::Composition(CompositionStyle::SrcOver)
+    }
+
+    pub fn from_str(string: &str) -> Option<CompositionOrBlending> {
+        if let Some(op) = CompositionStyle::from_str(string) {
+            return Some(CompositionOrBlending::Composition(op));
+        }
+
+        if let Some(op) = BlendingStyle::from_str(string) {
+            return Some(CompositionOrBlending::Blending(op));
+        }
+
+        None
+    }
+}
+
 /// Used by drawImage to get rid of the extra pixels of the image data that
 /// won't be copied to the canvas
 /// image_data: Color pixel data of the image

components/script/dom/bindings/trace.rs

@@ -35,7 +35,7 @@ use dom::bindings::utils::{Reflectable, Reflector, WindowProxyHandler};
 use script_task::ScriptChan;
 
 use canvas::canvas_paint_task::{CanvasGradientStop, LinearGradientStyle, RadialGradientStyle};
-use canvas::canvas_paint_task::{LineCapStyle, LineJoinStyle};
+use canvas::canvas_paint_task::{LineCapStyle, LineJoinStyle, CompositionOrBlending};
 use cssparser::RGBA;
 use encoding::types::EncodingRef;
 use geom::matrix2d::Matrix2D;
@@ -270,7 +270,7 @@ no_jsmanaged_fields!(RGBA);
 no_jsmanaged_fields!(Matrix2D<T>);
 no_jsmanaged_fields!(StorageType);
 no_jsmanaged_fields!(CanvasGradientStop, LinearGradientStyle, RadialGradientStyle);
-no_jsmanaged_fields!(LineCapStyle, LineJoinStyle);
+no_jsmanaged_fields!(LineCapStyle, LineJoinStyle, CompositionOrBlending);
 
 impl JSTraceable for Box<ScriptChan+Send> {
     #[inline]

components/script/dom/canvasrenderingcontext2d.rs

@@ -30,7 +30,7 @@ use geom::size::Size2D;
 use canvas::canvas_msg::{CanvasMsg, Canvas2dMsg, CanvasCommonMsg};
 use canvas::canvas_paint_task::{CanvasPaintTask, FillOrStrokeStyle};
 use canvas::canvas_paint_task::{LinearGradientStyle, RadialGradientStyle};
-use canvas::canvas_paint_task::{LineCapStyle, LineJoinStyle};
+use canvas::canvas_paint_task::{LineCapStyle, LineJoinStyle, CompositionOrBlending};
 
 use net_traits::image::base::Image;
 use net_traits::image_cache_task::{ImageResponseMsg, Msg};
@@ -61,6 +61,7 @@ pub struct CanvasRenderingContext2D {
 #[jstraceable]
 struct CanvasContextState {
     global_alpha: f64,
+    global_composition: CompositionOrBlending,
     image_smoothing_enabled: bool,
     stroke_color: RGBA,
     line_width: f64,
@@ -81,6 +82,7 @@ impl CanvasContextState {
         };
         CanvasContextState {
             global_alpha: 1.0,
+            global_composition: CompositionOrBlending::default(),
             image_smoothing_enabled: true,
             stroke_color: black,
             line_width: 1.0,
@@ -421,6 +423,23 @@ impl<'a> CanvasRenderingContext2DMethods for JSRef<'a, CanvasRenderingContext2D>
         self.renderer.send(CanvasMsg::Canvas2d(Canvas2dMsg::SetGlobalAlpha(alpha as f32))).unwrap()
     }
 
+    // https://html.spec.whatwg.org/multipage/#dom-context-2d-globalcompositeoperation
+    fn GlobalCompositeOperation(self) -> DOMString {
+        let state = self.state.borrow();
+        match state.global_composition {
+            CompositionOrBlending::Composition(op) => op.to_str().to_owned(),
+            CompositionOrBlending::Blending(op) => op.to_str().to_owned(),
+        }
+    }
+
+    // https://html.spec.whatwg.org/multipage/#dom-context-2d-globalcompositeoperation
+    fn SetGlobalCompositeOperation(self, op_str: DOMString) {
+        if let Some(op) = CompositionOrBlending::from_str(&op_str) {
+            self.state.borrow_mut().global_composition = op;
+            self.renderer.send(CanvasMsg::Canvas2d(Canvas2dMsg::SetGlobalComposition(op))).unwrap()
+        }
+    }
+
     // https://html.spec.whatwg.org/multipage/#dom-context-2d-fillrect
     fn FillRect(self, x: f64, y: f64, width: f64, height: f64) {
         if let Some(rect) = self.create_drawable_rect(x, y, width, height) {

components/script/dom/webidls/CanvasRenderingContext2D.webidl

@@ -50,7 +50,7 @@ interface CanvasRenderingContext2D {
 
   // compositing
   attribute unrestricted double globalAlpha; // (default 1.0)
-  //         attribute DOMString globalCompositeOperation; // (default source-over)
+  attribute DOMString globalCompositeOperation; // (default source-over)
 
   // image smoothing
            attribute boolean imageSmoothingEnabled; // (default true)

tests/wpt/metadata/2dcontext/compositing/2d.composite.operation.casesensitive.html.ini

@@ -1,5 +0,0 @@
-[2d.composite.operation.casesensitive.html]
-  type: testharness
-  [Canvas test: 2d.composite.operation.casesensitive]
-    expected: FAIL
-

tests/wpt/metadata/2dcontext/compositing/2d.composite.operation.clear.html.ini

@@ -1,5 +0,0 @@
-[2d.composite.operation.clear.html]
-  type: testharness
-  [Canvas test: 2d.composite.operation.clear]
-    expected: FAIL
-

tests/wpt/metadata/2dcontext/compositing/2d.composite.operation.darker.html.ini

@@ -1,5 +0,0 @@
-[2d.composite.operation.darker.html]
-  type: testharness
-  [Canvas test: 2d.composite.operation.darker]
-    expected: FAIL
-

tests/wpt/metadata/2dcontext/compositing/2d.composite.operation.default.html.ini

@@ -1,5 +0,0 @@
-[2d.composite.operation.default.html]
-  type: testharness
-  [Canvas test: 2d.composite.operation.default]
-    expected: FAIL
-

tests/wpt/metadata/2dcontext/compositing/2d.composite.operation.highlight.html.ini

@@ -1,5 +0,0 @@
-[2d.composite.operation.highlight.html]
-  type: testharness
-  [Canvas test: 2d.composite.operation.highlight]
-    expected: FAIL
-

tests/wpt/metadata/2dcontext/compositing/2d.composite.operation.nullsuffix.html.ini

@@ -1,5 +0,0 @@
-[2d.composite.operation.nullsuffix.html]
-  type: testharness
-  [Canvas test: 2d.composite.operation.nullsuffix]
-    expected: FAIL
-

tests/wpt/metadata/2dcontext/compositing/2d.composite.operation.over.html.ini

@@ -1,5 +0,0 @@
-[2d.composite.operation.over.html]
-  type: testharness
-  [Canvas test: 2d.composite.operation.over]
-    expected: FAIL
-

tests/wpt/metadata/2dcontext/compositing/2d.composite.operation.unrecognised.html.ini

@@ -1,5 +0,0 @@
-[2d.composite.operation.unrecognised.html]
-  type: testharness
-  [Canvas test: 2d.composite.operation.unrecognised]
-    expected: FAIL
-

tests/wpt/metadata/2dcontext/compositing/2d.composite.solid.destination-atop.html.ini

@@ -1,5 +0,0 @@
-[2d.composite.solid.destination-atop.html]
-  type: testharness
-  [Canvas test: 2d.composite.solid.destination-atop]
-    expected: FAIL
-

tests/wpt/metadata/2dcontext/compositing/2d.composite.solid.destination-in.html.ini

@@ -1,5 +0,0 @@
-[2d.composite.solid.destination-in.html]
-  type: testharness
-  [Canvas test: 2d.composite.solid.destination-in]
-    expected: FAIL
-

tests/wpt/metadata/2dcontext/compositing/2d.composite.solid.destination-out.html.ini

@@ -1,5 +0,0 @@
-[2d.composite.solid.destination-out.html]
-  type: testharness
-  [Canvas test: 2d.composite.solid.destination-out]
-    expected: FAIL
-

tests/wpt/metadata/2dcontext/compositing/2d.composite.solid.destination-over.html.ini

@@ -1,5 +0,0 @@
-[2d.composite.solid.destination-over.html]
-  type: testharness
-  [Canvas test: 2d.composite.solid.destination-over]
-    expected: FAIL
-

tests/wpt/metadata/2dcontext/compositing/2d.composite.solid.lighter.html.ini

@@ -1,5 +0,0 @@
-[2d.composite.solid.lighter.html]
-  type: testharness
-  [Canvas test: 2d.composite.solid.lighter]
-    expected: FAIL
-

tests/wpt/metadata/2dcontext/compositing/2d.composite.solid.source-out.html.ini

@@ -1,5 +0,0 @@
-[2d.composite.solid.source-out.html]
-  type: testharness
-  [Canvas test: 2d.composite.solid.source-out]
-    expected: FAIL
-

tests/wpt/metadata/2dcontext/compositing/2d.composite.solid.xor.html.ini

@@ -1,5 +0,0 @@
-[2d.composite.solid.xor.html]
-  type: testharness
-  [Canvas test: 2d.composite.solid.xor]
-    expected: FAIL
-

tests/wpt/metadata/2dcontext/compositing/2d.composite.transparent.lighter.html.ini

@@ -1,5 +0,0 @@
-[2d.composite.transparent.lighter.html]
-  type: testharness
-  [Canvas test: 2d.composite.transparent.lighter]
-    expected: FAIL
-

tests/wpt/metadata/2dcontext/compositing/2d.composite.uncovered.fill.copy.html.ini

@@ -1,5 +0,0 @@
-[2d.composite.uncovered.fill.copy.html]
-  type: testharness
-  [fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.]
-    expected: FAIL
-

tests/wpt/metadata/2dcontext/compositing/2d.composite.uncovered.fill.destination-atop.html.ini

@@ -1,5 +0,0 @@
-[2d.composite.uncovered.fill.destination-atop.html]
-  type: testharness
-  [fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.]
-    expected: FAIL
-

tests/wpt/metadata/2dcontext/compositing/2d.composite.uncovered.fill.destination-in.html.ini

@@ -1,5 +0,0 @@
-[2d.composite.uncovered.fill.destination-in.html]
-  type: testharness
-  [fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.]
-    expected: FAIL
-

tests/wpt/metadata/2dcontext/compositing/2d.composite.uncovered.fill.source-in.html.ini

@@ -1,5 +0,0 @@
-[2d.composite.uncovered.fill.source-in.html]
-  type: testharness
-  [fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.]
-    expected: FAIL
-

tests/wpt/metadata/2dcontext/compositing/2d.composite.uncovered.fill.source-out.html.ini

@@ -1,5 +0,0 @@
-[2d.composite.uncovered.fill.source-out.html]
-  type: testharness
-  [fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.]
-    expected: FAIL
-

tests/wpt/metadata/2dcontext/drawing-rectangles-to-the-canvas/2d.strokeRect.globalcomposite.html.ini

@@ -1,5 +0,0 @@
-[2d.strokeRect.globalcomposite.html]
-  type: testharness
-  [strokeRect is not affected by globalCompositeOperation]
-    expected: FAIL
-

tests/wpt/metadata/2dcontext/shadows/2d.shadow.composite.1.html.ini

@@ -0,0 +1,5 @@
+[2d.shadow.composite.1.html]
+  type: testharness
+  [Shadows are drawn using globalCompositeOperation]
+    expected: FAIL
+

tests/wpt/metadata/2dcontext/shadows/2d.shadow.composite.2.html.ini

@@ -0,0 +1,5 @@
+[2d.shadow.composite.2.html]
+  type: testharness
+  [Shadows are drawn using globalCompositeOperation]
+    expected: FAIL
+

tests/wpt/metadata/2dcontext/the-canvas-state/2d.state.saverestore.globalCompositeOperation.html.ini

@@ -1,5 +0,0 @@
-[2d.state.saverestore.globalCompositeOperation.html]
-  type: testharness
-  [save()/restore() works for globalCompositeOperation]
-    expected: FAIL
-

tests/wpt/metadata/html/dom/interfaces.html.ini

@@ -6879,9 +6879,6 @@
   [CanvasRenderingContext2D interface: operation resetTransform()]
     expected: FAIL
 
-  [CanvasRenderingContext2D interface: attribute globalCompositeOperation]
-    expected: FAIL
-
   [CanvasRenderingContext2D interface: operation createPattern(CanvasImageSource,DOMString)]
     expected: FAIL
 
@@ -7017,9 +7014,6 @@
   [CanvasRenderingContext2D interface: document.createElement("canvas").getContext("2d") must inherit property "resetTransform" with the proper type (12)]
     expected: FAIL
 
-  [CanvasRenderingContext2D interface: document.createElement("canvas").getContext("2d") must inherit property "globalCompositeOperation" with the proper type (14)]
-    expected: FAIL
-
   [CanvasRenderingContext2D interface: document.createElement("canvas").getContext("2d") must inherit property "strokeStyle" with the proper type (16)]
     expected: FAIL