Implement CSS `display: flow-root` (modern clearfix)
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 18 May 2019 04:29:48 +0000 (04:29 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 18 May 2019 04:29:48 +0000 (04:29 +0000)
https://bugs.webkit.org/show_bug.cgi?id=165603

Patch by Joonghun Park <pjh0718@gmail.com> on 2019-05-17
Reviewed by Zalan Bujtas.

This change follows https://drafts.csswg.org/css-display-3/#valdef-display-flow-root as below.

'display: flow-root' generates a block container box, and lays out its contents using flow layout.
It always establishes a new block formatting context for its contents.

Source/WebCore:

* css/CSSPrimitiveValueMappings.h:
(WebCore::CSSPrimitiveValue::CSSPrimitiveValue):
* css/CSSValueKeywords.in:
* css/StyleResolver.cpp:
(WebCore::equivalentBlockDisplay):
* css/parser/CSSParserFastPaths.cpp:
(WebCore::CSSParserFastPaths::isValidKeywordPropertyAndValue):
* rendering/RenderBox.cpp:
(WebCore::RenderBox::createsNewFormattingContext const):
* rendering/RenderElement.cpp:
(WebCore::RenderElement::createFor):
* rendering/style/RenderStyleConstants.h:

Source/WebInspectorUI:

* UserInterface/External/CodeMirror/css.js:

LayoutTests:

* TestExpectations:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@245494 268f45cc-cd09-0410-ab3c-d52691b4dbfc

12 files changed:
LayoutTests/ChangeLog
LayoutTests/TestExpectations
Source/WebCore/ChangeLog
Source/WebCore/css/CSSPrimitiveValueMappings.h
Source/WebCore/css/CSSValueKeywords.in
Source/WebCore/css/StyleResolver.cpp
Source/WebCore/css/parser/CSSParserFastPaths.cpp
Source/WebCore/rendering/RenderBox.cpp
Source/WebCore/rendering/RenderElement.cpp
Source/WebCore/rendering/style/RenderStyleConstants.h
Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/External/CodeMirror/css.js

index f137ef3..60a6b02 100644 (file)
@@ -1,3 +1,17 @@
+2019-05-17  Joonghun Park  <pjh0718@gmail.com>
+
+        Implement CSS `display: flow-root` (modern clearfix)
+        https://bugs.webkit.org/show_bug.cgi?id=165603
+
+        Reviewed by Zalan Bujtas.
+
+        This change follows https://drafts.csswg.org/css-display-3/#valdef-display-flow-root as below.
+
+        'display: flow-root' generates a block container box, and lays out its contents using flow layout.
+        It always establishes a new block formatting context for its contents.
+
+        * TestExpectations:
+
 2019-05-17  Antoine Quint  <graouts@apple.com>
 
         Add a website policy to disable the legacy -webkit-overflow-scrolling:touch behavior
 2019-05-17  Antoine Quint  <graouts@apple.com>
 
         Add a website policy to disable the legacy -webkit-overflow-scrolling:touch behavior
index 78f1ba6..0967119 100644 (file)
@@ -2006,7 +2006,6 @@ webkit.org/b/197430 imported/w3c/web-platform-tests/css/css-text/word-break/word
 ### START OF display: contents failures
 
 webkit.org/b/157477 imported/w3c/web-platform-tests/css/css-display/display-contents-dynamic-table-001-inline.html [ ImageOnlyFailure ]
 ### START OF display: contents failures
 
 webkit.org/b/157477 imported/w3c/web-platform-tests/css/css-display/display-contents-dynamic-table-001-inline.html [ ImageOnlyFailure ]
-webkit.org/b/157477 imported/w3c/web-platform-tests/css/css-display/display-flow-root-001.html [ ImageOnlyFailure ]
 
 ### END OF display: contents failures
 ########################################
 
 ### END OF display: contents failures
 ########################################
index 2912496..5714973 100644 (file)
@@ -1,3 +1,28 @@
+2019-05-17  Joonghun Park  <pjh0718@gmail.com>
+
+        Implement CSS `display: flow-root` (modern clearfix)
+        https://bugs.webkit.org/show_bug.cgi?id=165603
+
+        Reviewed by Zalan Bujtas.
+
+        This change follows https://drafts.csswg.org/css-display-3/#valdef-display-flow-root as below.
+
+        'display: flow-root' generates a block container box, and lays out its contents using flow layout.
+        It always establishes a new block formatting context for its contents.
+
+        * css/CSSPrimitiveValueMappings.h:
+        (WebCore::CSSPrimitiveValue::CSSPrimitiveValue):
+        * css/CSSValueKeywords.in:
+        * css/StyleResolver.cpp:
+        (WebCore::equivalentBlockDisplay):
+        * css/parser/CSSParserFastPaths.cpp:
+        (WebCore::CSSParserFastPaths::isValidKeywordPropertyAndValue):
+        * rendering/RenderBox.cpp:
+        (WebCore::RenderBox::createsNewFormattingContext const):
+        * rendering/RenderElement.cpp:
+        (WebCore::RenderElement::createFor):
+        * rendering/style/RenderStyleConstants.h:
+
 2019-05-17  Don Olmstead  <don.olmstead@sony.com>
 
         [CMake] Use builtin FindICU
 2019-05-17  Don Olmstead  <don.olmstead@sony.com>
 
         [CMake] Use builtin FindICU
index f608cfe..9d120ca 100644 (file)
@@ -1409,6 +1409,9 @@ template<> inline CSSPrimitiveValue::CSSPrimitiveValue(DisplayType e)
     case DisplayType::Contents:
         m_value.valueID = CSSValueContents;
         break;
     case DisplayType::Contents:
         m_value.valueID = CSSValueContents;
         break;
+    case DisplayType::FlowRoot:
+        m_value.valueID = CSSValueFlowRoot;
+        break;
     }
 }
 
     }
 }
 
