pierrelf.com
web engine - experimental web browser
Fix em resolution and add missing position offset properties
- Fix em unit resolution for non-font-size properties: em now resolves
relative to the element's own computed font-size (per CSS spec) instead
of the parent's font-size. Font-size itself already correctly uses
parent font-size for em resolution in its own handler.
- Add missing 'right' and 'left' position offset property handling in
apply_property (only 'top' and 'bottom' were handled).
- Update em_margin_relative_to_font_size test to assert correct value
(2em * 20px = 40px, not 2em * 16px = 32px).
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
+8
-5
+8
-5
crates/style/src/computed.rs
+8
-5
crates/style/src/computed.rs
···
389
389
// Resolve a CssValue to f32 px given context
390
390
// ---------------------------------------------------------------------------
391
391
392
-
fn resolve_length(value: &CssValue, parent_font_size: f32, current_font_size: f32) -> Option<f32> {
392
+
fn resolve_length(value: &CssValue, _parent_font_size: f32, current_font_size: f32) -> Option<f32> {
393
393
match value {
394
-
CssValue::Length(n, unit) => Some(resolve_length_unit(*n, *unit, parent_font_size)),
394
+
// Em units resolve relative to the element's own computed font-size
395
+
// (for properties other than font-size, which has its own handling).
396
+
CssValue::Length(n, unit) => Some(resolve_length_unit(*n, *unit, current_font_size)),
395
397
CssValue::Percentage(p) => Some((*p / 100.0) as f32 * current_font_size),
396
398
CssValue::Zero => Some(0.0),
397
399
CssValue::Number(n) if *n == 0.0 => Some(0.0),
···
734
736
735
737
// Position offsets
736
738
"top" => style.top = resolve_length_or_auto(value, parent_fs, current_fs),
739
+
"right" => style.right = resolve_length_or_auto(value, parent_fs, current_fs),
737
740
"bottom" => style.bottom = resolve_length_or_auto(value, parent_fs, current_fs),
741
+
"left" => style.left = resolve_length_or_auto(value, parent_fs, current_fs),
738
742
739
743
// Overflow
740
744
"overflow" => {
···
1498
1502
let div_node = &body_node.children[0];
1499
1503
1500
1504
assert_eq!(div_node.style.font_size, 20.0);
1501
-
// margin-top em resolves relative to parent font-size (16px body)
1502
-
// because margin is not font-size itself
1503
-
assert_eq!(div_node.style.margin_top, LengthOrAuto::Length(32.0));
1505
+
// margin-top 2em resolves relative to the element's own computed font-size (20px)
1506
+
assert_eq!(div_node.style.margin_top, LengthOrAuto::Length(40.0));
1504
1507
}
1505
1508
1506
1509
#[test]