layout: Add support for basic transform css properties (#35926)

Signed-off-by: Chocolate Pie <106949016+chocolate-pie@users.noreply.github.com>
Co-authored-by: Oriol Brufau <obrufau@igalia.com>
This commit is contained in:
chocolate-pie 2025-03-14 23:46:20 +09:00 committed by GitHub
parent 7f2f51b59d
commit 455f4202c6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
12 changed files with 57 additions and 63 deletions

View file

@ -24,9 +24,11 @@ use style::values::computed::image::Image as ComputedImageLayer;
use style::values::computed::{AlignItems, BorderStyle, Color, Inset, LengthPercentage, Margin};
use style::values::generics::box_::Perspective;
use style::values::generics::position::{GenericAspectRatio, PreferredRatio};
use style::values::generics::transform::{GenericRotate, GenericScale, GenericTranslate};
use style::values::specified::align::AlignFlags;
use style::values::specified::{Overflow, WillChangeBits, box_ as stylo};
use webrender_api as wr;
use webrender_api::units::LayoutTransform;
use crate::dom_traversal::Contents;
use crate::fragment_tree::FragmentFlags;
@ -501,6 +503,9 @@ impl ComputedValuesExt for ComputedValues {
fn has_transform_or_perspective(&self, fragment_flags: FragmentFlags) -> bool {
self.is_transformable(fragment_flags) &&
(!self.get_box().transform.0.is_empty() ||
self.get_box().scale != GenericScale::None ||
self.get_box().rotate != GenericRotate::None ||
self.get_box().translate != GenericTranslate::None ||
self.get_box().perspective != Perspective::None)
}
@ -1181,3 +1186,16 @@ impl Clamp for Au {
self.clamp_below_max(max).max(min)
}
}
pub(crate) trait TransformExt {
fn change_basis(&self, x: f32, y: f32, z: f32) -> Self;
}
impl TransformExt for LayoutTransform {
/// <https://drafts.csswg.org/css-transforms/#transformation-matrix-computation>
fn change_basis(&self, x: f32, y: f32, z: f32) -> Self {
let pre_translation = Self::translation(x, y, z);
let post_translation = Self::translation(-x, -y, -z);
post_translation.then(self).then(&pre_translation)
}
}