Add vertical writing mode support to RenderMenuList

https://bugs.webkit.org/show_bug.cgi?id=264267 rdar://118007185 Reviewed by Alan Baradlay and Tim Nguyen. Update `RenderMenuList` to use logical properties and values where applicable. Add WPTs for `<select>` with a vertical writing mode, similar to other controls. Note that the computed style test will only pass in WebKit once `<select>` has been marked testable. * LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/select-appearance-native-computed-style-expected.txt: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/select-appearance-native-computed-style.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/select-appearance-native-horizontal.optional-expected-mismatch.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/select-appearance-native-horizontal.optional.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/select-appearance-native-vertical.optional-expected-mismatch.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/select-appearance-native-vertical.optional.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/select-appearance-none-horizontal.optional-expected-mismatch.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/select-appearance-none-horizontal.optional.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/select-appearance-none-vertical-lr.optional-expected-mismatch.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/select-appearance-none-vertical-lr.optional.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/select-appearance-none-vertical-rl.optional-expected.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-writing-modes/forms/select-appearance-none-vertical-rl.optional.html: Added. * LayoutTests/platform/glib/imported/w3c/web-platform-tests/css/css-writing-modes/forms/select-appearance-native-computed-style-expected.txt: Added. * LayoutTests/platform/ios/imported/w3c/web-platform-tests/css/css-writing-modes/forms/select-appearance-native-computed-style-expected.txt: Added. * Source/WebCore/rendering/RenderMenuList.cpp: (WebCore::RenderMenuList::adjustInnerStyle): (RenderMenuList::computeIntrinsicLogicalWidths const): (RenderMenuList::computePreferredLogicalWidths): * Source/WebCore/rendering/style/RenderStyle.cpp: (WebCore::RenderStyle::setMarginBefore): (WebCore::RenderStyle::setMarginAfter): * Source/WebCore/rendering/style/RenderStyle.h: * Source/WebCore/rendering/style/RenderStyleSetters.h: (WebCore::RenderStyle::setLogicalMinWidth): (WebCore::RenderStyle::setLogicalMaxWidth): Canonical link: https://commits.webkit.org/270309@main
WebKit · Nov 7, 2023 · 6caf36a · 6caf36a
1 parent 9c20db5
commit 6caf36a
Show file tree

Hide file tree

