Remove special handling of ::before and ::after on RUBY elements

https://bugs.webkit.org/show_bug.cgi?id=264446 rdar://problem/118478034 Reviewed by Antti Koivisto. Merge: https://chromium.googlesource.com/chromium/blink/+/81eb8745dfd7d21fc9588220eed989d901cb7276 This PR removes special handling, which was added in 60235@main and further work for crashes in bug 55930. This special handling is not as per web-specification and was also removed by Blink in 2015 and it was not done by Internet Explorer and Firefox. This PR changes it to treat them as they were a first or last DOM child of the RUBY parent. That's how ::before and ::after normally works. This means that now ::before and ::after will be part of, or even establish, ruby runs. Added a test for the crasher. Also rewrote three tests as reftests, since the expectations started to fail anyway. One test was invalid (ruby-beforeafter.html), since it required special handling of ::before and ::after, while the two others just got different rendering due to this change. * Source/WebCore/rendering/updating/RenderTreeBuilderRuby.cpp: (isAnonymousRubyInlineBlock): Deleted (isRubyBeforeBlock): Deleted (isRubyAfterBlock): Deleted (isRubyChildForNormalRemoval): Updated (rubyBeforeBlock): Deleted (rubyAfterBlock): Deleted (createAnonymousRubyInlineBlock): Deleted (RenderTreeBuilder::Ruby::findOrCreateParentForChild): Updated (RenderTreeBuilder::Ruby::findOrCreateParentForChild): Updated (RenderTreeBuilder::Ruby::detach): Updated for 'Inline' (RenderTreeBuilder::Ruby::detach): Updated for 'Block' Updated Tests (as Ref Tests): * LayoutTests/fast/ruby/ruby-beforeafter.html: * LayoutTests/fast/ruby/ruby-beforeafter-expected.html: * LayoutTests/fast/ruby/ruby-block-style-not-updated-with-before-after-content.html * LayoutTests/fast/ruby/ruby-block-style-not-updated-with-before-after-content-expected.html: * LayoutTests/fast/ruby/ruby-inline-style-not-updated-with-before-after-content.html: * LayoutTests/fast/ruby/ruby-inline-style-not-updated-with-before-after-content-expected.html: Crash Test: * LayoutTests/fast/ruby/add-text-to-block-ruby-with-after-pseudo-crash.html: * LayoutTests/fast/ruby/add-text-to-block-ruby-with-after-pseudo-crash-expected.txt: Resource File: * LayoutTests/resources/ahem.js: Remove Old Expectations: * LayoutTests/fast/ruby/ruby-block-style-not-updated-with-before-after-content-expected.png: * LayoutTests/fast/ruby/ruby-block-style-not-updated-with-before-after-content-expected.txt: * LayoutTests/fast/ruby/ruby-inline-style-not-updated-with-before-after-content-expected.png: * LayoutTests/fast/ruby/ruby-inline-style-not-updated-with-before-after-content-expected.txt: * LayoutTests/platform/glib/fast/ruby/ruby-beforeafter-expected.txt: * LayoutTests/platform/gtk/fast/ruby/ruby-block-style-not-updated-with-before-after-content-expected.png: * LayoutTests/platform/gtk/fast/ruby/ruby-inline-style-not-updated-with-before-after-content-expected.png: * LayoutTests/platform/ios-wk2/fast/ruby/ruby-beforeafter-expected.txt: * LayoutTests/platform/ios/fast/ruby/ruby-beforeafter-expected.txt: * LayoutTests/platform/mac/fast/ruby/ruby-beforeafter-expected.png: * LayoutTests/platform/mac/fast/ruby/ruby-beforeafter-expected.txt: * LayoutTests/platform/wincairo/fast/ruby/ruby-beforeafter-expected.txt: Canonical link: https://commits.webkit.org/270823@main
WebKit · Nov 16, 2023 · 3c70113 · 3c70113
1 parent bbd2e5d
commit 3c70113
Show file tree

Hide file tree

