thebadking/obscura
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
8754da580425886d557fbe3496e6794c8833082c
obscura/crates/obscura-render/src/css.rs
T

6319 lines
226 KiB
Rust
Raw Blame History

//! Stylesheet cascade: parse `<style>` text into rules once, index each rule by
//! its subject key (id / class / tag), and resolve the matching declarations for
//! an element by testing only the handful of candidate rules that share a key.
//!
//! This replaces the naive "run every selector against the whole tree" approach,
//! which is O(rules x nodes) and dominated render time on large pages (thousands
//! of rules). The indexed cascade is closer to how real browsers match: bucket
//! rules, gather candidates per element, then match and sort by specificity.
use obscura_dom::selector::{CompiledSelector, Matcher, SelectorKey};
use obscura_dom::tree::{DomTree, NodeId};
use std::collections::HashMap;
use crate::LayoutStyle;
#[derive(Clone, Copy, Debug, Default, PartialEq, Eq, Hash)]
struct ContainerConditionId(u32);
impl ContainerConditionId {
const NONE: Self = Self(0);
}
#[derive(Clone, Debug, PartialEq)]
struct ContainerConditionNode {
parent: ContainerConditionId,
/// Comma-separated queries in one prelude are alternatives; parent-linked
/// nodes represent nested `@container` rules that must all match.
alternatives: Vec<ContainerQuery>,
}
#[derive(Clone, Debug, PartialEq)]
struct ContainerQuery {
name: Option<String>,
condition: Option<ContainerQueryExpr>,
}
#[derive(Clone, Debug, PartialEq)]
enum ContainerQueryExpr {
Feature(ContainerSizeFeature),
/// Syntactically valid future/general-enclosed syntax has Kleene
/// `unknown` truth. Retaining it prevents one unknown comma arm from
/// discarding supported alternatives in the same `@container` rule.
Unknown,
Not(Box<ContainerQueryExpr>),
And(Vec<ContainerQueryExpr>),
Or(Vec<ContainerQueryExpr>),
}
#[derive(Clone, Copy, Debug, PartialEq, Eq)]
enum ContainerQueryAxis {
Width,
Height,
InlineSize,
BlockSize,
}
#[derive(Clone, Copy, Debug, PartialEq, Eq)]
enum ContainerQueryComparison {
Min,
Max,
GreaterThan,
LessThan,
Equal,
}
#[derive(Clone, Copy, Debug, PartialEq)]
struct ContainerSizeFeature {
axis: ContainerQueryAxis,
comparison: ContainerQueryComparison,
length: ContainerQueryLength,
}
#[derive(Clone, Copy, Debug, PartialEq)]
enum ContainerQueryLength { Px(f32), Em(f32), Rem(f32) }
struct ParsedRule {
selector: String,
declarations: String,
container_condition_id: ContainerConditionId,
layer: Option<LayerOrder>,
}
struct Rule {
sel: CompiledSelector,
normal_decls: String,
important_decls: String,
/// Source order, for breaking specificity ties (later wins).
order: usize,
container_condition_id: ContainerConditionId,
layer: Option<LayerOrder>,
}
struct PseudoRule {
sel: CompiledSelector,
normal_decls: String,
important_decls: String,
order: usize,
container_condition_id: ContainerConditionId,
layer: Option<LayerOrder>,
}
/// A cascade layer's first-declaration position at each nesting level.
///
/// The terminal (direct declarations in a parent layer) is intentionally not
/// stored. [`compare_layer_order`] treats a shorter prefix as the implicit
/// final sub-layer, matching CSS Cascade 5: normal declarations directly in a
/// layer outrank its nested layers, and the order reverses for `!important`.
#[derive(Clone, Debug, PartialEq, Eq, Hash)]
struct LayerOrder(Vec<u32>);
/// Global author-layer name table for one `Stylesheet` parse. Layer ordering
/// spans all style sources in document order, so this registry must outlive
/// each individual `<style>`/linked stylesheet source.
#[derive(Default)]
struct LayerRegistry {
named: HashMap<(Vec<u32>, String), LayerOrder>,
next_child: HashMap<Vec<u32>, u32>,
}
impl LayerRegistry {
fn allocate(&mut self, parent: &[u32]) -> LayerOrder {
let next = self.next_child.entry(parent.to_vec()).or_default();
let order = *next;
*next = (*next).saturating_add(1);
let mut path = parent.to_vec();
path.push(order);
LayerOrder(path)
}
fn register_named(
&mut self,
parent: Option<&LayerOrder>,
qualified_name: &str,
) -> Option<LayerOrder> {
let mut path = parent.map_or_else(Vec::new, |layer| layer.0.clone());
for component in qualified_name.split('.') {
let component = component.trim();
if component.is_empty() {
return None;
}
let key = (path.clone(), component.to_string());
let layer = if let Some(layer) = self.named.get(&key) {
layer.clone()
} else {
let layer = self.allocate(&path);
self.named.insert(key, layer.clone());
layer
};
path = layer.0.clone();
}
Some(LayerOrder(path))
}
fn register_anonymous(&mut self, parent: Option<&LayerOrder>) -> LayerOrder {
self.allocate(parent.map(|layer| layer.0.as_slice()).unwrap_or_default())
}
fn register_statement(&mut self, parent: Option<&LayerOrder>, prelude: &str) {
for name in prelude.split(',') {
let _ = self.register_named(parent, name.trim());
}
}
}
/// Compare author layer precedence from weak to strong for normal declarations.
/// Unlayered declarations beat every layered declaration. Within layers, later
/// siblings win; declarations directly in a parent layer are its implicit last
/// sub-layer. `!important` uses the exact reverse order.
fn compare_layer_order(
left: Option<&LayerOrder>,
right: Option<&LayerOrder>,
) -> std::cmp::Ordering {
use std::cmp::Ordering;
match (left, right) {
(None, None) => Ordering::Equal,
(None, Some(_)) => Ordering::Greater,
(Some(_), None) => Ordering::Less,
(Some(left), Some(right)) => {
for (a, b) in left.0.iter().zip(&right.0) {
match a.cmp(b) {
Ordering::Equal => {}
ordering => return ordering,
}
}
match left.0.len().cmp(&right.0.len()) {
// A direct declaration in the containing layer is the
// implicit final sub-layer, not an early prefix.
Ordering::Less => Ordering::Greater,
Ordering::Greater => Ordering::Less,
Ordering::Equal => Ordering::Equal,
}
}
}
}
fn compare_rule_cascade(
left_layer: Option<&LayerOrder>,
left_specificity: u32,
left_order: usize,
right_layer: Option<&LayerOrder>,
right_specificity: u32,
right_order: usize,
important: bool,
) -> std::cmp::Ordering {
let layer = compare_layer_order(left_layer, right_layer);
let layer = if important { layer.reverse() } else { layer };
layer
.then(left_specificity.cmp(&right_specificity))
.then(left_order.cmp(&right_order))
}
const PROPERTY_REGISTRATION_SELECTOR_PREFIX: &str = "\0property:";
const KEYFRAMES_SELECTOR_PREFIX: &str = "\0keyframes:";
const WEBKIT_KEYFRAMES_SELECTOR_PREFIX: &str = "\0webkit-keyframes:";
#[derive(Clone, Debug, PartialEq, Eq)]
struct RegisteredCustomProperty {
syntax: String,
inherits: bool,
initial_value: Option<String>,
}
#[derive(Clone, Debug, PartialEq)]
struct KeyframeStop {
/// CSS keyframes always provide an offset. Keeping this optional makes the
/// normalization rule explicit and reusable by future script-created
/// keyframes without changing the sampler.
offset: Option<f32>,
declarations: String,
source_order: usize,
}
#[derive(Clone, Copy, Debug, PartialEq, Eq, Hash)]
enum AnimatedProperty {
Transform,
Translate,
Rotate,
Scale,
Width,
Height,
MinWidth,
MinHeight,
MaxWidth,
MaxHeight,
Top,
Right,
Bottom,
Left,
MarginTop,
MarginRight,
MarginBottom,
MarginLeft,
PaddingTop,
PaddingRight,
PaddingBottom,
PaddingLeft,
RowGap,
ColumnGap,
FlexBasis,
Opacity,
Color,
BackgroundColor,
BorderTopColor,
BorderRightColor,
BorderBottomColor,
BorderLeftColor,
BackgroundPosition,
Visibility,
}
#[derive(Clone, Debug, PartialEq, Eq)]
struct AnimatedDeclaration {
name: String,
value: String,
}
#[derive(Clone, Debug, PartialEq)]
struct PropertyTrackStop {
offset: f32,
source_order: usize,
declaration: AnimatedDeclaration,
}
#[derive(Clone, Debug, Default, PartialEq)]
struct Keyframes {
stops: Vec<KeyframeStop>,
tracks: HashMap<AnimatedProperty, Vec<PropertyTrackStop>>,
}
#[derive(Clone, Debug)]
pub(crate) struct ContainerBox {
pub(crate) container_type: crate::ContainerType,
/// Axes on which size containment actually applies to the generated box.
/// This can be `Normal` even when computed `container-type` is non-normal
/// (for example a non-atomic inline or an internal table box).
pub(crate) available_type: crate::ContainerType,
pub(crate) names: Vec<String>,
pub(crate) content_width: f32,
pub(crate) content_height: f32,
pub(crate) font_size: f32,
}
impl PartialEq for ContainerBox {
fn eq(&self, other: &Self) -> bool {
if self.container_type != other.container_type
|| self.available_type != other.available_type
|| self.names != other.names
{
return false;
}
match self.available_type {
crate::ContainerType::Normal => true,
crate::ContainerType::InlineSize => {
self.content_width == other.content_width
&& self.font_size == other.font_size
}
crate::ContainerType::Size => {
self.content_width == other.content_width
&& self.content_height == other.content_height
&& self.font_size == other.font_size
}
}
}
}
#[derive(Clone, Debug, Default, PartialEq)]
pub(crate) struct ContainerSnapshot {
pub(crate) boxes: HashMap<NodeId, ContainerBox>,
pub(crate) root_font_size: f32,
}
#[derive(Clone, Copy, Debug, PartialEq, Eq)]
enum ContainerQueryTruth {
True,
False,
Unknown,
}
impl ContainerQueryTruth {
fn and(self, other: Self) -> Self {
match (self, other) {
(Self::False, _) | (_, Self::False) => Self::False,
(Self::True, Self::True) => Self::True,
_ => Self::Unknown,
}
}
fn or(self, other: Self) -> Self {
match (self, other) {
(Self::True, _) | (_, Self::True) => Self::True,
(Self::False, Self::False) => Self::False,
_ => Self::Unknown,
}
}
fn not(self) -> Self {
match self {
Self::True => Self::False,
Self::False => Self::True,
Self::Unknown => Self::Unknown,
}
}
}
#[derive(Clone, Copy, Debug, PartialEq, Eq, Hash)]
enum ContainerQuerySubjectKind {
Element,
OriginatingPseudo,
}
#[derive(Clone, Copy, Debug, PartialEq, Eq, Hash)]
struct ContainerQueryCacheKey {
subject: NodeId,
condition: ContainerConditionId,
kind: ContainerQuerySubjectKind,
}
#[derive(Clone, Debug, PartialEq, Eq)]
struct ContainerQueryDecision {
truth: ContainerQueryTruth,
selected_containers: Vec<Option<NodeId>>,
}
#[derive(Clone, Debug, Default, PartialEq, Eq)]
pub(crate) struct ContainerDecisionSignature {
decisions: HashMap<ContainerQueryCacheKey, ContainerQueryDecision>,
}
#[derive(Clone, Copy, Debug, Default, PartialEq, Eq)]
pub(crate) struct ContainerQueryStats {
pub(crate) evaluations: usize,
pub(crate) cache_hits: usize,
pub(crate) ancestor_steps: usize,
}
pub(crate) struct ContainerQueryEvaluator<'a> {
tree: &'a DomTree,
snapshot: &'a ContainerSnapshot,
cache: HashMap<ContainerQueryCacheKey, ContainerQueryDecision>,
stats: ContainerQueryStats,
}
impl<'a> ContainerQueryEvaluator<'a> {
pub(crate) fn new(tree: &'a DomTree, snapshot: &'a ContainerSnapshot) -> Self {
Self {
tree,
snapshot,
cache: HashMap::new(),
stats: ContainerQueryStats::default(),
}
}
pub(crate) fn finish(self) -> (ContainerDecisionSignature, ContainerQueryStats) {
(
ContainerDecisionSignature {
decisions: self.cache,
},
self.stats,
)
}
fn condition_matches(
&mut self,
sheet: &Stylesheet,
subject: NodeId,
condition: ContainerConditionId,
kind: ContainerQuerySubjectKind,
) -> bool {
self.evaluate_condition_chain(sheet, subject, condition, kind).truth
== ContainerQueryTruth::True
}
fn evaluate_condition_chain(
&mut self,
sheet: &Stylesheet,
subject: NodeId,
condition: ContainerConditionId,
kind: ContainerQuerySubjectKind,
) -> ContainerQueryDecision {
if condition == ContainerConditionId::NONE {
return ContainerQueryDecision {
truth: ContainerQueryTruth::True,
selected_containers: Vec::new(),
};
}
let key = ContainerQueryCacheKey {
subject,
condition,
kind,
};
if let Some(decision) = self.cache.get(&key) {
self.stats.cache_hits += 1;
return decision.clone();
}
self.stats.evaluations += 1;
let node = &sheet.container_conditions[condition.0 as usize];
let mut own_truth = ContainerQueryTruth::False;
let mut selected_containers = Vec::with_capacity(node.alternatives.len());
for query in &node.alternatives {
let (truth, selected) = self.evaluate_query(subject, kind, query);
own_truth = own_truth.or(truth);
selected_containers.push(selected);
if own_truth == ContainerQueryTruth::True {
break;
}
}
if own_truth == ContainerQueryTruth::False {
let decision = ContainerQueryDecision {
truth: ContainerQueryTruth::False,
selected_containers,
};
self.cache.insert(key, decision.clone());
return decision;
}
let parent =
self.evaluate_condition_chain(sheet, subject, node.parent, kind);
selected_containers.extend(parent.selected_containers);
let decision = ContainerQueryDecision {
truth: own_truth.and(parent.truth),
selected_containers,
};
self.cache.insert(key, decision.clone());
decision
}
fn evaluate_query(
&mut self,
subject: NodeId,
kind: ContainerQuerySubjectKind,
query: &ContainerQuery,
) -> (ContainerQueryTruth, Option<NodeId>) {
let required_axes = query
.condition
.as_ref()
.map(container_query_required_axes)
.unwrap_or_default();
let mut candidate = match kind {
ContainerQuerySubjectKind::Element => {
self.tree.get_node(subject).and_then(|node| node.parent)
}
ContainerQuerySubjectKind::OriginatingPseudo => Some(subject),
};
while let Some(id) = candidate {
self.stats.ancestor_steps += 1;
let parent = self.tree.get_node(id).and_then(|node| node.parent);
if let Some(container) = self.snapshot.boxes.get(&id) {
let supports_axis = match container.container_type {
crate::ContainerType::Normal => {
!required_axes.inline && !required_axes.block
}
crate::ContainerType::InlineSize => !required_axes.block,
crate::ContainerType::Size => true,
};
let name_matches = query
.name
.as_ref()
.map_or(true, |name| container.names.iter().any(|item| item == name));
if supports_axis && name_matches {
let axis_available = match container.available_type {
crate::ContainerType::Normal => {
!required_axes.inline && !required_axes.block
}
crate::ContainerType::InlineSize => !required_axes.block,
crate::ContainerType::Size => true,
};
if !axis_available {
return (ContainerQueryTruth::Unknown, Some(id));
}
let truth =
query
.condition
.as_ref()
.map_or(ContainerQueryTruth::True, |condition| {
evaluate_container_query_expr(
condition,
container,
self.snapshot.root_font_size,
)
});
return (truth, Some(id));
}
}
candidate = parent;
}
(ContainerQueryTruth::False, None)
}
}
#[derive(Clone, Copy, Debug, Default, PartialEq, Eq)]
struct ContainerQueryRequiredAxes {
inline: bool,
block: bool,
}
fn container_query_required_axes(expr: &ContainerQueryExpr) -> ContainerQueryRequiredAxes {
match expr {
ContainerQueryExpr::Feature(feature) => match feature.axis {
ContainerQueryAxis::Width | ContainerQueryAxis::InlineSize => {
ContainerQueryRequiredAxes {
inline: true,
block: false,
}
}
ContainerQueryAxis::Height | ContainerQueryAxis::BlockSize => {
ContainerQueryRequiredAxes {
inline: false,
block: true,
}
}
},
ContainerQueryExpr::Unknown => ContainerQueryRequiredAxes::default(),
ContainerQueryExpr::Not(inner) => container_query_required_axes(inner),
ContainerQueryExpr::And(items) | ContainerQueryExpr::Or(items) => {
items.iter().fold(
ContainerQueryRequiredAxes::default(),
|mut axes, item| {
let item = container_query_required_axes(item);
axes.inline |= item.inline;
axes.block |= item.block;
axes
},
)
}
}
}
fn evaluate_container_query_expr(
expr: &ContainerQueryExpr,
container: &ContainerBox,
root_font_size: f32,
) -> ContainerQueryTruth {
match expr {
ContainerQueryExpr::Feature(feature) => {
let actual = match feature.axis {
ContainerQueryAxis::Width | ContainerQueryAxis::InlineSize => {
container.content_width
}
ContainerQueryAxis::Height | ContainerQueryAxis::BlockSize => {
container.content_height
}
};
let threshold = match feature.length {
ContainerQueryLength::Px(value) => value,
ContainerQueryLength::Em(value) => value * container.font_size,
ContainerQueryLength::Rem(value) => value * root_font_size,
};
if !actual.is_finite() || !threshold.is_finite() {
return ContainerQueryTruth::Unknown;
}
let matches = match feature.comparison {
ContainerQueryComparison::Min => actual >= threshold,
ContainerQueryComparison::Max => actual <= threshold,
ContainerQueryComparison::GreaterThan => actual > threshold,
ContainerQueryComparison::LessThan => actual < threshold,
ContainerQueryComparison::Equal => actual == threshold,
};
if matches {
ContainerQueryTruth::True
} else {
ContainerQueryTruth::False
}
}
ContainerQueryExpr::Unknown => ContainerQueryTruth::Unknown,
ContainerQueryExpr::Not(inner) => {
evaluate_container_query_expr(inner, container, root_font_size).not()
}
ContainerQueryExpr::And(items) => {
let mut truth = ContainerQueryTruth::True;
for item in items {
truth = truth.and(evaluate_container_query_expr(
item,
container,
root_font_size,
));
if truth == ContainerQueryTruth::False {
break;
}
}
truth
}
ContainerQueryExpr::Or(items) => {
let mut truth = ContainerQueryTruth::False;
for item in items {
truth = truth.or(evaluate_container_query_expr(
item,
container,
root_font_size,
));
if truth == ContainerQueryTruth::True {
break;
}
}
truth
}
}
}
/// An indexed set of author rules ready for fast per-element matching.
pub struct Stylesheet {
rules: Vec<Rule>,
registered_custom_properties: HashMap<String, RegisteredCustomProperty>,
/// Index zero is the unconditional sentinel.
container_conditions: Vec<ContainerConditionNode>,
/// Every offset from each `@keyframes` rule. The opacity sampler resolves
/// property-specific segments at the stylesheet's explicit sample time.
keyframes: HashMap<String, Keyframes>,
animation_sample_time: crate::AnimationSampleTime,
by_id: HashMap<String, Vec<usize>>,
by_class: HashMap<String, Vec<usize>>,
by_local: HashMap<String, Vec<usize>>,
universal: Vec<usize>,
/// `sel::before` / `sel::after` rules matched against their ordinary base
/// selector. Keeping their full declaration cascade supports both literal
/// generated text and positioned decorative boxes.
before_rules: Vec<PseudoRule>,
after_rules: Vec<PseudoRule>,
}
impl Stylesheet {
/// Until Stage B supplies completed container geometry, preserved
/// conditional rules remain inactive rather than using viewport geometry.
fn container_condition_is_active(
&self,
id: ContainerConditionId,
subject: NodeId,
kind: ContainerQuerySubjectKind,
evaluator: &mut Option<&mut ContainerQueryEvaluator<'_>>,
) -> bool {
debug_assert!((id.0 as usize) < self.container_conditions.len());
if id == ContainerConditionId::NONE {
return true;
}
evaluator.as_deref_mut().is_some_and(|evaluator| {
evaluator.condition_matches(self, subject, id, kind)
})
}
pub(crate) fn has_container_queries(&self) -> bool {
self.rules
.iter()
.any(|rule| rule.container_condition_id != ContainerConditionId::NONE)
|| self
.before_rules
.iter()
.chain(&self.after_rules)
.any(|rule| rule.container_condition_id != ContainerConditionId::NONE)
}
pub(crate) fn container_condition_depth(&self) -> usize {
self.container_conditions
.iter()
.skip(1)
.map(|node| {
let mut depth = 1usize;
let mut parent = node.parent;
while parent != ContainerConditionId::NONE {
depth += 1;
parent = self.container_conditions[parent.0 as usize].parent;
}
depth
})
.max()
.unwrap_or(0)
}
/// Parse and index a set of raw CSS sources (the text of each `<style>`
/// block, in document order). Selectors that fail to parse are dropped.
pub fn parse(tree: &DomTree, sources: &[String]) -> Self {
Self::parse_for_viewport(tree, sources, (1280.0, 720.0))
}
/// Parse author CSS for the live CSS viewport. Media queries must use the
/// same dimensions as layout and page JavaScript; filtering them against a
/// fixed desktop width made responsive frameworks build one DOM while the
/// renderer applied another breakpoint.
pub fn parse_for_viewport(
tree: &DomTree,
sources: &[String],
viewport: (f32, f32),
) -> Self {
Self::parse_for_viewport_at_animation_time(
tree,
sources,
viewport,
crate::AnimationSampleTime::default(),
)
}
pub fn parse_for_viewport_at_animation_time(
tree: &DomTree,
sources: &[String],
viewport: (f32, f32),
animation_sample_time: crate::AnimationSampleTime,
) -> Self {
let mut sheet = Stylesheet {
rules: Vec::new(),
registered_custom_properties: HashMap::new(),
container_conditions: vec![ContainerConditionNode {
parent: ContainerConditionId::NONE,
alternatives: Vec::new(),
}],
keyframes: HashMap::new(),
animation_sample_time,
by_id: HashMap::new(),
by_class: HashMap::new(),
by_local: HashMap::new(),
universal: Vec::new(),
before_rules: Vec::new(),
after_rules: Vec::new(),
};
let mut order = 0usize;
let mut layers = LayerRegistry::default();
let mut keyframe_winners =
HashMap::<String, (Option<LayerOrder>, bool, usize)>::new();
for src in sources {
let parsed = parse_stylesheet_for_viewport_preserving_containers_in_layer(
src,
viewport,
&mut sheet.container_conditions,
ContainerConditionId::NONE,
&mut layers,
None,
);
for ParsedRule {
selector,
declarations: decls,
container_condition_id,
layer,
} in parsed
{
let keyframe = selector
.strip_prefix(KEYFRAMES_SELECTOR_PREFIX)
.map(|name| (name, false))
.or_else(|| {
selector
.strip_prefix(WEBKIT_KEYFRAMES_SELECTOR_PREFIX)
.map(|name| (name, true))
});
if let Some((name, prefixed)) = keyframe {
let replaces = keyframe_winners.get(name).is_none_or(
|(winning_layer, winning_prefixed, winning_order)| {
compare_layer_order(layer.as_ref(), winning_layer.as_ref())
.then_with(|| match (*winning_prefixed, prefixed) {
(true, false) => std::cmp::Ordering::Greater,
(false, true) => std::cmp::Ordering::Less,
_ => order.cmp(winning_order),
})
.is_gt()
},
);
if replaces {
let keyframes = compile_keyframe_body(&decls);
sheet.keyframes.insert(name.to_string(), keyframes);
keyframe_winners.insert(
name.to_string(),
(layer.clone(), prefixed, order),
);
}
order += 1;
continue;
}
if let Some(name) = selector.strip_prefix(PROPERTY_REGISTRATION_SELECTOR_PREFIX) {
if let Some(registration) = parse_property_registration(&decls) {
sheet
.registered_custom_properties
.insert(name.to_string(), registration);
}
continue;
}
let sel_trim = selector.trim();
if let Some(base) = strip_pseudo_element(sel_trim, "before") {
if let Some(sel) = tree.compile_rule_selector(base) {
let (normal_decls, important_decls) =
crate::style::partition_declarations(&decls);
sheet.before_rules.push(PseudoRule {
sel,
normal_decls,
important_decls,
order,
container_condition_id,
layer,
});
}
order += 1;
continue;
}
if let Some(base) = strip_pseudo_element(sel_trim, "after") {
if let Some(sel) = tree.compile_rule_selector(base) {
let (normal_decls, important_decls) =
crate::style::partition_declarations(&decls);
sheet.after_rules.push(PseudoRule {
sel,
normal_decls,
important_decls,
order,
container_condition_id,
layer,
});
}
order += 1;
continue;
}
let Some(sel) = tree.compile_rule_selector(&selector) else { continue };
let (normal_decls, important_decls) = crate::style::partition_declarations(&decls);
let idx = sheet.rules.len();
match sel.key() {
SelectorKey::Id(v) => sheet.by_id.entry(v.clone()).or_default().push(idx),
SelectorKey::Class(v) => sheet.by_class.entry(v.clone()).or_default().push(idx),
SelectorKey::Local(v) => sheet.by_local.entry(v.clone()).or_default().push(idx),
SelectorKey::Universal => sheet.universal.push(idx),
}
sheet.rules.push(Rule {
sel,
normal_decls,
important_decls,
order,
container_condition_id,
layer,
});
order += 1;
}
}
sheet
}
pub fn pseudo_styles(
&self,
tree: &DomTree,
matcher: &mut Matcher,
nid: NodeId,
props: &HashMap<String, String>,
host_style: &LayoutStyle,
) -> (Option<LayoutStyle>, Option<LayoutStyle>) {
self.pseudo_styles_internal(
tree,
matcher,
nid,
props,
host_style,
None,
)
}
pub(crate) fn pseudo_styles_with_container_queries(
&self,
tree: &DomTree,
matcher: &mut Matcher,
nid: NodeId,
props: &HashMap<String, String>,
host_style: &LayoutStyle,
evaluator: &mut ContainerQueryEvaluator<'_>,
) -> (Option<LayoutStyle>, Option<LayoutStyle>) {
self.pseudo_styles_internal(
tree,
matcher,
nid,
props,
host_style,
Some(evaluator),
)
}
fn pseudo_styles_internal(
&self,
tree: &DomTree,
matcher: &mut Matcher,
nid: NodeId,
props: &HashMap<String, String>,
host_style: &LayoutStyle,
mut evaluator: Option<&mut ContainerQueryEvaluator<'_>>,
) -> (Option<LayoutStyle>, Option<LayoutStyle>) {
let mut build = |rules: &[PseudoRule], matcher: &mut Matcher| {
let mut matched: Vec<(u32, usize, &PseudoRule)> = Vec::new();
for rule in rules {
// Container lookup is an ancestor walk. Keep it behind the
// selector match so unrelated pseudo rules remain cheap.
if matcher.matches(tree, nid, &rule.sel)
&& self.container_condition_is_active(
rule.container_condition_id,
nid,
ContainerQuerySubjectKind::OriginatingPseudo,
&mut evaluator,
)
{
matched.push((rule.sel.specificity(), rule.order, rule));
}
}
if matched.is_empty() {
return None;
}
let mut normal_matched = matched.clone();
normal_matched.sort_unstable_by(|a, b| {
compare_rule_cascade(
a.2.layer.as_ref(),
a.0,
a.1,
b.2.layer.as_ref(),
b.0,
b.1,
false,
)
});
let mut important_matched = matched;
important_matched.sort_unstable_by(|a, b| {
compare_rule_cascade(
a.2.layer.as_ref(),
a.0,
a.1,
b.2.layer.as_ref(),
b.0,
b.1,
true,
)
});
// Generated ::before/::after boxes have an inline outer display
// by default. LayoutStyle's general default is block because it
// primarily represents ordinary DOM boxes, so set the pseudo
// initial value explicitly before applying author declarations.
let mut style = LayoutStyle {
display: crate::Display::Inline,
..Default::default()
};
style.color_scheme_dark = host_style.color_scheme_dark;
let inherited_color_scheme_dark = host_style.color_scheme_dark;
let mut generated_content = None;
for &(_, _, rule) in &normal_matched {
let expanded = substitute_declarations(&rule.normal_decls, props);
crate::style::apply_color_scheme_declarations_from(
&mut style,
&expanded,
inherited_color_scheme_dark,
);
}
for &(_, _, rule) in &important_matched {
let expanded = substitute_declarations(&rule.important_decls, props);
crate::style::apply_color_scheme_declarations_from(
&mut style,
&expanded,
inherited_color_scheme_dark,
);
}
for &(_, _, rule) in &normal_matched {
let expanded = substitute_declarations(&rule.normal_decls, props);
crate::style::apply_declarations_with_locked_color_scheme(
&mut style,
&expanded,
);
if let Some(value) = extract_content(&expanded, tree, nid) {
generated_content = value;
}
}
for &(_, _, rule) in &important_matched {
let expanded = substitute_declarations(&rule.important_decls, props);
crate::style::apply_declarations_with_locked_color_scheme(
&mut style,
&expanded,
);
if let Some(value) = extract_content(&expanded, tree, nid) {
generated_content = value;
}
}
style.before_content = generated_content
.as_ref()
.map(|items| generated_content_with_zero_counters(items));
style.generated_content = generated_content;
if style.generated_content.is_some() || style.content_image.is_some() {
Some(style)
} else {
None
}
};
(
build(&self.before_rules, matcher),
build(&self.after_rules, matcher),
)
}
pub fn is_empty(&self) -> bool {
self.rules.is_empty()
}
#[doc(hidden)]
pub fn debug_stats(&self) -> (usize, usize, usize, usize, usize) {
(self.rules.len(), self.by_id.len(), self.by_class.len(), self.by_local.len(), self.universal.len())
}
/// Apply every author rule that matches `nid` to `style`, in cascade order
/// (ascending specificity, then source order, so the winner is applied last).
/// `id`, `classes`, and `local` are the element's precomputed keys.
/// `parent_props` is the element's inherited custom-property map. Returns
/// `Some(map)` (parent + this element's own `--x` declarations) when this
/// element declares any custom properties, so the caller can thread the
/// richer map to descendants; `None` means "reuse the parent's map".
pub fn apply(
&self,
tree: &DomTree,
matcher: &mut Matcher,
nid: NodeId,
id: Option<&str>,
classes: &[String],
local: &str,
style: &mut LayoutStyle,
parent_props: &HashMap<String, String>,
inline_css: Option<&str>,
) -> Option<HashMap<String, String>> {
self.apply_internal(
tree,
matcher,
nid,
id,
classes,
local,
style,
parent_props,
inline_css,
None,
)
}
pub(crate) fn apply_with_container_queries(
&self,
tree: &DomTree,
matcher: &mut Matcher,
nid: NodeId,
id: Option<&str>,
classes: &[String],
local: &str,
style: &mut LayoutStyle,
parent_props: &HashMap<String, String>,
inline_css: Option<&str>,
evaluator: &mut ContainerQueryEvaluator<'_>,
) -> Option<HashMap<String, String>> {
self.apply_internal(
tree,
matcher,
nid,
id,
classes,
local,
style,
parent_props,
inline_css,
Some(evaluator),
)
}
fn apply_internal(
&self,
tree: &DomTree,
matcher: &mut Matcher,
nid: NodeId,
id: Option<&str>,
classes: &[String],
local: &str,
style: &mut LayoutStyle,
parent_props: &HashMap<String, String>,
inline_css: Option<&str>,
mut evaluator: Option<&mut ContainerQueryEvaluator<'_>>,
) -> Option<HashMap<String, String>> {
// (specificity, order, rule index) for each matching rule.
let mut matched: Vec<(u32, usize, usize)> = Vec::new();
let mut consider = |bucket: Option<&Vec<usize>>, matched: &mut Vec<(u32, usize, usize)>| {
if let Some(idxs) = bucket {
for &i in idxs {
let rule = &self.rules[i];
// Container lookup is an ancestor walk. Keep it behind
// selector matching and cache the result per condition.
if matcher.matches(tree, nid, &rule.sel)
&& self.container_condition_is_active(
rule.container_condition_id,
nid,
ContainerQuerySubjectKind::Element,
&mut evaluator,
)
{
matched.push((rule.sel.specificity(), rule.order, i));
}
}
}
};
consider(self.by_local.get(local), &mut matched);
if let Some(id) = id {
consider(self.by_id.get(id), &mut matched);
}
for c in classes {
consider(self.by_class.get(c), &mut matched);
}
if !self.universal.is_empty() {
consider(Some(&self.universal), &mut matched);
}
let mut normal_matched = matched.clone();
normal_matched.sort_unstable_by(|a, b| {
let left = &self.rules[a.2];
let right = &self.rules[b.2];
compare_rule_cascade(
left.layer.as_ref(),
a.0,
a.1,
right.layer.as_ref(),
b.0,
b.1,
false,
)
});
let mut important_matched = matched;
important_matched.sort_unstable_by(|a, b| {
let left = &self.rules[a.2];
let right = &self.rules[b.2];
compare_rule_cascade(
left.layer.as_ref(),
a.0,
a.1,
right.layer.as_ref(),
b.0,
b.1,
true,
)
});
let (inline_normal, inline_important) = inline_css
.map(crate::style::partition_declarations)
.unwrap_or_default();
// Pass 1: collect this element's own custom properties (`--x: value`),
// in cascade order (last wins), layered over the inherited map. Custom
// properties cascade fully before any `var()` is substituted.
let mut own: Vec<(String, String)> = Vec::new();
let mut collect_custom = |css: &str| {
for decl in crate::style::split_declarations(css) {
if let Some((name, val)) = decl.split_once(':') {
let name = name.trim();
if name.starts_with("--") && name.len() > 2 {
own.push((name.to_string(), val.trim().to_string()));
}
}
}
};
for &(_, _, i) in &normal_matched {
collect_custom(&self.rules[i].normal_decls);
}
collect_custom(&inline_normal);
for &(_, _, i) in &important_matched {
collect_custom(&self.rules[i].important_decls);
}
collect_custom(&inline_important);
let mut resolved_props = parent_props.clone();
for (name, registration) in &self.registered_custom_properties {
if registration.inherits && resolved_props.contains_key(name) {
continue;
}
if let Some(initial) = &registration.initial_value {
resolved_props.insert(name.clone(), initial.clone());
} else {
resolved_props.remove(name);
}
}
let registration_changed_props = resolved_props != *parent_props;
let has_own = !own.is_empty();
let mut own_names = std::collections::HashSet::new();
for (k, v) in own {
own_names.insert(k.clone());
let registration = self.registered_custom_properties.get(&k);
let set_initial = |props: &mut HashMap<String, String>| {
if let Some(initial) = registration.and_then(|entry| entry.initial_value.as_ref()) {
props.insert(k.clone(), initial.clone());
} else {
props.remove(&k);
}
};
let inherit = |props: &mut HashMap<String, String>| {
if let Some(inherited) = parent_props.get(&k) {
props.insert(k.clone(), inherited.clone());
} else if let Some(initial) =
registration.and_then(|entry| entry.initial_value.as_ref())
{
props.insert(k.clone(), initial.clone());
} else {
props.remove(&k);
}
};
match v.trim().to_ascii_lowercase().as_str() {
"initial" => set_initial(&mut resolved_props),
"inherit" => inherit(&mut resolved_props),
"unset" | "revert" | "revert-layer"
if registration.is_some_and(|entry| !entry.inherits) =>
{
set_initial(&mut resolved_props);
}
"unset" | "revert" | "revert-layer" => inherit(&mut resolved_props),
_ => {
let valid = registration.is_none_or(|entry| {
substitute_var_value(&v, &resolved_props, 0)
.is_some_and(|value| registered_value_matches(entry, &value))
});
if valid {
resolved_props.insert(k, v);
} else {
set_initial(&mut resolved_props);
}
}
}
}
// Custom properties inherit their computed value, not their original
// token stream. Resolve only declarations won on this element against
// the complete same-element environment (so forward references work),
// then pass those substituted values to descendants. Re-resolving an
// inherited `--b:var(--a)` after a child overrides `--a` is observably
// wrong: browsers keep the parent's already-computed `--b`.
let resolution_environment = resolved_props.clone();
for name in own_names {
let Some(value) = resolution_environment.get(&name) else {
continue;
};
if let Some(computed) = substitute_var_value(value, &resolution_environment, 0) {
resolved_props.insert(name, computed);
} else if let Some(initial) = self
.registered_custom_properties
.get(&name)
.and_then(|entry| entry.initial_value.clone())
{
resolved_props.insert(name, initial);
} else {
resolved_props.remove(&name);
}
}
let effective = if has_own || registration_changed_props {
Some(resolved_props)
} else {
None
};
let props = effective.as_ref().unwrap_or(parent_props);
let inherited_color_scheme_dark = style.color_scheme_dark;
// `light-dark()` resolves against the element's final used color
// scheme, not the declaration order. Determine the scheme winner
// across the complete author cascade before applying any color-valued
// property. The style starts with its inherited scheme.
for &(_, _, i) in &normal_matched {
let expanded =
substitute_declarations(&self.rules[i].normal_decls, props);
crate::style::apply_color_scheme_declarations_from(
style,
&expanded,
inherited_color_scheme_dark,
);
}
let expanded = substitute_declarations(&inline_normal, props);
crate::style::apply_color_scheme_declarations_from(
style,
&expanded,
inherited_color_scheme_dark,
);
for &(_, _, i) in &important_matched {
let expanded =
substitute_declarations(&self.rules[i].important_decls, props);
crate::style::apply_color_scheme_declarations_from(
style,
&expanded,
inherited_color_scheme_dark,
);
}
let expanded = substitute_declarations(&inline_important, props);
crate::style::apply_color_scheme_declarations_from(
style,
&expanded,
inherited_color_scheme_dark,
);
// Pass 2: apply normal declarations with `var()` substituted against
// the resolved custom-property map.
for &(_, _, i) in &normal_matched {
let expanded = substitute_declarations(&self.rules[i].normal_decls, props);
crate::style::apply_declarations_with_locked_color_scheme(
style,
&expanded,
);
}
let expanded = substitute_declarations(&inline_normal, props);
crate::style::apply_declarations_with_locked_color_scheme(style, &expanded);
// Animation control properties from author !important participate in
// computed timing, while the animated value itself remains below the
// important author origin. Resolve those controls on a temporary style
// before sampling, then let the ordinary important pass override the
// sampled values where appropriate.
let mut animation_style = style.clone();
for &(_, _, i) in &important_matched {
let expanded = substitute_declarations(&self.rules[i].important_decls, props);
crate::style::apply_animation_declarations(&mut animation_style, &expanded);
}
let expanded = substitute_declarations(&inline_important, props);
crate::style::apply_animation_declarations(&mut animation_style, &expanded);
if let Some(name) = animation_style.animation_name.as_deref() {
if let Some(keyframes) = self.keyframes.get(name) {
sample_animation_properties(
keyframes,
style,
&animation_style.animation_timing,
self.animation_sample_time,
props,
);
}
}
for &(_, _, i) in &important_matched {
let expanded = substitute_declarations(&self.rules[i].important_decls, props);
crate::style::apply_declarations_with_locked_color_scheme(
style,
&expanded,
);
}
let expanded = substitute_declarations(&inline_important, props);
crate::style::apply_declarations_with_locked_color_scheme(style, &expanded);
effective
}
}
/// Compile a keyframes body into sparse per-property tracks. Values remain in
/// specified form because `var()` and color-scheme resolution are element
/// dependent, but declaration splitting, shorthand-to-longhand membership,
/// offset distribution, and duplicate-offset ordering are all paid once.
fn compile_keyframe_body(css: &str) -> Keyframes {
let mut stops = Vec::new();
for (source_order, (selector, declarations)) in
parse_stylesheet_for_viewport(css, (1280.0, 720.0))
.into_iter()
.enumerate()
{
for part in selector.split(',') {
if let Some(offset) = parse_keyframe_offset(part) {
stops.push(KeyframeStop {
offset: Some(offset),
declarations: declarations.clone(),
source_order,
});
}
}
}
if stops.is_empty() {
return Keyframes::default();
}
let mut tracks = HashMap::<AnimatedProperty, Vec<PropertyTrackStop>>::new();
for (offset, stop) in normalized_keyframe_offsets(&stops) {
// CSS Animations ignores important declarations in keyframes.
let (normal, _) = crate::style::partition_declarations(&stop.declarations);
let mut declarations = HashMap::<AnimatedProperty, AnimatedDeclaration>::new();
for raw in crate::style::split_declarations(&normal) {
let Some((name, value)) = raw.trim().split_once(':') else { continue };
let name = name.trim().to_ascii_lowercase();
let value = value.trim();
if value.is_empty()
|| (!value.contains("var(")
&& !supports_animation_declaration(&name, value))
{
continue;
}
let declaration = AnimatedDeclaration {
name: name.clone(),
value: value.to_string(),
};
for property in animated_properties_for_declaration(&name) {
declarations.insert(property, declaration.clone());
}
}
for (property, declaration) in declarations {
tracks.entry(property).or_default().push(PropertyTrackStop {
offset,
source_order: stop.source_order,
declaration,
});
}
}
for track in tracks.values_mut() {
track.sort_by(|left, right| {
left.offset
.total_cmp(&right.offset)
.then(left.source_order.cmp(&right.source_order))
});
let mut merged = Vec::<PropertyTrackStop>::with_capacity(track.len());
for stop in track.drain(..) {
if merged.last().is_some_and(|last| last.offset == stop.offset) {
*merged.last_mut().unwrap() = stop;
} else {
merged.push(stop);
}
}
*track = merged;
}
Keyframes { stops, tracks }
}
fn supports_animation_declaration(name: &str, value: &str) -> bool {
crate::style::supports_declaration(name, value)
|| (name == "background" && crate::style::parse_color(value).is_some())
}
#[cfg(test)]
fn extract_keyframes(css: &str) -> Vec<(String, Keyframes)> {
let mut conditions = vec![ContainerConditionNode {
parent: ContainerConditionId::NONE,
alternatives: Vec::new(),
}];
let parsed = parse_stylesheet_for_viewport_preserving_containers(
css,
(1280.0, 720.0),
&mut conditions,
ContainerConditionId::NONE,
);
parsed
.into_iter()
.filter_map(|rule| {
let name = rule
.selector
.strip_prefix(KEYFRAMES_SELECTOR_PREFIX)
.or_else(|| rule.selector.strip_prefix(WEBKIT_KEYFRAMES_SELECTOR_PREFIX))?;
Some((name.to_string(), compile_keyframe_body(&rule.declarations)))
})
.collect()
}
fn animated_properties_for_declaration(name: &str) -> Vec<AnimatedProperty> {
use AnimatedProperty::*;
match name {
"transform" => vec![Transform],
"translate" => vec![Translate],
"rotate" => vec![Rotate],
"scale" => vec![Scale],
"width" => vec![Width],
"height" => vec![Height],
"min-width" => vec![MinWidth],
"min-height" => vec![MinHeight],
"max-width" => vec![MaxWidth],
"max-height" => vec![MaxHeight],
"top" | "inset-block-start" => vec![Top],
"right" | "inset-inline-end" => vec![Right],
"bottom" | "inset-block-end" => vec![Bottom],
"left" | "inset-inline-start" => vec![Left],
"inset" => vec![Top, Right, Bottom, Left],
"inset-inline" => vec![Left, Right],
"inset-block" => vec![Top, Bottom],
"margin" => vec![MarginTop, MarginRight, MarginBottom, MarginLeft],
"margin-top" | "margin-block-start" => vec![MarginTop],
"margin-right" | "margin-inline-end" => vec![MarginRight],
"margin-bottom" | "margin-block-end" => vec![MarginBottom],
"margin-left" | "margin-inline-start" => vec![MarginLeft],
"margin-inline" => vec![MarginLeft, MarginRight],
"margin-block" => vec![MarginTop, MarginBottom],
"padding" => vec![PaddingTop, PaddingRight, PaddingBottom, PaddingLeft],
"padding-top" | "padding-block-start" => vec![PaddingTop],
"padding-right" | "padding-inline-end" => vec![PaddingRight],
"padding-bottom" | "padding-block-end" => vec![PaddingBottom],
"padding-left" | "padding-inline-start" => vec![PaddingLeft],
"padding-inline" => vec![PaddingLeft, PaddingRight],
"padding-block" => vec![PaddingTop, PaddingBottom],
"gap" | "grid-gap" => vec![RowGap, ColumnGap],
"row-gap" | "grid-row-gap" => vec![RowGap],
"column-gap" | "grid-column-gap" | "-webkit-column-gap" => vec![ColumnGap],
"flex-basis" => vec![FlexBasis],
"opacity" => vec![Opacity],
"color" | "-webkit-text-fill-color" => vec![Color],
"background-color" => vec![BackgroundColor],
"background" => vec![BackgroundColor, BackgroundPosition],
"border-color" => vec![
BorderTopColor,
BorderRightColor,
BorderBottomColor,
BorderLeftColor,
],
"border" => vec![
BorderTopColor,
BorderRightColor,
BorderBottomColor,
BorderLeftColor,
],
"border-top" | "border-top-color" => vec![BorderTopColor],
"border-right" | "border-right-color" => vec![BorderRightColor],
"border-bottom" | "border-bottom-color" => vec![BorderBottomColor],
"border-left" | "border-left-color" => vec![BorderLeftColor],
"background-position" => vec![BackgroundPosition],
"visibility" => vec![Visibility],
_ => Vec::new(),
}
}
fn parse_keyframe_offset(value: &str) -> Option<f32> {
let value = value.trim().to_ascii_lowercase();
match value.as_str() {
"from" => Some(0.0),
"to" => Some(1.0),
_ => value
.strip_suffix('%')?
.trim()
.parse::<f32>()
.ok()
.filter(|offset| offset.is_finite() && (0.0..=100.0).contains(offset))
.map(|offset| offset / 100.0),
}
}
#[derive(Clone, Copy, PartialEq, Eq)]
enum AnimationPhase {
Before,
Active,
After,
}
#[derive(Clone, Debug)]
enum AnimatedLength {
Auto,
Dimension(crate::Dimension),
Expression(String),
}
#[derive(Clone, Debug)]
enum AnimationValue {
Length(AnimatedLength),
Number(f32),
Color([u8; 4]),
Transform(Vec<crate::TransformOp>),
Translate(crate::TransformLength, crate::TransformLength),
Rotate(f32),
Scale(f32, f32),
BackgroundPosition(crate::BackgroundPosition),
Visibility(bool),
}
fn sample_animation_properties(
keyframes: &Keyframes,
style: &mut LayoutStyle,
timing: &crate::AnimationTiming,
sample_time: crate::AnimationSampleTime,
props: &HashMap<String, String>,
) {
let Some(progress) = animation_directed_progress(timing, sample_time) else {
return;
};
// Keep the base style immutable while resolving every property. Otherwise
// one sampled property could accidentally become another track's implicit
// endpoint, which is not how the animation cascade origin is defined.
let underlying = style.clone();
for (&property, track) in &keyframes.tracks {
if let Some(value) = sample_property_track(property, track, &underlying, progress, props) {
apply_animation_value(style, property, value);
}
}
}
fn sample_property_track(
property: AnimatedProperty,
track: &[PropertyTrackStop],
underlying: &LayoutStyle,
progress: f32,
props: &HashMap<String, String>,
) -> Option<AnimationValue> {
let underlying_value = animation_value_from_style(property, underlying)?;
let mut resolved = Vec::<(f32, AnimationValue)>::with_capacity(track.len() + 2);
for stop in track {
let Some(value) = substitute_var_value(&stop.declaration.value, props, 0) else {
continue;
};
if !supports_animation_declaration(&stop.declaration.name, &value) {
continue;
}
let mut endpoint = underlying.clone();
crate::style::apply_animation_property_value(
&mut endpoint,
&stop.declaration.name,
&value,
);
if let Some(value) = animation_value_from_style(property, &endpoint) {
resolved.push((stop.offset, value));
}
}
if resolved.is_empty() {
return None;
}
if resolved.first().is_none_or(|stop| stop.0 > 0.0) {
resolved.insert(0, (0.0, underlying_value.clone()));
}
if resolved.last().is_none_or(|stop| stop.0 < 1.0) {
resolved.push((1.0, underlying_value));
}
if progress <= resolved[0].0 {
return Some(resolved.remove(0).1);
}
for pair in resolved.windows(2) {
let (from_offset, from_value) = (&pair[0].0, &pair[0].1);
let (to_offset, to_value) = (&pair[1].0, &pair[1].1);
if progress <= *to_offset {
if progress == *to_offset || to_offset == from_offset {
return Some(to_value.clone());
}
let position = (progress - *from_offset) / (*to_offset - *from_offset);
return Some(interpolate_animation_value(from_value, to_value, position));
}
}
resolved.last().map(|stop| stop.1.clone())
}
fn animation_value_from_style(
property: AnimatedProperty,
style: &LayoutStyle,
) -> Option<AnimationValue> {
use AnimatedProperty::*;
match property {
Transform => Some(AnimationValue::Transform(style.transform_ops.clone())),
Translate => {
let (x, y) = style.individual_translate.unwrap_or((
crate::Dimension::Px(0.0),
crate::Dimension::Px(0.0),
));
Some(AnimationValue::Translate(
crate::TransformLength {
value: x,
expression: style.individual_translate_expressions[0].clone(),
},
crate::TransformLength {
value: y,
expression: style.individual_translate_expressions[1].clone(),
},
))
}
Rotate => Some(AnimationValue::Rotate(
style.individual_rotate.unwrap_or(0.0),
)),
Scale => {
let (x, y) = style.individual_scale.unwrap_or((1.0, 1.0));
Some(AnimationValue::Scale(x, y))
}
Width | Height | MinWidth | MinHeight | MaxWidth | MaxHeight => {
let index = match property {
Width => 0,
Height => 1,
MinWidth => 2,
MinHeight => 3,
MaxWidth => 4,
MaxHeight => 5,
_ => unreachable!(),
};
if matches!(property, Width) && style.width_fit_content {
return None;
}
let dimension = match property {
Width => style.width,
Height => style.height,
MinWidth => style.min_width,
MinHeight => style.min_height,
MaxWidth => style.max_width,
MaxHeight => style.max_height,
_ => unreachable!(),
};
Some(AnimationValue::Length(length_with_expression(
dimension,
&style.size_expressions[index],
)))
}
Top | Right | Bottom | Left => {
let index = physical_side_index(property);
Some(AnimationValue::Length(match &style.inset_expressions[index] {
Some(expression) => AnimatedLength::Expression(expression.clone()),
None => style.inset[index]
.map(AnimatedLength::Dimension)
.unwrap_or(AnimatedLength::Auto),
}))
}
MarginTop | MarginRight | MarginBottom | MarginLeft => {
let index = physical_side_index(property);
Some(AnimationValue::Length(margin_length(style, index)))
}
PaddingTop | PaddingRight | PaddingBottom | PaddingLeft => {
let index = physical_side_index(property);
Some(AnimationValue::Length(padding_length(style, index)))
}
RowGap | ColumnGap => {
let (value, expression) = if property == RowGap {
(style.row_gap, &style.row_gap_expression)
} else {
(style.column_gap, &style.column_gap_expression)
};
Some(AnimationValue::Length(match expression {
Some(expression) => AnimatedLength::Expression(expression.clone()),
None => value
.map(|value| AnimatedLength::Dimension(crate::Dimension::Px(value)))
.unwrap_or(AnimatedLength::Auto),
}))
}
FlexBasis => Some(AnimationValue::Length(AnimatedLength::Dimension(
style.flex_basis,
))),
Opacity => Some(AnimationValue::Number(
style.opacity.unwrap_or(1.0).clamp(0.0, 1.0),
)),
Color => Some(AnimationValue::Color(
style.color.unwrap_or([0, 0, 0, 255]),
)),
BackgroundColor => Some(AnimationValue::Color(
style.background_color.unwrap_or([0, 0, 0, 0]),
)),
BorderTopColor | BorderRightColor | BorderBottomColor | BorderLeftColor => {
let colors = style.border_model.colors;
let color = match property {
BorderTopColor => colors.top,
BorderRightColor => colors.right,
BorderBottomColor => colors.bottom,
BorderLeftColor => colors.left,
_ => unreachable!(),
}
.or(style.color)
.unwrap_or([0, 0, 0, 255]);
Some(AnimationValue::Color(color))
}
BackgroundPosition => Some(AnimationValue::BackgroundPosition(
style.background_position,
)),
Visibility => Some(AnimationValue::Visibility(
!style.visibility_hidden.unwrap_or(false),
)),
}
}
fn apply_animation_value(
style: &mut LayoutStyle,
property: AnimatedProperty,
value: AnimationValue,
) {
use AnimatedProperty::*;
match (property, value) {
(Transform, AnimationValue::Transform(operations)) => {
style.transform_ops = operations;
set_animation_containing_block_trigger(
style,
crate::CB_TRIGGER_TRANSFORM,
!style.transform_ops.is_empty(),
);
}
(Translate, AnimationValue::Translate(x, y)) => {
style.individual_translate = Some((x.value, y.value));
style.individual_translate_expressions = [x.expression, y.expression];
set_animation_containing_block_trigger(style, crate::CB_TRIGGER_TRANSLATE, true);
}
(Rotate, AnimationValue::Rotate(value)) => {
style.individual_rotate = Some(value);
set_animation_containing_block_trigger(style, crate::CB_TRIGGER_ROTATE, true);
}
(Scale, AnimationValue::Scale(x, y)) => {
style.individual_scale = Some((x, y));
set_animation_containing_block_trigger(style, crate::CB_TRIGGER_SCALE, true);
}
(Width | Height | MinWidth | MinHeight | MaxWidth | MaxHeight, AnimationValue::Length(value)) => {
set_size_animation_value(style, property, value);
}
(Top | Right | Bottom | Left, AnimationValue::Length(value)) => {
let index = physical_side_index(property);
set_inset_animation_value(style, index, value);
}
(MarginTop | MarginRight | MarginBottom | MarginLeft, AnimationValue::Length(value)) => {
let index = physical_side_index(property);
set_margin_animation_value(style, index, value);
}
(PaddingTop | PaddingRight | PaddingBottom | PaddingLeft, AnimationValue::Length(value)) => {
let index = physical_side_index(property);
set_padding_animation_value(style, index, value);
}
(RowGap | ColumnGap, AnimationValue::Length(value)) => {
set_gap_animation_value(style, property == RowGap, value);
}
(FlexBasis, AnimationValue::Length(AnimatedLength::Dimension(value))) => {
style.flex_basis = value;
}
(Opacity, AnimationValue::Number(value)) => {
style.opacity = Some(value.clamp(0.0, 1.0));
}
(Color, AnimationValue::Color(value)) => style.color = Some(value),
(BackgroundColor, AnimationValue::Color(value)) => {
style.background_color = Some(value)
}
(BorderTopColor, AnimationValue::Color(value)) => {
style.border_model.colors.top = Some(value)
}
(BorderRightColor, AnimationValue::Color(value)) => {
style.border_model.colors.right = Some(value)
}
(BorderBottomColor, AnimationValue::Color(value)) => {
style.border_model.colors.bottom = Some(value)
}
(BorderLeftColor, AnimationValue::Color(value)) => {
style.border_model.colors.left = Some(value)
}
(BackgroundPosition, AnimationValue::BackgroundPosition(value)) => {
style.background_position = value
}
(Visibility, AnimationValue::Visibility(visible)) => {
style.visibility_hidden = Some(!visible)
}
_ => return,
}
let colors = style.border_model.colors;
style.border_color = (colors.top == colors.right
&& colors.top == colors.bottom
&& colors.top == colors.left)
.then_some(colors.top)
.flatten();
}
fn interpolate_animation_value(
from: &AnimationValue,
to: &AnimationValue,
position: f32,
) -> AnimationValue {
match (from, to) {
(AnimationValue::Length(from), AnimationValue::Length(to)) => {
AnimationValue::Length(interpolate_animated_length(from, to, position))
}
(AnimationValue::Number(from), AnimationValue::Number(to)) => {
AnimationValue::Number(from + (to - from) * position)
}
(AnimationValue::Color(from), AnimationValue::Color(to)) => {
AnimationValue::Color(interpolate_color(*from, *to, position))
}
(AnimationValue::Transform(from), AnimationValue::Transform(to)) => {
AnimationValue::Transform(interpolate_transform_list(from, to, position))
}
(AnimationValue::Translate(from_x, from_y), AnimationValue::Translate(to_x, to_y)) => {
let x = interpolate_transform_length(from_x, to_x, position);
let y = interpolate_transform_length(from_y, to_y, position);
match (x, y) {
(Some(x), Some(y)) => AnimationValue::Translate(x, y),
_ if position < 0.5 => from.clone(),
_ => to.clone(),
}
}
(AnimationValue::Rotate(from), AnimationValue::Rotate(to)) => {
AnimationValue::Rotate(from + (to - from) * position)
}
(AnimationValue::Scale(from_x, from_y), AnimationValue::Scale(to_x, to_y)) => {
AnimationValue::Scale(
from_x + (to_x - from_x) * position,
from_y + (to_y - from_y) * position,
)
}
(
AnimationValue::BackgroundPosition(from),
AnimationValue::BackgroundPosition(to),
) => AnimationValue::BackgroundPosition(from.interpolate(*to, position)),
(AnimationValue::Visibility(from), AnimationValue::Visibility(to)) => {
// visibility has a special discrete interpolation: if either end
// is visible, every interior value is visible.
AnimationValue::Visibility(if *from || *to {
position > 0.0 && position < 1.0 || if position <= 0.0 { *from } else { *to }
} else {
false
})
}
_ if position < 0.5 => from.clone(),
_ => to.clone(),
}
}
fn physical_side_index(property: AnimatedProperty) -> usize {
use AnimatedProperty::*;
match property {
Top | MarginTop | PaddingTop | BorderTopColor => 0,
Right | MarginRight | PaddingRight | BorderRightColor => 1,
Bottom | MarginBottom | PaddingBottom | BorderBottomColor => 2,
Left | MarginLeft | PaddingLeft | BorderLeftColor => 3,
_ => unreachable!("property has no physical side"),
}
}
fn edge_value(edges: crate::Edges, index: usize) -> f32 {
match index {
0 => edges.top,
1 => edges.right,
2 => edges.bottom,
3 => edges.left,
_ => unreachable!(),
}
}
fn edge_value_mut(edges: &mut crate::Edges, index: usize) -> &mut f32 {
match index {
0 => &mut edges.top,
1 => &mut edges.right,
2 => &mut edges.bottom,
3 => &mut edges.left,
_ => unreachable!(),
}
}
fn length_with_expression(
dimension: crate::Dimension,
expression: &Option<String>,
) -> AnimatedLength {
expression
.as_ref()
.map(|expression| AnimatedLength::Expression(expression.clone()))
.unwrap_or(AnimatedLength::Dimension(dimension))
}
fn margin_length(style: &LayoutStyle, index: usize) -> AnimatedLength {
if style.margin_auto[index] {
AnimatedLength::Auto
} else if let Some(expression) = &style.margin_expressions[index] {
AnimatedLength::Expression(expression.clone())
} else if let Some(percentage) = style.margin_percent[index] {
AnimatedLength::Dimension(crate::Dimension::Percent(percentage))
} else if let Some(relative) = style.margin_relative[index] {
AnimatedLength::Dimension(relative)
} else {
AnimatedLength::Dimension(crate::Dimension::Px(edge_value(style.margin, index)))
}
}
fn padding_length(style: &LayoutStyle, index: usize) -> AnimatedLength {
if let Some(expression) = &style.padding_expressions[index] {
AnimatedLength::Expression(expression.clone())
} else if let Some(percentage) = style.padding_percent[index] {
AnimatedLength::Dimension(crate::Dimension::Percent(percentage))
} else if let Some(relative) = style.padding_relative[index] {
AnimatedLength::Dimension(relative)
} else {
AnimatedLength::Dimension(crate::Dimension::Px(edge_value(style.padding, index)))
}
}
fn set_size_animation_value(
style: &mut LayoutStyle,
property: AnimatedProperty,
value: AnimatedLength,
) {
use AnimatedProperty::*;
let index = match property {
Width => 0,
Height => 1,
MinWidth => 2,
MinHeight => 3,
MaxWidth => 4,
MaxHeight => 5,
_ => unreachable!(),
};
let (dimension, expression) = match value {
AnimatedLength::Auto => (crate::Dimension::Auto, None),
AnimatedLength::Dimension(value) => (value, None),
AnimatedLength::Expression(value) => (crate::Dimension::Auto, Some(value)),
};
style.size_expressions[index] = expression;
match property {
Width => {
style.width = dimension;
style.width_set = true;
style.width_fit_content = false;
}
Height => {
style.height = dimension;
style.height_set = true;
}
MinWidth => style.min_width = dimension,
MinHeight => style.min_height = dimension,
MaxWidth => style.max_width = dimension,
MaxHeight => style.max_height = dimension,
_ => unreachable!(),
}
}
fn set_inset_animation_value(style: &mut LayoutStyle, index: usize, value: AnimatedLength) {
match value {
AnimatedLength::Auto => {
style.inset[index] = None;
style.inset_expressions[index] = None;
}
AnimatedLength::Dimension(value) => {
style.inset[index] = Some(value);
style.inset_expressions[index] = None;
}
AnimatedLength::Expression(value) => {
style.inset[index] = None;
style.inset_expressions[index] = Some(value);
}
}
}
fn set_margin_animation_value(style: &mut LayoutStyle, index: usize, value: AnimatedLength) {
style.margin_auto[index] = false;
style.margin_percent[index] = None;
style.margin_relative[index] = None;
style.margin_expressions[index] = None;
*edge_value_mut(&mut style.margin, index) = 0.0;
match value {
AnimatedLength::Auto => style.margin_auto[index] = true,
AnimatedLength::Dimension(crate::Dimension::Px(value)) => {
*edge_value_mut(&mut style.margin, index) = value
}
AnimatedLength::Dimension(crate::Dimension::Percent(value)) => {
style.margin_percent[index] = Some(value)
}
AnimatedLength::Dimension(crate::Dimension::Auto) => style.margin_auto[index] = true,
AnimatedLength::Dimension(value) => style.margin_relative[index] = Some(value),
AnimatedLength::Expression(value) => style.margin_expressions[index] = Some(value),
}
}
fn set_padding_animation_value(style: &mut LayoutStyle, index: usize, value: AnimatedLength) {
style.padding_percent[index] = None;
style.padding_relative[index] = None;
style.padding_expressions[index] = None;
*edge_value_mut(&mut style.padding, index) = 0.0;
match value {
AnimatedLength::Auto | AnimatedLength::Dimension(crate::Dimension::Auto) => {}
AnimatedLength::Dimension(crate::Dimension::Px(value)) => {
*edge_value_mut(&mut style.padding, index) = value
}
AnimatedLength::Dimension(crate::Dimension::Percent(value)) => {
style.padding_percent[index] = Some(value)
}
AnimatedLength::Dimension(value) => style.padding_relative[index] = Some(value),
AnimatedLength::Expression(value) => style.padding_expressions[index] = Some(value),
}
}
fn set_gap_animation_value(
style: &mut LayoutStyle,
row: bool,
value: AnimatedLength,
) {
let (slot, expression) = if row {
(&mut style.row_gap, &mut style.row_gap_expression)
} else {
(&mut style.column_gap, &mut style.column_gap_expression)
};
match value {
AnimatedLength::Auto | AnimatedLength::Dimension(crate::Dimension::Auto) => {
*slot = None;
*expression = None;
}
AnimatedLength::Dimension(crate::Dimension::Px(value)) => {
*slot = Some(value);
*expression = None;
}
AnimatedLength::Dimension(value) => {
*slot = None;
*expression = Some(dimension_to_css(value));
}
AnimatedLength::Expression(value) => {
*slot = None;
*expression = Some(value);
}
}
}
fn dimension_to_css(value: crate::Dimension) -> String {
match value {
crate::Dimension::Auto => "auto".to_string(),
crate::Dimension::Px(value) => format!("{value}px"),
crate::Dimension::Percent(value) => format!("{}%", value * 100.0),
crate::Dimension::Em(value) => format!("{value}em"),
crate::Dimension::Ex(value) => format!("{value}ex"),
crate::Dimension::Rem(value) => format!("{value}rem"),
crate::Dimension::Vw(value) => format!("{value}vw"),
crate::Dimension::Vh(value) => format!("{value}vh"),
crate::Dimension::Vmin(value) => format!("{value}vmin"),
crate::Dimension::Vmax(value) => format!("{value}vmax"),
}
}
fn interpolate_animated_length(
from: &AnimatedLength,
to: &AnimatedLength,
position: f32,
) -> AnimatedLength {
match (from, to) {
(AnimatedLength::Dimension(from), AnimatedLength::Dimension(to)) => {
interpolate_dimension(*from, *to, position)
.map(AnimatedLength::Dimension)
.unwrap_or_else(|| {
AnimatedLength::Dimension(if position < 0.5 { *from } else { *to })
})
}
(AnimatedLength::Auto, AnimatedLength::Auto) => AnimatedLength::Auto,
(AnimatedLength::Expression(from), AnimatedLength::Expression(to)) if from == to => {
AnimatedLength::Expression(from.clone())
}
_ if position < 0.5 => from.clone(),
_ => to.clone(),
}
}
fn interpolate_dimension(
from: crate::Dimension,
to: crate::Dimension,
position: f32,
) -> Option<crate::Dimension> {
use crate::Dimension::*;
let lerp = |from: f32, to: f32| from + (to - from) * position;
Some(match (from, to) {
(Auto, Auto) => Auto,
(Px(from), Px(to)) => Px(lerp(from, to)),
(Percent(from), Percent(to)) => Percent(lerp(from, to)),
(Em(from), Em(to)) => Em(lerp(from, to)),
(Ex(from), Ex(to)) => Ex(lerp(from, to)),
(Rem(from), Rem(to)) => Rem(lerp(from, to)),
(Vw(from), Vw(to)) => Vw(lerp(from, to)),
(Vh(from), Vh(to)) => Vh(lerp(from, to)),
(Vmin(from), Vmin(to)) => Vmin(lerp(from, to)),
(Vmax(from), Vmax(to)) => Vmax(lerp(from, to)),
_ => return None,
})
}
fn interpolate_color(from: [u8; 4], to: [u8; 4], position: f32) -> [u8; 4] {
let channel = |from: u8, to: u8| {
(f32::from(from) + (f32::from(to) - f32::from(from)) * position)
.round()
.clamp(0.0, 255.0) as u8
};
[
channel(from[0], to[0]),
channel(from[1], to[1]),
channel(from[2], to[2]),
channel(from[3], to[3]),
]
}
fn interpolate_transform_length(
from: &crate::TransformLength,
to: &crate::TransformLength,
position: f32,
) -> Option<crate::TransformLength> {
match (&from.expression, &to.expression) {
(None, None) => Some(crate::TransformLength {
value: interpolate_dimension(from.value, to.value, position)?,
expression: None,
}),
(Some(from_expression), Some(to_expression)) if from_expression == to_expression => {
Some(crate::TransformLength {
value: interpolate_dimension(from.value, to.value, position)
.unwrap_or(from.value),
expression: Some(from_expression.clone()),
})
},
_ => None,
}
}
fn interpolate_transform_list(
from: &[crate::TransformOp],
to: &[crate::TransformOp],
position: f32,
) -> Vec<crate::TransformOp> {
let from_list = if from.is_empty() && !to.is_empty() {
to.iter()
.map(identity_transform_operation)
.collect::<Vec<_>>()
} else {
from.to_vec()
};
let to_list = if to.is_empty() && !from.is_empty() {
from.iter()
.map(identity_transform_operation)
.collect::<Vec<_>>()
} else {
to.to_vec()
};
if from_list.len() != to_list.len() {
return if position < 0.5 { from_list } else { to_list };
}
let mut result = Vec::with_capacity(from_list.len());
for (from, to) in from_list.iter().zip(&to_list) {
let Some(operation) = interpolate_transform_operation(from, to, position) else {
return if position < 0.5 { from_list } else { to_list };
};
result.push(operation);
}
result
}
fn identity_transform_operation(operation: &crate::TransformOp) -> crate::TransformOp {
match operation {
crate::TransformOp::Translate(x, y) => crate::TransformOp::Translate(
zero_transform_length(x),
zero_transform_length(y),
),
crate::TransformOp::Scale(_, _) => crate::TransformOp::Scale(1.0, 1.0),
crate::TransformOp::Rotate(_) => crate::TransformOp::Rotate(0.0),
crate::TransformOp::Skew(_, _) => crate::TransformOp::Skew(0.0, 0.0),
crate::TransformOp::Matrix(_) => crate::TransformOp::Matrix(crate::Affine2::IDENTITY),
}
}
fn zero_transform_length(value: &crate::TransformLength) -> crate::TransformLength {
crate::TransformLength {
value: match value.value {
crate::Dimension::Percent(_) => crate::Dimension::Percent(0.0),
crate::Dimension::Em(_) => crate::Dimension::Em(0.0),
crate::Dimension::Ex(_) => crate::Dimension::Ex(0.0),
crate::Dimension::Rem(_) => crate::Dimension::Rem(0.0),
crate::Dimension::Vw(_) => crate::Dimension::Vw(0.0),
crate::Dimension::Vh(_) => crate::Dimension::Vh(0.0),
crate::Dimension::Vmin(_) => crate::Dimension::Vmin(0.0),
crate::Dimension::Vmax(_) => crate::Dimension::Vmax(0.0),
_ => crate::Dimension::Px(0.0),
},
expression: value.expression.as_ref().map(|_| "0px".to_string()),
}
}
fn interpolate_transform_operation(
from: &crate::TransformOp,
to: &crate::TransformOp,
position: f32,
) -> Option<crate::TransformOp> {
let lerp = |from: f32, to: f32| from + (to - from) * position;
Some(match (from, to) {
(crate::TransformOp::Translate(from_x, from_y), crate::TransformOp::Translate(to_x, to_y)) => {
crate::TransformOp::Translate(
interpolate_transform_length(from_x, to_x, position)?,
interpolate_transform_length(from_y, to_y, position)?,
)
}
(crate::TransformOp::Scale(from_x, from_y), crate::TransformOp::Scale(to_x, to_y)) => {
crate::TransformOp::Scale(lerp(*from_x, *to_x), lerp(*from_y, *to_y))
}
(crate::TransformOp::Rotate(from), crate::TransformOp::Rotate(to)) => {
crate::TransformOp::Rotate(lerp(*from, *to))
}
(crate::TransformOp::Skew(from_x, from_y), crate::TransformOp::Skew(to_x, to_y)) => {
crate::TransformOp::Skew(lerp(*from_x, *to_x), lerp(*from_y, *to_y))
}
(crate::TransformOp::Matrix(from), crate::TransformOp::Matrix(to)) => {
crate::TransformOp::Matrix(crate::Affine2 {
a: lerp(from.a, to.a),
b: lerp(from.b, to.b),
c: lerp(from.c, to.c),
d: lerp(from.d, to.d),
e: lerp(from.e, to.e),
f: lerp(from.f, to.f),
})
}
_ => return None,
})
}
fn set_animation_containing_block_trigger(
style: &mut LayoutStyle,
trigger: u16,
enabled: bool,
) {
if enabled {
style.containing_block_triggers |= trigger;
} else {
style.containing_block_triggers &= !trigger;
}
}
fn animation_directed_progress(
timing: &crate::AnimationTiming,
sample_time: crate::AnimationSampleTime,
) -> Option<f32> {
let duration = timing.duration_ms.max(0.0);
let iterations = timing.iteration_count.max(0.0);
let active_duration = if duration == 0.0 || iterations == 0.0 {
0.0
} else {
duration * iterations
};
let local_time = if timing.play_state == crate::AnimationPlayState::Paused {
0.0
} else {
sample_time.milliseconds
};
if !local_time.is_finite() {
return None;
}
let end_time = (timing.delay_ms + active_duration).max(0.0);
let before_boundary = timing.delay_ms.clamp(0.0, end_time);
let after_boundary = (timing.delay_ms + active_duration).min(end_time).max(0.0);
let phase = if local_time < before_boundary {
AnimationPhase::Before
} else if local_time >= after_boundary {
AnimationPhase::After
} else {
AnimationPhase::Active
};
let active_time = match phase {
AnimationPhase::Before => {
if !matches!(
timing.fill_mode,
crate::AnimationFillMode::Backwards | crate::AnimationFillMode::Both
) {
return None;
}
(local_time - timing.delay_ms).max(0.0)
}
AnimationPhase::Active => local_time - timing.delay_ms,
AnimationPhase::After => {
if !matches!(
timing.fill_mode,
crate::AnimationFillMode::Forwards | crate::AnimationFillMode::Both
) {
return None;
}
(local_time - timing.delay_ms).clamp(0.0, active_duration)
}
};
let overall_progress = if duration == 0.0 {
if phase == AnimationPhase::Before { 0.0 } else { iterations }
} else {
active_time / duration
};
if !overall_progress.is_finite() {
return Some(match timing.direction {
crate::AnimationDirection::Reverse | crate::AnimationDirection::AlternateReverse => 1.0,
_ => 0.0,
});
}
let mut current_iteration = overall_progress.floor().max(0.0);
let mut simple_progress = overall_progress.rem_euclid(1.0);
if phase == AnimationPhase::After
&& iterations > 0.0
&& simple_progress == 0.0
{
simple_progress = 1.0;
current_iteration = (current_iteration - 1.0).max(0.0);
}
let reverse = match timing.direction {
crate::AnimationDirection::Normal => false,
crate::AnimationDirection::Reverse => true,
crate::AnimationDirection::Alternate => current_iteration.rem_euclid(2.0) >= 1.0,
crate::AnimationDirection::AlternateReverse => current_iteration.rem_euclid(2.0) < 1.0,
};
Some(if reverse {
1.0 - simple_progress
} else {
simple_progress
})
}
fn normalized_keyframe_offsets(stops: &[KeyframeStop]) -> Vec<(f32, &KeyframeStop)> {
if stops.is_empty() {
return Vec::new();
}
let mut offsets = stops.iter().map(|stop| stop.offset).collect::<Vec<_>>();
if offsets.len() == 1 {
offsets[0] = Some(offsets[0].unwrap_or(1.0));
} else {
if offsets[0].is_none() {
offsets[0] = Some(0.0);
}
let last = offsets.len() - 1;
if offsets[last].is_none() {
offsets[last] = Some(1.0);
}
}
let mut index = 0usize;
while index < offsets.len() {
if offsets[index].is_some() {
index += 1;
continue;
}
let start = index - 1;
let mut end = index + 1;
while offsets[end].is_none() {
end += 1;
}
let from = offsets[start].unwrap();
let to = offsets[end].unwrap();
let span = (end - start) as f32;
for missing in index..end {
offsets[missing] = Some(from + (to - from) * (missing - start) as f32 / span);
}
index = end + 1;
}
stops
.iter()
.zip(offsets)
.map(|(stop, offset)| (offset.unwrap(), stop))
.collect()
}
/// Resolve variables one declaration at a time. An invalid variable poisons
/// its entire declaration at computed-value time, but must not erase unrelated
/// declarations in the same rule.
fn substitute_declarations(css: &str, props: &HashMap<String, String>) -> String {
let mut expanded = String::new();
for declaration in crate::style::split_declarations(css) {
let Some((name, value)) = declaration.split_once(':') else {
continue;
};
let Some(value) = substitute_var_value(value.trim(), props, 0) else {
continue;
};
expanded.push_str(name.trim());
expanded.push(':');
expanded.push_str(&value);
expanded.push(';');
}
expanded
}
/// Substitute every `var(--name, fallback?)` in one property value. `None`
/// represents CSS's guaranteed-invalid value. Crucially, invalidity propagates
/// through an intermediate custom property so an outer var() can use its own
/// fallback (`--toggle:var(--missing) dark; color:var(--toggle,light)`).
pub(crate) fn substitute_var_value(
input: &str,
props: &HashMap<String, String>,
depth: u8,
) -> Option<String> {
if depth > 16 {
return None;
}
if !input.contains("var(") {
return Some(input.to_string());
}
let mut out = String::new();
let mut rest = input;
while let Some(pos) = rest.find("var(") {
out.push_str(&rest[..pos]);
let after = &rest[pos + 4..];
// Matching close paren, respecting nesting.
let mut d = 1i32;
let mut end = None;
for (i, ch) in after.char_indices() {
match ch {
'(' => d += 1,
')' => {
d -= 1;
if d == 0 {
end = Some(i);
break;
}
}
_ => {}
}
}
let Some(end) = end else {
return None;
};
let inner = &after[..end];
let (name, fallback) = match inner.split_once(',') {
Some((n, f)) => (n.trim(), Some(f.trim())),
None => (inner.trim(), None),
};
let resolved = props
.get(name)
.and_then(|value| substitute_var_value(value, props, depth + 1));
let replacement = match resolved {
Some(value) => value,
None => {
let fallback = fallback?;
substitute_var_value(fallback, props, depth + 1)?
}
};
// `var()` substitutes a token sequence, not source text. Insert a
// separator only where reparsing would merge boundary tokens:
// `2px` + `solid` must not become the dimension `2pxsolid`, and `10`
// + `%` must not become a percentage. Do not add unconditional
// whitespace: it is significant around calc()'s `+` and `-`.
if out
.chars()
.next_back()
.zip(replacement.chars().next())
.is_some_and(|(left, right)| css_substitution_boundary_merges(left, right))
{
out.push(' ');
}
out.push_str(&replacement);
if replacement
.chars()
.next_back()
.zip(after[end + 1..].chars().next())
.is_some_and(|(left, right)| css_substitution_boundary_merges(left, right))
{
out.push(' ');
}
rest = &after[end + 1..];
}
out.push_str(rest);
Some(out)
}
fn css_substitution_boundary_merges(left: char, right: char) -> bool {
let name = |ch: char| {
ch.is_ascii_alphanumeric() || ch == '_' || ch == '-' || ch == '\\' || !ch.is_ascii()
};
if left.is_ascii_digit() && right == '-' {
// A number followed by `-` remains two tokens. Separating these would
// incorrectly make `calc(var(--n)- 1px)` satisfy calc's whitespace
// requirement.
return false;
}
(name(left) && name(right))
|| ((left.is_ascii_digit() || left == '.')
&& (right == '.' || right == '%' || name(right)))
|| (matches!(left, '#' | '@') && name(right))
|| (!left.is_ascii_digit() && name(left) && right == '(')
|| (left == '+' && (right.is_ascii_digit() || right == '.'))
|| (left == '/' && right == '*')
}
/// If `selector`'s rightmost compound is the pseudo-element `which`
/// (`"before"` or `"after"`, matching either the modern `::` or legacy `:`
/// form), return everything before it, trimmed. Only a trailing
/// pseudo-element is handled: `li::before` strips to `li`, but a selector
/// that uses `::before` as anything other than the final component (not
/// valid CSS in the first place) is left alone.
fn strip_pseudo_element<'a>(selector: &'a str, which: &str) -> Option<&'a str> {
for prefix in ["::", ":"] {
let suffix = format!("{prefix}{which}");
if let Some(base) = selector.strip_suffix(&suffix) {
if !base.is_empty() {
return Some(base.trim());
}
}
}
None
}
/// Return the final valid `content` declaration in a declaration list.
///
/// The outer option says whether a declaration was found; the inner option is
/// the generated text (`none`/`normal` suppress the pseudo). Along with quoted
/// strings, support the common `attr(name)` form used by component-library
/// buttons and badges. The attribute is resolved against the originating
/// element, as CSS generated content requires.
fn extract_content(
decls: &str,
tree: &DomTree,
nid: NodeId,
) -> Option<Option<Vec<crate::GeneratedContentItem>>> {
let mut result = None;
for raw in crate::style::split_declarations(decls) {
let Some((name, value)) = raw.split_once(':') else { continue };
if !name.trim().eq_ignore_ascii_case("content") {
continue;
}
let value = value.trim();
if value.eq_ignore_ascii_case("none") || value.eq_ignore_ascii_case("normal") {
result = Some(None);
continue;
}
let parsed = parse_generated_content_items(value, tree, nid);
if let Some(parsed) = parsed {
result = Some(Some(parsed));
} else if value
.trim_start()
.get(..4)
.map_or(false, |prefix| prefix.eq_ignore_ascii_case("url("))
{
// An image-valued content declaration supersedes any earlier
// string declaration. The image itself is retained on
// LayoutStyle::content_image by apply_declarations; clearing the
// text here keeps the two views of the winning declaration in
// sync and, importantly, keeps the pseudo alive.
result = Some(None);
}
}
result
}
fn generated_content_with_zero_counters(items: &[crate::GeneratedContentItem]) -> String {
let mut text = String::new();
for item in items {
match item {
crate::GeneratedContentItem::Text(value) => text.push_str(value),
crate::GeneratedContentItem::Counter { style, .. } => {
text.push_str(&format_counter_value(0, *style));
}
crate::GeneratedContentItem::Counters {
style,
separator: _,
..
} => text.push_str(&format_counter_value(0, *style)),
}
}
text
}
fn parse_generated_content_items(
value: &str,
tree: &DomTree,
nid: NodeId,
) -> Option<Vec<crate::GeneratedContentItem>> {
let mut items = Vec::new();
let mut rest = value.trim();
while !rest.is_empty() {
rest = rest.trim_start();
let first = rest.chars().next()?;
if matches!(first, '"' | '\'') {
let (raw, tail) = take_css_quoted(rest)?;
items.push(crate::GeneratedContentItem::Text(unescape_css_string(raw)));
rest = tail;
continue;
}
let name_end = rest
.char_indices()
.find_map(|(index, ch)| (!is_css_ident_char(ch)).then_some(index))
.unwrap_or(rest.len());
let name = &rest[..name_end];
let after_name = rest[name_end..].trim_start();
if !after_name.starts_with('(') {
// Quote-control keywords are valid generated-content items, but
// they do not contribute text in the current renderer.
if matches!(
name.to_ascii_lowercase().as_str(),
"open-quote" | "close-quote" | "no-open-quote" | "no-close-quote"
) {
rest = after_name;
continue;
}
return None;
}
let (arguments, tail) = take_css_function_arguments(after_name)?;
match name.to_ascii_lowercase().as_str() {
"attr" => {
let attribute = arguments
.split_whitespace()
.next()
.filter(|name| !name.is_empty())?;
let value = tree
.get_node(nid)
.and_then(|node| node.get_attribute(attribute).map(str::to_owned))
.unwrap_or_default();
items.push(crate::GeneratedContentItem::Text(value));
}
"counter" => {
let arguments = split_function_arguments(arguments);
let name = arguments.first()?.trim();
if !valid_generated_counter_name(name) || arguments.len() > 2 {
return None;
}
let style = match arguments.get(1) {
Some(style) => parse_generated_counter_style(style.trim())?,
None => crate::GeneratedCounterStyle::default(),
};
items.push(crate::GeneratedContentItem::Counter {
name: name.to_string(),
style,
});
}
"counters" => {
let arguments = split_function_arguments(arguments);
if !(2..=3).contains(&arguments.len()) {
return None;
}
let name = arguments[0].trim();
if !valid_generated_counter_name(name) {
return None;
}
let (separator, separator_tail) = take_css_quoted(arguments[1].trim())?;
if !separator_tail.trim().is_empty() {
return None;
}
let style = match arguments.get(2) {
Some(style) => parse_generated_counter_style(style.trim())?,
None => crate::GeneratedCounterStyle::default(),
};
items.push(crate::GeneratedContentItem::Counters {
name: name.to_string(),
separator: unescape_css_string(separator),
style,
});
}
_ => return None,
}
rest = tail;
}
(!items.is_empty()).then_some(items)
}
fn is_css_ident_char(ch: char) -> bool {
ch.is_alphanumeric() || matches!(ch, '-' | '_' | '\\')
}
fn take_css_quoted(value: &str) -> Option<(&str, &str)> {
let quote = value.chars().next().filter(|ch| matches!(ch, '"' | '\''))?;
let mut escaped = false;
for (offset, ch) in value[quote.len_utf8()..].char_indices() {
if escaped {
escaped = false;
} else if ch == '\\' {
escaped = true;
} else if ch == quote {
let end = quote.len_utf8() + offset;
return Some((
&value[quote.len_utf8()..end],
&value[end + quote.len_utf8()..],
));
}
}
None
}
fn take_css_function_arguments(value: &str) -> Option<(&str, &str)> {
let mut depth = 0usize;
let mut quote = None;
let mut escaped = false;
for (offset, ch) in value.char_indices() {
if let Some(open) = quote {
if escaped {
escaped = false;
} else if ch == '\\' {
escaped = true;
} else if ch == open {
quote = None;
}
continue;
}
match ch {
'"' | '\'' => quote = Some(ch),
'(' => depth += 1,
')' => {
depth = depth.checked_sub(1)?;
if depth == 0 {
return Some((&value[1..offset], &value[offset + 1..]));
}
}
_ => {}
}
}
None
}
fn split_function_arguments(value: &str) -> Vec<&str> {
let mut result = Vec::new();
let mut start = 0;
let mut depth = 0usize;
let mut quote = None;
let mut escaped = false;
for (offset, ch) in value.char_indices() {
if let Some(open) = quote {
if escaped {
escaped = false;
} else if ch == '\\' {
escaped = true;
} else if ch == open {
quote = None;
}
continue;
}
match ch {
'"' | '\'' => quote = Some(ch),
'(' => depth += 1,
')' => depth = depth.saturating_sub(1),
',' if depth == 0 => {
result.push(value[start..offset].trim());
start = offset + 1;
}
_ => {}
}
}
result.push(value[start..].trim());
result
}
fn valid_generated_counter_name(name: &str) -> bool {
!name.is_empty() && name.chars().all(is_css_ident_char)
}
fn parse_generated_counter_style(value: &str) -> Option<crate::GeneratedCounterStyle> {
Some(match value.to_ascii_lowercase().as_str() {
"decimal" => crate::GeneratedCounterStyle::Decimal,
"decimal-leading-zero" => crate::GeneratedCounterStyle::DecimalLeadingZero,
"lower-alpha" | "lower-latin" => crate::GeneratedCounterStyle::LowerAlpha,
"upper-alpha" | "upper-latin" => crate::GeneratedCounterStyle::UpperAlpha,
"lower-roman" => crate::GeneratedCounterStyle::LowerRoman,
"upper-roman" => crate::GeneratedCounterStyle::UpperRoman,
_ => return None,
})
}
pub(crate) fn format_counter_value(value: i32, style: crate::GeneratedCounterStyle) -> String {
match style {
crate::GeneratedCounterStyle::Decimal => value.to_string(),
crate::GeneratedCounterStyle::DecimalLeadingZero if (-9..=9).contains(&value) => {
if value < 0 {
format!("-{:02}", value.unsigned_abs())
} else {
format!("{value:02}")
}
}
crate::GeneratedCounterStyle::DecimalLeadingZero => value.to_string(),
crate::GeneratedCounterStyle::LowerAlpha => alpha_counter(value, false),
crate::GeneratedCounterStyle::UpperAlpha => alpha_counter(value, true),
crate::GeneratedCounterStyle::LowerRoman => roman_counter(value, false),
crate::GeneratedCounterStyle::UpperRoman => roman_counter(value, true),
}
}
fn alpha_counter(value: i32, uppercase: bool) -> String {
if value <= 0 {
return value.to_string();
}
let mut value = value as u32;
let mut result = Vec::new();
while value > 0 {
value -= 1;
result.push((b'a' + (value % 26) as u8) as char);
value /= 26;
}
result.reverse();
let result: String = result.into_iter().collect();
if uppercase {
result.to_ascii_uppercase()
} else {
result
}
}
fn roman_counter(value: i32, uppercase: bool) -> String {
if !(1..=3999).contains(&value) {
return value.to_string();
}
let mut value = value;
let mut result = String::new();
for &(amount, numeral) in &[
(1000, "M"),
(900, "CM"),
(500, "D"),
(400, "CD"),
(100, "C"),
(90, "XC"),
(50, "L"),
(40, "XL"),
(10, "X"),
(9, "IX"),
(5, "V"),
(4, "IV"),
(1, "I"),
] {
while value >= amount {
value -= amount;
result.push_str(numeral);
}
}
if uppercase {
result
} else {
result.to_ascii_lowercase()
}
}
/// Decode CSS string escapes: `\` followed by 1-6 hex digits is a Unicode
/// code point (`\200B` -> U+200B ZERO WIDTH SPACE, ubiquitous in generated
/// `content` for accessible section-edit-link brackets and similar), with a
/// single trailing whitespace character consumed as the escape's own
/// terminator per the CSS spec rather than treated as literal content;
/// anything else after a backslash (`\"`, `\\`) is a literal escaped
/// character. Without this, a hex escape prints as its own literal digits.
fn unescape_css_string(s: &str) -> String {
let mut out = String::new();
let mut chars = s.chars().peekable();
while let Some(c) = chars.next() {
if c != '\\' {
out.push(c);
continue;
}
let mut hex = String::new();
while hex.len() < 6 {
match chars.peek() {
Some(h) if h.is_ascii_hexdigit() => {
hex.push(*h);
chars.next();
}
_ => break,
}
}
if !hex.is_empty() {
if matches!(chars.peek(), Some(next) if next.is_whitespace()) {
chars.next();
}
if let Some(ch) = u32::from_str_radix(&hex, 16).ok().and_then(char::from_u32) {
out.push(ch);
continue;
}
}
if let Some(next) = chars.next() {
out.push(next);
}
}
out
}
/// Split a stylesheet into `(selector, declarations)` rules. Handles nested
/// braces, `/* comments */`, and the at-rules that carry ordinary rules inside
/// (`@media`, `@supports`, `@layer`); other at-rules (`@font-face`, `@keyframes`, ...) are
/// skipped since they do not contribute layout-relevant declarations here.
pub fn parse_stylesheet(css: &str) -> Vec<(String, String)> {
parse_stylesheet_for_viewport(css, (1280.0, 720.0))
}
fn parse_stylesheet_for_viewport(
css: &str,
viewport: (f32, f32),
) -> Vec<(String, String)> {
let mut conditions = vec![ContainerConditionNode {
parent: ContainerConditionId::NONE,
alternatives: Vec::new(),
}];
parse_stylesheet_for_viewport_preserving_containers(
css, viewport, &mut conditions, ContainerConditionId::NONE,
)
.into_iter()
// This legacy tuple API cannot express conditional context. Keep its
// established behavior by omitting unresolved container rules.
.filter(|rule| {
rule.container_condition_id == ContainerConditionId::NONE
&& !rule
.selector
.starts_with(PROPERTY_REGISTRATION_SELECTOR_PREFIX)
})
.map(|rule| (rule.selector, rule.declarations))
.collect()
}
fn parse_stylesheet_for_viewport_preserving_containers(
css: &str,
viewport: (f32, f32),
container_conditions: &mut Vec<ContainerConditionNode>,
container_condition_id: ContainerConditionId,
) -> Vec<ParsedRule> {
let mut layers = LayerRegistry::default();
parse_stylesheet_for_viewport_preserving_containers_in_layer(
css,
viewport,
container_conditions,
container_condition_id,
&mut layers,
None,
)
}
fn parse_stylesheet_for_viewport_preserving_containers_in_layer(
css: &str,
viewport: (f32, f32),
container_conditions: &mut Vec<ContainerConditionNode>,
container_condition_id: ContainerConditionId,
layers: &mut LayerRegistry,
current_layer: Option<LayerOrder>,
) -> Vec<ParsedRule> {
let mut rules = Vec::new();
let mut current_selector = String::new();
let mut current_decls = String::new();
let mut block_depth = 0;
let mut in_comment = false;
let mut chars = css.chars().peekable();
while let Some(c) = chars.next() {
if in_comment {
if c == '*' && chars.peek() == Some(&'/') {
chars.next();
in_comment = false;
}
continue;
}
if c == '/' && chars.peek() == Some(&'*') {
chars.next();
in_comment = true;
continue;
}
if c == '{' {
if block_depth != 0 {
current_decls.push(c);
}
block_depth += 1;
} else if c == '}' && block_depth == 0 {
// Stray top-level close brace (unbalanced author CSS; remoteok.com
// ships one mid-sheet). Browsers error-recover and keep parsing;
// without this block_depth goes negative and the state machine
// inverts, scrambling and losing every rule in the rest of the sheet.
current_selector.clear();
} else if c == '}' {
block_depth -= 1;
if block_depth == 0 {
let sel = current_selector.trim();
let decls = current_decls.trim();
if let Some(at) = sel.strip_prefix('@') {
flush_at_rule(
at, sel, decls, &mut rules, viewport,
container_conditions, container_condition_id,
layers, current_layer.as_ref(),
);
} else {
// The body may contain nested rules (CSS Nesting, ubiquitous
// in Tailwind v4 / modern frameworks: `.a{ &:hover{} .b{} }`).
// Flatten them against this selector; denest also handles the
// no-nesting case (just emits the rule's own declarations).
denest(
sel, decls, &mut rules, viewport,
container_conditions, container_condition_id,
layers, current_layer.as_ref(),
);
}
current_selector.clear();
current_decls.clear();
} else {
current_decls.push(c);
}
} else if c == ';' && block_depth == 0 {
// Layer ordering statements establish slots even though they emit
// no selector rules. All other statement at-rules are discarded so
// their prelude cannot bleed into the next selector.
if let Some(at) = current_selector.trim().strip_prefix('@') {
if let Some(prelude) = at_rule_prelude(at, "layer") {
layers.register_statement(current_layer.as_ref(), prelude);
}
}
current_selector.clear();
} else if block_depth > 0 {
current_decls.push(c);
} else {
current_selector.push(c);
}
}
rules
}
/// Handle the at-rules whose bodies contain ordinary rules. For `@media`, apply
/// the inner rules only when the query holds for a desktop 1280px viewport.
fn flush_at_rule(
at: &str,
_sel: &str,
inner: &str,
rules: &mut Vec<ParsedRule>,
viewport: (f32, f32),
container_conditions: &mut Vec<ContainerConditionNode>,
container_condition_id: ContainerConditionId,
layers: &mut LayerRegistry,
current_layer: Option<&LayerOrder>,
) {
if let Some(prelude) = at_rule_prelude(at, "media") {
if media_query_applies_for_viewport(prelude, viewport) {
rules.extend(parse_stylesheet_for_viewport_preserving_containers_in_layer(
inner,
viewport,
container_conditions,
container_condition_id,
layers,
current_layer.cloned(),
));
}
} else if let Some(prelude) = at_rule_prelude(at, "supports") {
if supports_condition_applies(prelude) {
rules.extend(parse_stylesheet_for_viewport_preserving_containers_in_layer(
inner,
viewport,
container_conditions,
container_condition_id,
layers,
current_layer.cloned(),
));
}
} else if let Some(prelude) = at_rule_prelude(at, "container") {
if let Some(alternatives) = parse_container_query_list(prelude) {
let Ok(raw_id) = u32::try_from(container_conditions.len()) else {
return;
};
let id = ContainerConditionId(raw_id);
container_conditions.push(ContainerConditionNode {
parent: container_condition_id,
alternatives,
});
rules.extend(parse_stylesheet_for_viewport_preserving_containers_in_layer(
inner,
viewport,
container_conditions,
id,
layers,
current_layer.cloned(),
));
}
} else if let Some((name, prefixed)) = at_rule_prelude(at, "keyframes")
.map(|name| (name, false))
.or_else(|| at_rule_prelude(at, "-webkit-keyframes").map(|name| (name, true)))
{
let name = name.trim();
if !name.is_empty() {
rules.push(ParsedRule {
selector: format!(
"{}{name}",
if prefixed {
WEBKIT_KEYFRAMES_SELECTOR_PREFIX
} else {
KEYFRAMES_SELECTOR_PREFIX
}
),
declarations: inner.to_string(),
container_condition_id: ContainerConditionId::NONE,
layer: current_layer.cloned(),
});
}
} else if let Some(name) = at_rule_prelude(at, "property") {
if name.starts_with("--") {
rules.push(ParsedRule {
selector: format!("{PROPERTY_REGISTRATION_SELECTOR_PREFIX}{name}"),
declarations: inner.to_string(),
// Registrations are global name-defining rules. CSS
// Conditional 5 deliberately does not gate them on an
// enclosing container query.
container_condition_id: ContainerConditionId::NONE,
layer: None,
});
}
} else if let Some(prelude) = at_rule_prelude(at, "layer") {
let layer = if prelude.trim().is_empty() {
layers.register_anonymous(current_layer)
} else if let Some(layer) = layers.register_named(current_layer, prelude) {
layer
} else {
return;
};
rules.extend(parse_stylesheet_for_viewport_preserving_containers_in_layer(
inner,
viewport,
container_conditions,
container_condition_id,
layers,
Some(layer),
));
}
// Other at-rules (@font-face, @import, ...) carry no
// layout-relevant rules for us, so drop them.
}
fn parse_property_registration(descriptors: &str) -> Option<RegisteredCustomProperty> {
let mut syntax = None;
let mut inherits = None;
let mut initial_value = None;
for declaration in crate::style::split_declarations(descriptors) {
let Some((name, value)) = declaration.split_once(':') else { continue };
let value = value.trim();
match name.trim().to_ascii_lowercase().as_str() {
"syntax" => {
let unquoted = value
.strip_prefix('"')
.and_then(|value| value.strip_suffix('"'))
.or_else(|| {
value
.strip_prefix('\'')
.and_then(|value| value.strip_suffix('\''))
})?;
if !unquoted.is_empty() {
syntax = Some(unquoted.to_string());
}
}
"inherits" => {
inherits = match value.to_ascii_lowercase().as_str() {
"true" => Some(true),
"false" => Some(false),
_ => None,
};
}
"initial-value" if !value.is_empty() => initial_value = Some(value.to_string()),
_ => {}
}
}
let syntax = syntax?;
if !matches!(
syntax.as_str(),
"*" | "<percentage>" | "<length>" | "<number>" | "<color>"
) {
return None;
}
if initial_value.is_none() && syntax != "*" {
return None;
}
let registration = RegisteredCustomProperty {
syntax,
inherits: inherits?,
initial_value,
};
if registration
.initial_value
.as_deref()
.is_some_and(|value| !registered_value_matches(&registration, value))
{
return None;
}
Some(registration)
}
fn registered_value_matches(registration: &RegisteredCustomProperty, value: &str) -> bool {
let value = value.trim();
match registration.syntax.as_str() {
"*" => !value.is_empty(),
"<percentage>" => value
.strip_suffix('%')
.and_then(|number| number.trim().parse::<f32>().ok())
.is_some_and(f32::is_finite),
"<number>" => value.parse::<f32>().ok().is_some_and(f32::is_finite),
"<color>" => crate::style::parse_color(value).is_some(),
"<length>" => {
if value.parse::<f32>().ok().is_some_and(|number| number == 0.0) {
return true;
}
let lower = value.to_ascii_lowercase();
[
"rem", "em", "ex", "vmin", "vmax", "dvw", "svw", "lvw", "dvh",
"svh", "lvh", "vw", "vh", "px", "pt",
]
.iter()
.any(|unit| {
lower
.strip_suffix(unit)
.and_then(|number| number.trim().parse::<f32>().ok())
.is_some_and(f32::is_finite)
})
}
_ => false,
}
}
/// Return the prelude after an exact ASCII-insensitive at-rule name.
///
/// The hand parser stores the text after `@`, so a prefix test would both
/// reject `@CONTAINER` and misclassify unknown rules such as
/// `@containerfoo`. The boundary accepts punctuation because whitespace is
/// optional before a parenthesized prelude.
fn at_rule_prelude<'a>(at: &'a str, expected: &str) -> Option<&'a str> {
let prefix = at.get(..expected.len())?;
if !prefix.eq_ignore_ascii_case(expected) {
return None;
}
let rest = &at[expected.len()..];
if rest.chars().next().is_some_and(|character| {
character.is_ascii_alphanumeric()
|| matches!(character, '_' | '-' | '\\')
|| !character.is_ascii()
}) {
return None;
}
let mut rest = rest.trim_start();
while let Some(comment) = rest.strip_prefix("/*") {
let end = comment.find("*/")?;
rest = comment[end + 2..].trim_start();
}
Some(rest.trim_end())
}
fn parse_container_query_list(prelude: &str) -> Option<Vec<ContainerQuery>> {
let queries = split_media_query_list(prelude)
.into_iter()
.map(parse_container_query)
.collect::<Option<Vec<_>>>()?;
(!queries.is_empty()).then_some(queries)
}
fn parse_container_query(input: &str) -> Option<ContainerQuery> {
let input = input.trim();
if input.is_empty() {
return None;
}
let starts_with_condition =
input.starts_with('(') || strip_ascii_keyword(input, "not").is_some();
let (name, condition) = if starts_with_condition {
(None, Some(input))
} else if let Some(split) = input.find(char::is_whitespace) {
let name = parse_container_query_name(&input[..split])?;
let condition = input[split..].trim();
(Some(name), (!condition.is_empty()).then_some(condition))
} else {
(Some(parse_container_query_name(input)?), None)
};
let condition = match condition {
Some(condition) => Some(parse_container_query_expr(condition)?),
None => None,
};
Some(ContainerQuery { name, condition })
}
fn parse_container_query_name(input: &str) -> Option<String> {
let mut input = cssparser::ParserInput::new(input.trim());
let mut parser = cssparser::Parser::new(&mut input);
let ident = parser.expect_ident_cloned().ok()?;
if !parser.is_exhausted() {
return None;
}
let lower = ident.to_ascii_lowercase();
if is_reserved_container_custom_ident(&lower) {
return None;
}
Some(ident.to_string())
}
fn is_reserved_container_custom_ident(lower: &str) -> bool {
matches!(
lower,
"none"
| "not"
| "and"
| "or"
| "default"
| "initial"
| "inherit"
| "unset"
| "revert"
| "revert-layer"
)
}
const MAX_CONTAINER_QUERY_DEPTH: usize = 64;
fn parse_container_query_expr(input: &str) -> Option<ContainerQueryExpr> {
parse_container_query_expr_at_depth(input, 0)
}
fn parse_container_query_expr_at_depth(input: &str, depth: usize) -> Option<ContainerQueryExpr> {
if depth >= MAX_CONTAINER_QUERY_DEPTH {
return None;
}
let input = input.trim();
let or_parts = split_supports_operator(input, "or");
let and_parts = split_supports_operator(input, "and");
// One grammar level is either a homogeneous AND chain or a homogeneous OR
// chain. Authors must parenthesize any mixture.
if or_parts.is_some() && and_parts.is_some() {
return None;
}
if let Some(parts) = or_parts {
return Some(ContainerQueryExpr::Or(
parts
.into_iter()
.map(|part| parse_container_query_in_parens(part, depth + 1))
.collect::<Option<_>>()?,
));
}
if let Some(parts) = and_parts {
return Some(ContainerQueryExpr::And(
parts
.into_iter()
.map(|part| parse_container_query_in_parens(part, depth + 1))
.collect::<Option<_>>()?,
));
}
if let Some(rest) = strip_ascii_keyword(input, "not") {
return Some(ContainerQueryExpr::Not(Box::new(
parse_container_query_in_parens(rest, depth + 1)?,
)));
}
parse_container_query_in_parens(input, depth + 1)
}
fn parse_container_query_in_parens(input: &str, depth: usize) -> Option<ContainerQueryExpr> {
if depth >= MAX_CONTAINER_QUERY_DEPTH {
return None;
}
let inner = enclosing_parenthesized(input)?;
if let Some(feature) = parse_container_size_feature(inner) {
return Some(feature);
}
parse_container_query_expr_at_depth(inner, depth + 1).or_else(|| {
is_general_enclosed_container_query(inner).then_some(ContainerQueryExpr::Unknown)
})
}
fn is_general_enclosed_container_query(input: &str) -> bool {
let mut input = cssparser::ParserInput::new(input.trim());
let mut parser = cssparser::Parser::new(&mut input);
matches!(
parser.next(),
Ok(cssparser::Token::Ident(_)) | Ok(cssparser::Token::Function(_))
)
}
fn strip_ascii_keyword<'a>(input: &'a str, keyword: &str) -> Option<&'a str> {
if !input.get(..keyword.len())?.eq_ignore_ascii_case(keyword) {
return None;
}
let rest = &input[keyword.len()..];
rest.chars().next()
.filter(|character| character.is_whitespace())
.map(|_| rest.trim_start())
}
fn parse_container_size_feature(input: &str) -> Option<ContainerQueryExpr> {
if let Some(axis) = parse_container_query_axis(input) {
return Some(ContainerQueryExpr::Feature(ContainerSizeFeature {
axis,
comparison: ContainerQueryComparison::GreaterThan,
length: ContainerQueryLength::Px(0.0),
}));
}
if let Some((name, value)) = input.split_once(':') {
let (comparison, axis) = match name.trim().to_ascii_lowercase().as_str() {
"min-width" => (ContainerQueryComparison::Min, ContainerQueryAxis::Width),
"max-width" => (ContainerQueryComparison::Max, ContainerQueryAxis::Width),
"width" => (ContainerQueryComparison::Equal, ContainerQueryAxis::Width),
"min-height" => (ContainerQueryComparison::Min, ContainerQueryAxis::Height),
"max-height" => (ContainerQueryComparison::Max, ContainerQueryAxis::Height),
"height" => (ContainerQueryComparison::Equal, ContainerQueryAxis::Height),
"min-inline-size" => (ContainerQueryComparison::Min, ContainerQueryAxis::InlineSize),
"max-inline-size" => (ContainerQueryComparison::Max, ContainerQueryAxis::InlineSize),
"inline-size" => (ContainerQueryComparison::Equal, ContainerQueryAxis::InlineSize),
"min-block-size" => (ContainerQueryComparison::Min, ContainerQueryAxis::BlockSize),
"max-block-size" => (ContainerQueryComparison::Max, ContainerQueryAxis::BlockSize),
"block-size" => (ContainerQueryComparison::Equal, ContainerQueryAxis::BlockSize),
_ => return None,
};
return Some(ContainerQueryExpr::Feature(ContainerSizeFeature {
axis,
comparison,
length: parse_container_query_length(value)?,
}));
}
let (operands, operators) = split_container_range(input)?;
let make_feature =
|axis: ContainerQueryAxis, operator: &str, value: &str, axis_on_left: bool| {
let comparison = match (operator, axis_on_left) {
(">=", true) | ("<=", false) => ContainerQueryComparison::Min,
("<=", true) | (">=", false) => ContainerQueryComparison::Max,
(">", true) | ("<", false) => ContainerQueryComparison::GreaterThan,
("<", true) | (">", false) => ContainerQueryComparison::LessThan,
("=", _) => ContainerQueryComparison::Equal,
_ => return None,
};
Some(ContainerQueryExpr::Feature(ContainerSizeFeature {
axis,
comparison,
length: parse_container_query_length(value)?,
}))
};
match (operands.as_slice(), operators.as_slice()) {
([left, right], [operator]) => {
if let Some(axis) = parse_container_query_axis(left) {
make_feature(axis, operator, right, true)
} else {
let axis = parse_container_query_axis(right)?;
make_feature(axis, operator, left, false)
}
}
([lower, middle, upper], [lower_operator, upper_operator]) => {
// Chained ranges must point consistently through the feature:
// `10px < width <= 20px` or the fully reversed equivalent.
// Equality is valid only in a single comparison, and a mixed
// direction such as `10px < width > 20px` is not a range.
let forward = matches!(*lower_operator, "<" | "<=")
&& matches!(*upper_operator, "<" | "<=");
let reverse = matches!(*lower_operator, ">" | ">=")
&& matches!(*upper_operator, ">" | ">=");
if !forward && !reverse {
return None;
}
let axis = parse_container_query_axis(middle)?;
Some(ContainerQueryExpr::And(vec![
make_feature(axis, lower_operator, lower, false)?,
make_feature(axis, upper_operator, upper, true)?,
]))
}
_ => None,
}
}
fn parse_container_query_axis(input: &str) -> Option<ContainerQueryAxis> {
match input.trim().to_ascii_lowercase().as_str() {
"width" => Some(ContainerQueryAxis::Width),
"height" => Some(ContainerQueryAxis::Height),
"inline-size" => Some(ContainerQueryAxis::InlineSize),
"block-size" => Some(ContainerQueryAxis::BlockSize),
_ => None,
}
}
fn split_container_range(input: &str) -> Option<(Vec<&str>, Vec<&str>)> {
let mut operands = Vec::new();
let mut operators = Vec::new();
let mut start = 0usize;
let bytes = input.as_bytes();
let mut index = 0usize;
while index < bytes.len() {
if matches!(bytes[index], b'<' | b'>' | b'=') {
let end = if bytes.get(index + 1) == Some(&b'=') {
index + 2
} else {
index + 1
};
let operand = input[start..index].trim();
if operand.is_empty() {
return None;
}
operands.push(operand);
operators.push(&input[index..end]);
start = end;
index = end;
continue;
}
index += 1;
}
if operators.is_empty() || operators.len() > 2 {
return None;
}
let operand = input[start..].trim();
if operand.is_empty() {
return None;
}
operands.push(operand);
Some((operands, operators))
}
fn parse_container_query_length(input: &str) -> Option<ContainerQueryLength> {
let input = input.trim().to_ascii_lowercase();
let number = |value: &str| {
value.parse::<f32>().ok().filter(|value| value.is_finite())
};
if let Some(value) = input.strip_suffix("rem").and_then(number) {
return Some(ContainerQueryLength::Rem(value));
}
if let Some(value) = input.strip_suffix("em").and_then(number) {
return Some(ContainerQueryLength::Em(value));
}
if let Some(value) = input.strip_suffix("px").and_then(number) {
return Some(ContainerQueryLength::Px(value));
}
number(&input).filter(|value| *value == 0.0).map(ContainerQueryLength::Px)
}
/// Evaluate the boolean subset of CSS Conditional Rules used by modern
/// framework stylesheets. This follows the same shape as Gecko's
/// SupportsCondition tree: declaration/selector leaves, arbitrary grouping,
/// unary `not`, and top-level `and`/`or` chains. Unknown or malformed future
/// syntax is false instead of optimistically enabling a fallback branch.
pub(crate) fn supports_condition_applies(condition: &str) -> bool {
let condition = condition.trim();
let condition = condition
.strip_prefix("@supports")
.or_else(|| condition.strip_prefix("supports"))
.unwrap_or(condition)
.trim();
eval_supports_condition(condition).unwrap_or(false)
}
fn eval_supports_condition(condition: &str) -> Option<bool> {
let condition = condition.trim();
if condition.is_empty() || !balanced_supports_syntax(condition) {
return None;
}
if let Some(inner) = enclosing_parenthesized(condition) {
return eval_supports_condition(inner);
}
if condition
.get(..3)
.is_some_and(|prefix| prefix.eq_ignore_ascii_case("not"))
&& condition
.as_bytes()
.get(3)
.is_some_and(u8::is_ascii_whitespace)
{
return eval_supports_condition(condition[3..].trim()).map(|result| !result);
}
let or_parts = split_supports_operator(condition, "or");
let and_parts = split_supports_operator(condition, "and");
// CSS Conditional Rules does not permit `and` and `or` at the same
// nesting level. Treat the entire condition as invalid rather than
// inventing JavaScript-like precedence.
if or_parts.is_some() && and_parts.is_some() {
return None;
}
if let Some(parts) = or_parts {
let results = parts
.into_iter()
.map(eval_supports_condition)
.collect::<Option<Vec<_>>>()?;
return Some(results.into_iter().any(|result| result));
}
if let Some(parts) = and_parts {
let results = parts
.into_iter()
.map(eval_supports_condition)
.collect::<Option<Vec<_>>>()?;
return Some(results.into_iter().all(|result| result));
}
let lower = condition.to_ascii_lowercase();
if lower.starts_with("selector(") && condition.ends_with(')') {
let inner = &condition["selector(".len()..condition.len() - 1];
return Some(obscura_dom::selector::parse_selector(inner.trim()).is_ok());
}
let Some((name, value)) = condition.split_once(':') else {
// A syntactically balanced unknown functional condition is a valid
// general-enclosed leaf whose result is false. Everything else is a
// malformed condition, important for `not`: invalid syntax must not
// become true merely because it was negated.
return condition
.find('(')
.filter(|index| *index > 0 && condition.ends_with(')'))
.map(|_| false);
};
Some(crate::style::supports_declaration(name, value))
}
fn balanced_supports_syntax(condition: &str) -> bool {
let mut stack = Vec::new();
let mut quote = None;
let mut escaped = false;
for character in condition.chars() {
if escaped {
escaped = false;
continue;
}
if character == '\\' {
escaped = true;
continue;
}
if let Some(active) = quote {
if character == active {
quote = None;
}
continue;
}
match character {
'\'' | '"' => quote = Some(character),
'(' => stack.push(')'),
'[' => stack.push(']'),
')' | ']' if stack.pop() != Some(character) => return false,
_ => {}
}
}
!escaped && quote.is_none() && stack.is_empty()
}
/// Return the contents when one outer parenthesis pair encloses the complete
/// expression. A declaration leaf such as `(display:grid)` intentionally
/// becomes `display:grid` and is handled after boolean operators.
fn enclosing_parenthesized(condition: &str) -> Option<&str> {
if !condition.starts_with('(') {
return None;
}
let mut depth = 0i32;
let mut quote = None;
for (index, character) in condition.char_indices() {
if let Some(active) = quote {
if character == active {
quote = None;
}
continue;
}
match character {
'\'' | '"' => quote = Some(character),
'(' => depth += 1,
')' => {
depth -= 1;
if depth < 0 {
return None;
}
if depth == 0 {
return (index + character.len_utf8() == condition.len())
.then_some(&condition[1..index]);
}
}
_ => {}
}
}
None
}
fn split_supports_operator<'a>(condition: &'a str, operator: &str) -> Option<Vec<&'a str>> {
let bytes = condition.as_bytes();
let operator = operator.as_bytes();
let mut parts = Vec::new();
let mut start = 0usize;
let mut index = 0usize;
let mut depth = 0i32;
let mut quote = None;
while index < bytes.len() {
let byte = bytes[index];
if let Some(active) = quote {
if byte == active {
quote = None;
} else if byte == b'\\' {
index += 1;
}
index += 1;
continue;
}
match byte {
b'\'' | b'"' => quote = Some(byte),
b'(' => depth += 1,
b')' => {
depth -= 1;
if depth < 0 {
return None;
}
}
_ if depth == 0
&& index + operator.len() <= bytes.len()
&& bytes[index..index + operator.len()].eq_ignore_ascii_case(operator)
&& index > 0
&& bytes[index - 1].is_ascii_whitespace()
&& bytes
.get(index + operator.len())
.is_some_and(u8::is_ascii_whitespace) =>
{
let part = condition[start..index].trim();
if part.is_empty() {
return None;
}
parts.push(part);
index += operator.len();
start = index;
continue;
}
_ => {}
}
index += 1;
}
if depth != 0 || quote.is_some() || parts.is_empty() {
return None;
}
let tail = condition[start..].trim();
if tail.is_empty() {
return None;
}
parts.push(tail);
Some(parts)
}
/// Coarse `@media` evaluation against the live layout viewport.
///
/// Real stylesheets format media features inconsistently
/// (`max-width:750px`, `max-width: 750px`, even `max-width : 750px`), so this
/// strips whitespace before scanning: CSS gives no semantic meaning to spaces
/// inside `(feature: value)`, so it's safe to discard them wholesale rather
/// than special-case every formatting variant a site might use.
pub(crate) fn media_query_applies_for_viewport(
query: &str,
viewport: (f32, f32),
) -> bool {
// A media-query list is an OR, not an AND. Evaluate each top-level comma
// arm independently (commas inside functions such as rgb() / calc() are
// not list separators). This also keeps an inapplicable `print` arm from
// suppressing a later screen/feature arm.
split_media_query_list(query)
.into_iter()
.any(|query| single_media_query_applies_for_viewport(query, viewport))
}
fn single_media_query_applies_for_viewport(
query: &str,
viewport: (f32, f32),
) -> bool {
let viewport_w = viewport.0;
let viewport_h = viewport.1;
let query = query.trim().strip_prefix("@media").unwrap_or(query).trim();
let compact: String = query
.chars()
.filter(|c| !c.is_whitespace())
.flat_map(|c| c.to_lowercase())
.collect();
// Tailwind expresses every `max-*` breakpoint as the negation of a
// min-width query (`not all and (min-width:40rem)`). Evaluate the inner
// condition and invert it; treating all `not all` queries as permanently
// false makes mutually exclusive responsive utilities apply together at
// desktop widths. Unknown browser-targeting features still conservatively
// evaluate true inside and therefore false after negation.
if let Some(inner) = compact.strip_prefix("notalland") {
return !single_media_query_applies_for_viewport(inner, viewport);
}
if compact == "notall" {
return false;
}
if compact.contains("print") {
return false;
}
// Color-scheme: we render the light (default) context. A site's
// `@media (prefers-color-scheme: dark)` block must NOT apply on top of its
// light defaults (that is what was leaking dark backgrounds, e.g. near
// black inline <code>); a `:light` block should apply.
if compact.contains("prefers-color-scheme:dark") {
return false;
}
// Reduced-motion / high-contrast / inverted: default (no preference).
if compact.contains("prefers-reduced-motion:reduce")
|| compact.contains("prefers-contrast:more")
|| compact.contains("prefers-contrast:less")
|| compact.contains("inverted-colors:inverted")
|| compact.contains("forced-colors:active")
{
return false;
}
// Width constraints, both `min-width:`/`max-width:` and the modern range
// forms `width>=Npx` / `(Npx<=width)`.
if let Some(px) = extract_length(&compact, "max-width:", viewport, LengthAxis::Width) {
if viewport_w > px {
return false;
}
}
if let Some(px) = extract_length(&compact, "min-width:", viewport, LengthAxis::Width) {
if viewport_w < px {
return false;
}
}
if let Some(px) = extract_length(&compact, "width<=", viewport, LengthAxis::Width) {
if viewport_w > px {
return false;
}
}
if let Some(px) = extract_length(&compact, "width>=", viewport, LengthAxis::Width) {
if viewport_w < px {
return false;
}
}
if let Some(px) = extract_length(&compact, "width>", viewport, LengthAxis::Width) {
if viewport_w <= px {
return false;
}
}
if let Some(px) = extract_length(&compact, "width<", viewport, LengthAxis::Width) {
if viewport_w >= px {
return false;
}
}
if let Some(px) = extract_length_before(&compact, "<=width", viewport, LengthAxis::Width) {
if viewport_w < px {
return false;
}
}
if let Some(px) = extract_length_before(&compact, "<width", viewport, LengthAxis::Width) {
if viewport_w <= px {
return false;
}
}
if let Some(px) = extract_length_before(&compact, ">=width", viewport, LengthAxis::Width) {
if viewport_w > px {
return false;
}
}
if let Some(px) = extract_length_before(&compact, ">width", viewport, LengthAxis::Width) {
if viewport_w >= px {
return false;
}
}
if let Some(px) = extract_length(&compact, "max-height:", viewport, LengthAxis::Height) {
if viewport_h > px {
return false;
}
}
if let Some(px) = extract_length(&compact, "min-height:", viewport, LengthAxis::Height) {
if viewport_h < px {
return false;
}
}
if let Some(px) = extract_length(&compact, "height<=", viewport, LengthAxis::Height) {
if viewport_h > px {
return false;
}
}
if let Some(px) = extract_length(&compact, "height>=", viewport, LengthAxis::Height) {
if viewport_h < px {
return false;
}
}
if let Some(px) = extract_length(&compact, "height>", viewport, LengthAxis::Height) {
if viewport_h <= px {
return false;
}
}
if let Some(px) = extract_length(&compact, "height<", viewport, LengthAxis::Height) {
if viewport_h >= px {
return false;
}
}
if let Some(px) = extract_length_before(&compact, "<=height", viewport, LengthAxis::Height) {
if viewport_h < px {
return false;
}
}
if let Some(px) = extract_length_before(&compact, "<height", viewport, LengthAxis::Height) {
if viewport_h <= px {
return false;
}
}
if let Some(px) = extract_length_before(&compact, ">=height", viewport, LengthAxis::Height) {
if viewport_h > px {
return false;
}
}
if let Some(px) = extract_length_before(&compact, ">height", viewport, LengthAxis::Height) {
if viewport_h >= px {
return false;
}
}
if compact.contains("orientation:portrait") && viewport_w > viewport_h {
return false;
}
if compact.contains("orientation:landscape") && viewport_h > viewport_w {
return false;
}
true
}
/// Combine a nested selector `child` with its enclosing `parent` (CSS Nesting).
/// `&` in the child is replaced by the parent; a child with no `&` becomes a
/// descendant (`parent child`). Both may be comma lists, so the result is the
/// cartesian product. `parent` is None only at the stylesheet top level, where
/// the child is returned unchanged.
fn combine_selectors(parent: &str, child: &str) -> String {
let pparts = split_selector_list(parent);
let cparts = split_selector_list(child);
let mut out: Vec<String> = Vec::new();
for c in &cparts {
let c = c.trim();
if c.is_empty() {
continue;
}
for p in &pparts {
let p = p.trim();
if c.contains('&') {
out.push(c.replace('&', p));
} else {
out.push(format!("{} {}", p, c));
}
}
}
out.join(", ")
}
/// Flatten a rule body that may contain nested rules (CSS Nesting) into flat
/// `(selector, declarations)` pairs. The parser hands us the whole body of a
/// rule; here we separate its own declarations from nested `sel { ... }` blocks
/// (and nested `@media`/`@supports`/`@layer` at-rules, which keep the parent's
/// selector), emit `(sel, own-declarations)`, and recurse into each nested rule
/// with the combined selector. Without this, Tailwind v4 / modern-framework CSS
/// (which nests almost everything) loses the nested utility rules entirely.
fn denest(
sel: &str,
body: &str,
rules: &mut Vec<ParsedRule>,
viewport: (f32, f32),
container_conditions: &mut Vec<ContainerConditionNode>,
container_condition_id: ContainerConditionId,
layers: &mut LayerRegistry,
current_layer: Option<&LayerOrder>,
) {
let chars: Vec<char> = body.chars().collect();
let n = chars.len();
let mut i = 0;
let mut seg = 0; // start of the current declaration / nested prelude
let mut own = String::new();
let mut quote: Option<char> = None;
let mut comment = false;
let mut paren = 0i32;
while i < n {
let c = chars[i];
if comment {
if c == '*' && chars.get(i + 1) == Some(&'/') {
comment = false;
i += 2;
continue;
}
i += 1;
continue;
}
if let Some(q) = quote {
if c == q {
quote = None;
}
i += 1;
continue;
}
if c == '/' && chars.get(i + 1) == Some(&'*') {
comment = true;
i += 2;
continue;
}
match c {
'\'' | '"' => quote = Some(c),
'(' => paren += 1,
')' => paren = (paren - 1).max(0),
'{' if paren == 0 => {
let prelude: String = chars[seg..i].iter().collect();
// Find the matching close brace (quote/comment aware).
let mut depth = 1;
let mut j = i + 1;
let (mut q2, mut cm2) = (None::<char>, false);
while j < n && depth > 0 {
let cj = chars[j];
if cm2 {
if cj == '*' && chars.get(j + 1) == Some(&'/') {
cm2 = false;
j += 2;
continue;
}
} else if let Some(qq) = q2 {
if cj == qq {
q2 = None;
}
} else if cj == '/' && chars.get(j + 1) == Some(&'*') {
cm2 = true;
j += 2;
continue;
} else if cj == '\'' || cj == '"' {
q2 = Some(cj);
} else if cj == '{' {
depth += 1;
} else if cj == '}' {
depth -= 1;
}
j += 1;
}
let inner: String = chars[i + 1..j.saturating_sub(1).max(i + 1)].iter().collect();
let pre = prelude.trim();
if let Some(at) = pre.strip_prefix('@') {
// A nested at-rule keeps the enclosing selector for its body.
if let Some(prelude) = at_rule_prelude(at, "media") {
if media_query_applies_for_viewport(prelude, viewport) {
denest(
sel,
&inner,
rules,
viewport,
container_conditions,
container_condition_id,
layers,
current_layer,
);
}
} else if let Some(prelude) = at_rule_prelude(at, "supports") {
if supports_condition_applies(prelude) {
denest(
sel,
&inner,
rules,
viewport,
container_conditions,
container_condition_id,
layers,
current_layer,
);
}
} else if let Some(prelude) = at_rule_prelude(at, "container") {
if let Some(alternatives) = parse_container_query_list(prelude) {
if let Ok(raw_id) = u32::try_from(container_conditions.len()) {
let id = ContainerConditionId(raw_id);
container_conditions.push(ContainerConditionNode {
parent: container_condition_id,
alternatives,
});
denest(
sel,
&inner,
rules,
viewport,
container_conditions,
id,
layers,
current_layer,
);
}
}
} else if let Some(prelude) = at_rule_prelude(at, "layer") {
let layer = if prelude.trim().is_empty() {
Some(layers.register_anonymous(current_layer))
} else {
layers.register_named(current_layer, prelude)
};
if let Some(layer) = layer {
denest(
sel,
&inner,
rules,
viewport,
container_conditions,
container_condition_id,
layers,
Some(&layer),
);
}
}
} else if !pre.is_empty() {
let full = combine_selectors(sel, pre);
denest(
&full,
&inner,
rules,
viewport,
container_conditions,
container_condition_id,
layers,
current_layer,
);
}
i = j;
seg = i;
continue;
}
';' if paren == 0 => {
let d: String = chars[seg..i].iter().collect();
let d = d.trim();
if let Some(at) = d.strip_prefix('@') {
if let Some(prelude) = at_rule_prelude(at, "layer") {
layers.register_statement(current_layer, prelude);
}
} else if !d.is_empty() {
own.push_str(d);
own.push(';');
}
i += 1;
seg = i;
continue;
}
_ => {}
}
i += 1;
}
let tail: String = chars[seg..].iter().collect();
let tail = tail.trim();
if !tail.is_empty() && !tail.contains('{') {
own.push_str(tail);
own.push(';');
}
if !own.trim().is_empty() {
for s in split_selector_list(sel) {
let s = s.trim();
if !s.is_empty() {
rules.push(ParsedRule {
selector: s.to_string(),
declarations: own.clone(),
container_condition_id,
layer: current_layer.cloned(),
});
}
}
}
}
/// Split a CSS selector list at top-level commas only, leaving commas inside
/// `()` (e.g. `:is(a, b)`, `:not(.x, .y)`) and `[]` (`[attr="a,b"]`) and quoted
/// strings intact. A naive `split(',')` shatters those grouped selectors into
/// fragments that fail to compile, dropping the whole rule.
fn split_selector_list(sel: &str) -> Vec<String> {
let mut out = Vec::new();
let mut depth_paren = 0i32;
let mut depth_brack = 0i32;
let mut quote: Option<char> = None;
let mut cur = String::new();
let mut chars = sel.chars().peekable();
while let Some(c) = chars.next() {
match c {
'\\' => {
cur.push(c);
if let Some(n) = chars.next() {
cur.push(n);
}
}
_ if quote == Some(c) => {
quote = None;
cur.push(c);
}
'"' | '\'' if quote.is_none() => {
quote = Some(c);
cur.push(c);
}
'(' if quote.is_none() => {
depth_paren += 1;
cur.push(c);
}
')' if quote.is_none() => {
depth_paren -= 1;
cur.push(c);
}
'[' if quote.is_none() => {
depth_brack += 1;
cur.push(c);
}
']' if quote.is_none() => {
depth_brack -= 1;
cur.push(c);
}
',' if quote.is_none() && depth_paren == 0 && depth_brack == 0 => {
out.push(std::mem::take(&mut cur));
}
_ => cur.push(c),
}
}
out.push(cur);
out
}
#[derive(Clone, Copy)]
enum LengthAxis {
Width,
Height,
}
/// Read a CSS length immediately following `prop`. Media-query `em` and `rem`
/// units resolve against the initial font size (16 CSS px), not an element's
/// computed font. Modern utility frameworks deliberately use those units for
/// breakpoints, so treating only `px` as typed made every `min-width:64rem`
/// desktop rule unconditional.
fn extract_length(
s: &str,
prop: &str,
viewport: (f32, f32),
axis: LengthAxis,
) -> Option<f32> {
let start = s.find(prop)? + prop.len();
let rest = &s[start..];
if let Some(inner) = rest.strip_prefix("calc(") {
let end = inner.find(')')?;
return eval_length_sum(&inner[..end], viewport, axis);
}
parse_length_prefix(rest, viewport, axis)
}
/// Read the length immediately before a range marker (`64rem<=width`).
fn extract_length_before(
s: &str,
marker: &str,
viewport: (f32, f32),
axis: LengthAxis,
) -> Option<f32> {
let end = s.find(marker)?;
let prefix = &s[..end];
let start = prefix
.rfind(|c: char| matches!(c, '(' | ')' | ':' | ','))
.map_or(0, |idx| idx + 1);
let value = &prefix[start..];
if let Some(inner) = value.strip_prefix("calc(") {
return eval_length_sum(inner, viewport, axis);
}
parse_length_prefix(value, viewport, axis)
}
fn parse_length_prefix(
input: &str,
viewport: (f32, f32),
axis: LengthAxis,
) -> Option<f32> {
let numeric_len = input
.char_indices()
.take_while(|(_, c)| c.is_ascii_digit() || matches!(c, '.' | '+' | '-'))
.last()
.map_or(0, |(idx, c)| idx + c.len_utf8());
if numeric_len == 0 {
return None;
}
let value = input[..numeric_len].parse::<f32>().ok()?;
let unit: String = input[numeric_len..]
.chars()
.take_while(|c| c.is_ascii_alphabetic() || *c == '%')
.collect();
let px = match unit.as_str() {
"" | "px" => value,
"em" | "rem" => value * 16.0,
"vw" => value * viewport.0 / 100.0,
"vh" => value * viewport.1 / 100.0,
"vmin" => value * viewport.0.min(viewport.1) / 100.0,
"vmax" => value * viewport.0.max(viewport.1) / 100.0,
"in" => value * 96.0,
"cm" => value * 96.0 / 2.54,
"mm" => value * 96.0 / 25.4,
"q" => value * 96.0 / 101.6,
"pt" => value * 96.0 / 72.0,
"pc" => value * 16.0,
"%" => match axis {
LengthAxis::Width => value * viewport.0 / 100.0,
LengthAxis::Height => value * viewport.1 / 100.0,
},
_ => return None,
};
px.is_finite().then_some(px)
}
/// Sum the common media-query `calc()` form (`64rem - 1px`) left to right.
fn eval_length_sum(
expr: &str,
viewport: (f32, f32),
axis: LengthAxis,
) -> Option<f32> {
let mut total = 0.0;
let mut sign = 1.0;
let mut term = String::new();
let flush = |term: &mut String, sign: f32, total: &mut f32| -> Option<()> {
let value = parse_length_prefix(term, viewport, axis)?;
*total += sign * value;
term.clear();
Some(())
};
for (idx, c) in expr.char_indices() {
match c {
'+' if idx > 0 => {
flush(&mut term, sign, &mut total)?;
sign = 1.0;
}
'-' if idx > 0 => {
flush(&mut term, sign, &mut total)?;
sign = -1.0;
}
_ => term.push(c),
}
}
flush(&mut term, sign, &mut total)?;
Some(total)
}
fn split_media_query_list(query: &str) -> Vec<&str> {
let mut parts = Vec::new();
let mut depth = 0i32;
let mut quote: Option<char> = None;
let mut start = 0usize;
for (idx, c) in query.char_indices() {
match c {
_ if quote == Some(c) => quote = None,
'\'' | '"' if quote.is_none() => quote = Some(c),
'(' if quote.is_none() => depth += 1,
')' if quote.is_none() => depth = (depth - 1).max(0),
',' if quote.is_none() && depth == 0 => {
parts.push(query[start..idx].trim());
start = idx + 1;
}
_ => {}
}
}
parts.push(query[start..].trim());
parts
}
#[cfg(test)]
mod tests {
use super::*;
fn condition_arena_root() -> Vec<ContainerConditionNode> {
vec![ContainerConditionNode {
parent: ContainerConditionId::NONE,
alternatives: Vec::new(),
}]
}
fn cascade_layer_target(
sources: &[&str],
inline_css: Option<&str>,
) -> (LayoutStyle, HashMap<String, String>, Option<LayoutStyle>) {
let tree = obscura_dom::parse_html(r#"<div id="target" class="target"></div>"#);
let target = tree.get_element_by_id("target").unwrap();
let source_strings = sources
.iter()
.map(|source| (*source).to_string())
.collect::<Vec<_>>();
let sheet = Stylesheet::parse(&tree, &source_strings);
let mut matcher = tree.matcher();
let mut style = LayoutStyle::default();
let effective = sheet
.apply(
&tree,
&mut matcher,
target,
Some("target"),
&["target".to_string()],
"div",
&mut style,
&HashMap::new(),
inline_css,
)
.unwrap_or_default();
let before = sheet
.pseudo_styles(&tree, &mut matcher, target, &effective, &style)
.0;
(style, effective, before)
}
#[test]
fn layer_order_statement_beats_block_source_order() {
let (style, _, _) = cascade_layer_target(
&[r#"
@layer reset, components, utilities;
@layer utilities { #target { width:320px } }
@layer components { #target { width:100% } }
"#],
None,
);
assert_eq!(style.width, crate::Dimension::Px(320.0));
}
#[test]
fn unlayered_normal_beats_layered_higher_specificity() {
let (style, _, _) = cascade_layer_target(
&[r#"
@layer utilities { #target { width:320px } }
.target { width:200px }
"#],
None,
);
assert_eq!(style.width, crate::Dimension::Px(200.0));
}
#[test]
fn important_layer_order_is_reversed_and_beats_unlayered() {
let css = r#"
@layer reset, overrides;
@layer overrides { #target { width:400px !important } }
@layer reset { .target { width:100px !important } }
#target { width:300px !important }
"#;
let (style, _, _) = cascade_layer_target(
&[css],
Some("width:500px"),
);
assert_eq!(
style.width,
crate::Dimension::Px(100.0),
"the earliest layered important declaration beats later layers, unlayered author rules, and normal inline style"
);
let (inline_important, _, _) =
cascade_layer_target(&[css], Some("width:500px !important"));
assert_eq!(
inline_important.width,
crate::Dimension::Px(500.0),
"important inline style remains strongest within the author origin"
);
}
#[test]
fn layer_order_applies_to_custom_properties_and_pseudos() {
let (style, props, before) = cascade_layer_target(
&[r#"
@layer base, theme;
@layer theme {
#target { --normal-size:30px; --critical-size:31px !important }
#target::before { content:"theme"; width:30px }
}
@layer base {
#target { --normal-size:10px; --critical-size:11px !important }
#target::before { content:"base" !important; width:10px }
}
#target { width:var(--normal-size); height:var(--critical-size) }
"#],
None,
);
assert_eq!(props.get("--normal-size").map(String::as_str), Some("30px"));
assert_eq!(props.get("--critical-size").map(String::as_str), Some("11px"));
assert_eq!(style.width, crate::Dimension::Px(30.0));
assert_eq!(style.height, crate::Dimension::Px(11.0));
let before = before.expect("the layered ::before content should materialize");
assert_eq!(before.before_content.as_deref(), Some("base"));
assert_eq!(before.width, crate::Dimension::Px(30.0));
}
#[test]
fn nested_and_anonymous_layers_keep_parent_direct_precedence() {
let (style, _, _) = cascade_layer_target(
&[r#"
@layer framework {
@layer reset, components;
#target { width:90px; height:90px !important }
@layer components {
#target { width:30px; height:30px !important }
}
@layer reset {
#target { width:10px; height:10px !important }
}
@layer {
#target { width:60px; height:60px !important }
}
}
"#],
None,
);
assert_eq!(
style.width,
crate::Dimension::Px(90.0),
"direct normal declarations are the parent layer's implicit final sub-layer"
);
assert_eq!(
style.height,
crate::Dimension::Px(10.0),
"nested important order reverses, making the first named child strongest"
);
}
#[test]
fn layer_registry_spans_multiple_stylesheet_sources() {
let (style, _, _) = cascade_layer_target(
&[
"@layer base, utilities; @layer utilities { #target { width:320px } }",
"@layer base { #target { width:100% } }",
],
None,
);
assert_eq!(style.width, crate::Dimension::Px(320.0));
}
#[test]
fn generated_content_resolves_host_attributes_and_resets() {
let tree = obscura_dom::parse_html(
r#"<button id="cta" data-label="Get Started"></button>"#,
);
let cta = tree.query_selector("#cta").unwrap().unwrap();
assert_eq!(
extract_content("content:attr(data-label)", &tree, cta),
Some(Some(vec![crate::GeneratedContentItem::Text(
"Get Started".to_string()
)]))
);
assert_eq!(
extract_content(r#"content:"fallback";content:none"#, &tree, cta),
Some(None)
);
}
#[test]
fn generated_content_parses_counter_items_and_styles() {
let tree = obscura_dom::parse_html(r#"<span id="line"></span>"#);
let line = tree.query_selector("#line").unwrap().unwrap();
assert_eq!(
extract_content(
r#"content:"[" counters(section, ".", upper-roman) "] " counter(line)"#,
&tree,
line,
),
Some(Some(vec![
crate::GeneratedContentItem::Text("[".to_string()),
crate::GeneratedContentItem::Counters {
name: "section".to_string(),
separator: ".".to_string(),
style: crate::GeneratedCounterStyle::UpperRoman,
},
crate::GeneratedContentItem::Text("] ".to_string()),
crate::GeneratedContentItem::Counter {
name: "line".to_string(),
style: crate::GeneratedCounterStyle::Decimal,
},
]))
);
assert_eq!(
format_counter_value(27, crate::GeneratedCounterStyle::LowerAlpha),
"aa"
);
assert_eq!(
format_counter_value(14, crate::GeneratedCounterStyle::UpperRoman),
"XIV"
);
assert_eq!(
format_counter_value(-4, crate::GeneratedCounterStyle::DecimalLeadingZero),
"-04"
);
}
#[test]
fn keyframes_retain_every_animation_offset() {
let css = r#"
@keyframes dismiss {
from { opacity: 1; visibility: visible; }
50% { opacity: .5; }
to { opacity: 0; visibility: hidden; }
}
@-webkit-keyframes slide {
0% { transform: translateX(0); }
100% { transform: translateX(20px); }
}
"#;
let keyframes: HashMap<_, _> = extract_keyframes(css).into_iter().collect();
let dismiss = normalized_keyframe_offsets(&keyframes["dismiss"].stops);
assert_eq!(
dismiss.iter().map(|(offset, _)| *offset).collect::<Vec<_>>(),
[0.0, 0.5, 1.0]
);
assert!(dismiss[0].1.declarations.contains("opacity: 1"));
assert!(dismiss[2].1.declarations.contains("visibility: hidden"));
let slide = normalized_keyframe_offsets(&keyframes["slide"].stops);
assert_eq!(
slide.iter().map(|(offset, _)| *offset).collect::<Vec<_>>(),
[0.0, 1.0]
);
assert!(slide[1].1.declarations.contains("translateX(20px)"));
}
fn sampled_animation_style(css: &str, sample_ms: f32, target_id: &str) -> LayoutStyle {
let tree = obscura_dom::parse_html(&format!(r#"<div id="{target_id}"></div>"#));
let target = tree.get_element_by_id(target_id).unwrap();
let sheet = Stylesheet::parse_for_viewport_at_animation_time(
&tree,
&[css.to_string()],
(1280.0, 720.0),
crate::AnimationSampleTime {
milliseconds: sample_ms,
},
);
let node = tree.get_node(target).unwrap();
let element = node.as_element().unwrap();
let mut matcher = tree.matcher();
let mut style = LayoutStyle::default();
sheet.apply(
&tree,
&mut matcher,
target,
node.get_attribute("id"),
&[],
element.local.as_ref(),
&mut style,
&HashMap::new(),
None,
);
style
}
fn sampled_fade(extra: &str, sample_ms: f32) -> f32 {
let css = format!(
r#"
@keyframes fade {{ from {{ opacity:0 }} to {{ opacity:1 }} }}
#target {{
opacity:.4;
animation:fade 1s linear infinite;
{extra}
}}
"#
);
sampled_animation_style(&css, sample_ms, "target")
.opacity
.unwrap_or(1.0)
}
fn assert_opacity(actual: f32, expected: f32) {
assert!(
(actual - expected).abs() < 0.0001,
"expected opacity {expected}, got {actual}"
);
}
#[test]
fn animation_samples_geometry_transform_and_paint_properties_at_t0() {
let css = r#"
@keyframes demo {
from {
transform:translateX(100px);
translate:20px 30px;
rotate:10deg;
scale:2 3;
width:300px;
height:80px;
min-width:120px;
max-height:90px;
inset:1px 2px 3px 4px;
margin:5px 6px 7px 8px;
padding:9px 10px 11px 12px;
gap:13px 14px;
flex-basis:150px;
color:rgb(10,20,30);
background:red;
border-color:blue green yellow black;
background-position:25% 40%;
visibility:hidden;
opacity:.25;
}
to { opacity:.75 }
}
#target { width:50px; animation:demo 10s both }
"#;
let style = sampled_animation_style(css, 0.0, "target");
assert_eq!(style.width, crate::Dimension::Px(300.0));
assert_eq!(style.height, crate::Dimension::Px(80.0));
assert_eq!(style.min_width, crate::Dimension::Px(120.0));
assert_eq!(style.max_height, crate::Dimension::Px(90.0));
assert_eq!(style.inset[3], Some(crate::Dimension::Px(4.0)));
assert_eq!(style.margin.left, 8.0);
assert_eq!(style.padding.bottom, 11.0);
assert_eq!(style.row_gap, Some(13.0));
assert_eq!(style.column_gap, Some(14.0));
assert_eq!(style.flex_basis, crate::Dimension::Px(150.0));
assert_eq!(style.color, Some([10, 20, 30, 255]));
assert_eq!(style.background_color, Some([255, 0, 0, 255]));
assert_eq!(style.border_model.colors.top, Some([0, 0, 255, 255]));
assert_eq!(style.border_model.colors.right, Some([0, 128, 0, 255]));
assert_eq!(style.visibility_hidden, Some(true));
assert_opacity(style.opacity.unwrap(), 0.25);
assert!(matches!(
style.transform_ops.as_slice(),
[crate::TransformOp::Translate(x, y)]
if x.value == crate::Dimension::Px(100.0)
&& y.value == crate::Dimension::Px(0.0)
));
assert_eq!(
style.individual_translate,
Some((crate::Dimension::Px(20.0), crate::Dimension::Px(30.0)))
);
assert_eq!(style.individual_rotate, Some(10.0));
assert_eq!(style.individual_scale, Some((2.0, 3.0)));
}
#[test]
fn animation_t0_geometry_reaches_the_real_layout_pass() {
let tree = obscura_dom::parse_html(
r#"
<style>
html,body { margin:0 }
#row { display:flex }
@keyframes size {
from { width:300px; height:20px }
to { width:400px; height:40px }
}
#target { width:50px; animation:size 10s both }
#sibling { width:10px; height:10px }
</style>
<div id="row"><div id="target"></div><div id="sibling"></div></div>
"#,
);
let target = tree.get_element_by_id("target").unwrap();
let sibling = tree.get_element_by_id("sibling").unwrap();
let laid = crate::dom::layout_dom(&tree, (800.0, 600.0));
assert_eq!(laid.rects[&target].width, 300.0);
assert_eq!(laid.rects[&target].height, 20.0);
assert_eq!(laid.rects[&sibling].x, 300.0);
}
#[test]
fn animation_sparse_tracks_ignore_unrelated_intermediate_keyframes() {
let css = r#"
@keyframes sparse {
from { width:100px; opacity:0; background-color:red }
50% { opacity:1 }
to { width:300px; opacity:0; background-color:blue }
}
#target { animation:sparse 1s linear both }
"#;
let style = sampled_animation_style(css, 500.0, "target");
assert_eq!(style.width, crate::Dimension::Px(200.0));
assert_opacity(style.opacity.unwrap(), 1.0);
assert_eq!(style.background_color, Some([128, 0, 128, 255]));
let implicit = r#"
@keyframes middle { 50% { width:150px } }
#target { width:50px; animation:middle 1s linear both }
"#;
assert_eq!(
sampled_animation_style(implicit, 250.0, "target").width,
crate::Dimension::Px(100.0)
);
assert_eq!(
sampled_animation_style(implicit, 750.0, "target").width,
crate::Dimension::Px(100.0)
);
}
#[test]
fn keyframe_duplicate_offsets_merge_per_property_and_ignore_important() {
let css = r#"
@keyframes merged {
0% { width:100px; color:red; opacity:.1 }
from { width:999px !important; opacity:.8 }
}
#target { width:40px; animation:merged 1s both }
"#;
let style = sampled_animation_style(css, 0.0, "target");
assert_eq!(style.width, crate::Dimension::Px(100.0));
assert_eq!(style.color, Some([255, 0, 0, 255]));
assert_opacity(style.opacity.unwrap(), 0.8);
}
#[test]
fn author_important_overrides_every_sampled_animation_property() {
let css = r#"
@keyframes forced { from, to { width:300px; background-color:red } }
#target {
animation:forced 1s both;
width:80px !important;
background-color:blue !important;
}
"#;
let style = sampled_animation_style(css, 0.0, "target");
assert_eq!(style.width, crate::Dimension::Px(80.0));
assert_eq!(style.background_color, Some([0, 0, 255, 255]));
}
#[test]
fn conditional_keyframes_and_empty_later_definitions_follow_browser_selection() {
let css = r#"
@keyframes chosen { from, to { width:222px } }
@media (max-width:100px) {
@keyframes chosen { from, to { width:111px } }
}
@supports (unknown-parity-property:value) {
@keyframes chosen { from, to { width:123px } }
}
#target { width:50px; animation:chosen 1s both }
"#;
assert_eq!(
sampled_animation_style(css, 0.0, "target").width,
crate::Dimension::Px(222.0)
);
let empty = r#"
@keyframes cleared { from, to { width:300px } }
@keyframes cleared {}
#target { width:50px; animation:cleared 1s both }
"#;
assert_eq!(
sampled_animation_style(empty, 0.0, "target").width,
crate::Dimension::Px(50.0)
);
}
#[test]
fn keyframe_names_follow_cascade_layer_order_and_standard_prefix_priority() {
let unlayered = r#"
@keyframes chosen { from, to { width:222px } }
@layer outer { @keyframes chosen { from, to { width:111px } } }
#target { animation:chosen 1s both }
"#;
assert_eq!(
sampled_animation_style(unlayered, 0.0, "target").width,
crate::Dimension::Px(222.0)
);
let ordered = r#"
@layer weak, strong;
@layer strong { @keyframes chosen { from, to { width:333px } } }
@layer weak { @keyframes chosen { from, to { width:444px } } }
#target { animation:chosen 1s both }
"#;
assert_eq!(
sampled_animation_style(ordered, 0.0, "target").width,
crate::Dimension::Px(333.0)
);
let reversed = ordered.replace("@layer weak, strong", "@layer strong, weak");
assert_eq!(
sampled_animation_style(&reversed, 0.0, "target").width,
crate::Dimension::Px(444.0)
);
let prefix = r#"
@keyframes chosen { from, to { width:555px } }
@-webkit-keyframes chosen { from, to { width:666px } }
#target { animation:chosen 1s both }
"#;
assert_eq!(
sampled_animation_style(prefix, 0.0, "target").width,
crate::Dimension::Px(555.0)
);
}
#[test]
fn animation_timeline_handles_delay_fill_iterations_and_direction_at_t0() {
assert_opacity(sampled_fade("", 0.0), 0.0);
assert_opacity(sampled_fade("animation-delay:250ms", 0.0), 0.4);
assert_opacity(
sampled_fade("animation-delay:250ms;animation-fill-mode:backwards", 0.0),
0.0,
);
assert_opacity(
sampled_fade(
"animation-delay:250ms;animation-fill-mode:backwards;animation-direction:reverse",
0.0,
),
1.0,
);
assert_opacity(sampled_fade("animation-delay:-250ms", 0.0), 0.25);
assert_opacity(sampled_fade("animation-delay:-1s", 0.0), 0.0);
assert_opacity(
sampled_fade("animation-delay:-1s;animation-direction:alternate", 0.0),
1.0,
);
assert_opacity(
sampled_fade(
"animation-delay:-1s;animation-iteration-count:1;animation-fill-mode:none",
0.0,
),
0.4,
);
assert_opacity(
sampled_fade(
"animation-delay:-1s;animation-iteration-count:1;animation-fill-mode:forwards",
0.0,
),
1.0,
);
assert_opacity(
sampled_fade(
"animation-delay:-1s;animation-iteration-count:1;animation-fill-mode:forwards;animation-direction:reverse",
0.0,
),
0.0,
);
assert_opacity(
sampled_fade(
"animation-delay:-2s;animation-iteration-count:2;animation-fill-mode:forwards;animation-direction:alternate",
0.0,
),
0.0,
);
assert_opacity(
sampled_fade(
"animation-iteration-count:0;animation-fill-mode:forwards",
0.0,
),
0.0,
);
assert_opacity(
sampled_fade(
"animation-duration:0s;animation-iteration-count:1;animation-fill-mode:none",
0.0,
),
0.4,
);
assert_opacity(
sampled_fade(
"animation-duration:0s;animation-iteration-count:1;animation-fill-mode:forwards",
0.0,
),
1.0,
);
assert_opacity(
sampled_fade(
"animation-delay:-2.5s;animation-iteration-count:2.5;animation-fill-mode:forwards",
0.0,
),
0.5,
);
}
#[test]
fn animation_calc_delay_pause_and_important_origin_are_deterministic() {
assert_opacity(
sampled_fade("--step:.1s;animation-delay:calc(var(--step) * -2.5)", 0.0),
0.25,
);
assert_opacity(sampled_fade("animation-play-state:paused", 500.0), 0.0);
assert_opacity(sampled_fade("", 500.0), 0.5);
assert_opacity(
sampled_fade(
"animation-delay:-250ms !important;opacity:.8 !important",
0.0,
),
0.8,
);
}
#[test]
fn opacity_segments_use_underlying_endpoints_and_exact_later_boundaries() {
let missing_endpoints = r#"
@keyframes middle { 50% { opacity:1 } }
#target { opacity:.4; animation:middle 1s linear 1 both }
"#;
assert_opacity(
sampled_animation_style(missing_endpoints, 250.0, "target")
.opacity
.unwrap(),
0.7,
);
assert_opacity(
sampled_animation_style(missing_endpoints, 750.0, "target")
.opacity
.unwrap(),
0.7,
);
let exact_boundary = r#"
@keyframes peak {
0% { opacity:0 }
50% { opacity:1 }
100% { opacity:0 }
}
#target { opacity:.4; animation:peak 1s linear 1 both }
"#;
assert_opacity(
sampled_animation_style(exact_boundary, 500.0, "target")
.opacity
.unwrap(),
1.0,
);
}
#[test]
fn missing_keyframe_offsets_follow_web_animation_distribution() {
let stop = |offset| KeyframeStop {
offset,
declarations: "opacity:1".to_string(),
source_order: 0,
};
let single = [stop(None)];
assert_eq!(normalized_keyframe_offsets(&single)[0].0, 1.0);
let pair = [stop(None), stop(None)];
assert_eq!(
normalized_keyframe_offsets(&pair)
.iter()
.map(|(offset, _)| *offset)
.collect::<Vec<_>>(),
[0.0, 1.0]
);
let distributed = [
stop(Some(0.0)),
stop(None),
stop(None),
stop(Some(0.75)),
stop(None),
];
assert_eq!(
normalized_keyframe_offsets(&distributed)
.iter()
.map(|(offset, _)| *offset)
.collect::<Vec<_>>(),
[0.0, 0.25, 0.5, 0.75, 1.0]
);
}
#[test]
fn mozilla_stagger_samples_only_the_delay_zero_frame() {
let mut html = String::new();
let mut selectors = String::new();
for frame in 0..12 {
html.push_str(&format!(r#"<svg id="frame{frame}" class="frame"></svg>"#));
selectors.push_str(&format!(
"#frame{frame}{{animation-delay:calc(var(--base-delay) * {frame})}}"
));
}
let tree = obscura_dom::parse_html(&html);
let css = format!(
r#"
@keyframes wave {{
0%, 8.333% {{ opacity:1 }}
8.4%, to {{ opacity:0 }}
}}
.frame {{
--base-delay:.1s;
opacity:0;
animation:wave 1.2s linear infinite;
}}
{selectors}
"#
);
let sheet = Stylesheet::parse_for_viewport_at_animation_time(
&tree,
&[css],
(1280.0, 720.0),
crate::AnimationSampleTime::default(),
);
for frame in 0..12 {
let id = format!("frame{frame}");
let target = tree.get_element_by_id(&id).unwrap();
let node = tree.get_node(target).unwrap();
let element = node.as_element().unwrap();
let classes = vec!["frame".to_string()];
let mut matcher = tree.matcher();
let mut style = LayoutStyle::default();
sheet.apply(
&tree,
&mut matcher,
target,
node.get_attribute("id"),
&classes,
element.local.as_ref(),
&mut style,
&HashMap::new(),
None,
);
assert_opacity(style.opacity.unwrap(), if frame == 0 { 1.0 } else { 0.0 });
}
}
#[test]
fn media_rules_use_the_live_width_and_height() {
let css = r#"
.base { color: black; }
@media (max-width: 950px) { .narrow { color: green; } }
@media (min-height: 900px) { .tall { color: blue; } }
@media (orientation: portrait) { .portrait { color: red; } }
"#;
let selectors = |viewport| {
parse_stylesheet_for_viewport(css, viewport)
.into_iter()
.map(|(selector, _)| selector)
.collect::<Vec<_>>()
};
let narrow_tall = selectors((900.0, 1000.0));
assert!(narrow_tall.iter().any(|s| s == ".base"));
assert!(narrow_tall.iter().any(|s| s == ".narrow"));
assert!(narrow_tall.iter().any(|s| s == ".tall"));
assert!(narrow_tall.iter().any(|s| s == ".portrait"));
let wide_short = selectors((1280.0, 720.0));
assert!(wide_short.iter().any(|s| s == ".base"));
assert!(!wide_short.iter().any(|s| s == ".narrow"));
assert!(!wide_short.iter().any(|s| s == ".tall"));
assert!(!wide_short.iter().any(|s| s == ".portrait"));
}
#[test]
fn nested_media_rules_use_the_live_viewport() {
let css = ".card { display:block; @media (max-width: 950px) { width:100%; } }";
let narrow = parse_stylesheet_for_viewport(css, (900.0, 1000.0));
let wide = parse_stylesheet_for_viewport(css, (1280.0, 720.0));
assert!(narrow
.iter()
.any(|(selector, declarations)| selector == ".card"
&& declarations.contains("width:100%")));
assert!(!wide
.iter()
.any(|(_, declarations)| declarations.contains("width:100%")));
}
#[test]
fn tailwind_container_query_is_retained_but_simple_parser_omits_it() {
let css = r#"
.base { width: 10px }
@container (min-width: 28rem) {
.\@md\:flex-row { flex-direction: row }
}
@container main not (max-inline-size: 60em) {
.named { width: 20px }
}
"#;
let mut conditions = condition_arena_root();
let parsed = parse_stylesheet_for_viewport_preserving_containers(
css, (1280.0, 720.0), &mut conditions, ContainerConditionId::NONE,
);
assert_eq!(parsed.len(), 3);
assert_eq!(parsed[1].container_condition_id, ContainerConditionId(1));
assert_eq!(parsed[2].container_condition_id, ContainerConditionId(2));
assert_eq!(conditions.len(), 3);
assert_eq!(
conditions[1].alternatives[0].condition,
Some(ContainerQueryExpr::Feature(ContainerSizeFeature {
axis: ContainerQueryAxis::Width,
comparison: ContainerQueryComparison::Min,
length: ContainerQueryLength::Rem(28.0),
}))
);
assert_eq!(conditions[2].alternatives[0].name.as_deref(), Some("main"));
assert!(matches!(
conditions[2].alternatives[0].condition,
Some(ContainerQueryExpr::Not(_))
));
assert_eq!(parse_stylesheet(css).len(), 1);
}
#[test]
fn container_at_rule_keyword_is_ascii_insensitive_and_exact() {
assert_eq!(
at_rule_prelude("CoNtAiNeR (min-width:1px)", "container"),
Some("(min-width:1px)")
);
assert_eq!(
at_rule_prelude("container/**/(min-width:1px)", "container"),
Some("(min-width:1px)")
);
assert!(at_rule_prelude("containerfoo (min-width:1px)", "container").is_none());
assert!(at_rule_prelude("container-type (min-width:1px)", "container").is_none());
let css = r#"
@CONTAINER (min-width:1px) {
.top-level { width:1px }
}
.host {
@CoNtAiNeR (min-width:2px) { width:2px }
@containerfoo (min-width:3px) { height:3px }
}
.comment-host {
@CONTAINER/**/(min-width:5px) { height:5px }
}
@containerfoo (min-width:4px) {
.unknown-prefix { width:4px }
}
"#;
let mut conditions = condition_arena_root();
let parsed = parse_stylesheet_for_viewport_preserving_containers(
css,
(1280.0, 720.0),
&mut conditions,
ContainerConditionId::NONE,
);
assert_eq!(conditions.len(), 4);
assert_eq!(parsed.len(), 3, "unknown prefix at-rules must be dropped");
assert!(parsed.iter().any(|rule| rule.selector == ".top-level"));
assert!(parsed
.iter()
.any(|rule| { rule.selector == ".host" && rule.declarations.contains("width:2px") }));
assert!(parsed.iter().any(|rule| {
rule.selector == ".comment-host" && rule.declarations.contains("height:5px")
}));
assert!(!parsed.iter().any(|rule| {
rule.selector == ".unknown-prefix" || rule.declarations.contains("height:3px")
}));
}
#[test]
fn global_at_rules_inside_container_are_not_conditioned() {
let css = r#"
@container (min-width:10000px) {
@property --cq-token {
syntax: "<length>";
inherits: false;
initial-value: 17px;
}
.conditional { width:999px }
}
"#;
let mut conditions = condition_arena_root();
let parsed = parse_stylesheet_for_viewport_preserving_containers(
css,
(1280.0, 720.0),
&mut conditions,
ContainerConditionId::NONE,
);
assert_eq!(conditions.len(), 2);
let registration = parsed
.iter()
.find(|rule| {
rule.selector
== format!("{PROPERTY_REGISTRATION_SELECTOR_PREFIX}--cq-token")
})
.expect("@property initial value should be registered");
assert_eq!(
registration.container_condition_id,
ContainerConditionId::NONE
);
assert!(registration.declarations.contains("initial-value: 17px"));
let conditional = parsed
.iter()
.find(|rule| rule.selector == ".conditional")
.expect("ordinary conditional rule should remain indexed");
assert_eq!(conditional.container_condition_id, ContainerConditionId(1));
assert!(parse_stylesheet(css).is_empty());
}
fn apply_registered_property_test_style(
sheet: &Stylesheet,
tree: &DomTree,
target: NodeId,
parent_props: &HashMap<String, String>,
) -> (LayoutStyle, HashMap<String, String>) {
let node = tree.get_node(target).unwrap();
let element = node.as_element().unwrap();
let classes = node
.get_attribute("class")
.map(|value| value.split_whitespace().map(str::to_string).collect::<Vec<_>>())
.unwrap_or_default();
let mut matcher = tree.matcher();
let mut style = LayoutStyle::default();
let effective = sheet.apply(
tree,
&mut matcher,
target,
node.get_attribute("id"),
&classes,
element.local.as_ref(),
&mut style,
parent_props,
None,
);
(style, effective.unwrap_or_else(|| parent_props.clone()))
}
#[test]
fn registered_custom_properties_obey_inherits_descriptors() {
let tree = obscura_dom::parse_html(
r#"<div id="parent"><div id="child"></div></div><div id="initial"></div>"#,
);
let css = r#"
@property --private {
syntax:"<percentage>";
inherits:false;
initial-value:75%;
}
@property --shared {
syntax:"<percentage>";
inherits:true;
initial-value:25%;
}
#parent { --private:20%; --shared:30% }
#child, #initial {
width:var(--private);
height:var(--shared);
}
"#;
let sheet = Stylesheet::parse(&tree, &[css.to_string()]);
let parent = tree.get_element_by_id("parent").unwrap();
let child = tree.get_element_by_id("child").unwrap();
let initial = tree.get_element_by_id("initial").unwrap();
let (_, parent_props) =
apply_registered_property_test_style(&sheet, &tree, parent, &HashMap::new());
let (child_style, _) =
apply_registered_property_test_style(&sheet, &tree, child, &parent_props);
assert_eq!(child_style.width, crate::Dimension::Percent(0.75));
assert_eq!(child_style.height, crate::Dimension::Percent(0.30));
let (initial_style, _) =
apply_registered_property_test_style(&sheet, &tree, initial, &HashMap::new());
assert_eq!(initial_style.width, crate::Dimension::Percent(0.75));
assert_eq!(initial_style.height, crate::Dimension::Percent(0.25));
}
#[test]
fn registered_custom_property_overrides_and_var_fallbacks_stay_distinct() {
let tree = obscura_dom::parse_html(
r#"<div id="override"></div><div id="reset"></div><div id="invalid"></div>"#,
);
let css = r#"
@property --registered {
syntax:"<percentage>";
inherits:false;
initial-value:75%;
}
#override {
--registered:60%;
width:var(--registered, 10%);
height:var(--missing, 12%);
}
#reset {
--registered:initial;
width:var(--registered, 10%);
height:var(--missing, 12%);
}
#invalid {
--registered:red;
width:var(--registered, 10%);
}
"#;
let sheet = Stylesheet::parse(&tree, &[css.to_string()]);
let override_id = tree.get_element_by_id("override").unwrap();
let reset_id = tree.get_element_by_id("reset").unwrap();
let invalid_id = tree.get_element_by_id("invalid").unwrap();
let (overridden, _) = apply_registered_property_test_style(
&sheet,
&tree,
override_id,
&HashMap::new(),
);
assert_eq!(overridden.width, crate::Dimension::Percent(0.60));
assert_eq!(overridden.height, crate::Dimension::Percent(0.12));
let (reset, _) =
apply_registered_property_test_style(&sheet, &tree, reset_id, &HashMap::new());
assert_eq!(reset.width, crate::Dimension::Percent(0.75));
assert_eq!(reset.height, crate::Dimension::Percent(0.12));
let (invalid, invalid_props) =
apply_registered_property_test_style(&sheet, &tree, invalid_id, &HashMap::new());
assert_eq!(invalid.width, crate::Dimension::Percent(0.75));
assert_eq!(
invalid_props.get("--registered").map(String::as_str),
Some("75%"),
"an invalid typed value computes to the registered initial value"
);
}
#[test]
fn var_substitution_preserves_neighboring_token_boundaries() {
let props = HashMap::from([
("--stroke".to_string(), "2px".to_string()),
("--amount".to_string(), "10".to_string()),
]);
assert_eq!(
substitute_var_value("var(--stroke)solid", &props, 0).as_deref(),
Some("2px solid")
);
assert_eq!(
substitute_var_value("calc(var(--stroke)*3)", &props, 0).as_deref(),
Some("calc(2px*3)"),
"punctuation adjacency must not gain calc-significant whitespace"
);
assert_eq!(
substitute_var_value("calc(var(--amount)- 2px)", &props, 0).as_deref(),
Some("calc(10- 2px)"),
"substitution must not make an invalid unspaced calc minus valid"
);
assert_eq!(
substitute_var_value("+var(--amount)", &props, 0).as_deref(),
Some("+ 10"),
"a delim plus followed by a number must not become a signed number token"
);
assert_eq!(
substitute_var_value("var(--amount)%", &props, 0).as_deref(),
Some("10 %"),
"a number token followed by a percent delimiter is not a percentage token"
);
let tree = obscura_dom::parse_html(r#"<div id="target"></div>"#);
let css = r#"
#target {
--stroke:2px;
--ink:#123456;
border:var(--stroke)solid var(--ink);
height:calc(var(--stroke)*3);
}
"#;
let sheet = Stylesheet::parse(&tree, &[css.to_string()]);
let target = tree.get_element_by_id("target").unwrap();
let (style, _) =
apply_registered_property_test_style(&sheet, &tree, target, &HashMap::new());
assert_eq!(
style.border,
crate::Edges {
top: 2.0,
right: 2.0,
bottom: 2.0,
left: 2.0,
}
);
assert_eq!(style.border_color, Some([0x12, 0x34, 0x56, 0xff]));
assert_eq!(style.height, crate::Dimension::Px(6.0));
}
#[test]
fn wildcard_duplicate_and_invalid_property_registrations_are_bounded() {
let tree = obscura_dom::parse_html(
r#"<div id="wild"></div><div id="wild-fallback"></div><div id="typed"></div>"#,
);
let css = r#"
@property --wild { syntax:"*"; inherits:false }
@property --typed {
syntax:"<number>";
inherits:false;
initial-value:2;
}
@property --typed {
syntax:"<number>";
initial-value:9;
}
@property --unsupported {
syntax:"<angle>";
inherits:false;
initial-value:30deg;
}
@property --last {
syntax:"<number>";
inherits:false;
initial-value:1;
}
@property --last {
syntax:"<number>";
inherits:false;
initial-value:3;
}
#wild { --wild:20px; width:var(--wild, 7px) }
#wild-fallback { width:var(--wild, 7px) }
#typed {
opacity:var(--typed, .1);
height:var(--unsupported, 11px);
}
"#;
let sheet = Stylesheet::parse(&tree, &[css.to_string()]);
let wild = tree.get_element_by_id("wild").unwrap();
let wild_fallback = tree.get_element_by_id("wild-fallback").unwrap();
let typed = tree.get_element_by_id("typed").unwrap();
let (wild_style, _) =
apply_registered_property_test_style(&sheet, &tree, wild, &HashMap::new());
assert_eq!(wild_style.width, crate::Dimension::Px(20.0));
let (fallback_style, _) =
apply_registered_property_test_style(&sheet, &tree, wild_fallback, &HashMap::new());
assert_eq!(fallback_style.width, crate::Dimension::Px(7.0));
let (typed_style, typed_props) =
apply_registered_property_test_style(&sheet, &tree, typed, &HashMap::new());
assert_eq!(typed_style.opacity, Some(2.0));
assert_eq!(typed_style.height, crate::Dimension::Px(11.0));
assert_eq!(
typed_props.get("--typed").map(String::as_str),
Some("2"),
"a later invalid duplicate registration must not replace the valid one"
);
assert_eq!(
typed_props.get("--last").map(String::as_str),
Some("3"),
"the last valid registration wins"
);
assert!(!typed_props.contains_key("--unsupported"));
}
#[test]
fn registered_percentage_initial_value_keeps_radial_gradient_valid() {
let tree = obscura_dom::parse_html(r#"<div id="pulse"></div>"#);
let css = r#"
@property --pulse-outer {
syntax:"<percentage>";
inherits:false;
initial-value:75%;
}
#pulse {
background-image:radial-gradient(
circle at 50% 50%,
transparent var(--pulse-outer),
rgb(255 255 255) 100%
);
}
"#;
let sheet = Stylesheet::parse(&tree, &[css.to_string()]);
let pulse = tree.get_element_by_id("pulse").unwrap();
let (style, props) =
apply_registered_property_test_style(&sheet, &tree, pulse, &HashMap::new());
assert_eq!(props.get("--pulse-outer").map(String::as_str), Some("75%"));
let (_, stops) = style
.background_radial_gradient
.expect("registered initial value should preserve the gradient");
assert_eq!(stops[0].1, Some(0.75));
assert_eq!(stops[1].1, Some(1.0));
}
#[test]
fn container_boolean_grammar_rejects_mixed_operators() {
for invalid in [
"(min-width:1px) and (max-width:2px) or (min-inline-size:3px)",
"not (min-width:1px) and (max-width:2px)",
"(min-width:1px) or not (max-width:2px)",
] {
assert!(
parse_container_query_expr(invalid).is_none(),
"invalid boolean grammar was accepted: {invalid}"
);
}
assert!(matches!(
parse_container_query_expr(
"(min-width:1px) and ((max-width:2px) or (min-inline-size:3px))"
),
Some(ContainerQueryExpr::And(_))
));
assert!(matches!(
parse_container_query_expr("not ((min-width:1px) and (max-inline-size:2px))"),
Some(ContainerQueryExpr::Not(_))
));
}
#[test]
fn container_custom_ident_rejects_css_wide_and_default() {
for reserved in [
"none",
"not",
"and",
"or",
"default",
"initial",
"inherit",
"unset",
"revert",
"revert-layer",
] {
assert!(
parse_container_query_name(reserved).is_none(),
"reserved custom-ident was accepted: {reserved}"
);
if reserved != "not" {
assert!(
parse_container_query(&format!("{reserved} (min-width:1px)")).is_none(),
"reserved query name was accepted: {reserved}"
);
}
}
assert!(
matches!(
parse_container_query("not (min-width:1px)"),
Some(ContainerQuery {
name: None,
condition: Some(ContainerQueryExpr::Not(_)),
})
),
"`not` is reserved as a name but valid as the unary query operator"
);
for valid in ["auto", "normal", "container", "--card", "main"] {
assert_eq!(
parse_container_query_name(valid).as_deref(),
Some(valid),
"valid query name was rejected: {valid}"
);
}
}
#[test]
fn unknown_comma_arm_does_not_drop_supported_arm() {
let queries = parse_container_query_list("(future(foo)), main (min-width:1px)")
.expect("general-enclosed arm is valid unknown syntax");
assert_eq!(queries.len(), 2);
assert_eq!(queries[0].condition, Some(ContainerQueryExpr::Unknown));
assert_eq!(queries[1].name.as_deref(), Some("main"));
assert!(matches!(
queries[1].condition,
Some(ContainerQueryExpr::Feature(_))
));
let mut conditions = condition_arena_root();
let parsed = parse_stylesheet_for_viewport_preserving_containers(
"@container (future(foo)), main (min-width:1px) {.card{display:grid}}",
(1280.0, 720.0),
&mut conditions,
ContainerConditionId::NONE,
);
assert_eq!(parsed.len(), 1);
assert_eq!(conditions[1].alternatives.len(), 2);
}
#[test]
fn container_query_recursion_depth_is_bounded() {
let nested = format!(
"{}min-width:1px{}",
"(".repeat(MAX_CONTAINER_QUERY_DEPTH + 16),
")".repeat(MAX_CONTAINER_QUERY_DEPTH + 16)
);
assert!(parse_container_query_expr(&nested).is_none());
}
#[test]
fn supports_accepts_container_css_wide_values() {
for property in ["container", "container-name", "container-type"] {
for keyword in ["initial", "inherit", "unset", "revert", "revert-layer"] {
assert!(
supports_condition_applies(&format!("({property}:{keyword})")),
"{property}:{keyword} is a valid whole-value CSS-wide declaration"
);
}
}
}
fn evaluate_container_styles(
tree: &DomTree,
sheet: &Stylesheet,
target: NodeId,
snapshot: &ContainerSnapshot,
) -> (LayoutStyle, ContainerDecisionSignature, ContainerQueryStats) {
let node = tree.get_node(target).unwrap();
let element = node.as_element().unwrap();
let id = node.get_attribute("id");
let classes: Vec<String> = node
.get_attribute("class")
.map(|value| value.split_whitespace().map(str::to_string).collect())
.unwrap_or_default();
let mut matcher = tree.matcher();
let mut evaluator = ContainerQueryEvaluator::new(tree, snapshot);
let mut style = LayoutStyle::default();
sheet.apply_with_container_queries(
tree,
&mut matcher,
target,
id,
&classes,
element.local.as_ref(),
&mut style,
&HashMap::new(),
None,
&mut evaluator,
);
let (signature, stats) = evaluator.finish();
(style, signature, stats)
}
fn container_box(
container_type: crate::ContainerType,
names: &[&str],
content_width: f32,
font_size: f32,
) -> ContainerBox {
ContainerBox {
container_type,
available_type: container_type,
names: names.iter().map(|name| (*name).to_string()).collect(),
content_width,
content_height: 100.0,
font_size,
}
}
#[test]
fn container_evaluator_honors_tailwind_threshold_and_cache() {
let tree = obscura_dom::parse_html(
r#"<div id="container"><div id="target"></div></div>"#,
);
let container = tree.get_element_by_id("container").unwrap();
let target = tree.get_element_by_id("target").unwrap();
let sheet = Stylesheet::parse(
&tree,
&[r#"
#target { width:1px; height:1px }
@container (min-width:28rem) {
#target { width:2px }
#target { height:2px }
}
"#
.to_string()],
);
let snapshot = |width| {
let mut snapshot = ContainerSnapshot {
root_font_size: 16.0,
..Default::default()
};
snapshot.boxes.insert(
container,
container_box(crate::ContainerType::InlineSize, &[], width, 16.0),
);
snapshot
};
let (below, _, _) =
evaluate_container_styles(&tree, &sheet, target, &snapshot(447.0));
assert_eq!(below.width, crate::Dimension::Px(1.0));
assert_eq!(below.height, crate::Dimension::Px(1.0));
let (at, _, stats) =
evaluate_container_styles(&tree, &sheet, target, &snapshot(448.0));
assert_eq!(at.width, crate::Dimension::Px(2.0));
assert_eq!(at.height, crate::Dimension::Px(2.0));
assert_eq!(stats.evaluations, 1);
assert!(stats.cache_hits >= 1);
}
#[test]
fn container_evaluator_matches_selector_before_ancestor_lookup() {
let tree = obscura_dom::parse_html(
r#"<div id="container"><div id="target"></div></div>"#,
);
let container = tree.get_element_by_id("container").unwrap();
let target = tree.get_element_by_id("target").unwrap();
let sheet = Stylesheet::parse(
&tree,
&[r#"
@container (min-width:1px) {
div[data-never-present] { width:999px }
}
"#
.to_string()],
);
let mut snapshot = ContainerSnapshot {
root_font_size: 16.0,
..Default::default()
};
snapshot.boxes.insert(
container,
container_box(crate::ContainerType::InlineSize, &[], 500.0, 16.0),
);
let (_, signature, stats) =
evaluate_container_styles(&tree, &sheet, target, &snapshot);
assert_eq!(stats.evaluations, 0);
assert_eq!(stats.ancestor_steps, 0);
assert!(signature.decisions.is_empty());
}
#[test]
fn container_evaluator_selects_nearest_eligible_named_ancestor() {
let tree = obscura_dom::parse_html(
r#"<div id="outer"><div id="inner"><div id="target"></div></div></div>"#,
);
let outer = tree.get_element_by_id("outer").unwrap();
let inner = tree.get_element_by_id("inner").unwrap();
let target = tree.get_element_by_id("target").unwrap();
let sheet = Stylesheet::parse(
&tree,
&[r#"
#target { width:1px; height:1px }
@container shell (min-width:500px) { #target { width:11px } }
@container (min-width:500px) { #target { height:22px } }
"#
.to_string()],
);
let mut snapshot = ContainerSnapshot {
root_font_size: 16.0,
..Default::default()
};
snapshot.boxes.insert(
outer,
container_box(
crate::ContainerType::InlineSize,
&["shell"],
600.0,
16.0,
),
);
snapshot.boxes.insert(
inner,
container_box(
crate::ContainerType::InlineSize,
&["other"],
300.0,
16.0,
),
);
let (style, _, stats) =
evaluate_container_styles(&tree, &sheet, target, &snapshot);
assert_eq!(style.width, crate::Dimension::Px(11.0));
assert_eq!(style.height, crate::Dimension::Px(1.0));
assert!(stats.ancestor_steps >= 3);
}
#[test]
fn container_query_em_uses_container_font_and_rem_uses_root_font() {
let tree = obscura_dom::parse_html(
r#"<div id="container"><div id="target"></div></div>"#,
);
let container = tree.get_element_by_id("container").unwrap();
let target = tree.get_element_by_id("target").unwrap();
let sheet = Stylesheet::parse(
&tree,
&[r#"
#target { width:1px; height:1px }
@container (min-width:30em) { #target { width:3px } }
@container (min-width:30rem) { #target { height:3px } }
"#
.to_string()],
);
let mut snapshot = ContainerSnapshot {
root_font_size: 20.0,
..Default::default()
};
snapshot.boxes.insert(
container,
container_box(crate::ContainerType::InlineSize, &[], 400.0, 10.0),
);
let (style, _, _) =
evaluate_container_styles(&tree, &sheet, target, &snapshot);
assert_eq!(style.width, crate::Dimension::Px(3.0));
assert_eq!(style.height, crate::Dimension::Px(1.0));
}
#[test]
fn container_snapshot_compares_only_axes_exposed_by_container_type() {
let mut inline_a =
container_box(crate::ContainerType::InlineSize, &[], 400.0, 16.0);
let mut inline_b = inline_a.clone();
inline_a.content_height = 100.0;
inline_b.content_height = 900.0;
assert_eq!(inline_a, inline_b);
let mut size_a = container_box(crate::ContainerType::Size, &[], 400.0, 16.0);
let mut size_b = size_a.clone();
size_a.content_height = 100.0;
size_b.content_height = 900.0;
assert_ne!(size_a, size_b);
}
#[test]
fn nested_container_conditions_select_independent_containers() {
let tree = obscura_dom::parse_html(
r#"<div id="outer"><div id="inner"><div id="target"></div></div></div>"#,
);
let outer = tree.get_element_by_id("outer").unwrap();
let inner = tree.get_element_by_id("inner").unwrap();
let target = tree.get_element_by_id("target").unwrap();
let sheet = Stylesheet::parse(
&tree,
&[r#"
#target { width:1px }
@container outer (min-width:500px) {
@container inner (min-width:200px) {
#target { width:9px }
}
}
"#
.to_string()],
);
let snapshot = |inner_width| {
let mut snapshot = ContainerSnapshot {
root_font_size: 16.0,
..Default::default()
};
snapshot.boxes.insert(
outer,
container_box(
crate::ContainerType::InlineSize,
&["outer"],
600.0,
16.0,
),
);
snapshot.boxes.insert(
inner,
container_box(
crate::ContainerType::InlineSize,
&["inner"],
inner_width,
16.0,
),
);
snapshot
};
let (matching, _, _) =
evaluate_container_styles(&tree, &sheet, target, &snapshot(200.0));
assert_eq!(matching.width, crate::Dimension::Px(9.0));
let (failing, _, _) =
evaluate_container_styles(&tree, &sheet, target, &snapshot(199.0));
assert_eq!(failing.width, crate::Dimension::Px(1.0));
}
#[test]
fn unknown_container_alternative_does_not_mask_true_alternative() {
let tree = obscura_dom::parse_html(
r#"<div id="container"><div id="target"></div></div>"#,
);
let container = tree.get_element_by_id("container").unwrap();
let target = tree.get_element_by_id("target").unwrap();
let sheet = Stylesheet::parse(
&tree,
&[r#"
#target { width:1px }
@container (future(foo)), (min-width:100px) {
#target { width:7px }
}
"#
.to_string()],
);
let mut snapshot = ContainerSnapshot {
root_font_size: 16.0,
..Default::default()
};
snapshot.boxes.insert(
container,
container_box(crate::ContainerType::InlineSize, &[], 100.0, 16.0),
);
let (style, _, _) =
evaluate_container_styles(&tree, &sheet, target, &snapshot);
assert_eq!(style.width, crate::Dimension::Px(7.0));
}
#[test]
fn container_query_boolean_evaluation_uses_kleene_truth_tables() {
let container =
container_box(crate::ContainerType::InlineSize, &[], 200.0, 16.0);
let min_width = |threshold| {
ContainerQueryExpr::Feature(ContainerSizeFeature {
axis: ContainerQueryAxis::Width,
comparison: ContainerQueryComparison::Min,
length: ContainerQueryLength::Px(threshold),
})
};
assert_eq!(
evaluate_container_query_expr(
&ContainerQueryExpr::Or(vec![
min_width(100.0),
ContainerQueryExpr::Unknown,
]),
&container,
16.0,
),
ContainerQueryTruth::True
);
assert_eq!(
evaluate_container_query_expr(
&ContainerQueryExpr::And(vec![
min_width(300.0),
ContainerQueryExpr::Unknown,
]),
&container,
16.0,
),
ContainerQueryTruth::False
);
assert_eq!(
evaluate_container_query_expr(
&ContainerQueryExpr::Or(vec![
min_width(300.0),
ContainerQueryExpr::Unknown,
]),
&container,
16.0,
),
ContainerQueryTruth::Unknown
);
assert_eq!(
evaluate_container_query_expr(
&ContainerQueryExpr::Not(Box::new(ContainerQueryExpr::Unknown)),
&container,
16.0,
),
ContainerQueryTruth::Unknown
);
}
#[test]
fn container_range_syntax_supports_strict_inclusive_and_chained_queries() {
let container =
container_box(crate::ContainerType::Size, &[], 200.0, 16.0);
for query in [
"(width)",
"(width > 199px)",
"(width>=200px)",
"(199px < width)",
"(199px < width <= 200px)",
"(height = 100px)",
"(block-size >= 100px)",
] {
let expression =
parse_container_query_expr(query).expect("valid range query");
assert_eq!(
evaluate_container_query_expr(&expression, &container, 16.0),
ContainerQueryTruth::True,
"{query}"
);
}
for query in [
"(width > 200px)",
"(width < 200px)",
"(200px < width < 300px)",
"(height > 100px)",
] {
let expression =
parse_container_query_expr(query).expect("valid range query");
assert_eq!(
evaluate_container_query_expr(&expression, &container, 16.0),
ContainerQueryTruth::False,
"{query}"
);
}
for invalid in [
"(100px < width > 200px)",
"(200px > width < 100px)",
"(100px = width = 100px)",
"(100px < width = 200px)",
] {
assert!(
parse_container_query_expr(invalid).is_none(),
"invalid mixed/equality chain parsed: {invalid}"
);
}
}
#[test]
fn block_axis_query_requires_size_container() {
let tree = obscura_dom::parse_html(
r#"<div id="container"><div id="target"></div></div>"#,
);
let container = tree.get_element_by_id("container").unwrap();
let target = tree.get_element_by_id("target").unwrap();
let sheet = Stylesheet::parse(
&tree,
&[r#"
#target { width:1px }
@container (height >= 100px) { #target { width:8px } }
"#
.to_string()],
);
let snapshot = |container_type| {
let mut snapshot = ContainerSnapshot {
root_font_size: 16.0,
..Default::default()
};
snapshot.boxes.insert(
container,
container_box(container_type, &[], 300.0, 16.0),
);
snapshot
};
let (inline_only, _, _) = evaluate_container_styles(
&tree,
&sheet,
target,
&snapshot(crate::ContainerType::InlineSize),
);
assert_eq!(inline_only.width, crate::Dimension::Px(1.0));
let (size, _, _) = evaluate_container_styles(
&tree,
&sheet,
target,
&snapshot(crate::ContainerType::Size),
);
assert_eq!(size.width, crate::Dimension::Px(8.0));
}
#[test]
fn nested_container_rules_form_a_parent_condition_chain() {
let css = "@container shell (min-width:40rem){\
@container (max-inline-size:50rem){.card{display:grid}}}";
let mut conditions = condition_arena_root();
let parsed = parse_stylesheet_for_viewport_preserving_containers(
css, (1280.0, 720.0), &mut conditions, ContainerConditionId::NONE,
);
assert_eq!(parsed.len(), 1);
assert_eq!(parsed[0].container_condition_id, ContainerConditionId(2));
assert_eq!(conditions[2].parent, ContainerConditionId(1));
assert_eq!(conditions[1].parent, ContainerConditionId::NONE);
}
#[test]
fn unresolved_container_rules_do_not_enter_cascade_or_pseudos() {
let tree = obscura_dom::parse_html(r#"<div id="target"></div>"#);
let target = tree.query_selector("#target").unwrap().unwrap();
let sheet = Stylesheet::parse(&tree, &[r#"
#target{width:10px}
@container (min-width:28rem){
#target{width:999px}
#target::before{content:"inactive"}
}
#target{height:20px}
"#.to_string()]);
assert_eq!(sheet.rules.len(), 3, "conditional rule remains indexed");
assert_eq!(sheet.container_conditions.len(), 2);
let mut matcher = tree.matcher();
let mut style = LayoutStyle::default();
sheet.apply(
&tree, &mut matcher, target, Some("target"), &[], "div", &mut style,
&HashMap::new(), None,
);
assert_eq!(style.width, crate::Dimension::Px(10.0));
assert_eq!(style.height, crate::Dimension::Px(20.0));
let (before, after) =
sheet.pseudo_styles(&tree, &mut matcher, target, &HashMap::new(), &style);
assert!(before.is_none() && after.is_none());
}
#[test]
fn no_container_parser_output_and_order_are_unchanged() {
let css = ".card{width:10px}\
@supports (display:grid){.card{display:grid}}\
@media (min-width:64rem){.card{width:20px}}\
.card{height:30px}";
assert_eq!(
parse_stylesheet_for_viewport(css, (1280.0, 720.0)),
vec![
(".card".into(), "width:10px;".into()),
(".card".into(), "display:grid;".into()),
(".card".into(), "width:20px;".into()),
(".card".into(), "height:30px;".into()),
]
);
let mut conditions = condition_arena_root();
let rich = parse_stylesheet_for_viewport_preserving_containers(
css, (1280.0, 720.0), &mut conditions, ContainerConditionId::NONE,
);
assert_eq!(conditions.len(), 1);
assert!(rich.iter().all(|rule| rule.container_condition_id == ContainerConditionId::NONE));
}
#[test]
fn supports_conditions_gate_legacy_framework_fallbacks() {
let legacy_probe = "(((-webkit-hyphens:none)) and \
(not (margin-trim:inline))) or \
((-moz-orient:inline) and \
(not (color:rgb(from red r g b))))";
assert!(!supports_condition_applies(legacy_probe));
assert!(supports_condition_applies(
"(display:grid) and (selector(.card > *))"
));
assert!(supports_condition_applies(
"not (unknown-engine-prop:value)"
));
let css = format!(
"@supports {legacy_probe} {{ .legacy {{ line-height:1.5 }} }}\
@supports (display:grid) {{ .modern {{ display:grid }} }}\
.host {{ @supports {legacy_probe} {{ width:999px }} }}"
);
let rules = parse_stylesheet_for_viewport(&css, (1280.0, 720.0));
assert!(
!rules.iter().any(|(selector, declarations)| {
selector == ".legacy" || declarations.contains("999px")
}),
"false supports branches must be skipped: {rules:?}"
);
assert!(
rules.iter().any(|(selector, declarations)| {
selector == ".modern" && declarations.contains("display:grid")
}),
"true supports branch should remain: {rules:?}"
);
}
#[test]
fn supports_conditions_reject_invalid_boolean_grammar() {
assert!(supports_condition_applies("(display:grid) and (word-break:break-all)"));
assert!(supports_condition_applies("(display:grid) or (unknown:value)"));
assert!(!supports_condition_applies(
"(display:grid) and (word-break:break-all) or (display:flex)"
));
assert!(!supports_condition_applies(
"not ((display:grid) and (word-break:break-all) or (display:flex))"
));
assert!(!supports_condition_applies("not ()"));
assert!(!supports_condition_applies("(display:grid;)"));
assert!(!supports_condition_applies("not (display:grid"));
}
#[test]
fn supports_polygon_clip_path_activates_only_painted_shape_subset() {
let css = "@supports (clip-path:polygon(0 0,100% 0,50% 100%)){\
.transition{height:90px}\
}\
@supports (clip-path:polygon(0 0,100% 0,50% 100%) content-box){\
.unsupported{height:999px}\
}";
let rules = parse_stylesheet_for_viewport(css, (1280.0, 720.0));
assert!(
rules.iter().any(|(selector, declarations)| {
selector == ".transition" && declarations.contains("height:90px")
}),
"the supported polygon branch must enter the cascade: {rules:?}"
);
assert!(
!rules.iter().any(|(selector, _)| selector == ".unsupported"),
"an unpainted geometry-box variant must not pass @supports: {rules:?}"
);
}
#[test]
fn media_breakpoints_support_font_relative_lengths_and_ranges() {
assert!(!media_query_applies_for_viewport(
"@media (min-width: 64rem)",
(900.0, 1000.0)
));
assert!(media_query_applies_for_viewport(
"@media (min-width: 64rem)",
(1024.0, 768.0)
));
assert!(media_query_applies_for_viewport(
"@media (56.25rem <= width)",
(900.0, 1000.0)
));
assert!(!media_query_applies_for_viewport(
"@media (width > calc(60em - 1px))",
(900.0, 1000.0)
));
}
#[test]
fn negated_min_width_queries_form_max_breakpoints() {
assert!(media_query_applies_for_viewport(
"@media not all and (min-width: 40rem)",
(639.0, 900.0)
));
assert!(!media_query_applies_for_viewport(
"@media not all and (min-width: 40rem)",
(1280.0, 900.0)
));
let css = r#"
.hidden { display: none }
@media not all and (min-width: 40rem) {
.max-sm\:inline { display: inline }
}
@media (min-width: 80rem) {
.xl\:inline { display: inline }
}
"#;
let desktop = parse_stylesheet_for_viewport(css, (1280.0, 900.0));
assert!(!desktop
.iter()
.any(|(selector, _)| selector == r".max-sm\:inline"));
assert!(desktop
.iter()
.any(|(selector, _)| selector == r".xl\:inline"));
}
#[test]
fn media_query_lists_are_or_conditions() {
assert!(media_query_applies_for_viewport(
"@media print, (min-width: 64rem)",
(1280.0, 720.0)
));
assert!(!media_query_applies_for_viewport(
"@media print, (min-width: 64rem)",
(900.0, 1000.0)
));
}
#[test]
fn rem_breakpoint_does_not_reveal_desktop_menu_on_narrow_viewport() {
let css = r#"
header .menu-toolkit { display: none }
@media (min-width: 64rem) {
header .menu-toolkit { display: flex }
}
"#;
let narrow = parse_stylesheet_for_viewport(css, (900.0, 1000.0));
assert!(narrow.iter().any(|(selector, declarations)| {
selector == "header .menu-toolkit" && declarations.contains("display: none")
}));
assert!(!narrow.iter().any(|(_, declarations)| declarations.contains("display: flex")));
let wide = parse_stylesheet_for_viewport(css, (1024.0, 768.0));
assert!(wide.iter().any(|(_, declarations)| declarations.contains("display: flex")));
}
}
Reference in new issue View Git Blame Copy Permalink