Skip to content

Commit 5f949b1

Browse files
weinigweinig
committed
Update outline-width and outline-offset to match updated computed style resolution rules
https://bugs.webkit.org/show_bug.cgi?id=304909 Reviewed by Darin Adler. The rules for the `outline-width` property's computed value resolution were updated with w3c/csswg-drafts#11494 to disentangle `outline-width` and `outline-style` for computed style, making `outline-style` only effect the used value. We also erroneously entangled `outline-offset`, so we fix that here too. To make it harder for rendering code to use the computed value (which does not apply `outline-style`), `RenderStyle::outlineWidth()` and `RenderStyle::outlineOffset()` no longer exist at all (skipped via `skip-render-style-getter` codegen entry) and instead `RenderStyle::usedOutlineWidth()` and `RenderStyle::usedOutlineOffset()` exist in their place. If someone really wants the computed value, they can use `RenderStyle::computedStyle().outlineWidth()/outlineStyle()`, which is what the style extractor does. Also renamed `RenderStyle::outlineSize()` to `RenderStyle::usedOutlineSize()` for consistency with the two new functions. * LayoutTests/fast/css/getComputedStyle/computed-style-expected.txt: * LayoutTests/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt: * LayoutTests/fast/css/getComputedStyle/getComputedStyle-outline-shorthand-expected.txt: * LayoutTests/fast/css/getComputedStyle/getComputedStyle-outline-shorthand.html: * LayoutTests/fast/replaced/resources/focus-test.js: * LayoutTests/imported/w3c/web-platform-tests/css/css-typed-om/the-stylepropertymap/properties/outline-width.html: * LayoutTests/imported/w3c/web-platform-tests/css/css-ui/outline-009-expected.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-ui/outline-009-expected.xht: Removed. * LayoutTests/imported/w3c/web-platform-tests/css/css-ui/outline-009.html: * LayoutTests/imported/w3c/web-platform-tests/css/css-ui/parsing/canonical-order-outline-sub-properties-001-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/css/css-ui/parsing/canonical-order-outline-sub-properties-001.html: * LayoutTests/imported/w3c/web-platform-tests/css/css-ui/parsing/outline-offset-computed-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/css/css-ui/parsing/outline-offset-computed.html: * LayoutTests/imported/w3c/web-platform-tests/css/css-ui/parsing/outline-width-computed-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/css/css-ui/parsing/outline-width-computed.html: * LayoutTests/media/video-mouse-focus-expected.txt: * LayoutTests/media/video-mouse-focus.html: * LayoutTests/svg/css/getComputedStyle-basic-expected.txt: * Source/WebCore/accessibility/AccessibilityRenderObject.cpp: * Source/WebCore/css/CSSProperties.json: * Source/WebCore/layout/formattingContexts/inline/display/InlineDisplayContentBuilder.cpp: * Source/WebCore/rendering/BorderEdge.cpp: * Source/WebCore/rendering/OutlinePainter.cpp: * Source/WebCore/rendering/RenderBox.cpp: * Source/WebCore/rendering/RenderElement.cpp: * Source/WebCore/rendering/RenderImage.cpp: * Source/WebCore/rendering/RenderInline.cpp: * Source/WebCore/rendering/RenderObject.cpp: * Source/WebCore/rendering/RenderReplaced.cpp: * Source/WebCore/rendering/RenderTableCell.cpp: * Source/WebCore/rendering/cocoa/RenderThemeCocoa.mm: * Source/WebCore/rendering/style/RenderStyle+GettersInlines.h: * Source/WebCore/rendering/style/RenderStyle.cpp: * Source/WebCore/rendering/style/RenderStyle.h: * Source/WebCore/rendering/svg/SVGBoundingBoxComputation.cpp: * Source/WebCore/rendering/svg/SVGRenderSupport.cpp: * Source/WebCore/rendering/svg/legacy/LegacyRenderSVGContainer.cpp: * Source/WebCore/rendering/svg/legacy/LegacyRenderSVGImage.cpp: * Source/WebCore/rendering/svg/legacy/LegacyRenderSVGModelObject.cpp: * Source/WebCore/rendering/svg/legacy/LegacyRenderSVGShape.cpp: * Source/WebCore/style/StyleDifference.cpp: * Source/WebCore/style/computed/StyleComputedStyleProperties+GettersCustom.cpp: Canonical link: https://commits.webkit.org/305153@main
1 parent 94a8f0d commit 5f949b1