Showing 22 changed files with 923 additions and 581 deletions.
diff --git a/LayoutTests/fast/ruby/add-text-to-block-ruby-with-after-pseudo-crash-expected.txt b/LayoutTests/fast/ruby/add-text-to-block-ruby-with-after-pseudo-crash-expected.txt
@@ -0,0 +1 @@
+Passed if this test did not crash or assert.
diff --git a/LayoutTests/fast/ruby/add-text-to-block-ruby-with-after-pseudo-crash.html b/LayoutTests/fast/ruby/add-text-to-block-ruby-with-after-pseudo-crash.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<style>
+    ruby::after {
+        display: block;
+        content: "";
+    }
+    ruby {
+        display: block ruby;
+    }
+</style>
+
+<script>
+if (window.testRunner)
+    testRunner.dumpAsText();
+
+onload = function() {
+    var ruby = document.createElement('ruby');
+    document.body.appendChild(ruby);
+    document.body.offsetTop;
+    ruby.appendChild(document.createTextNode('Passed if this test did not crash or assert.'));
+}
+</script>
diff --git a/LayoutTests/fast/ruby/ruby-beforeafter-expected.html b/LayoutTests/fast/ruby/ruby-beforeafter-expected.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<style>
+    span {
+        color: blue;
+    }
+    rt {
+        background: yellow;
+    }
+</style>
+<p>Tests that CSS-generated :before or :after content just appear as
+    if they were the first or last DOM child of the ruby element.</p>
+<p>The blue text should have annotations above them (yellow background).</p>
+</p>Foo <ruby><span>[before]b</span><rt>long text</rt></ruby> Bar<br></p>
+</p>Foo <ruby><span>b</span><rt>long text</rt>[after]</ruby> Bar<br></p>
+</p>Foo <ruby><span>[before]b</span><rt>long text</rt>[after]</ruby> Bar<br></p>
diff --git a/LayoutTests/fast/ruby/ruby-beforeafter.html b/LayoutTests/fast/ruby/ruby-beforeafter.html
@@ -1,20 +1,22 @@
-<html>
-<head>
-    <style type="text/css">
-    <!--
-        .b:before {
-            content: '[before]';
-        }
-        .a:after {
-            content: '[after]';
-        }
-    -->
-    </style>
-</head>
-<body>
-<p>Tests that CSS-generated :before or :after content doesn't intrude into ruby bases.</p>
-</p>Foo <ruby class="b">b<rt>long text</rt></ruby> Bar<br></p>
-</p>Foo <ruby class="a">b<rt>long text</rt></ruby> Bar<br></p>
-</p>Foo <ruby class="b a">b<rt>long text</rt></ruby> Bar<br></p>
-</body>
-</html>
+<!DOCTYPE html>
+<style>
+    .b::before {
+        content: '[before]';
+        color: blue;
+    }
+    .a::after {
+        content: '[after]';
+    }
+    span {
+        color: blue;
+    }
+    rt {
+        background: yellow;
+    }
+</style>
+<p>Tests that CSS-generated :before or :after content just appear as
+    if they were the first or last DOM child of the ruby element.</p>
+<p>The blue text should have annotations above them (yellow background).</p>
+</p>Foo <ruby class="b"><span>b</span><rt>long text</rt></ruby> Bar<br></p>
+</p>Foo <ruby class="a"><span>b</span><rt>long text</rt></ruby> Bar<br></p>
+</p>Foo <ruby class="b a"><span>b</span><rt>long text</rt></ruby> Bar<br></p>
diff --git a/LayoutTests/fast/ruby/ruby-block-style-not-updated-with-before-after-content-expected.html b/LayoutTests/fast/ruby/ruby-block-style-not-updated-with-before-after-content-expected.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<p>The orange, blue, yellow and green text boxes should not overlap.</p>
+<style>
+    div, ruby {
+        font: 1em/1 Ahem, sans-serif;
+        font-size: 500%;
+    }
+</style>
+<ruby style="display:block ruby; color:blue;">
+    <span style="color:orange;">1234</span> ABCD <span style="color:yellow;">4578</span>
+</ruby>
+<div style="color:green;">
+    EFGH
+</div>
diff --git a/...s/fast/ruby/ruby-block-style-not-updated-with-before-after-content-expected.png b/...s/fast/ruby/ruby-block-style-not-updated-with-before-after-content-expected.png
diff --git a/LayoutTests/fast/ruby/ruby-block-style-not-updated-with-before-after-content-expected.txt b/LayoutTests/fast/ruby/ruby-block-style-not-updated-with-before-after-content-expected.txt
diff --git a/LayoutTests/fast/ruby/ruby-block-style-not-updated-with-before-after-content.html b/LayoutTests/fast/ruby/ruby-block-style-not-updated-with-before-after-content.html
@@ -1,28 +1,27 @@
-<!-- The orange, blue, yellow and green text boxes should not overlap -->
-<html>
-<body style="font: 1em/1 Ahem, sans-serif;">
+<!DOCTYPE html>
+<script src="../../resources/ahem.js"></script>
+<p>The orange, blue, yellow and green text boxes should not overlap.</p>
 <style>
