will-change should trigger stacking context based purely on properties
authorsimon.fraser@apple.com <simon.fraser@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 7 Oct 2015 15:09:02 +0000 (15:09 +0000)
committersimon.fraser@apple.com <simon.fraser@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 7 Oct 2015 15:09:02 +0000 (15:09 +0000)
https://bugs.webkit.org/show_bug.cgi?id=148068

Reviewed by Zalan Bujtas.
Source/WebCore:

Previously, our will-change implementation didn't trigger stacking context
on an inline if the will-change property didn't apply to inlines (like 'transform').
However, this doesn't agree with the CSS-WG consensus (https://lists.w3.org/Archives/Public/www-style/2015Sep/0112.html).

Change behavior to have stacking context creation behavior for will-change be
identical for inlines and blocks.

Test: fast/css/will-change/will-change-creates-stacking-context-inline.html

* rendering/RenderInline.cpp:
(WebCore::inFlowPositionedInlineAncestor):
* rendering/RenderInline.h:
(WebCore::RenderInline::willChangeCreatesStackingContext):
* rendering/style/WillChangeData.cpp:
(WebCore::propertyCreatesStackingContext):
(WebCore::WillChangeData::addFeature):
(WebCore::propertyCreatesStackingContextOnBoxesOnly): Deleted.
* rendering/style/WillChangeData.h:
(WebCore::WillChangeData::canCreateStackingContextOnInline): Deleted.

LayoutTests:

Previously, our will-change implementation didn't trigger stacking context
on an inline if the will-change property didn't apply to inlines (like 'transform').
However, this doesn't agree with the CSS-WG consensus (https://lists.w3.org/Archives/Public/www-style/2015Sep/0112.html).

Change behavior to have stacking context creation behavior for will-change be
identical for inlines and blocks.

* platform/mac/TestExpectations: Fails on Mavericks because no backdrop-filter there.
* fast/css/will-change/resources/will-change-stacking-helper.js:
(makeStackingInline):
* fast/css/will-change/will-change-creates-stacking-context-inline-expected.html: Added.
* fast/css/will-change/will-change-creates-stacking-context-inline.html: Added.

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

12 files changed:
LayoutTests/ChangeLog
LayoutTests/fast/css/will-change/resources/will-change-stacking-helper.js
LayoutTests/fast/css/will-change/will-change-creates-stacking-context-expected.html
LayoutTests/fast/css/will-change/will-change-creates-stacking-context-inline-expected.html [new file with mode: 0644]
LayoutTests/fast/css/will-change/will-change-creates-stacking-context-inline.html [new file with mode: 0644]
LayoutTests/fast/css/will-change/will-change-creates-stacking-context.html
LayoutTests/platform/mac/TestExpectations
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderInline.cpp
Source/WebCore/rendering/RenderInline.h
Source/WebCore/rendering/style/WillChangeData.cpp
Source/WebCore/rendering/style/WillChangeData.h

index 9ca9a5f..552ead1 100644 (file)
@@ -1,3 +1,23 @@
+2015-10-06  Simon Fraser  <simon.fraser@apple.com>
+
+        will-change should trigger stacking context based purely on properties
+        https://bugs.webkit.org/show_bug.cgi?id=148068
+
+        Reviewed by Zalan Bujtas.
+        
+        Previously, our will-change implementation didn't trigger stacking context
+        on an inline if the will-change property didn't apply to inlines (like 'transform').
+        However, this doesn't agree with the CSS-WG consensus (https://lists.w3.org/Archives/Public/www-style/2015Sep/0112.html).
+        
+        Change behavior to have stacking context creation behavior for will-change be
+        identical for inlines and blocks.
+
+        * platform/mac/TestExpectations: Fails on Mavericks because no backdrop-filter there.
+        * fast/css/will-change/resources/will-change-stacking-helper.js:
+        (makeStackingInline):
+        * fast/css/will-change/will-change-creates-stacking-context-inline-expected.html: Added.
+        * fast/css/will-change/will-change-creates-stacking-context-inline.html: Added.
+
 2015-10-07  Hunseop Jeong  <hs85.jeong@samsung.com>
 
         [EFL] fast/repaint/block-inputrange-repaint.html is failed.
index 0d8faa9..d7ce64d 100644 (file)
@@ -27,7 +27,7 @@ var willChangeValues = [
     { 'property' : '-webkit-flow-from', 'stacking' : true },
 ];
 
-function makeStackingBlock(stackingProperty, value)
+function makeStackingElement(stackingProperty, value)
 {
     var container = document.createElement('div');
     container.className = 'container';
@@ -48,4 +48,3 @@ function makeStackingBlock(stackingProperty, value)
     
     document.body.appendChild(container);
 }
