Source/WebCore: Add -webkit-overflow-scrolling CSS property
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 16 Feb 2012 05:09:09 +0000 (05:09 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 16 Feb 2012 05:09:09 +0000 (05:09 +0000)
https://bugs.webkit.org/show_bug.cgi?id=78664

Patch by Sami Kyostila <skyostil@google.com> on 2012-02-15
Reviewed by Eric Seidel.

Add a CSS property indicating that an element with overflow scrolling
should follow the platform's behavior for touch scrollable user
interface objects. For instance, this property could enable momentum
scrolling for the element if that is the platform convention.

The property has two possible values: auto (default) and touch. The
former does not alter overflow scrolling behavior, while the latter
activates touch scrolling.

As a side effect, enabling touch scrolling also causes an element to
gain a stacking context. This is to allow the implementation to promote
the scrolling contents into a render layer, which can be translated more
efficiently.

This property was introduced with iOS 5 WebKit. Another implementation
is in Chrome for Android.

Test: platform/chromium/compositing/overflow/overflow-scrolling-touch-stacking-context.html

* css/CSSComputedStyleDeclaration.cpp:
(WebCore):
(WebCore::CSSComputedStyleDeclaration::getPropertyCSSValue):
* css/CSSParser.cpp:
(WebCore::CSSParser::parseValue):
* css/CSSProperty.cpp:
(WebCore::CSSProperty::isInheritedProperty):
* css/CSSPropertyNames.in:
* css/CSSStyleSelector.cpp:
(WebCore::CSSStyleSelector::adjustRenderStyle):
(WebCore::CSSStyleSelector::applyProperty):
* css/CSSValueKeywords.in:
* rendering/style/RenderStyle.h:
* rendering/style/StyleRareInheritedData.cpp:
(WebCore::StyleRareInheritedData::StyleRareInheritedData):
(WebCore::StyleRareInheritedData::operator==):
* rendering/style/StyleRareInheritedData.h:
(StyleRareInheritedData):

Source/WebKit/chromium: Enable -webkit-overflow-scrolling CSS property
https://bugs.webkit.org/show_bug.cgi?id=78664

Patch by Sami Kyostila <skyostil@google.com> on 2012-02-15
Reviewed by Eric Seidel.

* features.gypi:

LayoutTests: Add stacking context test for -webkit-overflow-scrolling CSS property
https://bugs.webkit.org/show_bug.cgi?id=78664

Patch by Sami Kyostila <skyostil@google.com> on 2012-02-15
Reviewed by Eric Seidel.

Make sure a stacking context is created for elements with touch overflow scrolling.

* platform/chromium-win/fast/css/getComputedStyle/computed-style-expected.txt: Added new property.
* platform/chromium-win/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt: Ditto.
* platform/chromium-win/svg/css/getComputedStyle-basic-expected.txt: Ditto.
* platform/chromium/compositing/overflow/overflow-scrolling-touch-stacking-context-expected.png: Added.
* platform/chromium/compositing/overflow/overflow-scrolling-touch-stacking-context-expected.txt: Added.
* platform/chromium/compositing/overflow/overflow-scrolling-touch-stacking-context.html: Added.

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

19 files changed:
LayoutTests/ChangeLog
LayoutTests/platform/chromium-win/fast/css/getComputedStyle/computed-style-expected.txt
LayoutTests/platform/chromium-win/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt
LayoutTests/platform/chromium-win/svg/css/getComputedStyle-basic-expected.txt
LayoutTests/platform/chromium/compositing/overflow/overflow-scrolling-touch-stacking-context-expected.png [new file with mode: 0644]
LayoutTests/platform/chromium/compositing/overflow/overflow-scrolling-touch-stacking-context-expected.txt [new file with mode: 0644]
LayoutTests/platform/chromium/compositing/overflow/overflow-scrolling-touch-stacking-context.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/css/CSSComputedStyleDeclaration.cpp
Source/WebCore/css/CSSParser.cpp
Source/WebCore/css/CSSProperty.cpp
Source/WebCore/css/CSSPropertyNames.in
Source/WebCore/css/CSSStyleSelector.cpp
Source/WebCore/css/CSSValueKeywords.in
Source/WebCore/rendering/style/RenderStyle.h
Source/WebCore/rendering/style/StyleRareInheritedData.cpp
Source/WebCore/rendering/style/StyleRareInheritedData.h
Source/WebKit/chromium/ChangeLog
Source/WebKit/chromium/features.gypi

index 2bb49ba..8b82faf 100644 (file)
@@ -1,3 +1,19 @@
+2012-02-15  Sami Kyostila  <skyostil@google.com>
+
+        Add stacking context test for -webkit-overflow-scrolling CSS property
+        https://bugs.webkit.org/show_bug.cgi?id=78664
+
+        Reviewed by Eric Seidel.
+
+        Make sure a stacking context is created for elements with touch overflow scrolling.
+
+        * platform/chromium-win/fast/css/getComputedStyle/computed-style-expected.txt: Added new property.
+        * platform/chromium-win/fast/css/getComputedStyle/computed-style-without-renderer-expected.txt: Ditto.
+        * platform/chromium-win/svg/css/getComputedStyle-basic-expected.txt: Ditto.
+        * platform/chromium/compositing/overflow/overflow-scrolling-touch-stacking-context-expected.png: Added.
+        * platform/chromium/compositing/overflow/overflow-scrolling-touch-stacking-context-expected.txt: Added.
+        * platform/chromium/compositing/overflow/overflow-scrolling-touch-stacking-context.html: Added.
+
 2012-02-15  Alexey Proskuryakov  <ap@apple.com>
 
         Crash after trying to use FileReader in a document with null origin string
index da63544..fe84675 100644 (file)
@@ -185,6 +185,7 @@ zoom: 1;
 -webkit-mask-repeat: repeat;
 -webkit-mask-size: auto;
 -webkit-nbsp-mode: normal;
+-webkit-overflow-scrolling: auto;
 -webkit-perspective: none;
 -webkit-perspective-origin: 392px 288px;
 -webkit-print-color-adjust: economy;
index 24387ca..ff5de54 100644 (file)
@@ -184,6 +184,7 @@ Computed style of an element whose parent's 'display' value is 'none':
     -webkit-mask-repeat: repeat
     -webkit-mask-size: auto
     -webkit-nbsp-mode: normal
+    -webkit-overflow-scrolling: auto
     -webkit-perspective: none
     -webkit-perspective-origin: 50% 50%
     -webkit-print-color-adjust: economy
index dcc0982..18d9019 100644 (file)
@@ -368,6 +368,8 @@ rect: style.getPropertyValue(-webkit-mask-size) : auto
 rect: style.getPropertyCSSValue(-webkit-mask-size) : [object CSSPrimitiveValue]
 rect: style.getPropertyValue(-webkit-nbsp-mode) : normal
 rect: style.getPropertyCSSValue(-webkit-nbsp-mode) : [object CSSPrimitiveValue]
+rect: style.getPropertyValue(-webkit-overflow-scrolling) : auto
+rect: style.getPropertyCSSValue(-webkit-overflow-scrolling) : [object CSSPrimitiveValue]
 rect: style.getPropertyValue(-webkit-perspective) : none
 rect: style.getPropertyCSSValue(-webkit-perspective) : [object CSSPrimitiveValue]
 rect: style.getPropertyValue(-webkit-perspective-origin) : 0px 0px
@@ -882,6 +884,8 @@ g: style.getPropertyValue(-webkit-mask-size) : auto
 g: style.getPropertyCSSValue(-webkit-mask-size) : [object CSSPrimitiveValue]
 g: style.getPropertyValue(-webkit-nbsp-mode) : normal
 g: style.getPropertyCSSValue(-webkit-nbsp-mode) : [object CSSPrimitiveValue]
+g: style.getPropertyValue(-webkit-overflow-scrolling) : auto
+g: style.getPropertyCSSValue(-webkit-overflow-scrolling) : [object CSSPrimitiveValue]
 g: style.getPropertyValue(-webkit-perspective) : none
 g: style.getPropertyCSSValue(-webkit-perspective) : [object CSSPrimitiveValue]
 g: style.getPropertyValue(-webkit-perspective-origin) : 0px 0px
diff --git a/LayoutTests/platform/chromium/compositing/overflow/overflow-scrolling-touch-stacking-context-expected.png b/LayoutTests/platform/chromium/compositing/overflow/overflow-scrolling-touch-stacking-context-expected.png
new file mode 100644 (file)
index 0000000..47aed3c
Binary files /dev/null and b/LayoutTests/platform/chromium/compositing/overflow/overflow-scrolling-touch-stacking-context-expected.png differ
diff --git a/LayoutTests/platform/chromium/compositing/overflow/overflow-scrolling-touch-stacking-context-expected.txt b/LayoutTests/platform/chromium/compositing/overflow/overflow-scrolling-touch-stacking-context-expected.txt
new file mode 100644 (file)
index 0000000..e8596e2
--- /dev/null
@@ -0,0 +1,11 @@
+layer at (0,0) size 800x600
+  RenderView at (0,0) size 800x600
+layer at (0,0) size 800x8
+  RenderBlock {HTML} at (0,0) size 800x8
+    RenderBody {BODY} at (8,8) size 784x0
+layer at (8,8) size 50x50
+  RenderBlock (positioned) {DIV} at (8,8) size 50x50
+layer at (8,8) size 50x50
+  RenderBlock (positioned) zI: 1 {DIV} at (0,0) size 50x50 [bgcolor=#FF0000]
+layer at (8,8) size 50x50
+  RenderBlock (positioned) {DIV} at (8,8) size 50x50 [bgcolor=#008000]
diff --git a/LayoutTests/platform/chromium/compositing/overflow/overflow-scrolling-touch-stacking-context.html b/LayoutTests/platform/chromium/compositing/overflow/overflow-scrolling-touch-stacking-context.html
new file mode 100644 (file)
index 0000000..9c48d2c
--- /dev/null
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+  <style type="text/css">
+    .box {
+      position: absolute;
+      width: 50px;
+      height: 50px;
+    }
+
+    .scrollable {
+      -webkit-overflow-scrolling: touch;
+    }
+
+    .indicator {
+      background: red;
+      z-index: 1;
+    }
+
+    .test {
+      background: green;
+    }
+  </style>
+</head>
+<body>
+
+  <!-- Check that touch overflow scrollable elements get a stacking context. -->
+  <div class="scrollable box">
+    <div class="indicator box"></div>
+  </div>
+  <div class="test box"></div>
+
+</body>
+</html>
index 20bd974..a31f231 100644 (file)
@@ -1,3 +1,48 @@
+2012-02-15  Sami Kyostila  <skyostil@google.com>
+
+        Add -webkit-overflow-scrolling CSS property
+        https://bugs.webkit.org/show_bug.cgi?id=78664
+
+        Reviewed by Eric Seidel.
+
+        Add a CSS property indicating that an element with overflow scrolling
+        should follow the platform's behavior for touch scrollable user
+        interface objects. For instance, this property could enable momentum
+        scrolling for the element if that is the platform convention.
+
+        The property has two possible values: auto (default) and touch. The
+        former does not alter overflow scrolling behavior, while the latter
+        activates touch scrolling.
+
+        As a side effect, enabling touch scrolling also causes an element to
+        gain a stacking context. This is to allow the implementation to promote
+        the scrolling contents into a render layer, which can be translated more
+        efficiently.
+
+        This property was introduced with iOS 5 WebKit. Another implementation
+        is in Chrome for Android.
+
+        Test: platform/chromium/compositing/overflow/overflow-scrolling-touch-stacking-context.html
+
+        * css/CSSComputedStyleDeclaration.cpp:
+        (WebCore):
+        (WebCore::CSSComputedStyleDeclaration::getPropertyCSSValue):
+        * css/CSSParser.cpp:
+        (WebCore::CSSParser::parseValue):
+        * css/CSSProperty.cpp:
+        (WebCore::CSSProperty::isInheritedProperty):
+        * css/CSSPropertyNames.in:
+        * css/CSSStyleSelector.cpp:
+        (WebCore::CSSStyleSelector::adjustRenderStyle):
+        (WebCore::CSSStyleSelector::applyProperty):
+        * css/CSSValueKeywords.in:
+        * rendering/style/RenderStyle.h:
+        * rendering/style/StyleRareInheritedData.cpp:
+        (WebCore::StyleRareInheritedData::StyleRareInheritedData):
+        (WebCore::StyleRareInheritedData::operator==):
+        * rendering/style/StyleRareInheritedData.h:
+        (StyleRareInheritedData):
+
 2012-02-15  Levi Weintraub  <leviw@chromium.org>
 
         Add zeroLayoutUnit constant.
index 4831c3f..c08e3eb 100644 (file)
@@ -266,6 +266,9 @@ static const int computedProperties[] = {
     CSSPropertyWebkitMaskRepeat,
     CSSPropertyWebkitMaskSize,
     CSSPropertyWebkitNbspMode,
+#if ENABLE(OVERFLOW_SCROLLING)
+    CSSPropertyWebkitOverflowScrolling,
+#endif
     CSSPropertyWebkitPerspective,
     CSSPropertyWebkitPerspectiveOrigin,
     CSSPropertyWebkitPrintColorAdjust,
@@ -2119,6 +2122,12 @@ PassRefPtr<CSSValue> CSSComputedStyleDeclaration::getPropertyCSSValue(int proper
         case CSSPropertyWebkitMarginTopCollapse:
         case CSSPropertyWebkitMarginBeforeCollapse:
             return cssValuePool->createValue(style->marginBeforeCollapse());
+#if ENABLE(OVERFLOW_SCROLLING)
+        case CSSPropertyWebkitOverflowScrolling:
+            if (!style->useTouchOverflowScrolling())
+                return cssValuePool->createIdentifierValue(CSSValueAuto);
+            return cssValuePool->createIdentifierValue(CSSValueTouch);
+#endif
         case CSSPropertyWebkitPerspective:
             if (!style->hasPerspective())
                 return cssValuePool->createIdentifierValue(CSSValueNone);
index ab76051..844fbf4 100644 (file)
@@ -2092,6 +2092,14 @@ bool CSSParser::parseValue(int propId, bool important)
         }
         break;
 #endif
+
+#if ENABLE(OVERFLOW_SCROLLING)
+    case CSSPropertyWebkitOverflowScrolling:
+        if (id == CSSValueAuto || id == CSSValueTouch)
+            validPrimitive = true;
+        break;
+#endif
+
         /* shorthand properties */
     case CSSPropertyBackground: {
         // Position must come before color in this array because a plain old "0" is a legal color
index ac1c79c..06a48ab 100644 (file)
@@ -333,6 +333,9 @@ bool CSSProperty::isInheritedProperty(unsigned propertyID)
     case CSSPropertyWebkitLineGrid:
     case CSSPropertyWebkitLineSnap:
     case CSSPropertyWebkitNbspMode:
+#if ENABLE(OVERFLOW_SCROLLING)
+    case CSSPropertyWebkitOverflowScrolling:
+#endif
     case CSSPropertyWebkitPrintColorAdjust:
     case CSSPropertyWebkitRtlOrdering:
     case CSSPropertyWebkitTextCombine:
index d5a3bfd..de45230 100644 (file)
@@ -379,3 +379,6 @@ z-index
 #if defined(ENABLE_DASHBOARD_SUPPORT) && ENABLE_DASHBOARD_SUPPORT
 -webkit-dashboard-region
 #endif
+#if defined(ENABLE_OVERFLOW_SCROLLING)
+-webkit-overflow-scrolling
+#endif
index f18cf66..6acc2b7 100644 (file)
@@ -1903,7 +1903,12 @@ void CSSStyleSelector::adjustRenderStyle(RenderStyle* style, RenderStyle* parent
     // cases where objects that should be blended as a single unit end up with a non-transparent
     // object wedged in between them.  Auto z-index also becomes 0 for objects that specify transforms/masks/reflections.
     if (style->hasAutoZIndex() && ((e && e->document()->documentElement() == e) || style->opacity() < 1.0f
-        || style->hasTransformRelatedProperty() || style->hasMask() || style->boxReflect() || style->hasFilter()))
+        || style->hasTransformRelatedProperty() || style->hasMask() || style->boxReflect() || style->hasFilter()
+#if ENABLE(OVERFLOW_SCROLLING)
+        // Touch overflow scrolling creates a stacking context.
+        || style->useTouchOverflowScrolling()
+#endif
+        ))
         style->setZIndex(0);
 
     // Textarea considers overflow visible as auto.
@@ -3725,6 +3730,15 @@ void CSSStyleSelector::applyProperty(int id, CSSValue *value)
         return;
     }
 #endif
+#if ENABLE(OVERFLOW_SCROLLING)
+    case CSSPropertyWebkitOverflowScrolling: {
+        HANDLE_INHERIT_AND_INITIAL(useTouchOverflowScrolling, UseTouchOverflowScrolling);
+        if (!primitiveValue)
+            break;
+        m_style->setUseTouchOverflowScrolling(primitiveValue->getIdent() == CSSValueTouch);
+        return;
+    }
+#endif
     case CSSPropertyWebkitColorCorrection:
         HANDLE_INHERIT_AND_INITIAL_AND_PRIMITIVE(colorSpace, ColorSpace);
         return;
index dd5c27c..dea16a0 100644 (file)
@@ -802,6 +802,12 @@ no-limit
 manual
 // auto
 
+#if defined(ENABLE_OVERFLOW_SCROLLING)
+// -webkit-overflow-scrolling
+// auto
+touch
+#endif
+
 // -webkit-writing-mode
 // SVG compatibility
 lr
index 560ee1c..d5ab8f4 100644 (file)
@@ -943,6 +943,9 @@ public:
 #if ENABLE(TOUCH_EVENTS)
     Color tapHighlightColor() const { return rareInheritedData->tapHighlightColor; }
 #endif
+#if ENABLE(OVERFLOW_SCROLLING)
+    bool useTouchOverflowScrolling() const { return rareInheritedData->useTouchOverflowScrolling; }
+#endif
     bool textSizeAdjust() const { return rareInheritedData->textSizeAdjust; }
     ETextSecurity textSecurity() const { return static_cast<ETextSecurity>(rareInheritedData->textSecurity); }
 
@@ -1347,6 +1350,9 @@ public:
 #if ENABLE(TOUCH_EVENTS)
     void setTapHighlightColor(const Color& c) { SET_VAR(rareInheritedData, tapHighlightColor, c); }
 #endif
+#if ENABLE(OVERFLOW_SCROLLING)
+    void setUseTouchOverflowScrolling(bool v) { SET_VAR(rareInheritedData, useTouchOverflowScrolling, v); }
+#endif
     bool setTextSizeAdjust(bool);
     void setTextSecurity(ETextSecurity aTextSecurity) { SET_VAR(rareInheritedData, textSecurity, aTextSecurity); }
 
@@ -1647,6 +1653,9 @@ public:
 #if ENABLE(TOUCH_EVENTS)
     static Color initialTapHighlightColor();
 #endif
+#if ENABLE(OVERFLOW_SCROLLING)
+    static bool initialUseTouchOverflowScrolling() { return false; }
+#endif
 #if ENABLE(DASHBOARD_SUPPORT)
     static const Vector<StyleDashboardRegion>& initialDashboardRegions();
     static const Vector<StyleDashboardRegion>& noneDashboardRegions();
index 6085601..343fa7e 100644 (file)
@@ -54,6 +54,9 @@ StyleRareInheritedData::StyleRareInheritedData()
     , m_lineBoxContain(RenderStyle::initialLineBoxContain())
     , m_imageRendering(RenderStyle::initialImageRendering())
     , m_lineSnap(RenderStyle::initialLineSnap())
+#if ENABLE(OVERFLOW_SCROLLING)
+    , useTouchOverflowScrolling(RenderStyle::initialUseTouchOverflowScrolling())
+#endif
     , hyphenationLimitBefore(-1)
     , hyphenationLimitAfter(-1)
     , hyphenationLimitLines(-1)
@@ -98,6 +101,9 @@ StyleRareInheritedData::StyleRareInheritedData(const StyleRareInheritedData& o)
     , m_lineBoxContain(o.m_lineBoxContain)
     , m_imageRendering(o.m_imageRendering)
     , m_lineSnap(o.m_lineSnap)
+#if ENABLE(OVERFLOW_SCROLLING)
+    , useTouchOverflowScrolling(o.useTouchOverflowScrolling)
+#endif
     , hyphenationString(o.hyphenationString)
     , hyphenationLimitBefore(o.hyphenationLimitBefore)
     , hyphenationLimitAfter(o.hyphenationLimitAfter)
@@ -149,6 +155,9 @@ bool StyleRareInheritedData::operator==(const StyleRareInheritedData& o) const
         && wordWrap == o.wordWrap
         && nbspMode == o.nbspMode
         && khtmlLineBreak == o.khtmlLineBreak
+#if ENABLE(OVERFLOW_SCROLLING)
+        && useTouchOverflowScrolling == o.useTouchOverflowScrolling
+#endif
         && textSizeAdjust == o.textSizeAdjust
         && resize == o.resize
         && userSelect == o.userSelect
index 0721f06..d043f5c 100644 (file)
@@ -92,6 +92,9 @@ public:
     // CSS Image Values Level 3
     unsigned m_imageRendering : 2; // EImageRendering
     unsigned m_lineSnap : 2; // LineSnap
+#if ENABLE(OVERFLOW_SCROLLING)
+    unsigned useTouchOverflowScrolling: 1;
+#endif
 
     AtomicString hyphenationString;
     short hyphenationLimitBefore;
index 6c17a8f..a1b4d04 100644 (file)
@@ -1,3 +1,12 @@
+2012-02-15  Sami Kyostila  <skyostil@google.com>
+
+        Enable -webkit-overflow-scrolling CSS property
+        https://bugs.webkit.org/show_bug.cgi?id=78664
+
+        Reviewed by Eric Seidel.
+
+        * features.gypi:
+
 2012-02-15  Tommy Widenflycht  <tommyw@google.com>
 
         MediaStream API: Removing SecurityContext from the embedder API
index 4cca267..ba1c6ea 100644 (file)
@@ -73,6 +73,7 @@
       'ENABLE_MUTATION_OBSERVERS=<(enable_mutation_observers)',
       'ENABLE_NOTIFICATIONS=1',
       'ENABLE_ORIENTATION_EVENTS=0',
+      'ENABLE_OVERFLOW_SCROLLING=1',
       'ENABLE_PAGE_VISIBILITY_API=1',
       'ENABLE_POINTER_LOCK=1',
       'ENABLE_PROGRESS_TAG=1',