1use app_units::{Au, MAX_AU};
6use data_url::DataUrl;
7use embedder_traits::ViewportDetails;
8use euclid::{Scale, Size2D};
9use html5ever::local_name;
10use layout_api::wrapper_traits::ThreadSafeLayoutNode;
11use layout_api::{IFrameSize, LayoutImageDestination, SVGElementData};
12use malloc_size_of_derive::MallocSizeOf;
13use net_traits::image_cache::{Image, ImageOrMetadataAvailable, VectorImage};
14use script::layout_dom::ServoThreadSafeLayoutNode;
15use selectors::Element;
16use servo_arc::Arc as ServoArc;
17use servo_base::id::{BrowsingContextId, PipelineId};
18use servo_url::ServoUrl;
19use style::Zero;
20use style::attr::AttrValue;
21use style::computed_values::object_fit::T as ObjectFit;
22use style::logical_geometry::{Direction, WritingMode};
23use style::properties::{ComputedValues, StyleBuilder};
24use style::rule_cache::RuleCacheConditions;
25use style::rule_tree::RuleCascadeFlags;
26use style::servo::url::ComputedUrl;
27use style::stylesheets::container_rule::ContainerSizeQuery;
28use style::values::CSSFloat;
29use style::values::computed::image::Image as ComputedImage;
30use style::values::computed::{Content, Context, ToComputedValue};
31use style::values::generics::counters::{GenericContentItem, GenericContentItems};
32use url::Url;
33use webrender_api::ImageKey;
34
35use crate::cell::ArcRefCell;
36use crate::context::{LayoutContext, LayoutImageCacheResult};
37use crate::dom::NodeExt;
38use crate::fragment_tree::{
39 BaseFragment, BaseFragmentInfo, CollapsedBlockMargins, Fragment, IFrameFragment, ImageFragment,
40};
41use crate::geom::{LogicalVec2, PhysicalPoint, PhysicalRect, PhysicalSize};
42use crate::layout_box_base::{CacheableLayoutResult, LayoutBoxBase};
43use crate::sizing::{
44 ComputeInlineContentSizes, InlineContentSizesResult, LazySize, SizeConstraint,
45};
46use crate::style_ext::{AspectRatio, Clamp, ComputedValuesExt, LayoutStyle};
47use crate::{ConstraintSpace, ContainingBlock};
48
49#[derive(Debug, MallocSizeOf)]
50pub(crate) struct ReplacedContents {
51 pub kind: ReplacedContentKind,
52 natural_size: NaturalSizes,
53 base_fragment_info: BaseFragmentInfo,
54}
55
56#[derive(Debug, MallocSizeOf)]
74pub(crate) struct NaturalSizes {
75 pub width: Option<Au>,
76 pub height: Option<Au>,
77 pub ratio: Option<CSSFloat>,
78}
79
80impl NaturalSizes {
81 pub(crate) fn from_width_and_height(width: f32, height: f32) -> Self {
82 let ratio = if width.is_normal() && height.is_normal() {
86 Some(width / height)
87 } else {
88 None
89 };
90
91 Self {
92 width: Some(Au::from_f32_px(width)),
93 height: Some(Au::from_f32_px(height)),
94 ratio,
95 }
96 }
97
98 pub(crate) fn from_natural_size_in_dots(natural_size_in_dots: PhysicalSize<f64>) -> Self {
99 let dppx = 1.0;
103 let width = natural_size_in_dots.width as f32 / dppx;
104 let height = natural_size_in_dots.height as f32 / dppx;
105 Self::from_width_and_height(width, height)
106 }
107
108 pub(crate) fn empty() -> Self {
109 Self {
110 width: None,
111 height: None,
112 ratio: None,
113 }
114 }
115}
116
117#[derive(Debug, MallocSizeOf)]
118pub(crate) struct CanvasInfo {
119 pub source: Option<ImageKey>,
120}
121
122#[derive(Debug, MallocSizeOf)]
123pub(crate) struct IFrameInfo {
124 pub pipeline_id: PipelineId,
125 pub browsing_context_id: BrowsingContextId,
126}
127
128#[derive(Debug, MallocSizeOf)]
129pub(crate) struct ImageInfo {
130 pub image: Option<Image>,
131 pub showing_broken_image_icon: bool,
132 pub url: Option<ServoUrl>,
133}
134
135#[derive(Debug, MallocSizeOf)]
136pub(crate) struct VideoInfo {
137 pub image_key: Option<ImageKey>,
138}
139
140#[derive(Debug, MallocSizeOf)]
141pub(crate) enum ReplacedContentKind {
142 Image(ImageInfo),
143 IFrame(IFrameInfo),
144 Canvas(CanvasInfo),
145 Video(VideoInfo),
146 SVGElement(Option<VectorImage>),
147 Audio,
148}
149
150impl ReplacedContents {
151 pub fn for_element(
152 node: ServoThreadSafeLayoutNode<'_>,
153 context: &LayoutContext,
154 ) -> Option<Self> {
155 if let Some(ref data_attribute_string) = node.as_typeless_object_with_data_attribute() {
156 if let Some(url) = try_to_parse_image_data_url(data_attribute_string) {
157 return Self::from_image_url(
158 node,
159 context,
160 &ComputedUrl::Valid(ServoArc::new(url)),
161 );
162 }
163 }
164
165 let (kind, natural_size) = {
166 if let Some((image_info, natural_size_in_dots)) = node.as_image() {
167 if let Some(content_image) = Self::from_content_property(node, context) {
168 return Some(content_image);
169 }
170 (
171 ReplacedContentKind::Image(image_info),
172 NaturalSizes::from_natural_size_in_dots(natural_size_in_dots),
173 )
174 } else if let Some((canvas_info, natural_size_in_dots)) = node.as_canvas() {
175 (
176 ReplacedContentKind::Canvas(canvas_info),
177 NaturalSizes::from_natural_size_in_dots(natural_size_in_dots),
178 )
179 } else if let Some(iframe_info) = node.as_iframe() {
180 (
181 ReplacedContentKind::IFrame(iframe_info),
182 NaturalSizes::empty(),
183 )
184 } else if let Some((video_info, natural_size_in_dots)) = node.as_video() {
185 (
186 ReplacedContentKind::Video(video_info),
187 natural_size_in_dots
188 .map_or_else(NaturalSizes::empty, NaturalSizes::from_natural_size_in_dots),
189 )
190 } else if let Some(svg_data) = node.as_svg() {
191 Self::svg_kind_size(svg_data, context, node)
192 } else if node
193 .as_html_element()
194 .is_some_and(|element| element.has_local_name(&local_name!("audio")))
195 {
196 let natural_size = NaturalSizes {
197 width: None,
198 height: Some(Au::from_px(40)),
201 ratio: None,
202 };
203 (ReplacedContentKind::Audio, natural_size)
204 } else {
205 return Self::from_content_property(node, context);
206 }
207 };
208
209 if let ReplacedContentKind::Image(ImageInfo {
210 image: Some(Image::Raster(ref image)),
211 ..
212 }) = kind
213 {
214 context
215 .image_resolver
216 .handle_animated_image(node.opaque(), image.clone());
217 }
218
219 Some(Self {
220 kind,
221 natural_size,
222 base_fragment_info: node.into(),
223 })
224 }
225
226 fn svg_kind_size(
227 svg_data: SVGElementData,
228 context: &LayoutContext,
229 node: ServoThreadSafeLayoutNode<'_>,
230 ) -> (ReplacedContentKind, NaturalSizes) {
231 let rule_cache_conditions = &mut RuleCacheConditions::default();
232
233 let parent_style = node.style(&context.style_context);
234 let style_builder = StyleBuilder::new(
235 context.style_context.stylist.device(),
236 Some(context.style_context.stylist),
237 Some(&parent_style),
238 None,
239 None,
240 false,
241 );
242
243 let to_computed_context = Context::new(
244 style_builder,
245 context.style_context.quirks_mode(),
246 rule_cache_conditions,
247 ContainerSizeQuery::none(),
248 RuleCascadeFlags::empty(),
249 );
250
251 let attr_to_computed = |attr_val: &AttrValue| {
252 if let AttrValue::LengthPercentage(_, length_percentage) = attr_val {
253 length_percentage
254 .to_computed_value(&to_computed_context)?
255 .to_length()
256 } else {
257 None
258 }
259 };
260 let width = svg_data.width.and_then(attr_to_computed);
261 let height = svg_data.height.and_then(attr_to_computed);
262
263 let ratio = match (width, height) {
264 (Some(width), Some(height)) if !width.is_zero() && !height.is_zero() => {
265 Some(width.px() / height.px())
266 },
267 _ => svg_data.ratio_from_view_box(),
268 };
269
270 let natural_size = NaturalSizes {
271 width: width.map(|w| Au::from_f32_px(w.px())),
272 height: height.map(|h| Au::from_f32_px(h.px())),
273 ratio,
274 };
275
276 let svg_source = match svg_data.source {
277 None => {
278 context
281 .image_resolver
282 .queue_svg_element_for_serialization(node);
283 None
284 },
285 Some(svg_source_result) => svg_source_result.ok(),
288 };
289
290 let cached_image = svg_source.and_then(|svg_source| {
291 context
292 .image_resolver
293 .get_cached_image_for_url(
294 node.opaque(),
295 svg_source,
296 LayoutImageDestination::BoxTreeConstruction,
297 )
298 .ok()
299 });
300
301 let vector_image = cached_image.map(|image| match image {
302 Image::Vector(mut vector_image) => {
303 vector_image.svg_id = Some(svg_data.svg_id);
304 vector_image
305 },
306 _ => unreachable!("SVG element can't contain a raster image."),
307 });
308
309 (ReplacedContentKind::SVGElement(vector_image), natural_size)
310 }
311
312 fn from_content_property(
313 node: ServoThreadSafeLayoutNode<'_>,
314 context: &LayoutContext,
315 ) -> Option<Self> {
316 if let Content::Items(GenericContentItems { items, .. }) =
319 node.style(&context.style_context).clone_content()
320 {
321 if let [GenericContentItem::Image(image)] = items.as_slice() {
322 return Some(
324 Self::from_image(node, context, image)
325 .unwrap_or_else(|| Self::zero_sized_invalid_image(node)),
326 );
327 }
328 }
329 None
330 }
331
332 pub fn from_image_url(
333 node: ServoThreadSafeLayoutNode<'_>,
334 context: &LayoutContext,
335 image_url: &ComputedUrl,
336 ) -> Option<Self> {
337 if let ComputedUrl::Valid(image_url) = image_url {
338 let (image, width, height) = match context.image_resolver.get_or_request_image_or_meta(
339 node.opaque(),
340 image_url.clone().into(),
341 LayoutImageDestination::BoxTreeConstruction,
342 ) {
343 LayoutImageCacheResult::DataAvailable(img_or_meta) => match img_or_meta {
344 ImageOrMetadataAvailable::ImageAvailable { image, .. } => {
345 if let Image::Raster(image) = &image {
346 context
347 .image_resolver
348 .handle_animated_image(node.opaque(), image.clone());
349 }
350 let metadata = image.metadata();
351 (Some(image), metadata.width as f32, metadata.height as f32)
352 },
353 ImageOrMetadataAvailable::MetadataAvailable(metadata, _id) => {
354 (None, metadata.width as f32, metadata.height as f32)
355 },
356 },
357 LayoutImageCacheResult::Pending | LayoutImageCacheResult::LoadError => return None,
358 };
359 return Some(Self {
360 kind: ReplacedContentKind::Image(ImageInfo {
361 image,
362 showing_broken_image_icon: false,
363 url: Some(image_url.clone().into()),
364 }),
365 natural_size: NaturalSizes::from_width_and_height(width, height),
366 base_fragment_info: node.into(),
367 });
368 }
369 None
370 }
371
372 pub fn from_image(
373 element: ServoThreadSafeLayoutNode<'_>,
374 context: &LayoutContext,
375 image: &ComputedImage,
376 ) -> Option<Self> {
377 match image {
378 ComputedImage::Url(image_url) => Self::from_image_url(element, context, image_url),
379 _ => None, }
381 }
382
383 pub(crate) fn zero_sized_invalid_image(node: ServoThreadSafeLayoutNode<'_>) -> Self {
384 Self {
385 kind: ReplacedContentKind::Image(ImageInfo {
386 image: None,
387 showing_broken_image_icon: false,
388 url: None,
389 }),
390 natural_size: NaturalSizes::from_width_and_height(0., 0.),
391 base_fragment_info: node.into(),
392 }
393 }
394
395 #[inline]
396 fn is_broken_image(&self) -> bool {
397 matches!(&self.kind, ReplacedContentKind::Image(image_info) if image_info.showing_broken_image_icon)
398 }
399
400 #[inline]
401 fn content_size(
402 &self,
403 axis: Direction,
404 preferred_aspect_ratio: Option<AspectRatio>,
405 get_size_in_opposite_axis: &dyn Fn() -> SizeConstraint,
406 get_fallback_size: &dyn Fn() -> Au,
407 ) -> Au {
408 let Some(ratio) = preferred_aspect_ratio else {
409 return get_fallback_size();
410 };
411 let transfer = |size| ratio.compute_dependent_size(axis, size);
412 match get_size_in_opposite_axis() {
413 SizeConstraint::Definite(size) => transfer(size),
414 SizeConstraint::MinMax(min_size, max_size) => get_fallback_size()
415 .clamp_between_extremums(transfer(min_size), max_size.map(transfer)),
416 }
417 }
418
419 fn calculate_fragment_rect(
420 &self,
421 style: &ServoArc<ComputedValues>,
422 size: PhysicalSize<Au>,
423 ) -> (PhysicalSize<Au>, PhysicalRect<Au>) {
424 if let ReplacedContentKind::Image(ImageInfo {
425 image: Some(Image::Raster(image)),
426 showing_broken_image_icon: true,
427 url: _,
428 }) = &self.kind
429 {
430 let size = Size2D::new(
431 Au::from_f32_px(image.metadata.width as f32),
432 Au::from_f32_px(image.metadata.height as f32),
433 )
434 .min(size);
435 return (PhysicalSize::zero(), size.into());
436 }
437
438 let natural_size = PhysicalSize::new(
439 self.natural_size.width.unwrap_or(size.width),
440 self.natural_size.height.unwrap_or(size.height),
441 );
442
443 let object_fit_size = self.natural_size.ratio.map_or(size, |width_over_height| {
444 let preserve_aspect_ratio_with_comparison =
445 |size: PhysicalSize<Au>, comparison: fn(&Au, &Au) -> bool| {
446 let candidate_width = size.height.scale_by(width_over_height);
447 if comparison(&candidate_width, &size.width) {
448 return PhysicalSize::new(candidate_width, size.height);
449 }
450
451 let candidate_height = size.width.scale_by(1. / width_over_height);
452 debug_assert!(comparison(&candidate_height, &size.height));
453 PhysicalSize::new(size.width, candidate_height)
454 };
455
456 match style.clone_object_fit() {
457 ObjectFit::Fill => size,
458 ObjectFit::Contain => preserve_aspect_ratio_with_comparison(size, PartialOrd::le),
459 ObjectFit::Cover => preserve_aspect_ratio_with_comparison(size, PartialOrd::ge),
460 ObjectFit::None => natural_size,
461 ObjectFit::ScaleDown => {
462 preserve_aspect_ratio_with_comparison(size.min(natural_size), PartialOrd::le)
463 },
464 }
465 });
466
467 let object_position = style.clone_object_position();
468 let horizontal_position = object_position
469 .horizontal
470 .to_used_value(size.width - object_fit_size.width);
471 let vertical_position = object_position
472 .vertical
473 .to_used_value(size.height - object_fit_size.height);
474
475 let object_position = PhysicalPoint::new(horizontal_position, vertical_position);
476 (
477 object_fit_size,
478 PhysicalRect::new(object_position, object_fit_size),
479 )
480 }
481
482 pub fn make_fragments(
483 &self,
484 layout_context: &LayoutContext,
485 style: &ServoArc<ComputedValues>,
486 size: PhysicalSize<Au>,
487 ) -> Vec<Fragment> {
488 let (object_fit_size, rect) = self.calculate_fragment_rect(style, size);
489 let clip = PhysicalRect::new(PhysicalPoint::origin(), size);
490
491 let mut base = BaseFragment::new(self.base_fragment_info, style.clone().into(), rect);
492 match &self.kind {
493 ReplacedContentKind::Image(image_info) => image_info
494 .image
495 .as_ref()
496 .and_then(|image| match image {
497 Image::Raster(raster_image) => raster_image.id,
498 Image::Vector(vector_image) => {
499 let scale = layout_context.style_context.device_pixel_ratio();
500 let width = object_fit_size.width.scale_by(scale.0).to_px();
501 let height = object_fit_size.height.scale_by(scale.0).to_px();
502 let size = Size2D::new(width, height);
503 let tag = self.base_fragment_info.tag?;
504 layout_context
505 .image_resolver
506 .rasterize_vector_image(
507 vector_image.id,
508 size,
509 tag.node,
510 vector_image.svg_id.clone(),
511 )
512 .and_then(|i| i.id)
513 },
514 })
515 .map(|image_key| {
516 Fragment::Image(ArcRefCell::new(ImageFragment {
517 base,
518 clip,
519 image_key: Some(image_key),
520 showing_broken_image_icon: image_info.showing_broken_image_icon,
521 url: image_info.url.clone(),
522 }))
523 })
524 .into_iter()
525 .collect(),
526 ReplacedContentKind::Video(video_info) => {
527 vec![Fragment::Image(ArcRefCell::new(ImageFragment {
528 base,
529 clip,
530 image_key: video_info.image_key,
531 showing_broken_image_icon: false,
532 url: None,
533 }))]
534 },
535 ReplacedContentKind::IFrame(iframe) => {
536 let size = Size2D::new(rect.size.width.to_f32_px(), rect.size.height.to_f32_px());
537 let hidpi_scale_factor = layout_context.style_context.device_pixel_ratio();
538
539 layout_context.iframe_sizes.lock().insert(
540 iframe.browsing_context_id,
541 IFrameSize {
542 browsing_context_id: iframe.browsing_context_id,
543 pipeline_id: iframe.pipeline_id,
544 viewport_details: ViewportDetails {
545 size,
546 hidpi_scale_factor: Scale::new(hidpi_scale_factor.0),
547 },
548 },
549 );
550 vec![Fragment::IFrame(ArcRefCell::new(IFrameFragment {
551 base,
552 pipeline_id: iframe.pipeline_id,
553 }))]
554 },
555 ReplacedContentKind::Canvas(canvas_info) => {
556 if self.natural_size.width == Some(Au::zero()) ||
557 self.natural_size.height == Some(Au::zero())
558 {
559 return vec![];
560 }
561
562 let Some(image_key) = canvas_info.source else {
563 return vec![];
564 };
565
566 vec![Fragment::Image(ArcRefCell::new(ImageFragment {
567 base,
568 clip,
569 image_key: Some(image_key),
570 showing_broken_image_icon: false,
571 url: None,
572 }))]
573 },
574 ReplacedContentKind::SVGElement(vector_image) => {
575 let Some(vector_image) = vector_image else {
576 return vec![];
577 };
578
579 base.rect = PhysicalSize::new(
581 vector_image
582 .metadata
583 .width
584 .try_into()
585 .map_or(MAX_AU, Au::from_px),
586 vector_image
587 .metadata
588 .height
589 .try_into()
590 .map_or(MAX_AU, Au::from_px),
591 )
592 .into();
593
594 let scale = layout_context.style_context.device_pixel_ratio();
595 let raster_size = Size2D::new(
596 base.rect.size.width.scale_by(scale.0).to_px(),
597 base.rect.size.height.scale_by(scale.0).to_px(),
598 );
599
600 let tag = self.base_fragment_info.tag.unwrap();
601 layout_context
602 .image_resolver
603 .rasterize_vector_image(
604 vector_image.id,
605 raster_size,
606 tag.node,
607 vector_image.svg_id.clone(),
608 )
609 .and_then(|image| image.id)
610 .map(|image_key| {
611 Fragment::Image(ArcRefCell::new(ImageFragment {
612 base,
613 clip,
614 image_key: Some(image_key),
615 showing_broken_image_icon: false,
616 url: None,
617 }))
618 })
619 .into_iter()
620 .collect()
621 },
622 ReplacedContentKind::Audio => vec![],
623 }
624 }
625
626 pub(crate) fn preferred_aspect_ratio(
627 &self,
628 style: &ComputedValues,
629 padding_border_sums: &LogicalVec2<Au>,
630 ) -> Option<AspectRatio> {
631 if matches!(self.kind, ReplacedContentKind::Audio) {
632 return None;
635 }
636 if self.is_broken_image() {
637 style.preferred_aspect_ratio(None, padding_border_sums)
643 } else {
644 style.preferred_aspect_ratio(self.natural_size.ratio, padding_border_sums)
645 }
646 }
647
648 pub(crate) fn fallback_inline_size(&self, writing_mode: WritingMode) -> Au {
654 if writing_mode.is_horizontal() {
655 self.natural_size.width.unwrap_or_else(|| Au::from_px(300))
656 } else {
657 self.natural_size.height.unwrap_or_else(|| Au::from_px(150))
658 }
659 }
660
661 pub(crate) fn fallback_block_size(&self, writing_mode: WritingMode) -> Au {
667 if writing_mode.is_horizontal() {
668 self.natural_size.height.unwrap_or_else(|| Au::from_px(150))
669 } else {
670 self.natural_size.width.unwrap_or_else(|| Au::from_px(300))
671 }
672 }
673
674 pub(crate) fn logical_natural_sizes(
675 &self,
676 writing_mode: WritingMode,
677 ) -> LogicalVec2<Option<Au>> {
678 if writing_mode.is_horizontal() {
679 LogicalVec2 {
680 inline: self.natural_size.width,
681 block: self.natural_size.height,
682 }
683 } else {
684 LogicalVec2 {
685 inline: self.natural_size.height,
686 block: self.natural_size.width,
687 }
688 }
689 }
690
691 #[inline]
692 pub(crate) fn layout_style<'a>(&self, base: &'a LayoutBoxBase) -> LayoutStyle<'a> {
693 LayoutStyle::Default(&base.style)
694 }
695
696 pub(crate) fn layout(
697 &self,
698 layout_context: &LayoutContext,
699 containing_block_for_children: &ContainingBlock,
700 preferred_aspect_ratio: Option<AspectRatio>,
701 base: &LayoutBoxBase,
702 lazy_block_size: &LazySize,
703 ) -> CacheableLayoutResult {
704 let writing_mode = base.style.writing_mode;
705 let inline_size = containing_block_for_children.size.inline;
706 let content_block_size = self.content_size(
707 Direction::Block,
708 preferred_aspect_ratio,
709 &|| SizeConstraint::Definite(inline_size),
710 &|| self.fallback_block_size(writing_mode),
711 );
712 let size = LogicalVec2 {
713 inline: inline_size,
714 block: lazy_block_size.resolve(|| content_block_size),
715 }
716 .to_physical_size(writing_mode);
717 CacheableLayoutResult {
718 baselines: Default::default(),
719 collapsible_margins_in_children: CollapsedBlockMargins::zero(),
720 content_block_size,
721 content_inline_size_for_table: None,
722 depends_on_block_constraints: true,
725 fragments: self.make_fragments(layout_context, &base.style, size),
726 specific_layout_info: None,
727 }
728 }
729}
730
731impl ComputeInlineContentSizes for ReplacedContents {
732 fn compute_inline_content_sizes(
733 &self,
734 _: &LayoutContext,
735 constraint_space: &ConstraintSpace,
736 ) -> InlineContentSizesResult {
737 let inline_content_size = self.content_size(
738 Direction::Inline,
739 constraint_space.preferred_aspect_ratio,
740 &|| constraint_space.block_size,
741 &|| self.fallback_inline_size(constraint_space.style.writing_mode),
742 );
743 InlineContentSizesResult {
744 sizes: inline_content_size.into(),
745 depends_on_block_constraints: constraint_space.preferred_aspect_ratio.is_some(),
746 }
747 }
748}
749
750fn try_to_parse_image_data_url(string: &str) -> Option<Url> {
751 if !string.starts_with("data:") {
752 return None;
753 }
754 let data_url = DataUrl::process(string).ok()?;
755 let mime_type = data_url.mime_type();
756 if mime_type.type_ != "image" {
757 return None;
758 }
759
760 if !matches!(
763 mime_type.subtype.as_str(),
764 "png" | "jpeg" | "gif" | "webp" | "bmp" | "ico"
765 ) {
766 return None;
767 }
768
769 Url::parse(string).ok()
770}