File tree

44 files changed

+142
-141
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+142
-141
lines changed

‎LayoutTests/accessibility/ios-simulator/taking-focus-should-refocus-page-expected.txt‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,22 @@ This test ensures that making an element focused via accessibility (e.g. full ke
33
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
44

55

6-
PASS getComputedStyle(button).getPropertyValue('outline-width') is '0px'
7-
PASS getComputedStyle(textInput).getPropertyValue('outline-width') is '0px'
6+
PASS getComputedStyle(button).getPropertyValue('outline-style') is 'none'
7+
PASS getComputedStyle(textInput).getPropertyValue('outline-style') is 'none'
88

99
Taking focus via accessibilityController for id #button
10-
PASS getComputedStyle(button).getPropertyValue('outline-width') is '3px'
11-
PASS getComputedStyle(textInput).getPropertyValue('outline-width') is '0px'
10+
PASS getComputedStyle(button).getPropertyValue('outline-style') is 'auto'
11+
PASS getComputedStyle(textInput).getPropertyValue('outline-style') is 'none'
1212

1313
Taking focus via accessibilityController for id #text-input
14-
PASS getComputedStyle(button).getPropertyValue('outline-width') is '0px'
15-
PASS getComputedStyle(textInput).getPropertyValue('outline-width') is '3px'
14+
PASS getComputedStyle(button).getPropertyValue('outline-style') is 'none'
15+
PASS getComputedStyle(textInput).getPropertyValue('outline-style') is 'auto'
1616

1717
Making the entire page un-focused
1818

1919
Taking focus via accessibilityController for id #button
20-
PASS getComputedStyle(button).getPropertyValue('outline-width') is '3px'
21-
PASS getComputedStyle(textInput).getPropertyValue('outline-width') is '0px'
20+
PASS getComputedStyle(button).getPropertyValue('outline-style') is 'auto'
21+
PASS getComputedStyle(textInput).getPropertyValue('outline-style') is 'none'
2222
PASS successfullyParsed is true
2323

2424
TEST COMPLETE

‎LayoutTests/accessibility/ios-simulator/taking-focus-should-refocus-page.html‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -20,17 +20,17 @@
2020
if (window.accessibilityController) {
2121
var button = document.getElementById("button");
2222
var textInput = document.getElementById("text-input");
23-
shouldBe("getComputedStyle(button).getPropertyValue('outline-width')", "'0px'");
24-
shouldBe("getComputedStyle(textInput).getPropertyValue('outline-width')", "'0px'");
23+
shouldBe("getComputedStyle(button).getPropertyValue('outline-style')", "'none'");
24+
shouldBe("getComputedStyle(textInput).getPropertyValue('outline-style')", "'none'");
2525

2626
takeFocus("button");
2727
// Expect focus ring to have been drawn for the button.
28-
shouldBe("getComputedStyle(button).getPropertyValue('outline-width')", "'3px'");
29-
shouldBe("getComputedStyle(textInput).getPropertyValue('outline-width')", "'0px'");
28+
shouldBe("getComputedStyle(button).getPropertyValue('outline-style')", "'auto'");
29+
shouldBe("getComputedStyle(textInput).getPropertyValue('outline-style')", "'none'");
3030

3131
takeFocus("text-input");
32-
shouldBe("getComputedStyle(button).getPropertyValue('outline-width')", "'0px'");
33-
shouldBe("getComputedStyle(textInput).getPropertyValue('outline-width')", "'3px'");
32+
shouldBe("getComputedStyle(button).getPropertyValue('outline-style')", "'none'");
33+
shouldBe("getComputedStyle(textInput).getPropertyValue('outline-style')", "'auto'");
3434

3535
debug("\nMaking the entire page un-focused");
3636
// This simulates situations in which WebKit is embedded in another app and focus is not properly handed
@@ -44,8 +44,8 @@
4444
// Focusing the button via accessibility should re-focus the page and allow a focus ring to be drawn.
4545
// This simulates conditions where embedded WKWebView's are not ever marked as focused via their hosting
4646
// app, e.g. via [WKContentViewInteraction becomeFirstResponderForWebView].
47-
shouldBe("getComputedStyle(button).getPropertyValue('outline-width')", "'3px'");
48-
shouldBe("getComputedStyle(textInput).getPropertyValue('outline-width')", "'0px'");
47+
shouldBe("getComputedStyle(button).getPropertyValue('outline-style')", "'auto'");
48+
shouldBe("getComputedStyle(textInput).getPropertyValue('outline-style')", "'none'");
4949
}
5050
</script>
5151
</body>

‎LayoutTests/fast/css/getComputedStyle/computed-style-expected.txt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@ orphans: 2;
141141
outline-color: rgb(0, 0, 0);
142142
outline-offset: 0px;
143143
outline-style: none;
144-
outline-width: 0px;
144+
outline-width: 3px;
145145
overflow-wrap: normal;
146146
overflow-x: visible;
147147
overflow-y: visible;

‎LayoutTests/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@ orphans: 2
140140
outline-color: rgb(0, 0, 0)
141141
outline-offset: 0px
142142
outline-style: none
143-
outline-width: 0px
143+
outline-width: 3px
144144
overflow-wrap: normal
145145
overflow-x: visible
146146
overflow-y: visible

‎LayoutTests/fast/css/getComputedStyle/getComputedStyle-outline-shorthand-expected.txt‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,11 @@ PASS computedStyle.getPropertyCSSValue('outline').item(1).getStringValue() is 's
2121
PASS computedStyle.getPropertyCSSValue('outline').item(2).getRGBColorValue().red.getFloatValue(CSSPrimitiveValue.CSS_NUMBER) is 0
2222
PASS computedStyle.getPropertyCSSValue('outline').item(2).getRGBColorValue().green.getFloatValue(CSSPrimitiveValue.CSS_NUMBER) is 0
2323
PASS computedStyle.getPropertyCSSValue('outline').item(2).getRGBColorValue().blue.getFloatValue(CSSPrimitiveValue.CSS_NUMBER) is 0
24-
FAIL computedStyle.getPropertyValue('outline') should be 4px none rgb(255, 0, 0). Was 0px none rgb(255, 0, 0).
24+
PASS computedStyle.getPropertyValue('outline') is '4px none rgb(255, 0, 0)'
2525
PASS computedStyle.getPropertyCSSValue('outline').toString() is '[object CSSValueList]'
2626
PASS computedStyle.getPropertyCSSValue('outline').length is 3
27-
FAIL computedStyle.getPropertyCSSValue('outline').cssText should be 4px none rgb(255, 0, 0). Was 0px none rgb(255, 0, 0).
28-
FAIL computedStyle.getPropertyCSSValue('outline').item(0).getFloatValue(CSSPrimitiveValue.CSS_NUMBER) should be 4. Was 0.
27+
PASS computedStyle.getPropertyCSSValue('outline').cssText is '4px none rgb(255, 0, 0)'
28+
PASS computedStyle.getPropertyCSSValue('outline').item(0).getFloatValue(CSSPrimitiveValue.CSS_NUMBER) is 4
2929
PASS computedStyle.getPropertyCSSValue('outline').item(1).getStringValue() is 'none'
3030
PASS computedStyle.getPropertyCSSValue('outline').item(2).getRGBColorValue().red.getFloatValue(CSSPrimitiveValue.CSS_NUMBER) is 255
3131
PASS computedStyle.getPropertyCSSValue('outline').item(2).getRGBColorValue().green.getFloatValue(CSSPrimitiveValue.CSS_NUMBER) is 0

‎LayoutTests/fast/replaced/resources/focus-test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ function checkNoFocusRing(element, event)
77
var style = getComputedStyle(element, null).getPropertyValue('outline-style');
88
var width = getComputedStyle(element, null).getPropertyValue('outline-width');
99

10-
var noFocusRing = (width == '0px') && (style == 'none');
10+
var noFocusRing = (style == 'none');
1111

1212
document.body.insertAdjacentHTML('beforeEnd', '<BR>' + element.tagName +
1313
' Event: ' + event.type);

‎LayoutTests/imported/w3c/web-platform-tests/css/css-typed-om/the-stylepropertymap/properties/outline-width.html‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,29 +12,27 @@
1212
<script>
1313
'use strict';
1414

15-
function assert_is_zero_px(result) {
16-
assert_style_value_equals(result, new CSSUnitValue(0, 'px'));
15+
function assert_is_keyword_width(result, expected) {
16+
assert_style_value_equals(result, new CSSUnitValue(expected, 'px'));
1717
}
1818

1919
runPropertyTests('outline-width', [
20-
// Computed value is 0 when outline-style is 'none'.
21-
// FIXME: Add separate test where outline-style is not 'none' or 'hidden'.
20+
// Computed value is independent of outline-style.
2221
{
2322
syntax: 'thin',
24-
computed: (_, result) => assert_is_zero_px(result)
23+
computed: (_, result) => assert_is_keyword_width(result, 1)
2524
},
2625
{
2726
syntax: 'medium',
28-
computed: (_, result) => assert_is_zero_px(result)
27+
computed: (_, result) => assert_is_keyword_width(result, 3)
2928
},
3029
{
3130
syntax: 'thick',
32-
computed: (_, result) => assert_is_zero_px(result)
31+
computed: (_, result) => assert_is_keyword_width(result, 5)
3332
},
3433
{
3534
syntax: '<length>',
3635
specified: assert_is_equal_with_range_handling,
37-
computed: (_, result) => assert_is_zero_px(result)
3836
},
3937
]);
4038

‎LayoutTests/imported/w3c/web-platform-tests/css/css-ui/outline-009-expected.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!doctype html>
2+
<link rel=help href="https://github.com/w3c/csswg-drafts/issues/11494#issuecomment-2628447227">
3+
<link rel="author" title="Sam Davis Omekara Jr." href="mailto:[email protected]">
4+
<style>
5+
div {
6+
width: 100px;
7+
height: 100px;
8+
background: green;
9+
10+
outline-width: 10px;
11+
outline-style: solid;
12+
outline-color: red;
13+
}
14+
</style>
15+
<p>Outline width <strong>does not</strong> compute to 0 when outline-style is none.</p>
16+
<div></div>

‎LayoutTests/imported/w3c/web-platform-tests/css/css-ui/outline-009-expected.xht‎

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎LayoutTests/imported/w3c/web-platform-tests/css/css-ui/outline-009.html‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
<!doctype html>
22
<html lang=en>
33
<meta charset=utf-8>
4-
<title>CSS-UI test: computed values ouf outline-width when outline-style is none</title>
4+
<title>CSS-UI test: computed values of outline-width when outline-style is none</title>
55
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net">
66
<meta name=flags content="">
7-
<meta name=assert content="outline-width computes to 0 when outline-style is none">
8-
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
7+
<meta name=assert content="outline-width does not compute to 0 when outline-style is none">
8+
<link rel="match" href="outline-009-ref.html">
99
<link rel=help href="https://drafts.csswg.org/css-ui-3/#outline-props">
10+
<link rel=help href="https://github.com/w3c/csswg-drafts/issues/11494#issuecomment-2628447227">
1011
<style>
1112
body {
1213
outline-width: 10px;
1314
outline-style: none;
14-
1515
}
1616
div {
1717
width: 100px;
@@ -24,6 +24,5 @@
2424
}
2525
</style>
2626

27-
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
27+
<p>Outline width <strong>does not</strong> compute to 0 when outline-style is none.</p>
2828
<div></div>
29-

0 commit comments

Comments
 (0)