Skip to content
Permalink
Browse files
Fix CSS cascade regarding logical properties
https://bugs.webkit.org/show_bug.cgi?id=236199

Reviewed by Darin Adler.

LayoutTests/imported/w3c:

Expect animation-004.html to pass.
Add new test logicalprops-with-deferred-writing-mode.html

* web-platform-tests/css/css-logical/animation-004-expected.txt:
* web-platform-tests/css/css-logical/logicalprops-with-deferred-writing-mode-expected.txt: Added.
* web-platform-tests/css/css-logical/logicalprops-with-deferred-writing-mode.html: Added.

Source/WebCore:

The CSS cascade was trying to resolve logical properties into physical
ones too early. This failed if we still didn't know the direction or
writing-mode, e.g. because they were set to a variable or to a CSS-wide
keyword.

This patch keeps logical properties as-is during the cascade. They are
only resolved when finally applied. Also, both logical properties and
their physical equivalents are now set to apply in parse order, since
'height: 0px; block-size: 1px' and 'block-size: 1px; height: 0px' can be
different, the order matters.

Tests: imported/w3c/web-platform-tests/css/css-logical/animation-004.html
       imported/w3c/web-platform-tests/css/css-logical/logicalprops-with-deferred-writing-mode.html

* css/CSSComputedStyleDeclaration.cpp:
(WebCore::ComputedStyleExtractor::valueForPropertyInStyle):
* css/CSSProperties.json:
* css/parser/CSSParser.cpp:
(WebCore::CSSParser::parseValueWithVariableReferences):
* style/PropertyCascade.cpp:
(WebCore::Style::shouldApplyPropertyInParseOrder):
(WebCore::Style::PropertyCascade::PropertyCascade):
(WebCore::Style::PropertyCascade::set):
(WebCore::Style::PropertyCascade::setDeferred):
(WebCore::Style::PropertyCascade::resolveDirectionAndWritingMode const): Deleted.
(WebCore::Style::PropertyCascade::direction const): Deleted.
* style/PropertyCascade.h:
(WebCore::Style::PropertyCascade::areDeferredInOrder const):
* style/StyleBuilder.cpp:
(WebCore::Style::Builder::Builder):
(WebCore::Style::Builder::applyProperty):
(WebCore::Style::directionFromStyle): Deleted.



Canonical link: https://commits.webkit.org/248652@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@291546 268f45cc-cd09-0410-ab3c-d52691b4dbfc
  • Loading branch information
Loirooriol committed Mar 20, 2022
1 parent 14900d5 commit 2715a5d1d3822b897f493c90efced2739caa53d3
Show file tree
Hide file tree
Showing 11 changed files with 285 additions and 127 deletions.
@@ -1,3 +1,17 @@
2022-03-20 Oriol Brufau <obrufau@igalia.com>

Fix CSS cascade regarding logical properties
https://bugs.webkit.org/show_bug.cgi?id=236199

Reviewed by Darin Adler.

Expect animation-004.html to pass.
Add new test logicalprops-with-deferred-writing-mode.html

* web-platform-tests/css/css-logical/animation-004-expected.txt:
* web-platform-tests/css/css-logical/logicalprops-with-deferred-writing-mode-expected.txt: Added.
* web-platform-tests/css/css-logical/logicalprops-with-deferred-writing-mode.html: Added.

2022-03-19 Oriol Brufau <obrufau@igalia.com>

[cssom] Implement border-image serialization
@@ -11,7 +11,7 @@ PASS Transitions update when the writing-mode is changed
PASS Filling transitions update when the writing-mode is changed
PASS The number of interpolating properties can be increased when the writing-mode is changed
PASS The number of interpolating properties can be decreased when the writing-mode is changed
FAIL Transitions update when the writing-mode is changed through a CSS variable assert_equals: expected "50px" but got "0px"
PASS Transitions update when the writing-mode is changed through a CSS variable
PASS Transitions update when the direction is changed
PASS Transitions from logical to physical update when the direction is changed
PASS Transitions from physical to logical update when the direction is changed
@@ -0,0 +1,8 @@

PASS Writing mode with variable
PASS Writing mode with nested variables
PASS Writing mode with 'inherit'
PASS Writing mode with 'initial'
PASS Writing mode with 'revert'
PASS Writing mode with 'revert-layer'

