Display property as specified on svg elements

https://bugs.webkit.org/show_bug.cgi?id=257267

Reviewed by Tim Nguyen.

This patch aligns WebKit with Blink / Chromium and Gecko / Firefox.

Merge: https://src.chromium.org/viewvc/blink?view=revision&revision=177649

The computed display of svg elements should be as for other elements. For
svg:svg elements, they should behave as other replaced elements when styled
with inline-block, table-cell, etc. For svg elements inside the root svg
element, they still get a computed value for display as other elements,
although the rendering is the same for all display values different from
'none'.

Also, this change makes it possible to remove the custom style building for
display.

NOTE: We still need to add special handling of '<g>' etc., for display type
content and have FIXME in 'StyleAdjuster.cpp'.

* Source/WebCore/css/CSSProperties.json:
* Source/WebCore/style/StyleBuilderCustom.h: Remove 'isValidDisplayValue'
(BuilderCustom::isValidDisplayValue): Removed
(BuilderCustom::applyInheritDisplay): Removed
(BuilderCustom::applyValueDisplay): Removed
* LayoutTests/svg/css/display-computed.html: Add Test Case
* LayoutTests/svg/css/display-computed-expected.txt: Add Test Case Expectation
* LayoutTests/svg/css/display.html: Add Test Case
* LayoutTests/svg/css/display-expected.html: Add Test Case Expectation
* LayoutTests/imported/w3c/web-platform-tests/css/css-display/display-contents-svg-anchor-child-expected.txt: Rebaselined
* LayoutTests/platform/glib/imported/w3c/web-platform-tests/svg/import/masking-path-12-f-manual-expected.txt: Rebaselined
* LayoutTests/platform/ios-simulator/imported/w3c/web-platform-tests/svg/imp…/masking-path-12-f-manual-expected.txt: Rebaselined
* LayoutTests/platform/mac/imported/w3c/web-platform-tests/svg/import/masking-path-12-f-manual-expected.txt: Rebaselined

Canonical link: https://commits.webkit.org/264627@main

LayoutTests/imported/w3c/web-platform-tests/css/css-display/display-contents-svg-anchor-child-expected.txt

@@ -1,4 +1,3 @@
-Text
 
 PASS Loading this page should not cause a crash.
 

LayoutTests/platform/glib/imported/w3c/web-platform-tests/svg/import/masking-path-12-f-manual-expected.txt