Showing 18 changed files with 344 additions and 11 deletions.
diff --git a/...rm-tests/css/css-writing-modes/forms/select-appearance-native-computed-style-expected.txt b/...rm-tests/css/css-writing-modes/forms/select-appearance-native-computed-style-expected.txt
@@ -0,0 +1,6 @@
+
+
+PASS select[style="writing-mode: horizontal-tb"] block size should match height and inline size should match width
+FAIL select[style="writing-mode: vertical-lr"] block size should match width and inline size should match height assert_equals: expected "77px" but got "18px"
+FAIL select[style="writing-mode: vertical-rl"] block size should match width and inline size should match height assert_equals: expected "77px" but got "18px"
+
diff --git a/...b-platform-tests/css/css-writing-modes/forms/select-appearance-native-computed-style.html b/...b-platform-tests/css/css-writing-modes/forms/select-appearance-native-computed-style.html
@@ -0,0 +1,59 @@
+<!doctype html>
+<link rel="author" title="Aditya Keerthi" href="https://github.com/pxlcoder">
+<link rel="help" href="https://html.spec.whatwg.org/#the-select-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes/#block-flow">
+<title>Select appearance native writing mode computed style</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<select style="writing-mode: horizontal-tb">
+    <option>Option 1</option>
+    <option>Option 2</option>
+    <option>Option 3</option>
+    <option>Option 4</option>
+    <option>Option 5</option>
+</select>
+
+<select style="writing-mode: vertical-lr">
+    <option>Option 1</option>
+    <option>Option 2</option>
+    <option>Option 3</option>
+    <option>Option 4</option>
+    <option>Option 5</option>
+</select>
+
+<select style="writing-mode: vertical-rl">
+    <option>Option 1</option>
+    <option>Option 2</option>
+    <option>Option 3</option>
+    <option>Option 4</option>
+    <option>Option 5</option>
+</select>
+
+<script>
+test(() => {
+  const select = document.querySelector(`select[style="writing-mode: horizontal-tb"]`);
+  const style = getComputedStyle(select);
+  const blockSize = parseInt(style.blockSize, 10);
+  const inlineSize = parseInt(style.inlineSize, 10);
+  assert_not_equals(blockSize, 0);
+  assert_not_equals(inlineSize, 0);
+  assert_greater_than(inlineSize, blockSize);
+  assert_equals(style.blockSize, style.height);
+  assert_equals(style.inlineSize, style.width);
+}, `select[style="writing-mode: horizontal-tb"] block size should match height and inline size should match width`);
+
+for (const writingMode of ["vertical-lr", "vertical-rl"]) {
+  test(() => {
+    const select = document.querySelector(`select[style="writing-mode: ${writingMode}"]`);
+    const style = getComputedStyle(select);
+    const blockSize = parseInt(style.blockSize, 10);
+    const inlineSize = parseInt(style.inlineSize, 10);
+    assert_not_equals(blockSize, 0);
+    assert_not_equals(inlineSize, 0);
+    assert_greater_than(inlineSize, blockSize);
+    assert_equals(style.blockSize, style.width);
+    assert_equals(style.inlineSize, style.height);
+  }, `select[style="writing-mode: ${writingMode}"] block size should match width and inline size should match height`);
+};
+</script>
diff --git a/...s-writing-modes/forms/select-appearance-native-horizontal.optional-expected-mismatch.html b/...s-writing-modes/forms/select-appearance-native-horizontal.optional-expected-mismatch.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<link rel="author" title="Aditya Keerthi" href="https://github.com/pxlcoder">
+<link rel="help" href="https://html.spec.whatwg.org/#the-select-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Select appearance none writing mode horizontal</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="select-appearance-native-horizontal.optional.html">
+<link rel="mismatch" href="select-appearance-none-vertical-lr.optional.html">
+<link rel="mismatch" href="select-appearance-none-vertical-rl.optional.html">
+<link rel="mismatch" href="select-appearance-native-vertical.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The select element below should match the correct writing mode.</p>
+<select style="writing-mode: horizontal-tb; appearance: none;">
+    <option>Option 1</option>
+    <option>Option 2</option>
+    <option>Option 3</option>
+    <option>Option 4</option>
+    <option>Option 5</option>
+</select>
diff --git a/...tform-tests/css/css-writing-modes/forms/select-appearance-native-horizontal.optional.html b/...tform-tests/css/css-writing-modes/forms/select-appearance-native-horizontal.optional.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<link rel="author" title="Aditya Keerthi" href="https://github.com/pxlcoder">
+<link rel="help" href="https://html.spec.whatwg.org/#the-select-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Select appearance native writing mode horizontal</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="select-appearance-none-horizontal.optional.html">
+<link rel="mismatch" href="select-appearance-native-vertical.optional.html">
+<link rel="mismatch" href="select-appearance-none-vertical-lr.optional.html">
+<link rel="mismatch" href="select-appearance-none-vertical-rl.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The select element below should match the correct writing mode.</p>
+<select style="writing-mode: horizontal-tb">
+    <option>Option 1</option>
+    <option>Option 2</option>
+    <option>Option 3</option>
+    <option>Option 4</option>
+    <option>Option 5</option>
+</select>
diff --git a/...css-writing-modes/forms/select-appearance-native-vertical.optional-expected-mismatch.html b/...css-writing-modes/forms/select-appearance-native-vertical.optional-expected-mismatch.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<link rel="author" title="Aditya Keerthi" href="https://github.com/pxlcoder">
+<link rel="help" href="https://html.spec.whatwg.org/#the-select-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Select appearance none writing mode vertical</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="select-appearance-native-vertical.optional.html">
+<link rel="mismatch" href="select-appearance-none-horizontal.optional.html">
+<link rel="mismatch" href="select-appearance-native-horizontal.optional.html">
+<link rel="match" href="select-appearance-none-vertical-rl.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The select element below should match the correct writing mode.</p>
+<select style="writing-mode: vertical-lr; appearance: none;">
+    <option>Option 1</option>
+    <option>Option 2</option>
+    <option>Option 3</option>
+    <option>Option 4</option>
+    <option>Option 5</option>
+</select>
diff --git a/...latform-tests/css/css-writing-modes/forms/select-appearance-native-vertical.optional.html b/...latform-tests/css/css-writing-modes/forms/select-appearance-native-vertical.optional.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<link rel="author" title="Aditya Keerthi" href="https://github.com/pxlcoder">
+<link rel="help" href="https://html.spec.whatwg.org/#the-select-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Select appearance native writing mode vertical</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="select-appearance-none-vertical-lr.optional.html">
+<link rel="mismatch" href="select-appearance-none-vertical-rl.optional.html">
+<link rel="mismatch" href="select-appearance-native-horizontal.optional.html">
+<link rel="mismatch" href="select-appearance-none-horizontal.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The select element below should match the correct writing mode.</p>
+<select style="writing-mode: vertical-lr">
+    <option>Option 1</option>
+    <option>Option 2</option>
+    <option>Option 3</option>
+    <option>Option 4</option>
+    <option>Option 5</option>
+</select>
diff --git a/...css-writing-modes/forms/select-appearance-none-horizontal.optional-expected-mismatch.html b/...css-writing-modes/forms/select-appearance-none-horizontal.optional-expected-mismatch.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<link rel="author" title="Aditya Keerthi" href="https://github.com/pxlcoder">
+<link rel="help" href="https://html.spec.whatwg.org/#the-select-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Select appearance native writing mode horizontal</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="select-appearance-none-horizontal.optional.html">
+<link rel="mismatch" href="select-appearance-native-vertical.optional.html">
+<link rel="mismatch" href="select-appearance-none-vertical-lr.optional.html">
+<link rel="mismatch" href="select-appearance-none-vertical-rl.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The select element below should match the correct writing mode.</p>
+<select style="writing-mode: horizontal-tb">
+    <option>Option 1</option>
+    <option>Option 2</option>
+    <option>Option 3</option>
+    <option>Option 4</option>
+    <option>Option 5</option>
+</select>
diff --git a/...latform-tests/css/css-writing-modes/forms/select-appearance-none-horizontal.optional.html b/...latform-tests/css/css-writing-modes/forms/select-appearance-none-horizontal.optional.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<link rel="author" title="Aditya Keerthi" href="https://github.com/pxlcoder">
+<link rel="help" href="https://html.spec.whatwg.org/#the-select-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Select appearance none writing mode horizontal</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="select-appearance-native-horizontal.optional.html">
+<link rel="mismatch" href="select-appearance-none-vertical-lr.optional.html">
+<link rel="mismatch" href="select-appearance-none-vertical-rl.optional.html">
+<link rel="mismatch" href="select-appearance-native-vertical.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The select element below should match the correct writing mode.</p>
+<select style="writing-mode: horizontal-tb; appearance: none;">
+    <option>Option 1</option>
+    <option>Option 2</option>
+    <option>Option 3</option>
+    <option>Option 4</option>
+    <option>Option 5</option>
+</select>
diff --git a/...ss-writing-modes/forms/select-appearance-none-vertical-lr.optional-expected-mismatch.html b/...ss-writing-modes/forms/select-appearance-none-vertical-lr.optional-expected-mismatch.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<link rel="author" title="Aditya Keerthi" href="https://github.com/pxlcoder">
+<link rel="help" href="https://html.spec.whatwg.org/#the-select-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Select appearance native writing mode vertical</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="select-appearance-none-vertical-lr.optional.html">
+<link rel="mismatch" href="select-appearance-none-vertical-rl.optional.html">
+<link rel="mismatch" href="select-appearance-native-horizontal.optional.html">
+<link rel="mismatch" href="select-appearance-none-horizontal.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The select element below should match the correct writing mode.</p>
+<select style="writing-mode: vertical-lr">
+    <option>Option 1</option>
+    <option>Option 2</option>
+    <option>Option 3</option>
+    <option>Option 4</option>
+    <option>Option 5</option>
+</select>
diff --git a/...atform-tests/css/css-writing-modes/forms/select-appearance-none-vertical-lr.optional.html b/...atform-tests/css/css-writing-modes/forms/select-appearance-none-vertical-lr.optional.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<link rel="author" title="Aditya Keerthi" href="https://github.com/pxlcoder">
+<link rel="help" href="https://html.spec.whatwg.org/#the-select-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Select appearance none writing mode vertical</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="select-appearance-native-vertical.optional.html">
+<link rel="mismatch" href="select-appearance-none-horizontal.optional.html">
+<link rel="mismatch" href="select-appearance-native-horizontal.optional.html">
+<link rel="match" href="select-appearance-none-vertical-rl.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The select element below should match the correct writing mode.</p>
+<select style="writing-mode: vertical-lr; appearance: none;">
+    <option>Option 1</option>
+    <option>Option 2</option>
+    <option>Option 3</option>
+    <option>Option 4</option>
+    <option>Option 5</option>
+</select>
diff --git a/...sts/css/css-writing-modes/forms/select-appearance-none-vertical-rl.optional-expected.html b/...sts/css/css-writing-modes/forms/select-appearance-none-vertical-rl.optional-expected.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<link rel="author" title="Aditya Keerthi" href="https://github.com/pxlcoder">
+<link rel="help" href="https://html.spec.whatwg.org/#the-select-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Select appearance none writing mode vertical</title>
+<meta charset="utf-8">
+<link rel="mismatch" href="select-appearance-native-vertical.optional.html">
+<link rel="mismatch" href="select-appearance-none-horizontal.optional.html">
+<link rel="mismatch" href="select-appearance-native-horizontal.optional.html">
+<link rel="match" href="select-appearance-none-vertical-rl.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The select element below should match the correct writing mode.</p>
+<select style="writing-mode: vertical-lr; appearance: none;">
+    <option>Option 1</option>
+    <option>Option 2</option>
+    <option>Option 3</option>
+    <option>Option 4</option>
+    <option>Option 5</option>
+</select>
diff --git a/...atform-tests/css/css-writing-modes/forms/select-appearance-none-vertical-rl.optional.html b/...atform-tests/css/css-writing-modes/forms/select-appearance-none-vertical-rl.optional.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<link rel="author" title="Aditya Keerthi" href="https://github.com/pxlcoder">
+<link rel="help" href="https://html.spec.whatwg.org/#the-select-element">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#block-flow">
+<title>Select appearance none writing mode vertical</title>
+<meta charset="utf-8">
+<link rel="match" href="select-appearance-none-vertical-lr.optional.html">
+<link rel="mismatch" href="select-appearance-native-vertical.optional.html">
+<link rel="mismatch" href="select-appearance-none-horizontal.optional.html">
+<link rel="mismatch" href="select-appearance-native-horizontal.optional.html">
+
+<!-- Note test description should be the same across all files to mismatch on. -->
+<p>The select element below should match the correct writing mode.</p>
+<select style="writing-mode: vertical-rl; appearance: none;">
+    <option>Option 1</option>
+    <option>Option 2</option>
+    <option>Option 3</option>
+    <option>Option 4</option>
+    <option>Option 5</option>
+</select>
diff --git a/...rm-tests/css/css-writing-modes/forms/select-appearance-native-computed-style-expected.txt b/...rm-tests/css/css-writing-modes/forms/select-appearance-native-computed-style-expected.txt
@@ -0,0 +1,6 @@
+
+
+PASS select[style="writing-mode: horizontal-tb"] block size should match height and inline size should match width
+FAIL select[style="writing-mode: vertical-lr"] block size should match width and inline size should match height assert_equals: expected "88px" but got "30px"
+FAIL select[style="writing-mode: vertical-rl"] block size should match width and inline size should match height assert_equals: expected "88px" but got "30px"
+
diff --git a/...rm-tests/css/css-writing-modes/forms/select-appearance-native-computed-style-expected.txt b/...rm-tests/css/css-writing-modes/forms/select-appearance-native-computed-style-expected.txt
@@ -0,0 +1,6 @@
+
+
+PASS select[style="writing-mode: horizontal-tb"] block size should match height and inline size should match width
+FAIL select[style="writing-mode: vertical-lr"] block size should match width and inline size should match height assert_equals: expected "70px" but got "20px"
+FAIL select[style="writing-mode: vertical-rl"] block size should match width and inline size should match height assert_equals: expected "70px" but got "20px"
+
diff --git a/Source/WebCore/rendering/RenderMenuList.cpp b/Source/WebCore/rendering/RenderMenuList.cpp
@@ -120,17 +120,22 @@ void RenderMenuList::adjustInnerStyle()
     innerStyle.setFlexGrow(1);
     innerStyle.setFlexShrink(1);
     // min-width: 0; is needed for correct shrinking.
