Auto merge of #1722 - glennw:filter-brightness, r=nical

Fix the brightness and invert filters to work with premultiplied alpha.

Fixes #1507.
Fixes #1508.

<!-- Reviewable:start -->
---
This change is [<img src="https://reviewable.io/review_button.svg" height="34" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/webrender/1722)
<!-- Reviewable:end -->

webrender/res/ps_blend.glsl

@@ -116,7 +116,12 @@ vec4 HueRotate(vec4 Cs, float amount) {
 }
 
 vec4 Invert(vec4 Cs, float amount) {
-    return mix(Cs, vec4(1.0, 1.0, 1.0, Cs.a) - vec4(Cs.rgb, 0.0), amount);
+    Cs.rgb /= Cs.a;
+
+    vec3 color = mix(Cs.rgb, vec3(1.0) - Cs.rgb, amount);
+
+    // Pre-multiply the alpha into the output value.
+    return vec4(color.rgb * Cs.a, Cs.a);
 }
 
 vec4 Saturate(vec4 Cs, float amount) {
@@ -132,7 +137,16 @@ vec4 Sepia(vec4 Cs, float amount) {
 }
 
 vec4 Brightness(vec4 Cs, float amount) {
-    return vec4(Cs.rgb * amount, Cs.a);
+    // Un-premultiply the input.
+    Cs.rgb /= Cs.a;
+
+    // Apply the brightness factor.
+    // Resulting color needs to be clamped to output range
+    // since we are pre-multiplying alpha in the shader.
+    vec3 color = clamp(Cs.rgb * amount, vec3(0.0), vec3(1.0));
+
+    // Pre-multiply the alpha into the output value.
+    return vec4(color.rgb * Cs.a, Cs.a);
 }
 
 vec4 Opacity(vec4 Cs, float amount) {

wrench/reftests/filters/filter-brightness-2-ref.yaml

@@ -0,0 +1,9 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 120, 120]
+      items:
+        - type: rect
+          bounds: [10, 10, 100, 100]
+          color: [0, 0, 0, 1]

wrench/reftests/filters/filter-brightness-2.yaml

@@ -0,0 +1,13 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 120, 120]
+      items:
+        - type: stacking-context
+          bounds: [10, 10, 100, 100]
+          filters: brightness(0)
+          items:
+            - type: rect
+              bounds: [0, 0, 100, 100]
+              color: [255, 0, 0, 1]

wrench/reftests/filters/filter-brightness-3-ref.yaml

@@ -0,0 +1,9 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 120, 120]
+      items:
+        - type: rect
+          bounds: [10, 10, 100, 100]
+          color: [0, 128, 0, 1]

wrench/reftests/filters/filter-brightness-3.yaml

@@ -0,0 +1,13 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 120, 120]
+      items:
+        - type: stacking-context
+          bounds: [10, 10, 100, 100]
+          filters: brightness(4)
+          items:
+            - type: rect
+              bounds: [0, 0, 100, 100]
+              color: [0, 32, 0, 1]

wrench/reftests/filters/filter-brightness-4-ref.yaml

@@ -0,0 +1,9 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 120, 120]
+      items:
+        - type: rect
+          bounds: [10, 10, 100, 100]
+          color: [0, 64, 0, 1]

wrench/reftests/filters/filter-brightness-4.yaml

@@ -0,0 +1,13 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 120, 120]
+      items:
+        - type: stacking-context
+          bounds: [10, 10, 100, 100]
+          filters: brightness(0.25)
+          items:
+            - type: rect
+              bounds: [0, 0, 100, 100]
+              color: [0, 255, 0, 1]

wrench/reftests/filters/filter-brightness-ref.yaml

@@ -0,0 +1,13 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 120, 120]
+      items:
+        - type: rect
+          bounds: [0, 0, 120, 120]
+          color: [0, 0, 0, 1]
+
+        - type: rect
+          bounds: [10, 10, 100, 100]
+          color: [64, 64, 64, 1]

wrench/reftests/filters/filter-brightness.yaml

@@ -0,0 +1,17 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 120, 120]
+      items:
+        - type: rect
+          bounds: [0, 0, 120, 120]
+          color: [0, 0, 0, 1]
+
+        - type: stacking-context
+          bounds: [10, 10, 100, 100]
+          filters: brightness(2)
+          items:
+            - type: rect
+              bounds: [0, 0, 100, 100]
+              color: [255, 255, 255, 0.25]

wrench/reftests/filters/filter-invert-2-ref.yaml

@@ -0,0 +1,9 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 120, 120]
+      items:
+        - type: rect
+          bounds: [0, 0, 120, 120]
+          color: [0, 0, 255, 1]

wrench/reftests/filters/filter-invert-2.yaml

@@ -0,0 +1,17 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 120, 120]
+      items:
+        - type: rect
+          bounds: [0, 0, 120, 120]
+          color: [0, 0, 255, 1]
+
+        - type: stacking-context
+          bounds: [10, 10, 100, 100]
+          filters: invert(1)
+          items:
+            - type: rect
+              bounds: [0, 0, 100, 100]
+              color: [255, 255, 0, 0.5]

wrench/reftests/filters/filter-invert-ref.yaml

@@ -0,0 +1,9 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 120, 120]
+      items:
+        - type: rect
+          bounds: [10, 10, 100, 100]
+          color: [0, 0, 0, 0.25]

wrench/reftests/filters/filter-invert.yaml

@@ -0,0 +1,13 @@
+---
+root:
+  items:
+    - type: stacking-context
+      bounds: [0, 0, 120, 120]
+      items:
+        - type: stacking-context
+          bounds: [10, 10, 100, 100]
+          filters: invert(1)
+          items:
+            - type: rect
+              bounds: [0, 0, 100, 100]
+              color: [255, 255, 255, 0.25]

wrench/reftests/filters/reftest.list

@@ -5,3 +5,9 @@
 == opacity.yaml opacity-ref.yaml
 == opacity-combined.yaml opacity-combined-ref.yaml
 == opacity-overlap.yaml opacity-overlap-ref.yaml
+== filter-brightness.yaml filter-brightness-ref.yaml
+== filter-brightness-2.yaml filter-brightness-2-ref.yaml
+== filter-brightness-3.yaml filter-brightness-3-ref.yaml
+== filter-brightness-4.yaml filter-brightness-4-ref.yaml
+== filter-invert.yaml filter-invert-ref.yaml
+== filter-invert-2.yaml filter-invert-2-ref.yaml