From fc3bf1340d6c56b1c1728b1453add0c7bfd73528 Mon Sep 17 00:00:00 2001 From: Nico Burns Date: Mon, 30 Dec 2024 15:50:05 +1300 Subject: [PATCH] Support `calc()` values in CSS Signed-off-by: Nico Burns --- Cargo.toml | 13 +- packages/blitz-dom/src/image.rs | 8 +- packages/blitz-dom/src/layout/inline.rs | 371 +++++++++++++----------- packages/blitz-dom/src/layout/mod.rs | 34 ++- packages/blitz-dom/src/layout/table.rs | 58 ++-- packages/stylo_taffy/src/convert.rs | 92 +++--- packages/stylo_taffy/src/wrapper.rs | 13 +- 7 files changed, 332 insertions(+), 257 deletions(-) diff --git a/Cargo.toml b/Cargo.toml index 9df41bef..773614a9 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -20,11 +20,12 @@ license = "MIT OR Apache-2.0" [workspace.dependencies] # Servo dependencies -style = { git = "https://github.com/nicoburns/stylo", rev = "80741aba", package = "style" } # u64-opaque-element -style_config = { git = "https://github.com/nicoburns/stylo", rev = "80741aba", package = "style_config" } # u64-opaque-element -style_traits = { git = "https://github.com/nicoburns/stylo", rev = "80741aba", package = "style_traits" } # u64-opaque-element -style_dom = { git = "https://github.com/nicoburns/stylo", rev = "80741aba", package = "dom" } # u64-opaque-element -selectors = { git = "https://github.com/nicoburns/stylo", rev = "80741aba", package = "selectors" } # u64-opaque-element +style = { git = "https://github.com/nicoburns/stylo", rev = "9ceb7369", package = "style" } # blitz +style_config = { git = "https://github.com/nicoburns/stylo", rev = "9ceb7369", package = "style_config" } # blitz +style_traits = { git = "https://github.com/nicoburns/stylo", rev = "9ceb7369", package = "style_traits" } # blitz +style_dom = { git = "https://github.com/nicoburns/stylo", rev = "9ceb7369", package = "dom" } # blitz +selectors = { git = "https://github.com/nicoburns/stylo", rev = "9ceb7369", package = "selectors" } # blitz + markup5ever = "0.14" # needs to match stylo markup5ever version html5ever = "0.29" # needs to match stylo markup5ever version xml5ever = "0.20" # needs to match stylo markup5ever version @@ -39,7 +40,7 @@ dioxus-core = { version = "0.6" } dioxus-html = { version = "0.6" } dioxus-cli-config = { version = "0.6" } dioxus-devtools = { version = "0.6" } -taffy = { version = "0.7.1", default-features = false, features = ["std", "flexbox", "grid", "block_layout", "content_size"] } +taffy = { git = "https://github.com/dioxuslabs/taffy", rev = "0386dc966a", default-features = false, features = ["std", "flexbox", "grid", "block_layout", "content_size"] } # Linebender + WGPU peniko = "0.2" diff --git a/packages/blitz-dom/src/image.rs b/packages/blitz-dom/src/image.rs index 577492f7..8da76f23 100644 --- a/packages/blitz-dom/src/image.rs +++ b/packages/blitz-dom/src/image.rs @@ -1,5 +1,7 @@ use taffy::{MaybeMath, MaybeResolve}; +use crate::layout::resolve_calc_value; + #[derive(Debug, Clone, Copy)] pub struct ImageContext { pub inherent_size: taffy::Size, @@ -22,15 +24,15 @@ pub fn image_measure_function( // Resolve sizes let style_size = style .size - .maybe_resolve(parent_size) + .maybe_resolve(parent_size, resolve_calc_value) .maybe_apply_aspect_ratio(Some(aspect_ratio)); let min_size = style .min_size - .maybe_resolve(parent_size) + .maybe_resolve(parent_size, resolve_calc_value) .maybe_apply_aspect_ratio(Some(aspect_ratio)); let max_size = style .max_size - .maybe_resolve(parent_size) + .maybe_resolve(parent_size, resolve_calc_value) .maybe_apply_aspect_ratio(Some(aspect_ratio)); let attr_size = image_context .attr_size diff --git a/packages/blitz-dom/src/layout/inline.rs b/packages/blitz-dom/src/layout/inline.rs index c0d4b620..045e090d 100644 --- a/packages/blitz-dom/src/layout/inline.rs +++ b/packages/blitz-dom/src/layout/inline.rs @@ -3,6 +3,7 @@ use taffy::{ NodeId, Position, ResolveOrZero as _, Size, }; +use super::resolve_calc_value; use crate::BaseDocument; impl BaseDocument { @@ -24,184 +25,208 @@ impl BaseDocument { // TODO: eliminate clone let style = self.nodes[node_id].style.clone(); - let output = compute_leaf_layout(inputs, &style, |_known_dimensions, available_space| { - // Short circuit if inline context contains no text or inline boxes - if inline_layout.text.is_empty() && inline_layout.layout.inline_boxes().is_empty() { - return Size::ZERO; - } - - // Compute size of inline boxes - let child_inputs = taffy::tree::LayoutInput { - known_dimensions: Size::NONE, - available_space, - parent_size: available_space.into_options(), - ..inputs - }; - for ibox in inline_layout.layout.inline_boxes_mut() { - let style = &self.nodes[ibox.id as usize].style; - let margin = style.margin.resolve_or_zero(inputs.parent_size); - - if style.position == Position::Absolute { - ibox.width = 0.0; - ibox.height = 0.0; - } else { - let output = self.compute_child_layout(NodeId::from(ibox.id), child_inputs); - ibox.width = (margin.left + margin.right + output.size.width) * scale; - ibox.height = (margin.top + margin.bottom + output.size.height) * scale; + let output = compute_leaf_layout( + inputs, + &style, + resolve_calc_value, + |_known_dimensions, available_space| { + // Short circuit if inline context contains no text or inline boxes + if inline_layout.text.is_empty() && inline_layout.layout.inline_boxes().is_empty() { + return Size::ZERO; } - } - - // Perform inline layout - let max_advance = match available_space.width { - AvailableSpace::Definite(px) => Some(px * scale), - AvailableSpace::MinContent => Some(0.0), - AvailableSpace::MaxContent => None, - }; - - let alignment = self.nodes[node_id] - .primary_styles() - .map(|s| { - use parley::layout::Alignment; - use style::values::specified::TextAlignKeyword; - - match s.clone_text_align() { - TextAlignKeyword::Start => Alignment::Start, - TextAlignKeyword::Left => Alignment::Start, - TextAlignKeyword::Right => Alignment::End, - TextAlignKeyword::Center => Alignment::Middle, - TextAlignKeyword::Justify => Alignment::Justified, - TextAlignKeyword::End => Alignment::End, - TextAlignKeyword::MozCenter => Alignment::Middle, - TextAlignKeyword::MozLeft => Alignment::Start, - TextAlignKeyword::MozRight => Alignment::End, + + // Compute size of inline boxes + let child_inputs = taffy::tree::LayoutInput { + known_dimensions: Size::NONE, + available_space, + parent_size: available_space.into_options(), + ..inputs + }; + for ibox in inline_layout.layout.inline_boxes_mut() { + let style = &self.nodes[ibox.id as usize].style; + let margin = style + .margin + .resolve_or_zero(inputs.parent_size, resolve_calc_value); + + if style.position == Position::Absolute { + ibox.width = 0.0; + ibox.height = 0.0; + } else { + let output = self.compute_child_layout(NodeId::from(ibox.id), child_inputs); + ibox.width = (margin.left + margin.right + output.size.width) * scale; + ibox.height = (margin.top + margin.bottom + output.size.height) * scale; } - }) - .unwrap_or(parley::layout::Alignment::Start); - - inline_layout.layout.break_all_lines(max_advance); - - let padding = style.padding.resolve_or_zero(inputs.parent_size); - let border = style.border.resolve_or_zero(inputs.parent_size); - - let container_pb = padding + border; - let pbw = container_pb.horizontal_components().sum() * scale; - - // Align layout - let alignment_width = inputs - .known_dimensions - .width - .map(|w| (w * scale) - pbw) - .unwrap_or_else(|| { - let computed_width = inline_layout.layout.width(); - let style_width = style - .size - .width - .maybe_resolve(inputs.parent_size.width) - .map(|w| w * scale); - let min_width = style - .min_size - .width - .maybe_resolve(inputs.parent_size.width) - .map(|w| w * scale); - let max_width = style - .max_size - .width - .maybe_resolve(inputs.parent_size.width) - .map(|w| w * scale); - - (style_width) - .unwrap_or(computed_width + pbw) - .max(computed_width) - .maybe_clamp(min_width, max_width) - - pbw - }); - - inline_layout.layout.align(Some(alignment_width), alignment); - - // Store sizes and positions of inline boxes - for line in inline_layout.layout.lines() { - for item in line.items() { - if let parley::layout::PositionedLayoutItem::InlineBox(ibox) = item { - let node = &mut self.nodes[ibox.id as usize]; - let padding = node.style.padding.resolve_or_zero(child_inputs.parent_size); - let border = node.style.border.resolve_or_zero(child_inputs.parent_size); - let margin = node.style.margin.resolve_or_zero(child_inputs.parent_size); - - // Resolve inset - let left = node - .style - .inset - .left - .maybe_resolve(child_inputs.parent_size.width); - let right = node - .style - .inset - .right - .maybe_resolve(child_inputs.parent_size.width); - let top = node - .style - .inset - .top - .maybe_resolve(child_inputs.parent_size.height); - let bottom = node - .style - .inset - .bottom - .maybe_resolve(child_inputs.parent_size.height); - - if node.style.position == Position::Absolute { - let output = - self.compute_child_layout(NodeId::from(ibox.id), child_inputs); - - let layout = &mut self.nodes[ibox.id as usize].unrounded_layout; - layout.size = output.size; - - // TODO: Implement absolute positioning - layout.location.x = left - .or_else(|| { - child_inputs - .parent_size - .width - .zip(right) - .map(|(w, r)| w - r) - }) - .unwrap_or((ibox.x / scale) + margin.left + container_pb.left); - layout.location.y = top - .or_else(|| { - child_inputs - .parent_size - .height - .zip(bottom) - .map(|(w, r)| w - r) - }) - .unwrap_or((ibox.y / scale) + margin.top + container_pb.top); - - layout.padding = padding; //.map(|p| p / scale); - layout.border = border; //.map(|p| p / scale); - } else { - let layout = &mut node.unrounded_layout; - layout.size.width = (ibox.width / scale) - margin.left - margin.right; - layout.size.height = (ibox.height / scale) - margin.top - margin.bottom; - layout.location.x = (ibox.x / scale) + margin.left + container_pb.left; - layout.location.y = (ibox.y / scale) + margin.top + container_pb.top; - layout.padding = padding; //.map(|p| p / scale); - layout.border = border; //.map(|p| p / scale); + } + + // Perform inline layout + let max_advance = match available_space.width { + AvailableSpace::Definite(px) => Some(px * scale), + AvailableSpace::MinContent => Some(0.0), + AvailableSpace::MaxContent => None, + }; + + let alignment = self.nodes[node_id] + .primary_styles() + .map(|s| { + use parley::layout::Alignment; + use style::values::specified::TextAlignKeyword; + + match s.clone_text_align() { + TextAlignKeyword::Start => Alignment::Start, + TextAlignKeyword::Left => Alignment::Start, + TextAlignKeyword::Right => Alignment::End, + TextAlignKeyword::Center => Alignment::Middle, + TextAlignKeyword::Justify => Alignment::Justified, + TextAlignKeyword::End => Alignment::End, + TextAlignKeyword::MozCenter => Alignment::Middle, + TextAlignKeyword::MozLeft => Alignment::Start, + TextAlignKeyword::MozRight => Alignment::End, + } + }) + .unwrap_or(parley::layout::Alignment::Start); + + inline_layout.layout.break_all_lines(max_advance); + + let padding = style + .padding + .resolve_or_zero(inputs.parent_size, resolve_calc_value); + let border = style + .border + .resolve_or_zero(inputs.parent_size, resolve_calc_value); + + let container_pb = padding + border; + let pbw = container_pb.horizontal_components().sum() * scale; + + // Align layout + let alignment_width = inputs + .known_dimensions + .width + .map(|w| (w * scale) - pbw) + .unwrap_or_else(|| { + let computed_width = inline_layout.layout.width(); + let style_width = style + .size + .width + .maybe_resolve(inputs.parent_size.width, resolve_calc_value) + .map(|w| w * scale); + let min_width = style + .min_size + .width + .maybe_resolve(inputs.parent_size.width, resolve_calc_value) + .map(|w| w * scale); + let max_width = style + .max_size + .width + .maybe_resolve(inputs.parent_size.width, resolve_calc_value) + .map(|w| w * scale); + + (style_width) + .unwrap_or(computed_width + pbw) + .max(computed_width) + .maybe_clamp(min_width, max_width) + - pbw + }); + + inline_layout.layout.align(Some(alignment_width), alignment); + + // Store sizes and positions of inline boxes + for line in inline_layout.layout.lines() { + for item in line.items() { + if let parley::layout::PositionedLayoutItem::InlineBox(ibox) = item { + let node = &mut self.nodes[ibox.id as usize]; + let padding = node + .style + .padding + .resolve_or_zero(child_inputs.parent_size, resolve_calc_value); + let border = node + .style + .border + .resolve_or_zero(child_inputs.parent_size, resolve_calc_value); + let margin = node + .style + .margin + .resolve_or_zero(child_inputs.parent_size, resolve_calc_value); + + // Resolve inset + let left = node + .style + .inset + .left + .maybe_resolve(child_inputs.parent_size.width, resolve_calc_value); + let right = node + .style + .inset + .right + .maybe_resolve(child_inputs.parent_size.width, resolve_calc_value); + let top = node + .style + .inset + .top + .maybe_resolve(child_inputs.parent_size.height, resolve_calc_value); + let bottom = node + .style + .inset + .bottom + .maybe_resolve(child_inputs.parent_size.height, resolve_calc_value); + + if node.style.position == Position::Absolute { + let output = + self.compute_child_layout(NodeId::from(ibox.id), child_inputs); + + let layout = &mut self.nodes[ibox.id as usize].unrounded_layout; + layout.size = output.size; + + // TODO: Implement absolute positioning + layout.location.x = left + .or_else(|| { + child_inputs + .parent_size + .width + .zip(right) + .map(|(w, r)| w - r) + }) + .unwrap_or((ibox.x / scale) + margin.left + container_pb.left); + layout.location.y = top + .or_else(|| { + child_inputs + .parent_size + .height + .zip(bottom) + .map(|(w, r)| w - r) + }) + .unwrap_or((ibox.y / scale) + margin.top + container_pb.top); + + layout.padding = padding; //.map(|p| p / scale); + layout.border = border; //.map(|p| p / scale); + } else { + let layout = &mut node.unrounded_layout; + layout.size.width = + (ibox.width / scale) - margin.left - margin.right; + layout.size.height = + (ibox.height / scale) - margin.top - margin.bottom; + layout.location.x = + (ibox.x / scale) + margin.left + container_pb.left; + layout.location.y = + (ibox.y / scale) + margin.top + container_pb.top; + layout.padding = padding; //.map(|p| p / scale); + layout.border = border; //.map(|p| p / scale); + } } } } - } - - // println!("INLINE LAYOUT FOR {:?}. max_advance: {:?}", node_id, max_advance); - // dbg!(&inline_layout.text); - // println!("Computed: w: {} h: {}", inline_layout.layout.width(), inline_layout.layout.height()); - // println!("known_dimensions: w: {:?} h: {:?}", inputs.known_dimensions.width, inputs.known_dimensions.height); - // println!("\n"); - - inputs.known_dimensions.unwrap_or(taffy::Size { - width: inline_layout.layout.width() / scale, - height: inline_layout.layout.height() / scale, - }) - }); + + // println!("INLINE LAYOUT FOR {:?}. max_advance: {:?}", node_id, max_advance); + // dbg!(&inline_layout.text); + // println!("Computed: w: {} h: {}", inline_layout.layout.width(), inline_layout.layout.height()); + // println!("known_dimensions: w: {:?} h: {:?}", inputs.known_dimensions.width, inputs.known_dimensions.height); + // println!("\n"); + + inputs.known_dimensions.unwrap_or(taffy::Size { + width: inline_layout.layout.width() / scale, + height: inline_layout.layout.height() / scale, + }) + }, + ); // Put layout back self.nodes[node_id] diff --git a/packages/blitz-dom/src/layout/mod.rs b/packages/blitz-dom/src/layout/mod.rs index 8999a4f0..cbe2c4f1 100644 --- a/packages/blitz-dom/src/layout/mod.rs +++ b/packages/blitz-dom/src/layout/mod.rs @@ -13,6 +13,8 @@ use crate::{ use markup5ever::local_name; use std::cell::Ref; use std::sync::Arc; +use style::values::computed::length_percentage::CalcLengthPercentage; +use style::values::computed::CSSPixelLength; use taffy::{ compute_block_layout, compute_cached_layout, compute_flexbox_layout, compute_grid_layout, compute_leaf_layout, prelude::*, FlexDirection, LayoutPartialTree, NodeId, ResolveOrZero, @@ -25,6 +27,12 @@ pub(crate) mod table; use self::table::TableTreeWrapper; +pub(crate) fn resolve_calc_value(calc_value: u64, parent_size: f32) -> f32 { + let calc_ptr = calc_value as usize as *const CalcLengthPercentage; + let calc = unsafe { &*calc_ptr }; + calc.resolve(CSSPixelLength::new(parent_size)).px() +} + impl BaseDocument { fn node_from_id(&self, node_id: taffy::prelude::NodeId) -> &Node { &self.nodes[node_id.into()] @@ -79,6 +87,10 @@ impl LayoutPartialTree for BaseDocument { self.node_from_id_mut(node_id).unrounded_layout = *layout; } + fn resolve_calc_value(&self, calc_value: u64, parent_size: f32) -> f32 { + resolve_calc_value(calc_value, parent_size) + } + fn compute_child_layout( &mut self, node_id: NodeId, @@ -152,6 +164,7 @@ impl LayoutPartialTree for BaseDocument { return compute_leaf_layout( inputs, &node.style, + resolve_calc_value, |_known_size, _available_space| taffy::Size { width: cols .map(|cols| cols * font_size.unwrap_or(16.0) * 0.6) @@ -172,17 +185,16 @@ impl LayoutPartialTree for BaseDocument { return compute_leaf_layout( inputs, &node.style, + resolve_calc_value, |_known_size, _available_space| { - let width = node - .style - .size - .width - .resolve_or_zero(inputs.parent_size.width); - let height = node - .style - .size - .height - .resolve_or_zero(inputs.parent_size.height); + let width = node.style.size.width.resolve_or_zero( + inputs.parent_size.width, + resolve_calc_value, + ); + let height = node.style.size.height.resolve_or_zero( + inputs.parent_size.height, + resolve_calc_value, + ); let min_size = width.min(height); taffy::Size { width: min_size, @@ -195,6 +207,7 @@ impl LayoutPartialTree for BaseDocument { return compute_leaf_layout( inputs, &node.style, + resolve_calc_value, |_known_size, _available_space| taffy::Size { width: 300.0, height: resolved_line_height.unwrap_or(16.0), @@ -250,6 +263,7 @@ impl LayoutPartialTree for BaseDocument { let computed = compute_leaf_layout( inputs, &node.style, + resolve_calc_value, |known_dimensions, _available_space| { image_measure_function( known_dimensions, diff --git a/packages/blitz-dom/src/layout/table.rs b/packages/blitz-dom/src/layout/table.rs index f82e6c62..bc7329ac 100644 --- a/packages/blitz-dom/src/layout/table.rs +++ b/packages/blitz-dom/src/layout/table.rs @@ -3,10 +3,15 @@ use std::{ops::Range, sync::Arc}; use markup5ever::local_name; use style::computed_values::table_layout::T as TableLayout; use style::values::specified::box_::DisplayInside; -use taffy::{compute_leaf_layout, style_helpers, Dimension, LayoutPartialTree as _, ResolveOrZero}; +use taffy::{ + compute_leaf_layout, style_helpers, Dimension, LayoutPartialTree as _, + NonRepeatedTrackSizingFunction, ResolveOrZero, +}; use crate::BaseDocument; +use super::resolve_calc_value; + pub struct TableTreeWrapper<'doc> { pub(crate) doc: &'doc mut BaseDocument, pub(crate) ctx: Arc, @@ -74,11 +79,7 @@ pub(crate) fn build_table_context( style.grid_template_columns = column_sizes .into_iter() - .map(|size| match size { - taffy::Dimension::Length(len) => style_helpers::length(len), - taffy::Dimension::Percent(percent) => style_helpers::percent(percent), - taffy::Dimension::Auto => style_helpers::auto(), - }) + .map(|dim| NonRepeatedTrackSizingFunction::from(dim).into()) .collect(); style.grid_template_rows = vec![style_helpers::auto(); row as usize]; @@ -162,24 +163,31 @@ pub(crate) fn collect_table_cells( // TODO: account for padding/border/margin if *row == 1 { - let column = match &style.size.width { - taffy::Dimension::Length(len) => { - let padding = style.padding.resolve_or_zero(None); - style_helpers::length(*len + padding.left + padding.right) + let column = match style.size.width.tag() { + taffy::CompactLength::LENGTH_TAG => { + let len = style.size.width.value(); + let padding = style.padding.resolve_or_zero(None, resolve_calc_value); + style_helpers::length(len + padding.left + padding.right) + } + taffy::CompactLength::PERCENT_TAG => { + style_helpers::percent(style.size.width.value()) } - taffy::Dimension::Percent(percent) => style_helpers::percent(*percent), - taffy::Dimension::Auto => style_helpers::auto(), + taffy::CompactLength::AUTO_TAG => style_helpers::auto(), + _ => unreachable!(), }; columns.push(column); - } else if !is_fixed && (*col as usize) < columns.len() { - if let taffy::Dimension::Length(new_len) = &style.size.width { - columns[*col as usize] = match columns[*col as usize] { - taffy::Dimension::Length(len) => { - taffy::Dimension::Length(len.max(*new_len)) - } - taffy::Dimension::Auto => taffy::Dimension::Length(*new_len), - taffy::Dimension::Percent(percent) => taffy::Dimension::Percent(percent), - } + } else if !is_fixed + && (*col as usize) < columns.len() + && taffy::CompactLength::LENGTH_TAG == style.size.width.tag() + { + let new_len = style.size.width.value(); + let tag = columns[*col as usize].tag(); + let value = columns[*col as usize].value(); + columns[*col as usize] = match tag { + taffy::CompactLength::LENGTH_TAG => style_helpers::length(value.max(new_len)), + taffy::CompactLength::AUTO_TAG => style_helpers::length(new_len), + taffy::CompactLength::PERCENT_TAG => style_helpers::percent(value), + _ => unreachable!(), } } @@ -248,6 +256,10 @@ impl taffy::LayoutPartialTree for TableTreeWrapper<'_> { &self.ctx.style } + fn resolve_calc_value(&self, calc_value: u64, parent_size: f32) -> f32 { + resolve_calc_value(calc_value, parent_size) + } + fn set_unrounded_layout(&mut self, node_id: taffy::NodeId, layout: &taffy::Layout) { let node_id = taffy::NodeId::from(self.ctx.items[usize::from(node_id)].node_id); self.doc.set_unrounded_layout(node_id, layout) @@ -261,7 +273,9 @@ impl taffy::LayoutPartialTree for TableTreeWrapper<'_> { let cell = &self.ctx.items[usize::from(node_id)]; match cell.kind { TableItemKind::Row => { - compute_leaf_layout(inputs, &cell.style, |_, _| taffy::Size::ZERO) + compute_leaf_layout(inputs, &cell.style, resolve_calc_value, |_, _| { + taffy::Size::ZERO + }) } TableItemKind::Cell => { let node_id = taffy::NodeId::from(cell.node_id); diff --git a/packages/stylo_taffy/src/convert.rs b/packages/stylo_taffy/src/convert.rs index a4b7dc7b..a886863e 100644 --- a/packages/stylo_taffy/src/convert.rs +++ b/packages/stylo_taffy/src/convert.rs @@ -4,6 +4,8 @@ mod stylo { pub(crate) use style::properties::longhands::aspect_ratio::computed_value::T as AspectRatio; pub(crate) use style::properties::longhands::position::computed_value::T as Position; pub(crate) use style::properties::ComputedValues; + pub(crate) use style::values::computed::length_percentage::CalcLengthPercentage; + pub(crate) use style::values::computed::length_percentage::Unpacked as UnpackedLengthPercentage; pub(crate) use style::values::computed::{LengthPercentage, Percentage}; pub(crate) use style::values::generics::length::{ GenericLengthPercentageOrNormal, GenericMargin, GenericMaxSize, GenericSize, @@ -42,15 +44,20 @@ mod stylo { }; } +use taffy::style_helpers::*; +use taffy::CompactLength; + #[inline] pub fn length_percentage(val: &stylo::LengthPercentage) -> taffy::LengthPercentage { - if let Some(length) = val.to_length() { - taffy::LengthPercentage::Length(length.px()) - } else if let Some(val) = val.to_percentage() { - taffy::LengthPercentage::Percent(val.0) - } else { - // TODO: Support calc - taffy::LengthPercentage::Percent(0.0) + match val.unpack() { + stylo::UnpackedLengthPercentage::Calc(calc_ptr) => { + let val = + CompactLength::calc(calc_ptr as *const stylo::CalcLengthPercentage as *const ()); + // SAFETY: calc is a valid value for LengthPercentage + unsafe { taffy::LengthPercentage::from_raw(val) } + } + stylo::UnpackedLengthPercentage::Length(len) => length(len.px()), + stylo::UnpackedLengthPercentage::Percentage(percentage) => percent(percentage.0), } } @@ -58,13 +65,13 @@ pub fn length_percentage(val: &stylo::LengthPercentage) -> taffy::LengthPercenta pub fn dimension(val: &stylo::Size) -> taffy::Dimension { match val { stylo::Size::LengthPercentage(val) => length_percentage(&val.0).into(), - stylo::Size::Auto => taffy::Dimension::Auto, + stylo::Size::Auto => taffy::Dimension::AUTO, // TODO: implement other values in Taffy - stylo::Size::MaxContent => taffy::Dimension::Auto, - stylo::Size::MinContent => taffy::Dimension::Auto, - stylo::Size::FitContent => taffy::Dimension::Auto, - stylo::Size::Stretch => taffy::Dimension::Auto, + stylo::Size::MaxContent => taffy::Dimension::AUTO, + stylo::Size::MinContent => taffy::Dimension::AUTO, + stylo::Size::FitContent => taffy::Dimension::AUTO, + stylo::Size::Stretch => taffy::Dimension::AUTO, // Anchor positioning will be flagged off for time being stylo::Size::AnchorSizeFunction(_) => unreachable!(), @@ -75,13 +82,13 @@ pub fn dimension(val: &stylo::Size) -> taffy::Dimension { pub fn max_size_dimension(val: &stylo::MaxSize) -> taffy::Dimension { match val { stylo::MaxSize::LengthPercentage(val) => length_percentage(&val.0).into(), - stylo::MaxSize::None => taffy::Dimension::Auto, + stylo::MaxSize::None => taffy::Dimension::AUTO, // TODO: implement other values in Taffy - stylo::MaxSize::MaxContent => taffy::Dimension::Auto, - stylo::MaxSize::MinContent => taffy::Dimension::Auto, - stylo::MaxSize::FitContent => taffy::Dimension::Auto, - stylo::MaxSize::Stretch => taffy::Dimension::Auto, + stylo::MaxSize::MaxContent => taffy::Dimension::AUTO, + stylo::MaxSize::MinContent => taffy::Dimension::AUTO, + stylo::MaxSize::FitContent => taffy::Dimension::AUTO, + stylo::MaxSize::Stretch => taffy::Dimension::AUTO, // Anchor positioning will be flagged off for time being stylo::MaxSize::AnchorSizeFunction(_) => unreachable!(), @@ -91,7 +98,7 @@ pub fn max_size_dimension(val: &stylo::MaxSize) -> taffy::Dimension { #[inline] pub fn margin(val: &stylo::MarginVal) -> taffy::LengthPercentageAuto { match val { - stylo::MarginVal::Auto => taffy::LengthPercentageAuto::Auto, + stylo::MarginVal::Auto => taffy::LengthPercentageAuto::AUTO, stylo::MarginVal::LengthPercentage(val) => length_percentage(val).into(), // Anchor positioning will be flagged off for time being @@ -102,7 +109,7 @@ pub fn margin(val: &stylo::MarginVal) -> taffy::LengthPercentageAuto { #[inline] pub fn inset(val: &stylo::InsetVal) -> taffy::LengthPercentageAuto { match val { - stylo::InsetVal::Auto => taffy::LengthPercentageAuto::Auto, + stylo::InsetVal::Auto => taffy::LengthPercentageAuto::AUTO, stylo::InsetVal::LengthPercentage(val) => length_percentage(val).into(), // Anchor positioning will be flagged off for time being @@ -256,7 +263,7 @@ pub fn gap(input: &stylo::Gap) -> taffy::LengthPercentage { match input { // For Flexbox and CSS Grid the "normal" value is 0px. This may need to be updated // if we ever implement multi-column layout. - stylo::Gap::Normal => taffy::LengthPercentage::Length(0.0), + stylo::Gap::Normal => taffy::LengthPercentage::ZERO, stylo::Gap::LengthPercentage(val) => length_percentage(&val.0), } } @@ -277,7 +284,7 @@ pub(crate) fn text_align(input: stylo::TextAlign) -> taffy::TextAlign { pub fn flex_basis(input: &stylo::FlexBasis) -> taffy::Dimension { // TODO: Support flex-basis: content in Taffy match input { - stylo::FlexBasis::Content => taffy::Dimension::Auto, + stylo::FlexBasis::Content => taffy::Dimension::AUTO, stylo::FlexBasis::Size(size) => dimension(size), } } @@ -386,6 +393,8 @@ pub fn track_repeat(input: stylo::RepeatCount) -> taffy::GridTrackRepetitio pub fn track_size( input: &stylo::TrackSize, ) -> taffy::NonRepeatedTrackSizingFunction { + use taffy::MaxTrackSizingFunction; + match input { stylo::TrackSize::Breadth(breadth) => taffy::MinMax { min: min_track(breadth), @@ -396,16 +405,18 @@ pub fn track_size( max: max_track(max), }, stylo::TrackSize::FitContent(limit) => taffy::MinMax { - min: taffy::MinTrackSizingFunction::Auto, - max: taffy::MaxTrackSizingFunction::FitContent(match limit { - stylo::TrackBreadth::Breadth(lp) => length_percentage(lp), + min: taffy::MinTrackSizingFunction::AUTO, + max: match limit { + stylo::TrackBreadth::Breadth(lp) => { + MaxTrackSizingFunction::fit_content(length_percentage(lp)) + } // Are these valid? Taffy doesn't support this in any case stylo::TrackBreadth::Fr(_) => unreachable!(), stylo::TrackBreadth::Auto => unreachable!(), stylo::TrackBreadth::MinContent => unreachable!(), stylo::TrackBreadth::MaxContent => unreachable!(), - }), + }, }, } } @@ -415,14 +426,15 @@ pub fn track_size( pub fn min_track( input: &stylo::TrackBreadth, ) -> taffy::MinTrackSizingFunction { + use taffy::prelude::*; match input { stylo::TrackBreadth::Breadth(lp) => { - taffy::MinTrackSizingFunction::Fixed(length_percentage(lp)) + taffy::MinTrackSizingFunction::from(length_percentage(lp)) } - stylo::TrackBreadth::Fr(_) => taffy::MinTrackSizingFunction::Auto, - stylo::TrackBreadth::Auto => taffy::MinTrackSizingFunction::Auto, - stylo::TrackBreadth::MinContent => taffy::MinTrackSizingFunction::MinContent, - stylo::TrackBreadth::MaxContent => taffy::MinTrackSizingFunction::MaxContent, + stylo::TrackBreadth::Fr(_) => taffy::MinTrackSizingFunction::AUTO, + stylo::TrackBreadth::Auto => taffy::MinTrackSizingFunction::AUTO, + stylo::TrackBreadth::MinContent => taffy::MinTrackSizingFunction::MIN_CONTENT, + stylo::TrackBreadth::MaxContent => taffy::MinTrackSizingFunction::MAX_CONTENT, } } @@ -431,14 +443,16 @@ pub fn min_track( pub fn max_track( input: &stylo::TrackBreadth, ) -> taffy::MaxTrackSizingFunction { + use taffy::prelude::*; + match input { stylo::TrackBreadth::Breadth(lp) => { - taffy::MaxTrackSizingFunction::Fixed(length_percentage(lp)) + taffy::MaxTrackSizingFunction::from(length_percentage(lp)) } - stylo::TrackBreadth::Fr(val) => taffy::MaxTrackSizingFunction::Fraction(*val), - stylo::TrackBreadth::Auto => taffy::MaxTrackSizingFunction::Auto, - stylo::TrackBreadth::MinContent => taffy::MaxTrackSizingFunction::MinContent, - stylo::TrackBreadth::MaxContent => taffy::MaxTrackSizingFunction::MaxContent, + stylo::TrackBreadth::Fr(val) => taffy::MaxTrackSizingFunction::from_fr(*val), + stylo::TrackBreadth::Auto => taffy::MaxTrackSizingFunction::AUTO, + stylo::TrackBreadth::MinContent => taffy::MaxTrackSizingFunction::MIN_CONTENT, + stylo::TrackBreadth::MaxContent => taffy::MaxTrackSizingFunction::MAX_CONTENT, } } @@ -493,10 +507,10 @@ pub fn to_taffy_style(style: &stylo::ComputedValues) -> taffy::Style { bottom: self::length_percentage(&padding.padding_bottom.0), }, border: taffy::Rect { - left: taffy::LengthPercentage::Length(border.border_left_width.to_f32_px()), - right: taffy::LengthPercentage::Length(border.border_right_width.to_f32_px()), - top: taffy::LengthPercentage::Length(border.border_top_width.to_f32_px()), - bottom: taffy::LengthPercentage::Length(border.border_bottom_width.to_f32_px()), + left: taffy::style_helpers::length(border.border_left_width.to_f32_px()), + right: taffy::style_helpers::length(border.border_right_width.to_f32_px()), + top: taffy::style_helpers::length(border.border_top_width.to_f32_px()), + bottom: taffy::style_helpers::length(border.border_bottom_width.to_f32_px()), }, // Gap diff --git a/packages/stylo_taffy/src/wrapper.rs b/packages/stylo_taffy/src/wrapper.rs index 9411a342..8ce1cd0e 100644 --- a/packages/stylo_taffy/src/wrapper.rs +++ b/packages/stylo_taffy/src/wrapper.rs @@ -1,6 +1,7 @@ use crate::convert; use std::ops::Deref; use style::properties::ComputedValues; +use taffy::prelude::FromLength; /// A wrapper struct for anything that Deref's to a [`stylo::ComputedValues`], which implements Taffy's layout traits /// and can used with Taffy's layout algorithms. @@ -125,10 +126,14 @@ impl> taffy::CoreStyle for TaffyStyloStyle fn border(&self) -> taffy::Rect { let border_styles = self.0.get_border(); taffy::Rect { - left: taffy::LengthPercentage::Length(border_styles.border_left_width.to_f32_px()), - right: taffy::LengthPercentage::Length(border_styles.border_right_width.to_f32_px()), - top: taffy::LengthPercentage::Length(border_styles.border_top_width.to_f32_px()), - bottom: taffy::LengthPercentage::Length(border_styles.border_bottom_width.to_f32_px()), + left: taffy::LengthPercentage::from_length(border_styles.border_left_width.to_f32_px()), + right: taffy::LengthPercentage::from_length( + border_styles.border_right_width.to_f32_px(), + ), + top: taffy::LengthPercentage::from_length(border_styles.border_top_width.to_f32_px()), + bottom: taffy::LengthPercentage::from_length( + border_styles.border_bottom_width.to_f32_px(), + ), } } }