-    innerStyle.setMinWidth(Length(0, LengthType::Fixed));
+    innerStyle.setLogicalMinWidth(Length(0, LengthType::Fixed));
     // Use margin:auto instead of align-items:center to get safe centering, i.e.
     // when the content overflows, treat it the same as align-items: flex-start.
     // But we only do that for the cases where html.css would otherwise use center.
     if (style().alignItems().position() == ItemPosition::Center) {
-        innerStyle.setMarginTop(Length());
-        innerStyle.setMarginBottom(Length());
+        innerStyle.setMarginBefore(Length());
+        innerStyle.setMarginAfter(Length());
+
         innerStyle.setAlignSelfPosition(ItemPosition::FlexStart);
     }
 
-    innerStyle.setPaddingBox(theme().popupInternalPaddingBox(style(), document().settings()));
+    auto paddingBox = theme().popupInternalPaddingBox(style(), document().settings());
+    if (!style().isHorizontalWritingMode())
+        paddingBox = LengthBox(paddingBox.left().value(), paddingBox.top().value(), paddingBox.right().value(), paddingBox.bottom().value());
+
+    innerStyle.setPaddingBox(WTFMove(paddingBox));
 
     if (document().page()->chrome().selectItemWritingDirectionIsNatural()) {
         // Items in the popup will not respect the CSS text-align and direction properties,
@@ -322,12 +327,12 @@ LayoutRect RenderMenuList::controlClipRect(const LayoutPoint& additionalOffset)
 void RenderMenuList::computeIntrinsicLogicalWidths(LayoutUnit& minLogicalWidth, LayoutUnit& maxLogicalWidth) const
 {
     maxLogicalWidth = shouldApplySizeContainment() ? theme().minimumMenuListSize(style()) : std::max(m_optionsWidth, theme().minimumMenuListSize(style()));
-    maxLogicalWidth += m_innerBlock->paddingLeft() + m_innerBlock->paddingRight();
+    maxLogicalWidth += m_innerBlock->paddingStart() + m_innerBlock->paddingEnd();
     if (shouldApplySizeOrInlineSizeContainment()) {
-        if (auto width = explicitIntrinsicInnerLogicalWidth())
-            maxLogicalWidth = width.value();
+        if (auto logicalWidth = explicitIntrinsicInnerLogicalWidth())
+            maxLogicalWidth = logicalWidth.value();
     }
-    if (!style().width().isPercentOrCalculated())
+    if (!style().logicalWidth().isPercentOrCalculated())
         minLogicalWidth = maxLogicalWidth;
 }
 
@@ -336,12 +341,12 @@ void RenderMenuList::computePreferredLogicalWidths()
     m_minPreferredLogicalWidth = 0;
     m_maxPreferredLogicalWidth = 0;
 
-    if (style().width().isFixed() && style().width().value() > 0)
-        m_minPreferredLogicalWidth = m_maxPreferredLogicalWidth = adjustContentBoxLogicalWidthForBoxSizing(style().width());
+    if (style().logicalWidth().isFixed() && style().logicalWidth().value() > 0)
+        m_minPreferredLogicalWidth = m_maxPreferredLogicalWidth = adjustContentBoxLogicalWidthForBoxSizing(style().logicalWidth());
     else
         computeIntrinsicLogicalWidths(m_minPreferredLogicalWidth, m_maxPreferredLogicalWidth);
 
-    RenderBox::computePreferredLogicalWidths(style().minWidth(), style().maxWidth(), horizontalBorderAndPaddingExtent());
+    RenderBox::computePreferredLogicalWidths(style().logicalMinWidth(), style().logicalMaxWidth(), style().isHorizontalWritingMode() ? horizontalBorderAndPaddingExtent() : verticalBorderAndPaddingExtent());
 
     setPreferredLogicalWidthsDirty(false);
 }