index 5afe356..e9192d3 100644 (file)
@@ -454,6 +454,7 @@ inline-flex
 contents
 grid
 inline-grid
 contents
 grid
 inline-grid
+flow-root
 //none
 //
 // CSS_PROP_CURSOR:
 //none
 //
 // CSS_PROP_CURSOR:
index 2da5ec1..4e8113f 100644 (file)
@@ -696,6 +696,7 @@ static DisplayType equivalentBlockDisplay(const RenderStyle& style, const Docume
     case DisplayType::Flex:
     case DisplayType::WebKitFlex:
     case DisplayType::Grid:
     case DisplayType::Flex:
     case DisplayType::WebKitFlex:
     case DisplayType::Grid:
+    case DisplayType::FlowRoot:
         return display;
 
     case DisplayType::ListItem:
         return display;
 
     case DisplayType::ListItem:
index a0a0e31..a201765 100644 (file)
@@ -577,7 +577,7 @@ bool CSSParserFastPaths::isValidKeywordPropertyAndValue(CSSPropertyID propertyId
         // table-column-group | table-column | table-cell | table-caption | -webkit-box | -webkit-inline-box | none
         // flex | inline-flex | -webkit-flex | -webkit-inline-flex | grid | inline-grid
         return (valueID >= CSSValueInline && valueID <= CSSValueContents) || valueID == CSSValueNone
         // table-column-group | table-column | table-cell | table-caption | -webkit-box | -webkit-inline-box | none
         // flex | inline-flex | -webkit-flex | -webkit-inline-flex | grid | inline-grid
         return (valueID >= CSSValueInline && valueID <= CSSValueContents) || valueID == CSSValueNone
-            || valueID == CSSValueGrid || valueID == CSSValueInlineGrid;
+            || valueID == CSSValueGrid || valueID == CSSValueInlineGrid || valueID == CSSValueFlowRoot;
     case CSSPropertyDominantBaseline:
         // auto | use-script | no-change | reset-size | ideographic |
         // alphabetic | hanging | mathematical | central | middle |
     case CSSPropertyDominantBaseline:
         // auto | use-script | no-change | reset-size | ideographic |
         // alphabetic | hanging | mathematical | central | middle |
index b6bb7e1..de2fe37 100644 (file)
@@ -4510,7 +4510,7 @@ bool RenderBox::createsNewFormattingContext() const
 {
     return isInlineBlockOrInlineTable() || isFloatingOrOutOfFlowPositioned() || hasOverflowClip() || isFlexItemIncludingDeprecated()
         || isTableCell() || isTableCaption() || isFieldset() || isWritingModeRoot() || isDocumentElementRenderer() || isRenderFragmentedFlow() || isRenderFragmentContainer()
 {
     return isInlineBlockOrInlineTable() || isFloatingOrOutOfFlowPositioned() || hasOverflowClip() || isFlexItemIncludingDeprecated()
         || isTableCell() || isTableCaption() || isFieldset() || isWritingModeRoot() || isDocumentElementRenderer() || isRenderFragmentedFlow() || isRenderFragmentContainer()
-        || isGridItem() || style().specifiesColumns() || style().columnSpan() == ColumnSpan::All;
+        || isGridItem() || style().specifiesColumns() || style().columnSpan() == ColumnSpan::All || style().display() == DisplayType::FlowRoot;
 }
 
 bool RenderBox::avoidsFloats() const
 }
 
 bool RenderBox::avoidsFloats() const
index 1a40fb2..6ee67c5 100644 (file)
@@ -158,6 +158,7 @@ RenderPtr<RenderElement> RenderElement::createFor(Element& element, RenderStyle&
             return createRenderer<RenderInline>(element, WTFMove(style));
         FALLTHROUGH; // Fieldsets should make a block flow if display:inline is set.
     case DisplayType::Block:
             return createRenderer<RenderInline>(element, WTFMove(style));
         FALLTHROUGH; // Fieldsets should make a block flow if display:inline is set.
     case DisplayType::Block:
+    case DisplayType::FlowRoot:
     case DisplayType::InlineBlock:
     case DisplayType::Compact:
         return createRenderer<RenderBlockFlow>(element, WTFMove(style));
     case DisplayType::InlineBlock:
     case DisplayType::Compact:
         return createRenderer<RenderBlockFlow>(element, WTFMove(style));
index 64e3ce9..6d6ffbe 100644 (file)
@@ -876,6 +876,7 @@ enum class DisplayType : uint8_t {
     Contents,
     Grid,
     InlineGrid,
     Contents,
     Grid,
     InlineGrid,
+    FlowRoot,
     None
 };
 
     None
 };
 
index e90c2e6..2fb9615 100644 (file)
@@ -1,3 +1,17 @@
+2019-05-17  Joonghun Park  <pjh0718@gmail.com>
+
+        Implement CSS `display: flow-root` (modern clearfix)
+        https://bugs.webkit.org/show_bug.cgi?id=165603
+
+        Reviewed by Zalan Bujtas.
+
+        This change follows https://drafts.csswg.org/css-display-3/#valdef-display-flow-root as below.
+
+        'display: flow-root' generates a block container box, and lays out its contents using flow layout.
+        It always establishes a new block formatting context for its contents.
+
+        * UserInterface/External/CodeMirror/css.js:
+
 2019-05-17  Ross Kirsling  <ross.kirsling@sony.com>
 
         REGRESSION(r244350): Web Inspector: Storage tab data grids aren't editable.
 2019-05-17  Ross Kirsling  <ross.kirsling@sony.com>
 
         REGRESSION(r244350): Web Inspector: Storage tab data grids aren't editable.
index 3eb2250..c4ee448 100644 (file)
@@ -614,7 +614,7 @@ CodeMirror.defineMode("css", function(config, parserConfig) {
     "ethiopic-halehame-sid-et", "ethiopic-halehame-so-et",
     "ethiopic-halehame-ti-er", "ethiopic-halehame-ti-et", "ethiopic-halehame-tig",
     "ethiopic-numeric", "ew-resize", "exclusion", "expanded", "extends", "extra-condensed",
     "ethiopic-halehame-sid-et", "ethiopic-halehame-so-et",
     "ethiopic-halehame-ti-er", "ethiopic-halehame-ti-et", "ethiopic-halehame-tig",
     "ethiopic-numeric", "ew-resize", "exclusion", "expanded", "extends", "extra-condensed",
-    "extra-expanded", "fantasy", "fast", "fill", "fixed", "flat", "flex", "flex-end", "flex-start", "footnotes",
+    "extra-expanded", "fantasy", "fast", "fill", "fixed", "flat", "flex", "flex-end", "flex-start", "flow-root", "footnotes",
     "forwards", "from", "geometricPrecision", "georgian", "graytext", "grid", "groove",
     "gujarati", "gurmukhi", "hand", "hangul", "hangul-consonant", "hard-light", "hebrew",
     "help", "hidden", "hide", "higher", "highlight", "highlighttext",
     "forwards", "from", "geometricPrecision", "georgian", "graytext", "grid", "groove",
     "gujarati", "gurmukhi", "hand", "hangul", "hangul-consonant", "hard-light", "hebrew",
     "help", "hidden", "hide", "higher", "highlight", "highlighttext",