Implement will-change-based creation of layers, stacking contexts, and containing blocks

Source/core/css/resolver/StyleAdjuster.cpp

 /*
  * Copyright (C) 1999 Lars Knoll (knoll@kde.org)
  *           (C) 2004-2005 Allan Sandfeld Jensen (kde@carewolf.com)
  * Copyright (C) 2006, 2007 Nicholas Shanks (webkit@nickshanks.com)
  * Copyright (C) 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013 Apple Inc. All rights reserved.
  * Copyright (C) 2007 Alexey Proskuryakov <ap@webkit.org>
  * Copyright (C) 2007, 2008 Eric Seidel <eric@webkit.org>
  * Copyright (C) 2008, 2009 Torch Mobile Inc. All rights reserved. (http://www.torchmobile.com/)
  * Copyright (c) 2011, Code Aurora Forum. All rights reserved.
  * Copyright (C) Research In Motion Limited 2011. All rights reserved.
@@ skipping 26 matching lines @@
 #include "core/html/HTMLIFrameElement.h"
 #include "core/html/HTMLInputElement.h"
 #include "core/html/HTMLTextAreaElement.h"
 #include "core/frame/FrameView.h"
 #include "core/frame/Settings.h"
 #include "core/rendering/RenderTheme.h"
 #include "core/rendering/style/GridPosition.h"
 #include "core/rendering/style/RenderStyle.h"
 #include "core/rendering/style/RenderStyleConstants.h"
 #include "platform/Length.h"
+#include "platform/transforms/TransformOperations.h"
 #include "wtf/Assertions.h"
 
 namespace WebCore {
 
 using namespace HTMLNames;
 
 // FIXME: This is duplicated with StyleResolver.cpp
 // Perhaps this should move onto ElementResolveContext or even Element?
 static inline bool isAtShadowBoundary(const Element* element)
 {
@@ skipping 94 matching lines @@
 static bool isDisplayGridBox(EDisplay display)
 {
     return display == GRID || display == INLINE_GRID;
 }
 
 static bool parentStyleForcesZIndexToCreateStackingContext(const RenderStyle* parentStyle)
 {
     return isDisplayFlexibleBox(parentStyle->display()) || isDisplayGridBox(parentStyle->display());
 }
 
+static bool hasWillChangeThatCreatesStackingContext(const RenderStyle* style, Element* e)
+{
+    for (size_t i = 0; i < style->willChangeProperties().size(); ++i) {
+        switch (style->willChangeProperties()[i]) {
+        case CSSPropertyOpacity:
+        case CSSPropertyWebkitTransform:
+        case CSSPropertyWebkitTransformStyle:
+        case CSSPropertyWebkitPerspective:
+        case CSSPropertyWebkitMask:
+        case CSSPropertyWebkitMaskBoxImage:
+        case CSSPropertyWebkitClipPath:
+        case CSSPropertyWebkitBoxReflect:
+        case CSSPropertyWebkitFilter:
+        case CSSPropertyZIndex:
+        case CSSPropertyPosition:

[jamesr, 2014/02/26 23:56:22]

this is supposed to be a set of all CSS properties that can in any value create
a stacking context? it seems very fragile to keep this set here in just a switch
- are you sure this has all cases?

[ajuma, 2014/02/27 00:05:47]

Yes, this is supposed to be all CSS properties that have some value that creates
a stacking context. The list here corresponds to the conditions under which
adjustRenderStyle calls setZIndex(0) (see lines 295-309 below), so should be the
complete list.

[esprehn, 2014/02/27 20:58:31]

This just begs for a unit test, but I suppose it'll be hard to do.

+            return true;
+        case CSSPropertyMixBlendMode:
+        case CSSPropertyIsolation:
+            if (RuntimeEnabledFeatures::cssCompositingEnabled())
+                return true;
+            break;
+        default:
+            break;
+        }
+    }
+    return false;
+}
+
 void StyleAdjuster::adjustRenderStyle(RenderStyle* style, RenderStyle* parentStyle, Element *e)
 {
     ASSERT(parentStyle);
 
     // Cache our original display.
     style->setOriginalDisplay(style->display());
 
     if (style->display() != NONE) {
         // If we have a <td> that specifies a float property, in quirks mode we just drop the float
         // property.
@@ skipping 97 matching lines @@
         || style->hasTransformRelatedProperty()
         || style->hasMask()
         || style->clipPath()
         || style->boxReflect()
         || style->hasFilter()
         || style->hasBlendMode()
         || style->hasIsolation()
         || style->position() == StickyPosition
         || (style->position() == FixedPosition && e && e->document().settings() && e->document().settings()->fixedPositionCreatesStackingContext())
         || isInTopLayer(e, style)
+        || hasWillChangeThatCreatesStackingContext(style, e)
         ))
         style->setZIndex(0);
 
+    // will-change:transform should result in the same rendering behavior as having a transform,
+    // including the creation of a containing block for fixed position descendants.

[esprehn, 2014/02/27 22:05:27]

This is observable from script. If you do getComputedStyle(e).transform you'll
see the identity transform you've added. That's fine, but we need to make the
spec text say something like  "The transform of the element computes to the
identity if you used will-animate: transform"

+    if (!style->hasTransform() && style->willChangeProperties().contains(CSSPropertyWebkitTransform)) {
+        bool makeIdentity = true;
+        style->setTransform(TransformOperations(makeIdentity));
+    }
+
     // Textarea considers overflow visible as auto.
     if (e && e->hasTagName(textareaTag)) {
         style->setOverflowX(style->overflowX() == OVISIBLE ? OAUTO : style->overflowX());
         style->setOverflowY(style->overflowY() == OVISIBLE ? OAUTO : style->overflowY());
     }
 
     // For now, <marquee> requires an overflow clip to work properly.
     if (e && e->hasTagName(marqueeTag)) {
         style->setOverflowX(OHIDDEN);
         style->setOverflowY(OHIDDEN);
@@ skipping 111 matching lines @@
     if (prop.isNamedGridArea() && !map.contains(prop.namedGridLine())) \
         style->setGrid##Prop(GridPosition());
 
     CLEAR_UNKNOWN_NAMED_AREA(columnStartPosition, ColumnStart);
     CLEAR_UNKNOWN_NAMED_AREA(columnEndPosition, ColumnEnd);
     CLEAR_UNKNOWN_NAMED_AREA(rowStartPosition, RowStart);
     CLEAR_UNKNOWN_NAMED_AREA(rowEndPosition, RowEnd);
 }
 
 }