diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-ruby/ruby-overhang-expected.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-ruby/ruby-overhang-expected.html
new file mode 100644
index 0000000000000..9c653e59e4c51
--- /dev/null
+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-ruby/ruby-overhang-expected.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Tests for ruby-overhang: none</title>
+<link rel="stylesheet" href="/fonts/ahem.css">
+<style>
+  div {
+    font: 16px/5 Ahem;    
+  }
+  span {
+    color: transparent;
+    font-size: 8px; /* annotation -> 50% */
+  }
+</style>
+<div>X<span>XXX</span>X</div>
+<div>X<span>XXXX</span>X</div>
+<div>X<span>XXXX</span>X</div>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-ruby/ruby-overhang-ref.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-ruby/ruby-overhang-ref.html
new file mode 100644
index 0000000000000..9c653e59e4c51
--- /dev/null
+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-ruby/ruby-overhang-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Tests for ruby-overhang: none</title>
+<link rel="stylesheet" href="/fonts/ahem.css">
+<style>
+  div {
+    font: 16px/5 Ahem;    
+  }
+  span {
+    color: transparent;
+    font-size: 8px; /* annotation -> 50% */
+  }
+</style>
+<div>X<span>XXX</span>X</div>
+<div>X<span>XXXX</span>X</div>
+<div>X<span>XXXX</span>X</div>
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-ruby/ruby-overhang.html b/LayoutTests/imported/w3c/web-platform-tests/css/css-ruby/ruby-overhang.html
new file mode 100644
index 0000000000000..2c912869d622e
--- /dev/null
+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-ruby/ruby-overhang.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>Tests for ruby-overhang: none</title>
+<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-overhang">
+<link rel="match" href="ruby-overhang-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<style>
+  div {
+    font: 16px/5 Ahem;    
+  }
+  ruby, rt {
+    color: transparent;
+  }
+</style>
+<div>X<ruby>X<rt>XXXX</rt></ruby>X</div>
+<div>X<ruby style="ruby-overhang: none">X<rt>XXXX</rt></ruby>X</div>
+<div style="ruby-overhang: none">X<ruby>X<rt>XXXX</rt></ruby>X</div>
diff --git a/Source/WebCore/layout/formattingContexts/inline/ruby/RubyFormattingContext.cpp b/Source/WebCore/layout/formattingContexts/inline/ruby/RubyFormattingContext.cpp
index c6bdfd6290d38..4b2de99e41899 100644
--- a/Source/WebCore/layout/formattingContexts/inline/ruby/RubyFormattingContext.cpp
+++ b/Source/WebCore/layout/formattingContexts/inline/ruby/RubyFormattingContext.cpp
@@ -619,6 +619,8 @@ void RubyFormattingContext::applyRubyOverhang(InlineFormattingContext& parentFor
         auto& rubyBaseLayoutBox = displayBoxes[rubyBaseStart].layoutBox();
         ASSERT(rubyBaseLayoutBox.isRubyBase());
         ASSERT(hasInterlinearAnnotation(rubyBaseLayoutBox));
+        if (rubyBaseLayoutBox.style().rubyOverhang() == RubyOverhang::None)
+            continue;
 
         auto beforeOverhang = overhangForAnnotationBefore(rubyBaseLayoutBox, rubyBaseStart, displayBoxes, lineLogicalHeight, parentFormattingContext);
         auto afterOverhang = overhangForAnnotationAfter(rubyBaseLayoutBox, { rubyBaseStart, startEndPair.end() }, displayBoxes, lineLogicalHeight, parentFormattingContext);
