Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-05 13:40:08 +01:00
Code Issues Projects Releases Packages Wiki Activity

style: Correct background/foreground ratio mixing.

Browse source 
Bug: 1467622
Reviewed-by: xidorn
MozReview-Commit-ID: InAZVcH2Vkt
This commit is contained in:
Dan Glastonbury 2018-07-03 14:15:06 +10:00 • committed by Emilio Cobos Álvarez
parent a76f5393d4
commit 96e812e732
No known key found for this signature in database
GPG key ID: 056B727BB9C1027C
2 changed files with 70 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

86
components/style/values/animated/color.rs
View file

@ -126,11 +126,11 @@ impl Animate for Color {
let (this_weight, other_weight) = procedure.weights(); let (this_weight, other_weight) = procedure.weights();
Ok(match (*self, *other, procedure) { Ok(match (*self, *other, procedure) {
// Any interpolation of currentColor with currentColor returns currentColor. // Any interpolation of currentcolor with currentcolor returns currentcolor.
(Foreground, Foreground, Procedure::Interpolate { .. }) => Color::currentcolor(), (Foreground, Foreground, Procedure::Interpolate { .. }) => Foreground,
// Animating two numeric colors. // Animating two numeric colors.
(Numeric(c1), Numeric(c2), _) => Numeric(c1.animate(&c2, procedure)?), (Numeric(c1), Numeric(c2), _) => Numeric(c1.animate(&c2, procedure)?),
// Combinations of numeric color and currentColor // Combinations of numeric color and currentcolor
(Foreground, Numeric(color), _) => Self::with_ratios( (Foreground, Numeric(color), _) => Self::with_ratios(
color, color,
ComplexColorRatios { ComplexColorRatios {
@ -146,7 +146,7 @@ impl Animate for Color {
}, },
), ),
// Any other animation of currentColor with currentColor. // Any other animation of currentcolor with currentcolor.
(Foreground, Foreground, _) => Self::with_ratios( (Foreground, Foreground, _) => Self::with_ratios(
RGBA::transparent(), RGBA::transparent(),
ComplexColorRatios { ComplexColorRatios {
@ -157,20 +157,72 @@ impl Animate for Color {
// Defer to complex calculations // Defer to complex calculations
_ => { _ => {
// For interpolating between two complex colors, we need to // Compute the "scaled" contribution for `color`.
// generate colors with effective alpha value. fn scaled_rgba(color: &Color) -> RGBA {
let self_color = self.effective_intermediate_rgba(); match *color {
let other_color = other.effective_intermediate_rgba(); GenericColor::Numeric(color) => color,
let color = self_color.animate(&other_color, procedure)?; GenericColor::Foreground => RGBA::transparent(),
// Then we compute the final background ratio, and derive GenericColor::Complex(color, ratios) => RGBA {
// the final alpha value from the effective alpha value. red: color.red * ratios.bg,
let self_ratios = self.effective_ratios(); green: color.green * ratios.bg,
let other_ratios = other.effective_ratios(); blue: color.blue * ratios.bg,
let ratios = self_ratios.animate(&other_ratios, procedure)?; alpha: color.alpha * ratios.bg,
let alpha = color.alpha / ratios.bg; },
let color = RGBA { alpha, ..color }; }
}
Self::with_ratios(color, ratios) // Each `Color`, represents a complex combination of foreground color and
// background color where fg and bg represent the overall
// contributions. ie:
//
// color = { bg * mColor, fg * foreground }
// = { bg_color , fg_color }
// = bg_color + fg_color
//
// where `foreground` is `currentcolor`, and `bg_color`,
// `fg_color` are the scaled background and foreground
// contributions.
//
// Each operation, lerp, addition, or accumulate, can be
// represented as a scaled-addition each complex color. ie:
//
// p * col1 + q * col2
//
// where p = (1 - a), q = a for lerp(a), p = 1, q = 1 for
// addition, etc.
//
// Therefore:
//
// col1 op col2
// = p * col1 + q * col2
// = p * { bg_color1, fg_color1 } + q * { bg_color2, fg_color2 }
// = p * (bg_color1 + fg_color1) + q * (bg_color2 + fg_color2)
// = p * bg_color1 + p * fg_color1 + q * bg_color2 + p * fg_color2
// = (p * bg_color1 + q * bg_color2) + (p * fg_color1 + q * fg_color2)
// = (bg_color1 op bg_color2) + (fg_color1 op fg_color2)
//
// fg_color1 op fg_color2 is equivalent to (fg1 op fg2) * foreground,
// so the final color is:
//
// = { bg_color, fg_color }
// = { 1 * (bg_color1 op bg_color2), (fg1 op fg2) * foreground }
// To perform the operation on two complex colors, we need to
// generate the scaled contributions of each background color
// component.
let bg_color1 = scaled_rgba(self);
let bg_color2 = scaled_rgba(other);
// Perform bg_color1 op bg_color2
let bg_color = bg_color1.animate(&bg_color2, procedure)?;
// Calculate the final foreground color ratios; perform
// animation on effective fg ratios.
let ComplexColorRatios { fg: fg1, .. } = self.effective_ratios();
let ComplexColorRatios { fg: fg2, .. } = other.effective_ratios();
// Perform fg1 op fg2
let fg = fg1.animate(&fg2, procedure)?;
Self::with_ratios(bg_color, ComplexColorRatios { bg: 1., fg })
} }
}) })
} }

2
components/style/values/generics/color.rs
View file

@ -6,7 +6,7 @@
/// Ratios representing the contribution of color and currentcolor to /// Ratios representing the contribution of color and currentcolor to
/// the final color value. /// the final color value.
#[derive(Animate, Clone, Copy, Debug, MallocSizeOf, PartialEq, ToAnimatedValue)] #[derive(Clone, Copy, Debug, MallocSizeOf, PartialEq, ToAnimatedValue)]
pub struct ComplexColorRatios { pub struct ComplexColorRatios {
/// Numeric color contribution. /// Numeric color contribution.
pub bg: f32, pub bg: f32,