The Servo Browser Engine -- A Learner's Notebook

Style

The componets/sytle folder contains the CSS system for Servo.

The properties.mako.rs contains CSS properties definitions (parsers, shorthand alias expansion rules, how to calculate the real value, etc.) It is a Mako Template [1] instead of raw rust code. It will be compiled to properties/mod.rs during the build process. The command for compiling it is written in components/style/build.rs.

Lifecycle of a CSS file

How does a declaration in a CSS file goes through Servo and get displayed on the screen?

TODO:

This is where the <style/> is parsed: http://mxr.mozilla.org/servo/source/components/script/dom/htmlstyleelement.rs#63
This is where css links are parsed: http://mxr.mozilla.org/servo/source/components/script/dom/htmllinkelement.rs#153
A CSS's lifecycle: servo::lib.rs => create script::script_task => script_task::load() => loads the HTML and parse it => somewhere in script::dom::htmllikelement.rs, the sytle is parsed => send a layout messsage to layout channel => ? => layout use component/style thing to compute the computed_value
How to add a new filter: ``` diff --git components/gfx/filters.rs components/gfx/filters.rs index cfabcf2..bb0c655 100644 --- components/gfx/filters.rs +++ components/gfx/filters.rs @@ -94,6 +94,21 @@ pub fn create_filters(draw_target: &DrawTarget,
```
           contrast.set_input(LinearTransferInput, &filter);
           filter = contrast
       }
```
filter::Filter::DropShadow(amount) => {
let amount = amount as AzFloat;
let contrast = draw_target.create_filter(FilterType::LinearTransfer);
contrast.set_attribute(LinearTransferAttribute::DisableR(false));
contrast.set_attribute(LinearTransferAttribute::DisableG(false));
contrast.set_attribute(LinearTransferAttribute::DisableB(false));
contrast.set_attribute(LinearTransferAttribute::SlopeR(amount));
contrast.set_attribute(LinearTransferAttribute::SlopeG(amount));
contrast.set_attribute(LinearTransferAttribute::SlopeB(amount));
contrast.set_attribute(LinearTransferAttribute::InterceptR(-0.5 * amount + 0.5));
contrast.set_attribute(LinearTransferAttribute::InterceptG(-0.5 * amount + 0.5));
contrast.set_attribute(LinearTransferAttribute::InterceptB(-0.5 * amount + 0.5));
contrast.set_input(LinearTransferInput, &filter);
filter = contrast
} filter::Filter::Blur(amount) => {
```
*accumulated_blur_radius = accumulated_blur_radius.clone() + amount;
let amount = amount.to_frac32_px();
```
diff --git components/style/properties.mako.rs components/style/properties.mako.rs index cfacc63..68e7492 100644 --- components/style/properties.mako.rs +++ components/style/properties.mako.rs @@ -2709,6 +2709,7 @@ pub mod longhands { Blur(Length), Brightness(CSSFloat), Contrast(CSSFloat),
DropShadow(CSSFloat), //DEBUG Grayscale(CSSFloat), HueRotate(Angle), Invert(CSSFloat), @@ -2727,6 +2728,7 @@ pub mod longhands {
```
Blur(Au),
Brightness(CSSFloat),
Contrast(CSSFloat),
```

DropShadow(CSSFloat), //DEBUG Grayscale(CSSFloat), HueRotate(Angle), Invert(CSSFloat), @@ -2802,6 +2804,7 @@ pub mod longhands {

}
SpecifiedFilter::Brightness(value) => try!(write!(dest, "brightness({})", value)),
SpecifiedFilter::Contrast(value) => try!(write!(dest, "contrast({})", value)),

SpecifiedFilter::DropShadow(value) => try!(write!(dest, "drop-shadow({})", value)), SpecifiedFilter::Grayscale(value) => try!(write!(dest, "grayscale({})", value)), SpecifiedFilter::HueRotate(value) => {

try!(dest.write_str("hue-rotate("));

@@ -2834,6 +2837,7 @@ pub mod longhands {

    "blur" => specified::Length::parse_non_negative(input).map(SpecifiedFilter::Blur),
    "brightness" => parse_factor(input).map(SpecifiedFilter::Brightness),
    "contrast" => parse_factor(input).map(SpecifiedFilter::Contrast),

"drop-shadow" => parse_factor(input).map(SpecifiedFilter::DropShadow), "grayscale" => parse_factor(input).map(SpecifiedFilter::Grayscale), "hue-rotate" => Angle::parse(input).map(SpecifiedFilter::HueRotate), "invert" => parse_factor(input).map(SpecifiedFilter::Invert), @@ -2869,6 +2873,7 @@ pub mod longhands { &SpecifiedFilter::Blur(factor) => computed_value::Filter::Blur(factor.to_computed_value(context)), &SpecifiedFilter::Brightness(factor) => computed_value::Filter::Brightness(factor), &SpecifiedFilter::Contrast(factor) => computed_value::Filter::Contrast(factor),
&SpecifiedFilter::DropShadow(factor) => computed_value::Filter::DropShadow(factor), &SpecifiedFilter::Grayscale(factor) => computed_value::Filter::Grayscale(factor), &SpecifiedFilter::HueRotate(factor) => computed_value::Filter::HueRotate(factor), &SpecifiedFilter::Invert(factor) => computed_value::Filter::Invert(factor), diff --git tests/ref/basic.list tests/ref/basic.list index 1e9a887..6b107c6 100644 --- tests/ref/basic.list +++ tests/ref/basic.list @@ -108,6 +108,7 @@ flaky_cpu == append_style_a.html append_style_b.html == empty_cells_a.html empty_cells_ref.html == external_media_query_link.html external_media_query_ref.html == external_media_query_style.html external_media_query_ref.html +!= filter_drop-shadow_a.html filter_drop-shadow_ref.html == filter_inline_a.html filter_inline_ref.html == filter_opacity_a.html filter_opacity_ref.html == filter_sepia_a.html filter_sepia_ref.html

```