-#test::before
-{
-    content: "1234 ";
-    color: orange;
-}
-#test::after
-{
-    content: " 4578";
-    color: yellow;
-}
+    #test::before {
+        content: "1234";
+        color: orange;
+    }
+    #test::after {
+        content: "4578";
+        color: yellow;
+    }
+    ruby, div {
+        font: 1em/1 Ahem, sans-serif;
+    }
 </style>
-<ruby id="test" style="display: block; color: blue">
-ABCD
+<ruby id="test" style="display:block ruby; color:blue;">
+    ABCD
 </ruby>
-<div style="font-size: 800%; color: green">
-EFGH
+<div style="font-size:500%; color:green;">
+    EFGH
 </div>
 <script>
     document.body.offsetTop;
     var test = document.getElementById("test");
-    test.style.fontSize = "800%";
+    test.style.fontSize = "500%";
 </script>
-</body>
-</html>
diff --git a/LayoutTests/fast/ruby/ruby-inline-style-not-updated-with-before-after-content-expected.html b/LayoutTests/fast/ruby/ruby-inline-style-not-updated-with-before-after-content-expected.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<p>The orange, blue, yellow and green text boxes should not overlap.</p>
+<style>
+    div, ruby {
+        font: 1em/1 Ahem, sans-serif;
+        font-size: 500%;
+    }
+</style>
+<ruby style="color:blue;">
+    <span style="color:orange;">1234</span> ABCD <span style="color:yellow;">4578</span>
+</ruby>
+<div style="color:green;">
+    EFGH
+</div>
diff --git a/.../fast/ruby/ruby-inline-style-not-updated-with-before-after-content-expected.png b/.../fast/ruby/ruby-inline-style-not-updated-with-before-after-content-expected.png
diff --git a/LayoutTests/fast/ruby/ruby-inline-style-not-updated-with-before-after-content-expected.txt b/LayoutTests/fast/ruby/ruby-inline-style-not-updated-with-before-after-content-expected.txt
diff --git a/LayoutTests/fast/ruby/ruby-inline-style-not-updated-with-before-after-content.html b/LayoutTests/fast/ruby/ruby-inline-style-not-updated-with-before-after-content.html
@@ -1,28 +1,26 @@
-<!-- The orange, blue, yellow and green text boxes should not overlap -->
-<html>
-<body style="font: 1em/1 Ahem, sans-serif;">
+<!DOCTYPE html>
+<p>The orange, blue, yellow and green text boxes should not overlap.</p>
 <style>
-#test::before
-{
-    content: "1234 ";
-    color: orange;
-}
-#test::after
-{
-    content: " 4578";
-    color: yellow;
-}
+    #test::before {
+        content: "1234";
+        color: orange;
+    }
+    #test::after {
+        content: "4578";
+        color: yellow;
+    }
+    ruby, div {
+        font: 1em/1 Ahem, sans-serif;
+    }
 </style>
-<ruby id="test" style="color: blue">
-ABCD
+<ruby id="test" style="color:blue;">
+    ABCD
 </ruby>
-<div style="font-size: 800%; color: green">
-EFGH
+<div style="font-size:500%; color:green;">
+    EFGH
 </div>
 <script>
     document.body.offsetTop;
     var test = document.getElementById("test");
-    test.style.fontSize = "800%";
+    test.style.fontSize = "500%";
 </script>
-</body>
-</html>
diff --git a/LayoutTests/platform/glib/fast/ruby/ruby-beforeafter-expected.txt b/LayoutTests/platform/glib/fast/ruby/ruby-beforeafter-expected.txt
diff --git a/...k/fast/ruby/ruby-block-style-not-updated-with-before-after-content-expected.png b/...k/fast/ruby/ruby-block-style-not-updated-with-before-after-content-expected.png
diff --git a/.../fast/ruby/ruby-inline-style-not-updated-with-before-after-content-expected.png b/.../fast/ruby/ruby-inline-style-not-updated-with-before-after-content-expected.png
diff --git a/LayoutTests/platform/ios-wk2/fast/ruby/ruby-beforeafter-expected.txt b/LayoutTests/platform/ios-wk2/fast/ruby/ruby-beforeafter-expected.txt