diff --git a/Source/WebCore/rendering/style/RenderStyle.cpp b/Source/WebCore/rendering/style/RenderStyle.cpp
@@ -3272,6 +3272,36 @@ void RenderStyle::setMarginEnd(Length&& margin)
     }
 }
 
+void RenderStyle::setMarginBefore(Length&& margin)
+{
+    if (isHorizontalWritingMode()) {
+        if (isFlippedBlocksWritingMode())
+            setMarginBottom(WTFMove(margin));
+        else
+            setMarginTop(WTFMove(margin));
+    } else {
+        if (isFlippedBlocksWritingMode())
+            setMarginRight(WTFMove(margin));
+        else
+            setMarginLeft(WTFMove(margin));
+    }
+}
+
+void RenderStyle::setMarginAfter(Length&& margin)
+{
+    if (isHorizontalWritingMode()) {
+        if (isFlippedBlocksWritingMode())
+            setMarginTop(WTFMove(margin));
+        else
+            setMarginBottom(WTFMove(margin));
+    } else {
+        if (isFlippedBlocksWritingMode())
+            setMarginLeft(WTFMove(margin));
+        else
+            setMarginRight(WTFMove(margin));
+    }
+}
+
 TextEmphasisMark RenderStyle::textEmphasisMark() const
 {
     auto mark = static_cast<TextEmphasisMark>(m_rareInheritedData->textEmphasisMark);