-
index c277a5d..3b3b55c 100644 (file)
@@ -45,7 +45,7 @@
         function doTest()
         {
             for (value of willChangeValues) {
-                makeStackingBlock('z-index', value.stacking ? '0' : 'auto');
+                makeStackingElement('z-index', value.stacking ? '0' : 'auto');
             }
         }
         
diff --git a/LayoutTests/fast/css/will-change/will-change-creates-stacking-context-inline-expected.html b/LayoutTests/fast/css/will-change/will-change-creates-stacking-context-inline-expected.html
new file mode 100644 (file)
index 0000000..af842df
--- /dev/null
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+    <style>
+        .container {
+            display: inline-block;
+            margin: 25px;
+            width: 50px;
+            height: 50px;
+            position: relative;
+            border: 1px solid black;
+        }
+        
+        .container div {
+            width: 100%;
+            height: 100%;
+        }
+        
+        .potential-stacking-context {
+            z-index: auto;
+            background-color: silver;
+            display: inline;
+            padding: 20px;
+        }
+        
+        .child {
+            position: absolute;
+            top: 10px;
+            left: 10px;
+            z-index: 1;
+            background-color: orange;
+        }
+
+        .interposer {
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            z-index: 0;
+            background-color: green;
+        }
+    </style>
+
+    <script src="resources/will-change-stacking-helper.js"></script>
+    <script>
+        function doTest()
+        {
+            for (value of willChangeValues) {
+                makeStackingElement('opacity', value.stacking ? '0.999999' : '1');
+            }
+        }
+        
+        window.addEventListener('load', doTest, false);
+    </script>
+</head>
+<body>
+</body>
+</html>
diff --git a/LayoutTests/fast/css/will-change/will-change-creates-stacking-context-inline.html b/LayoutTests/fast/css/will-change/will-change-creates-stacking-context-inline.html
new file mode 100644 (file)
index 0000000..28891e5
--- /dev/null
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+    <style>
+        .container {
+            display: inline-block;
+            margin: 25px;
+            width: 50px;
+            height: 50px;
+            position: relative;
+            border: 1px solid black;
+        }
+        
+        .container div {
+            width: 100%;
+            height: 100%;
+        }
+        
+        .potential-stacking-context {
+            z-index: auto;
+            background-color: silver;
+            display: inline;
+            padding: 20px;
+        }
+        
+        .child {
+            position: absolute;
+            top: 10px;
+            left: 10px;
+            z-index: 1;
+            background-color: orange;
+        }
+
+        .interposer {
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            z-index: 0;
+            background-color: green;
+        }
+    </style>
+
+    <script src="resources/will-change-stacking-helper.js"></script>
+    <script>
+        function doTest()
+        {
+            for (value of willChangeValues) {
+                makeStackingElement('will-change', value.property);
+            }
+        }
+        
+        window.addEventListener('load', doTest, false);
+    </script>
+</head>
+<body>
+</body>
+</html>
index 0e48ac6..071d404 100644 (file)
@@ -45,7 +45,7 @@
         function doTest()
         {
             for (value of willChangeValues) {
-                makeStackingBlock('will-change', value.property);
+                makeStackingElement('will-change', value.property);
             }
         }
         
index c105487..25baec9 100644 (file)
@@ -1306,6 +1306,7 @@ webkit.org/b/143258 [ Mavericks ] http/tests/cache/disk-cache/disk-cache-validat
 [ Mavericks ] compositing/media-controls-bar-appearance.html [ Skip ]
 [ Mavericks ] compositing/media-controls-bar-appearance-big.html [ Skip ]
 [ Mavericks ] fast/css/will-change/will-change-creates-stacking-context.html [ ImageOnlyFailure ]
+[ Mavericks ] fast/css/will-change/will-change-creates-stacking-context-inline.html [ ImageOnlyFailure ]
 
 # Reftests have different expected results in Mavericks and Yosemite
 [ Mavericks ] fast/ruby/ruby-expansion-cjk.html [ ImageOnlyFailure ]