@@ -8,7 +8,6 @@ layer at (0,0) size 800x600
         RenderSVGResourceClipper {clipPath} [id="testClip"] [clipPathUnits=userSpaceOnUse]
           RenderSVGRect {rect} at (166,166) size 84x84 [fill={[type=SOLID] [color=#000000]}] [x=100.00] [y=100.00] [width=50.00] [height=50.00]
       RenderSVGRect {rect} at (333,166) size 84x84 [fill={[type=SOLID] [color=#008000]}] [x=200.00] [y=100.00] [width=50.00] [height=50.00]
-      RenderSVGRect {rect} at (333,166) size 84x84 [fill={[type=SOLID] [color=#FF0000]}] [x=200.00] [y=100.00] [width=50.00] [height=50.00]
     RenderSVGContainer {g} at (16,518) size 380x60
       RenderSVGText {text} at (10,311) size 228x36 contains 1 chunk(s)
         RenderSVGInlineText {#text} at (0,0) size 228x36

LayoutTests/platform/ios-simulator/imported/w3c/web-platform-tests/svg/import/masking-path-12-f-manual-expected.txt

@@ -8,7 +8,6 @@ layer at (0,0) size 800x600
         RenderSVGResourceClipper {clipPath} [id="testClip"] [clipPathUnits=userSpaceOnUse]
           RenderSVGRect {rect} at (166,166) size 84x84 [fill={[type=SOLID] [color=#000000]}] [x=100.00] [y=100.00] [width=50.00] [height=50.00]
       RenderSVGRect {rect} at (333,166) size 84x84 [fill={[type=SOLID] [color=#008000]}] [x=200.00] [y=100.00] [width=50.00] [height=50.00]
-      RenderSVGRect {rect} at (333,166) size 84x84 [fill={[type=SOLID] [color=#FF0000]}] [x=200.00] [y=100.00] [width=50.00] [height=50.00]
     RenderSVGContainer {g} at (16,516) size 385x64
       RenderSVGText {text} at (10,310) size 231x38 contains 1 chunk(s)
         RenderSVGInlineText {#text} at (0,0) size 231x38

LayoutTests/platform/mac/imported/w3c/web-platform-tests/svg/import/masking-path-12-f-manual-expected.txt

@@ -8,7 +8,6 @@ layer at (0,0) size 800x600
         RenderSVGResourceClipper {clipPath} [id="testClip"] [clipPathUnits=userSpaceOnUse]
           RenderSVGRect {rect} at (166,166) size 84x84 [fill={[type=SOLID] [color=#000000]}] [x=100.00] [y=100.00] [width=50.00] [height=50.00]
       RenderSVGRect {rect} at (333,166) size 84x84 [fill={[type=SOLID] [color=#008000]}] [x=200.00] [y=100.00] [width=50.00] [height=50.00]
-      RenderSVGRect {rect} at (333,166) size 84x84 [fill={[type=SOLID] [color=#FF0000]}] [x=200.00] [y=100.00] [width=50.00] [height=50.00]
     RenderSVGContainer {g} at (16,517) size 381x62
       RenderSVGText {text} at (10,310) size 229x38 contains 1 chunk(s)
         RenderSVGInlineText {#text} at (0,0) size 229x37

LayoutTests/svg/css/display-computed-expected.txt

@@ -0,0 +1,17 @@
+
+
+PASS svg:svg display inline
+PASS svg:g display inline
+PASS svg:svg display block
+PASS svg:g display block
+PASS svg:svg display inline-block
+PASS svg:g display inline-block
+PASS svg:svg display inline-table
+PASS svg:g display inline-table
+PASS svg:svg display table
+PASS svg:g display table
+PASS svg:svg display table-cell
+PASS svg:g display table-cell
+PASS svg:svg display contents computes to none
+FAIL svg:g display contents computes to contents assert_equals: expected "contents" but got "none"
+

LayoutTests/svg/css/display-computed.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<style>
+svg { width: 0; height: 0; }
+#t1, #t1 g { display: inline }
+#t2, #t2 g { display: block; }
+#t3, #t3 g { display: inline-block; }
+#t4, #t4 g { display: inline-table; }
+#t5, #t5 g { display: table; }
+#t6, #t6 g { display: table-cell; }
+#t7, #t7 g { display: contents; }
+</style>
+<svg id="t1"><g/></svg>
+<svg id="t2"><g/></svg>
+<svg id="t3"><g/></svg>
+<svg id="t4"><g/></svg>
+<svg id="t5"><g/></svg>
+<svg id="t6"><g/></svg>
+<svg id="t7"><g/></svg>
+<script>
+test(function(){ assert_equals(getComputedStyle(document.querySelector("#t1")).display, "inline"); }, "svg:svg display inline");
+test(function(){ assert_equals(getComputedStyle(document.querySelector("#t1 g")).display, "inline"); }, "svg:g display inline");
+test(function(){ assert_equals(getComputedStyle(document.querySelector("#t2")).display, "block"); }, "svg:svg display block");
+test(function(){ assert_equals(getComputedStyle(document.querySelector("#t2 g")).display, "block"); }, "svg:g display block");
+test(function(){ assert_equals(getComputedStyle(document.querySelector("#t3")).display, "inline-block"); }, "svg:svg display inline-block");
+test(function(){ assert_equals(getComputedStyle(document.querySelector("#t3 g")).display, "inline-block"); }, "svg:g display inline-block");
+test(function(){ assert_equals(getComputedStyle(document.querySelector("#t4")).display, "inline-table"); }, "svg:svg display inline-table");
+test(function(){ assert_equals(getComputedStyle(document.querySelector("#t4 g")).display, "inline-table"); }, "svg:g display inline-table");
+test(function(){ assert_equals(getComputedStyle(document.querySelector("#t5")).display, "table"); }, "svg:svg display table");
+test(function(){ assert_equals(getComputedStyle(document.querySelector("#t5 g")).display, "table"); }, "svg:g display table");
+test(function(){ assert_equals(getComputedStyle(document.querySelector("#t6")).display, "table-cell"); }, "svg:svg display table-cell");
+test(function(){ assert_equals(getComputedStyle(document.querySelector("#t6 g")).display, "table-cell"); }, "svg:g display table-cell");
+test(function(){ assert_equals(getComputedStyle(document.querySelector("#t7")).display, "none"); }, "svg:svg display contents computes to none");
+test(function(){ assert_equals(getComputedStyle(document.querySelector("#t7 g")).display, "contents"); }, "svg:g display contents computes to contents");
+</script>

LayoutTests/svg/css/display-expected.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<style>
+img {
+    width: 20px;
+    height: 20px;
+    background: green;
+}
+
+.table { display: table }
+
+#t1 { display: inline }
+#t2 { display: block; }
+#t3 { display: inline-block; }
+#t4 { display: inline-table; }
+#t5 { display: table; }
+#t6 { display: table-cell; }
+#t7, #t8 { display: none; }
+</style>
+<img id="t1" src="../../css2.1/support/1x1-transparent.png">
+<img id="t2" src="../../css2.1/support/1x1-transparent.png">
+<img id="t3" src="../../css2.1/support/1x1-transparent.png">
+<img id="t4" src="../../css2.1/support/1x1-transparent.png">
+<img id="t5" src="../../css2.1/support/1x1-transparent.png">
+<div class="table">
+    &nbsp;
+    <img id="t6" src="../../css2.1/support/1x1-transparent.png">
+</div>
+<img id="t7" src="../../css2.1/support/1x1-transparent.png">
+Inline content <img id="t8" src="../../css2.1/support/1x1-transparent.png">

LayoutTests/svg/css/display.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<style>
+svg {
+    width: 20px;
+    height: 20px;
+    background: green;
+}
+
+.table { display: table }
+
+#t1 { display: inline }
+#t2 { display: block; }
+#t3 { display: inline-block; }
+#t4 { display: inline-table; }
+#t5 { display: table; }
+#t6 { display: table-cell; }
+#t7, #t8 { display: contents; }
+</style>
+<svg id="t1"></svg>
+<svg id="t2"></svg>
+<svg id="t3"></svg>
+<svg id="t4"></svg>
+<svg id="t5"></svg>
+<div class="table">
+    &nbsp;
+    <svg id="t6"></svg>
+</div>
+<svg id="t7"></svg>
+Inline content <svg id="t8"></svg>

Source/WebCore/css/CSSProperties.json

@@ -470,7 +470,6 @@
                 }
             ],
             "codegen-properties": {
-                "custom": "Inherit|Value",
                 "high-priority": true,
                 "parser-function": "consumeDisplay",
                 "parser-grammar-unused": "[ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy> | <-webkit-display>",

Source/WebCore/style/StyleBuilderCustom.h

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2013 Google Inc. All rights reserved.
+ * Copyright (C) 2013-2014 Google Inc. All rights reserved.
  * Copyright (C) 2014-2022 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
@@ -178,7 +178,6 @@ class BuilderCustom {
 
     template <CSSPropertyID id>
     static void applyTextOrBoxShadowValue(BuilderState&, CSSValue&);
-    static bool isValidDisplayValue(BuilderState&, DisplayType);
 
     enum CounterBehavior {Increment = 0, Reset};
     template <CounterBehavior counterBehavior>
@@ -1129,13 +1128,6 @@ inline void BuilderCustom::applyValueBorderTopRightRadius(BuilderState& builderS
     builderState.style().setHasExplicitlySetBorderTopRightRadius(true);
 }
 
-inline bool BuilderCustom::isValidDisplayValue(BuilderState& builderState, DisplayType display)
-{
-    if (is<SVGElement>(builderState.element()) && builderState.style().styleType() == PseudoId::None)
-        return display == DisplayType::Inline || display == DisplayType::Block || display == DisplayType::None;
-    return true;
-}
-
 inline void BuilderCustom::applyInitialFontVariationSettings(BuilderState& builderState)
 {
     builderState.style().setFontVariationSettings({ });
@@ -1146,20 +1138,6 @@ inline void BuilderCustom::applyInheritFontVariationSettings(BuilderState& build
     builderState.style().setFontVariationSettings(builderState.parentStyle().fontVariationSettings());
 }
 
-inline void BuilderCustom::applyInheritDisplay(BuilderState& builderState)
-{
-    DisplayType display = builderState.parentStyle().display();
-    if (isValidDisplayValue(builderState, display))
-        builderState.style().setDisplay(display);
-}
-
-inline void BuilderCustom::applyValueDisplay(BuilderState& builderState, CSSValue& value)
-{
-    auto display = fromCSSValue<DisplayType>(value);
-    if (isValidDisplayValue(builderState, display))
-        builderState.style().setDisplay(display);
-}
-
 inline void BuilderCustom::applyInheritBaselineShift(BuilderState& builderState)
 {
     auto& svgStyle = builderState.style().accessSVGStyle();