layout/display_list/
background.rs

1/* This Source Code Form is subject to the terms of the Mozilla Public
2 * License, v. 2.0. If a copy of the MPL was not distributed with this
3 * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
4
5use app_units::Au;
6use euclid::{Size2D, Vector2D};
7use style::computed_values::background_attachment::SingleComputedValue as BackgroundAttachment;
8use style::computed_values::background_blend_mode::SingleComputedValue as BackgroundBlendMode;
9use style::computed_values::background_clip::single_value::T as Clip;
10use style::computed_values::background_origin::single_value::T as Origin;
11use style::properties::ComputedValues;
12use style::values::computed::LengthPercentage;
13use style::values::computed::background::BackgroundSize as Size;
14use style::values::specified::background::{
15    BackgroundRepeat as RepeatXY, BackgroundRepeatKeyword as Repeat,
16};
17use webrender_api::{self as wr, units};
18use wr::ClipChainId;
19
20use crate::display_list::{DisplayListBuilder, TraversalState};
21use crate::replaced::NaturalSizes;
22
23pub(super) struct BackgroundLayer {
24    pub common: wr::CommonItemProperties,
25    pub bounds: units::LayoutRect,
26    pub tile_size: units::LayoutSize,
27    pub tile_spacing: units::LayoutSize,
28    pub repeat: bool,
29    pub blend_mode: BackgroundBlendMode,
30}
31
32#[derive(Debug)]
33struct Layout1DResult {
34    repeat: bool,
35    bounds_origin: f32,
36    bounds_size: f32,
37    tile_spacing: f32,
38}
39
40pub(crate) fn get_cyclic<T>(values: &[T], layer_index: usize) -> &T {
41    &values[layer_index % values.len()]
42}
43
44pub(super) struct BackgroundPainter<'a> {
45    pub style: &'a ComputedValues,
46    pub positioning_area_override: Option<units::LayoutRect>,
47    pub painting_area_override: Option<units::LayoutRect>,
48}
49
50impl<'a> BackgroundPainter<'a> {
51    /// Get the painting area for this background, which is the actual rectangle in the
52    /// current coordinate system that the background will be painted.
53    pub(super) fn painting_area(
54        &self,
55        fragment_builder: &'a super::BuilderForBoxFragment,
56        builder: &mut super::DisplayListBuilder,
57        layer_index: usize,
58    ) -> units::LayoutRect {
59        let fb = fragment_builder;
60        if let Some(painting_area_override) = self.painting_area_override.as_ref() {
61            return *painting_area_override;
62        }
63        if self.positioning_area_override.is_some() {
64            return fb.border_rect;
65        }
66
67        let background = self.style.get_background();
68        if &BackgroundAttachment::Fixed ==
69            get_cyclic(&background.background_attachment.0, layer_index)
70        {
71            return builder.paint_info.viewport_details.layout_size().into();
72        }
73
74        match get_cyclic(&background.background_clip.0, layer_index) {
75            Clip::ContentBox => *fragment_builder.content_rect(),
76            Clip::PaddingBox => *fragment_builder.padding_rect(),
77            Clip::BorderBox | Clip::BorderArea => fragment_builder.border_rect,
78        }
79    }
80
81    fn clip(
82        &self,
83        fragment_builder: &'a super::BuilderForBoxFragment,
84        builder: &mut DisplayListBuilder,
85        state: &TraversalState,
86        layer_index: usize,
87    ) -> Option<ClipChainId> {
88        if self.painting_area_override.is_some() {
89            return None;
90        }
91
92        if self.positioning_area_override.is_some() {
93            return fragment_builder.border_edge_clip(builder, state, false);
94        }
95
96        // The 'backgound-clip' property maps directly to `clip_rect` in `CommonItemProperties`:
97        let background = self.style.get_background();
98        let force_clip_creation = get_cyclic(&background.background_attachment.0, layer_index) ==
99            &BackgroundAttachment::Fixed;
100        match get_cyclic(&background.background_clip.0, layer_index) {
101            Clip::ContentBox => {
102                fragment_builder.content_edge_clip(builder, state, force_clip_creation)
103            },
104            Clip::PaddingBox => {
105                fragment_builder.padding_edge_clip(builder, state, force_clip_creation)
106            },
107            Clip::BorderBox => {
108                fragment_builder.border_edge_clip(builder, state, force_clip_creation)
109            },
110            Clip::BorderArea => unreachable!("Should be disabled behind a pref"),
111        }
112    }
113
114    /// Get the [`wr::CommonItemProperties`] for this background. This includes any clipping
115    /// established by border radii as well as special clipping and spatial node assignment
116    /// necessary for `background-attachment`.
117    pub(super) fn common_properties(
118        &self,
119        fragment_builder: &'a super::BuilderForBoxFragment,
120        builder: &mut super::DisplayListBuilder,
121        state: &TraversalState,
122        layer_index: usize,
123        painting_area: units::LayoutRect,
124    ) -> wr::CommonItemProperties {
125        let clip = self.clip(fragment_builder, builder, state, layer_index);
126        let style = fragment_builder.fragment.style();
127        let mut common = builder.common_properties(state, painting_area, style);
128        if let Some(clip_chain_id) = clip {
129            common.clip_chain_id = clip_chain_id;
130        }
131        if &BackgroundAttachment::Fixed ==
132            get_cyclic(&style.get_background().background_attachment.0, layer_index)
133        {
134            common.spatial_id = builder.spatial_id(builder.current_reference_frame_scroll_node_id);
135        }
136        common
137    }
138
139    /// Get the positioning area of the background which is the rectangle that defines where
140    /// the origin of the background content is, regardless of where the background is actual
141    /// painted.
142    pub(super) fn positioning_area(
143        &self,
144        fragment_builder: &'a super::BuilderForBoxFragment,
145        builder: &mut super::DisplayListBuilder,
146        layer_index: usize,
147    ) -> units::LayoutRect {
148        if let Some(positioning_area_override) = self.positioning_area_override {
149            return positioning_area_override;
150        }
151
152        match get_cyclic(
153            &self.style.get_background().background_attachment.0,
154            layer_index,
155        ) {
156            BackgroundAttachment::Scroll => match get_cyclic(
157                &self.style.get_background().background_origin.0,
158                layer_index,
159            ) {
160                Origin::ContentBox => *fragment_builder.content_rect(),
161                Origin::PaddingBox => *fragment_builder.padding_rect(),
162                Origin::BorderBox => fragment_builder.border_rect,
163            },
164            BackgroundAttachment::Fixed => builder.paint_info.viewport_details.layout_size().into(),
165        }
166    }
167}
168
169pub(super) fn layout_layer(
170    fragment_builder: &mut super::BuilderForBoxFragment,
171    painter: &BackgroundPainter,
172    builder: &mut DisplayListBuilder,
173    state: &TraversalState,
174    layer_index: usize,
175    natural_sizes: NaturalSizes,
176) -> Option<BackgroundLayer> {
177    let painting_area = painter.painting_area(fragment_builder, builder, layer_index);
178    let positioning_area = painter.positioning_area(fragment_builder, builder, layer_index);
179    let common =
180        painter.common_properties(fragment_builder, builder, state, layer_index, painting_area);
181
182    // https://drafts.csswg.org/css-backgrounds/#background-size
183    enum ContainOrCover {
184        Contain,
185        Cover,
186    }
187    let size_contain_or_cover = |background_size| {
188        let mut tile_size = positioning_area.size();
189        if let Some(natural_ratio) = natural_sizes.ratio {
190            let positioning_ratio = positioning_area.size().width / positioning_area.size().height;
191            // Whether the tile width (as opposed to height)
192            // is scaled to that of the positioning area
193            let fit_width = match background_size {
194                ContainOrCover::Contain => positioning_ratio <= natural_ratio,
195                ContainOrCover::Cover => positioning_ratio > natural_ratio,
196            };
197            // The other dimension needs to be adjusted
198            if fit_width {
199                tile_size.height = tile_size.width / natural_ratio
200            } else {
201                tile_size.width = tile_size.height * natural_ratio
202            }
203        }
204        tile_size
205    };
206
207    let b = painter.style.get_background();
208    let mut tile_size = match get_cyclic(&b.background_size.0, layer_index) {
209        Size::Contain => size_contain_or_cover(ContainOrCover::Contain),
210        Size::Cover => size_contain_or_cover(ContainOrCover::Cover),
211        Size::ExplicitSize { width, height } => {
212            let mut width = width.non_auto().map(|lp| {
213                lp.0.to_used_value(Au::from_f32_px(positioning_area.size().width))
214            });
215            let mut height = height.non_auto().map(|lp| {
216                lp.0.to_used_value(Au::from_f32_px(positioning_area.size().height))
217            });
218
219            if width.is_none() && height.is_none() {
220                // Both computed values are 'auto':
221                // use natural sizes, treating missing width or height as 'auto'
222                width = natural_sizes.width;
223                height = natural_sizes.height;
224            }
225
226            match (width, height) {
227                (Some(w), Some(h)) => units::LayoutSize::new(w.to_f32_px(), h.to_f32_px()),
228                (Some(w), None) => {
229                    let h = if let Some(natural_ratio) = natural_sizes.ratio {
230                        w.scale_by(1.0 / natural_ratio)
231                    } else if let Some(natural_height) = natural_sizes.height {
232                        natural_height
233                    } else {
234                        // Treated as 100%
235                        Au::from_f32_px(positioning_area.size().height)
236                    };
237                    units::LayoutSize::new(w.to_f32_px(), h.to_f32_px())
238                },
239                (None, Some(h)) => {
240                    let w = if let Some(natural_ratio) = natural_sizes.ratio {
241                        h.scale_by(natural_ratio)
242                    } else if let Some(natural_width) = natural_sizes.width {
243                        natural_width
244                    } else {
245                        // Treated as 100%
246                        Au::from_f32_px(positioning_area.size().width)
247                    };
248                    units::LayoutSize::new(w.to_f32_px(), h.to_f32_px())
249                },
250                // Both comptued values were 'auto', and neither natural size is present
251                (None, None) => size_contain_or_cover(ContainOrCover::Contain),
252            }
253        },
254    };
255
256    if tile_size.width == 0.0 || tile_size.height == 0.0 {
257        return None;
258    }
259
260    let RepeatXY(repeat_x, repeat_y) = *get_cyclic(&b.background_repeat.0, layer_index);
261    let result_x = layout_1d(
262        &mut tile_size.width,
263        repeat_x,
264        get_cyclic(&b.background_position_x.0, layer_index),
265        painting_area.min.x - positioning_area.min.x,
266        painting_area.size().width,
267        positioning_area.size().width,
268    );
269    let result_y = layout_1d(
270        &mut tile_size.height,
271        repeat_y,
272        get_cyclic(&b.background_position_y.0, layer_index),
273        painting_area.min.y - positioning_area.min.y,
274        painting_area.size().height,
275        positioning_area.size().height,
276    );
277    let bounds = units::LayoutRect::from_origin_and_size(
278        positioning_area.min + Vector2D::new(result_x.bounds_origin, result_y.bounds_origin),
279        Size2D::new(result_x.bounds_size, result_y.bounds_size),
280    );
281    let tile_spacing = units::LayoutSize::new(result_x.tile_spacing, result_y.tile_spacing);
282
283    let blend_mode = *get_cyclic(&b.background_blend_mode.0, layer_index);
284    Some(BackgroundLayer {
285        common,
286        bounds,
287        tile_size,
288        tile_spacing,
289        repeat: result_x.repeat || result_y.repeat,
290        blend_mode,
291    })
292}
293
294/// Abstract over the horizontal or vertical dimension
295/// Coordinates (0, 0) for the purpose of this function are the positioning area’s origin.
296fn layout_1d(
297    tile_size: &mut f32,
298    mut repeat: Repeat,
299    position: &LengthPercentage,
300    painting_area_origin: f32,
301    painting_area_size: f32,
302    positioning_area_size: f32,
303) -> Layout1DResult {
304    // https://drafts.csswg.org/css-backgrounds/#background-repeat
305    // > If background-repeat is round for one (or both) dimensions, there is a second step.
306    // > The UA must scale the image in that dimension (or both dimensions) so that it fits
307    // > a whole number of times in the background positioning area. In the case of the
308    // > width (height is analogous):
309    // >
310    // > | If X ≠ 0 is the width of the image after step one and W is the width of the
311    // > | background positioning area, then the rounded width X' = W / round(W / X) where
312    // > | round() is a function that returns the nearest natural number (integer greater than
313    // > | zero).
314    if let Repeat::Round = repeat {
315        let round = |number: f32| number.round().max(1.0);
316        if positioning_area_size != 0.0 {
317            *tile_size = positioning_area_size / round(positioning_area_size / *tile_size);
318        }
319    }
320    // https://drafts.csswg.org/css-backgrounds/#background-position
321    let mut position = position
322        .to_used_value(Au::from_f32_px(positioning_area_size - *tile_size))
323        .to_f32_px();
324    let mut tile_spacing = 0.0;
325    // https://drafts.csswg.org/css-backgrounds/#background-repeat
326    if let Repeat::Space = repeat {
327        // The most entire tiles we can fit
328        let tile_count = (positioning_area_size / *tile_size).floor();
329        if tile_count >= 2.0 {
330            position = 0.0;
331            // Make the outsides of the first and last of that many tiles
332            // touch the edges of the positioning area:
333            let total_space = positioning_area_size - *tile_size * tile_count;
334            let spaces_count = tile_count - 1.0;
335            tile_spacing = total_space / spaces_count;
336        } else {
337            repeat = Repeat::NoRepeat
338        }
339    }
340    match repeat {
341        Repeat::Repeat | Repeat::Round | Repeat::Space => {
342            // WebRender’s `RepeatingImageDisplayItem` contains a `bounds` rectangle and:
343            //
344            // * The tiling is clipped to the intersection of `clip_rect` and `bounds`
345            // * The origin (top-left corner) of `bounds` is the position
346            //   of the “first” (top-left-most) tile.
347            //
348            // In the general case that first tile is not the one that is positioned by
349            // `background-position`.
350            // We want it to be the top-left-most tile that intersects with `clip_rect`.
351            // We find it by offsetting by a whole number of strides,
352            // then compute `bounds` such that:
353            //
354            // * Its bottom-right is the bottom-right of `clip_rect`
355            // * Its top-left is the top-left of first tile.
356            let tile_stride = *tile_size + tile_spacing;
357            let offset = position - painting_area_origin;
358            let bounds_origin = position - tile_stride * (offset / tile_stride).ceil();
359            let bounds_end = painting_area_origin + painting_area_size;
360            let bounds_size = bounds_end - bounds_origin;
361            Layout1DResult {
362                repeat: true,
363                bounds_origin,
364                bounds_size,
365                tile_spacing,
366            }
367        },
368        Repeat::NoRepeat => {
369            // `RepeatingImageDisplayItem` always repeats in both dimension.
370            // When we want only one of the dimensions to repeat,
371            // we use the `bounds` rectangle to clip the tiling to one tile
372            // in that dimension.
373            Layout1DResult {
374                repeat: false,
375                bounds_origin: position,
376                bounds_size: *tile_size,
377                tile_spacing: 0.0,
378            }
379        },
380    }
381}
layout/display_list/background.rs

layout/display_list/
background.rs