index 621eb70..00eca6c 100644 (file)
@@ -1,3 +1,30 @@
+2015-10-06  Simon Fraser  <simon.fraser@apple.com>
+
+        will-change should trigger stacking context based purely on properties
+        https://bugs.webkit.org/show_bug.cgi?id=148068
+
+        Reviewed by Zalan Bujtas.
+
+        Previously, our will-change implementation didn't trigger stacking context
+        on an inline if the will-change property didn't apply to inlines (like 'transform').
+        However, this doesn't agree with the CSS-WG consensus (https://lists.w3.org/Archives/Public/www-style/2015Sep/0112.html).
+        
+        Change behavior to have stacking context creation behavior for will-change be
+        identical for inlines and blocks.
+
+        Test: fast/css/will-change/will-change-creates-stacking-context-inline.html
+
+        * rendering/RenderInline.cpp:
+        (WebCore::inFlowPositionedInlineAncestor):
+        * rendering/RenderInline.h:
+        (WebCore::RenderInline::willChangeCreatesStackingContext):
+        * rendering/style/WillChangeData.cpp:
+        (WebCore::propertyCreatesStackingContext):
+        (WebCore::WillChangeData::addFeature):
+        (WebCore::propertyCreatesStackingContextOnBoxesOnly): Deleted.
+        * rendering/style/WillChangeData.h:
+        (WebCore::WillChangeData::canCreateStackingContextOnInline): Deleted.
+
 2015-10-07  Javier Fernandez  <jfernandez@igalia.com>
 
         [CSS Grid Layout] Modify grid item height doesn't work
index 0d8b95a..affe5d6 100644 (file)
@@ -136,7 +136,7 @@ static RenderElement* inFlowPositionedInlineAncestor(RenderElement* p)
             return p;
         p = p->parent();
     }
-    return 0;
+    return nullptr;
 }
 
 static void updateStyleOfAnonymousBlockContinuations(const RenderBlock& block, const RenderStyle* newStyle, const RenderStyle* oldStyle)
index 450bb0f..9649700 100644 (file)
@@ -179,7 +179,7 @@ private:
 
     bool willChangeCreatesStackingContext() const
     {
-        return style().willChange() && style().willChange()->canCreateStackingContextOnInline();
+        return style().willChange() && style().willChange()->canCreateStackingContext();
     }
 
     RenderLineBoxList m_lineBoxes;   // All of the line boxes created for this inline flow.  For example, <i>Hello<br>world.</i> will have two <i> line boxes.
index dfd8f04..77d4aa8 100644 (file)
@@ -65,6 +65,10 @@ bool WillChangeData::containsProperty(CSSPropertyID property) const
 static bool propertyCreatesStackingContext(CSSPropertyID property)
 {
     switch (property) {
+    case CSSPropertyPerspective:
+    case CSSPropertyTransform:
+    case CSSPropertyTransformStyle:
+    case CSSPropertyWebkitTransformStyle:
     case CSSPropertyClipPath:
     case CSSPropertyWebkitClipPath:
     case CSSPropertyMask:
@@ -86,19 +90,6 @@ static bool propertyCreatesStackingContext(CSSPropertyID property)
 #if ENABLE(CSS_REGIONS)
     case CSSPropertyWebkitFlowFrom:
 #endif
-        return true;
-    default:
-        return false;
-    }
-}
-
-static bool propertyCreatesStackingContextOnBoxesOnly(CSSPropertyID property)
-{
-    switch (property) {
-    case CSSPropertyPerspective:
-    case CSSPropertyTransform:
-    case CSSPropertyTransformStyle:
-    case CSSPropertyWebkitTransformStyle:
 #if ENABLE(ACCELERATED_OVERFLOW_SCROLLING)
     case CSSPropertyWebkitOverflowScrolling:
 #endif
@@ -142,8 +133,7 @@ void WillChangeData::addFeature(Feature feature, CSSPropertyID propertyID)
     ASSERT(feature == Property || propertyID == CSSPropertyInvalid);
     m_animatableFeatures.append(AnimatableFeature(feature, propertyID));
 
-    m_canCreateStackingContextOnInline |= propertyCreatesStackingContext(propertyID);
-    m_canCreateStackingContext |= m_canCreateStackingContextOnInline | propertyCreatesStackingContextOnBoxesOnly(propertyID);
+    m_canCreateStackingContext |= propertyCreatesStackingContext(propertyID);
 
     m_canTriggerCompositingOnInline |= propertyTriggersCompositing(propertyID);
     m_canTriggerCompositing |= m_canTriggerCompositingOnInline | propertyTriggersCompositingOnBoxesOnly(propertyID);
index 465e184..49e7608 100644 (file)
@@ -55,8 +55,6 @@ public:
     bool containsProperty(CSSPropertyID) const;
 
     bool canCreateStackingContext() const { return m_canCreateStackingContext; }
-    bool canCreateStackingContextOnInline() const { return m_canCreateStackingContextOnInline; }
-
     bool canTriggerCompositing() const { return m_canTriggerCompositing; }
     bool canTriggerCompositingOnInline() const { return m_canTriggerCompositingOnInline; }
 
@@ -124,7 +122,6 @@ private:
 
     Vector<AnimatableFeature, 1> m_animatableFeatures;
     bool m_canCreateStackingContext { false };
-    bool m_canCreateStackingContextOnInline { false };
     bool m_canTriggerCompositing { false };
     bool m_canTriggerCompositingOnInline { false };
 };