@@ -0,0 +1,175 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>Logical properties with deferred <code>writing-mode</code></title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
<link rel="help" href="https://drafts.csswg.org/css-logical-1/#box">
<link rel="help" href="https://drafts.csswg.org/css-variables-1/">
<link rel="help" href="https://drafts.csswg.org/css-values-4/#common-keywords">
<meta name="assert" content="Checks that logical properties are resolved correctly when the writing mode isn't known until computed-value time.">
<style>
#parent {
writing-mode: vertical-lr;
}

@layer {
.revert-layer {
writing-mode: vertical-rl;
}
}
@layer {
.revert-layer {
writing-mode: horizontal-tb;
writing-mode: revert-layer;
}
}
</style>
<div id="parent">
<div id="target"></div>
</div>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
const target = document.getElementById("target");
const computedStyle = getComputedStyle(target);

function check(expected) {
for (let [prop, value] of Object.entries(expected)) {
assert_equals(computedStyle.getPropertyValue(prop), value, prop);
}
}

test(function() {
target.style.cssText = `
--wm: vertical-rl;
writing-mode: var(--wm);
margin-block-start: 1px;
margin-block-end: 2px;
margin-inline-start: 3px;
margin-inline-end: 4px;
`;
check({
// Logicals
"margin-block-start": "1px",
"margin-block-end": "2px",
"margin-inline-start": "3px",
"margin-inline-end": "4px",
// Physicals
"margin-right": "1px",
"margin-left": "2px",
"margin-top": "3px",
"margin-bottom": "4px",
});
}, "Writing mode with variable");

test(function() {
target.style.cssText = `
--wm1: vertical-rl;
--wm2: var(--wm1);
writing-mode: var(--wm2);
margin-block-start: 1px;
margin-block-end: 2px;
margin-inline-start: 3px;
margin-inline-end: 4px;
`;
check({
// Logicals
"margin-block-start": "1px",
"margin-block-end": "2px",
"margin-inline-start": "3px",
"margin-inline-end": "4px",
// Physicals
"margin-right": "1px",
"margin-left": "2px",
"margin-top": "3px",
"margin-bottom": "4px",
});
}, "Writing mode with nested variables");

test(function() {
target.style.cssText = `
writing-mode: inherit;
margin-block-start: 1px;
margin-block-end: 2px;
margin-inline-start: 3px;
margin-inline-end: 4px;
`;
check({
// Logicals
"margin-block-start": "1px",
"margin-block-end": "2px",
"margin-inline-start": "3px",
"margin-inline-end": "4px",
// Physicals
"margin-left": "1px",
"margin-right": "2px",
"margin-top": "3px",
"margin-bottom": "4px",
});
}, "Writing mode with 'inherit'");

test(function() {
target.style.cssText = `
writing-mode: initial;
margin-block-start: 1px;
margin-block-end: 2px;
margin-inline-start: 3px;
margin-inline-end: 4px;
`;
check({
// Logicals
"margin-block-start": "1px",
"margin-block-end": "2px",
"margin-inline-start": "3px",
"margin-inline-end": "4px",
// Physicals
"margin-top": "1px",
"margin-bottom": "2px",
"margin-left": "3px",
"margin-right": "4px",
});
}, "Writing mode with 'initial'");

test(function() {
target.style.cssText = `
writing-mode: revert;
margin-block-start: 1px;
margin-block-end: 2px;
margin-inline-start: 3px;
margin-inline-end: 4px;
`;
check({
// Logicals
"margin-block-start": "1px",
"margin-block-end": "2px",
"margin-inline-start": "3px",
"margin-inline-end": "4px",
// Physicals
"margin-left": "1px",
"margin-right": "2px",
"margin-top": "3px",
"margin-bottom": "4px",
});
}, "Writing mode with 'revert'");

test(function() {
target.className = "revert-layer";
target.style.cssText = `
margin-block-start: 1px;
margin-block-end: 2px;
margin-inline-start: 3px;
margin-inline-end: 4px;
`;
check({
// Logicals
"margin-block-start": "1px",
"margin-block-end": "2px",
"margin-inline-start": "3px",
"margin-inline-end": "4px",
// Physicals
"margin-right": "1px",
"margin-left": "2px",
"margin-top": "3px",
"margin-bottom": "4px",
});
}, "Writing mode with 'revert-layer'");
</script>
@@ -1,3 +1,43 @@
2022-03-20 Oriol Brufau <obrufau@igalia.com>

Fix CSS cascade regarding logical properties
https://bugs.webkit.org/show_bug.cgi?id=236199

Reviewed by Darin Adler.

The CSS cascade was trying to resolve logical properties into physical
ones too early. This failed if we still didn't know the direction or
writing-mode, e.g. because they were set to a variable or to a CSS-wide
keyword.

