text-decoration: underline is not applied to web component

https://bugs.webkit.org/show_bug.cgi?id=226724
<rdar://problem/78987286>

Reviewed by Ryosuke Niwa.

Source/WebCore:

'text-decoration' is not an inherited property in itself but its effective value
behaves as it was. We fail to inherit this effective value into author shadow trees.

Test case by Jeroen Zwartepoorte.

Test: fast/shadow-dom/effective-text-decoration-inheritance.html

* style/StyleAdjuster.cpp:
(WebCore::Style::shouldInheritEffectiveTextDecorations):

Test for user agent shadow tree, not a shadow tree in general.
Also inverse the logic and refactor a bit.

(WebCore::Style::Adjuster::adjust const):
(WebCore::Style::isAtShadowBoundary): Deleted.
(WebCore::Style::doesNotInheritTextDecoration): Deleted.

LayoutTests:

* fast/shadow-dom/effective-text-decoration-inheritance-expected.html: Added.
* fast/shadow-dom/effective-text-decoration-inheritance.html: Added.


Canonical link: https://commits.webkit.org/238591@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@278602 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog

@@ -1,3 +1,14 @@
+2021-06-08  Antti Koivisto  <antti@apple.com>
+
+        `text-decoration: underline` is not applied to web component
+        https://bugs.webkit.org/show_bug.cgi?id=226724
+        <rdar://problem/78987286>
+
+        Reviewed by Ryosuke Niwa.
+
+        * fast/shadow-dom/effective-text-decoration-inheritance-expected.html: Added.
+        * fast/shadow-dom/effective-text-decoration-inheritance.html: Added.
+
 2021-06-08  Fujii Hironori  <Hironori.Fujii@sony.com>
 
         [WinCairo] Unreviewed test gardening

LayoutTests/fast/shadow-dom/effective-text-decoration-inheritance-expected.html

@@ -0,0 +1 @@
+<div style="text-decoration: underline">This should be underlined</div>

LayoutTests/fast/shadow-dom/effective-text-decoration-inheritance.html

@@ -0,0 +1,21 @@
+<script>
+class CustomElement extends HTMLElement {
+  constructor() {
+    super();
+
+    const shadow = this.attachShadow({ mode: 'open' });
+    const slot = document.createElement('slot');
+    const style = document.createElement('style');
+    style.textContent = `
+      :host {
+        text-decoration: underline;
+      }
+    `;
+    shadow.append(style, slot);
+  }
+}
+
+customElements.define('custom-element', CustomElement);
+</script>
+
+<custom-element>This should be underlined</custom-element>

Source/WebCore/ChangeLog

@@ -1,3 +1,28 @@
+2021-06-08  Antti Koivisto  <antti@apple.com>
+
+        `text-decoration: underline` is not applied to web component
+        https://bugs.webkit.org/show_bug.cgi?id=226724
+        <rdar://problem/78987286>
+
+        Reviewed by Ryosuke Niwa.
+
+        'text-decoration' is not an inherited property in itself but its effective value
+        behaves as it was. We fail to inherit this effective value into author shadow trees.
+
+        Test case by Jeroen Zwartepoorte.
+
+        Test: fast/shadow-dom/effective-text-decoration-inheritance.html
+
+        * style/StyleAdjuster.cpp:
+        (WebCore::Style::shouldInheritEffectiveTextDecorations):
+
+        Test for user agent shadow tree, not a shadow tree in general.
+        Also inverse the logic and refactor a bit.
+
+        (WebCore::Style::Adjuster::adjust const):
+        (WebCore::Style::isAtShadowBoundary): Deleted.
+        (WebCore::Style::doesNotInheritTextDecoration): Deleted.
+
 2021-06-08  Frédéric Wang  <fwang@igalia.com>
 
         Crash in InsertParagraphSeparatorCommand::doApply

Source/WebCore/style/StyleAdjuster.cpp

@@ -141,20 +141,33 @@ static DisplayType equivalentBlockDisplay(const RenderStyle& style, const Docume
     return DisplayType::Block;
 }
 
-static inline bool isAtShadowBoundary(const Element& element)
+static bool shouldInheritTextDecorationsInEffect(const RenderStyle& style, const Element* element)
 {
-    auto* parentNode = element.parentNode();
-    return parentNode && parentNode->isShadowRoot();
-}
+    if (style.isFloating() || style.hasOutOfFlowPosition())
+        return false;
 
-// CSS requires text-decoration to be reset at each DOM element for tables,
-// inline blocks, inline tables, shadow DOM crossings, floating elements,
-// and absolute or relatively positioned elements.
-static bool doesNotInheritTextDecoration(const RenderStyle& style, const Element* element)
-{
-    return style.display() == DisplayType::Table || style.display() == DisplayType::InlineTable
-        || style.display() == DisplayType::InlineBlock || style.display() == DisplayType::InlineBox || (element && isAtShadowBoundary(*element))
-        || style.isFloating() || style.hasOutOfFlowPosition();
+    auto isAtUserAgentShadowBoundary = [&] {
+        if (!element)
+            return false;
+        auto* parentNode = element->parentNode();
+        return parentNode && parentNode->isUserAgentShadowRoot();
+    }();
+
+    // There is no other good way to prevent decorations from affecting user agent shadow trees.
+    if (isAtUserAgentShadowBoundary)
+        return false;
+
+    switch (style.display()) {
+    case DisplayType::Table:
+    case DisplayType::InlineTable:
+    case DisplayType::InlineBlock:
+    case DisplayType::InlineBox:
+        return false;
+    default:
+        break;
+    };
+
+    return true;
 }
 
 static bool isScrollableOverflow(Overflow overflow)
@@ -393,10 +406,10 @@ void Adjuster::adjust(RenderStyle& style, const RenderStyle* userAgentAppearance
         }
     }
 
-    if (doesNotInheritTextDecoration(style, m_element))
-        style.setTextDecorationsInEffect(style.textDecoration());
-    else
+    if (shouldInheritTextDecorationsInEffect(style, m_element))
         style.addToTextDecorationsInEffect(style.textDecoration());
+    else
+        style.setTextDecorationsInEffect(style.textDecoration());
 
     // If either overflow value is not visible, change to auto.
     if (style.overflowX() == Overflow::Visible && style.overflowY() != Overflow::Visible) {