This patch keeps logical properties as-is during the cascade. They are
only resolved when finally applied. Also, both logical properties and
their physical equivalents are now set to apply in parse order, since
'height: 0px; block-size: 1px' and 'block-size: 1px; height: 0px' can be
different, the order matters.

Tests: imported/w3c/web-platform-tests/css/css-logical/animation-004.html
imported/w3c/web-platform-tests/css/css-logical/logicalprops-with-deferred-writing-mode.html

* css/CSSComputedStyleDeclaration.cpp:
(WebCore::ComputedStyleExtractor::valueForPropertyInStyle):
* css/CSSProperties.json:
* css/parser/CSSParser.cpp:
(WebCore::CSSParser::parseValueWithVariableReferences):
* style/PropertyCascade.cpp:
(WebCore::Style::shouldApplyPropertyInParseOrder):
(WebCore::Style::PropertyCascade::PropertyCascade):
(WebCore::Style::PropertyCascade::set):
(WebCore::Style::PropertyCascade::setDeferred):
(WebCore::Style::PropertyCascade::resolveDirectionAndWritingMode const): Deleted.
(WebCore::Style::PropertyCascade::direction const): Deleted.
* style/PropertyCascade.h:
(WebCore::Style::PropertyCascade::areDeferredInOrder const):
* style/StyleBuilder.cpp:
(WebCore::Style::Builder::Builder):
(WebCore::Style::Builder::applyProperty):
(WebCore::Style::directionFromStyle): Deleted.

2022-03-20 Alan Bujtas <zalan@apple.com>

[IFC][Integration] Remove redundant InlineIterator::Line::contentLogicalTopAdjustedForHitTesting
@@ -4034,6 +4034,10 @@ RefPtr<CSSValue> ComputedStyleExtractor::valueForPropertyInStyle(const RenderSty
}
case CSSPropertyBorderBlockColor:
return getCSSPropertyValuesFor2SidesShorthand(borderBlockColorShorthand());
case CSSPropertyBorderBlockEnd:
return getCSSPropertyValuesForShorthandProperties(borderBlockEndShorthand());
case CSSPropertyBorderBlockStart:
return getCSSPropertyValuesForShorthandProperties(borderBlockStartShorthand());
case CSSPropertyBorderBlockStyle:
return getCSSPropertyValuesFor2SidesShorthand(borderBlockStyleShorthand());
case CSSPropertyBorderBlockWidth:
@@ -4054,6 +4058,10 @@ RefPtr<CSSValue> ComputedStyleExtractor::valueForPropertyInStyle(const RenderSty
}
case CSSPropertyBorderInlineColor:
return getCSSPropertyValuesFor2SidesShorthand(borderInlineColorShorthand());
case CSSPropertyBorderInlineEnd:
return getCSSPropertyValuesForShorthandProperties(borderInlineEndShorthand());
case CSSPropertyBorderInlineStart:
return getCSSPropertyValuesForShorthandProperties(borderInlineStartShorthand());
case CSSPropertyBorderInlineStyle:
return getCSSPropertyValuesFor2SidesShorthand(borderInlineStyleShorthand());
case CSSPropertyBorderInlineWidth:
@@ -4205,21 +4213,17 @@ RefPtr<CSSValue> ComputedStyleExtractor::valueForPropertyInStyle(const RenderSty
break;

/* Directional properties are resolved by resolveDirectionAwareProperty() before the switch. */
case CSSPropertyBorderBlockEnd:
case CSSPropertyBorderBlockEndColor:
case CSSPropertyBorderBlockEndStyle:
case CSSPropertyBorderBlockEndWidth:
case CSSPropertyBorderBlockStart:
case CSSPropertyBorderBlockStartColor:
case CSSPropertyBorderBlockStartStyle:
case CSSPropertyBorderBlockStartWidth:
case CSSPropertyBorderEndEndRadius:
case CSSPropertyBorderEndStartRadius:
case CSSPropertyBorderInlineEnd:
case CSSPropertyBorderEndEndRadius:
case CSSPropertyBorderEndStartRadius:
case CSSPropertyBorderInlineEndColor:
case CSSPropertyBorderInlineEndStyle:
case CSSPropertyBorderInlineEndWidth:
case CSSPropertyBorderInlineStart:
case CSSPropertyBorderInlineStartColor:
case CSSPropertyBorderInlineStartStyle:
case CSSPropertyBorderInlineStartWidth:

0 comments on commit 2715a5d

Please sign in to comment.