Project: chromium Issues People Development process History Sign in
New issue
Advanced search Search tips
Starred by 14 users
Status: Fixed
Owner:
Closed: May 2016
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 2
Type: Launch-OWP
Launch-Accessibility: ----
Launch-Legal: ----
Launch-M-Approved: ----
Launch-M-Target: ----
Launch-Privacy: ----
Launch-Security: ----
Launch-Status: Approved
Launch-Test: ----
Launch-UI: ----
Product-Review: ----

Blocked on:
issue 312978
issue 566226
issue 606342
issue 619864



Sign in to add a comment
Add support for CSS Containment
Project Member Reported by le...@chromium.org, Nov 25 2015 Back to list
(See http://www.chromium.org/blink#launch-process for an overview)

Change description:
A primitive for isolating style, layout, and paint. This allows authors to explicitly opt into a set of restrictions that enables user agent optimizations

Changes to API surface:
Adds CSS 'contain' property.

Links:
https://drafts.csswg.org/css-containment/

Support in other browsers:
Internet Explorer: No.
Firefox: No. Tracking bug here: https://bugzilla.mozilla.org/show_bug.cgi?id=1150081
Safari: No.

https://www.chromestatus.com/features/6522186978295808

 
Project Member Comment 1 by bugdroid1@chromium.org, Dec 4 2015
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/8b73b08d57cf6aa217e050144947e899ff40c3aa

commit 8b73b08d57cf6aa217e050144947e899ff40c3aa
Author: leviw <leviw@chromium.org>
Date: Fri Dec 04 09:52:01 2015

Add CSS support for Containment

This patch adds a RuntimeEnabledFeature (experimental, of course)
as well as the properties, keywords, parsing, and storing of
containment values.

Intent to implement:
https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/9W80Kw-z3ss
BUG= 561713 

Review URL: https://codereview.chromium.org/1485973005

Cr-Commit-Position: refs/heads/master@{#363178}

[add] http://crrev.com/8b73b08d57cf6aa217e050144947e899ff40c3aa/third_party/WebKit/LayoutTests/fast/css/containment/contain-parse-and-apply-expected.txt
[add] http://crrev.com/8b73b08d57cf6aa217e050144947e899ff40c3aa/third_party/WebKit/LayoutTests/fast/css/containment/contain-parse-and-apply.html
[modify] http://crrev.com/8b73b08d57cf6aa217e050144947e899ff40c3aa/third_party/WebKit/LayoutTests/webexposed/css-properties-as-js-properties-expected.txt
[modify] http://crrev.com/8b73b08d57cf6aa217e050144947e899ff40c3aa/third_party/WebKit/Source/core/css/CSSPrimitiveValueMappings.h
[modify] http://crrev.com/8b73b08d57cf6aa217e050144947e899ff40c3aa/third_party/WebKit/Source/core/css/CSSProperties.in
[modify] http://crrev.com/8b73b08d57cf6aa217e050144947e899ff40c3aa/third_party/WebKit/Source/core/css/CSSValueKeywords.in
[modify] http://crrev.com/8b73b08d57cf6aa217e050144947e899ff40c3aa/third_party/WebKit/Source/core/css/ComputedStyleCSSValueMapping.cpp
[modify] http://crrev.com/8b73b08d57cf6aa217e050144947e899ff40c3aa/third_party/WebKit/Source/core/css/parser/CSSPropertyParser.cpp
[modify] http://crrev.com/8b73b08d57cf6aa217e050144947e899ff40c3aa/third_party/WebKit/Source/core/frame/UseCounter.cpp
[modify] http://crrev.com/8b73b08d57cf6aa217e050144947e899ff40c3aa/third_party/WebKit/Source/core/style/ComputedStyle.h
[modify] http://crrev.com/8b73b08d57cf6aa217e050144947e899ff40c3aa/third_party/WebKit/Source/core/style/ComputedStyleConstants.h
[modify] http://crrev.com/8b73b08d57cf6aa217e050144947e899ff40c3aa/third_party/WebKit/Source/core/style/StyleRareNonInheritedData.cpp
[modify] http://crrev.com/8b73b08d57cf6aa217e050144947e899ff40c3aa/third_party/WebKit/Source/core/style/StyleRareNonInheritedData.h
[modify] http://crrev.com/8b73b08d57cf6aa217e050144947e899ff40c3aa/third_party/WebKit/Source/platform/RuntimeEnabledFeatures.in

Comment 2 by le...@chromium.org, Dec 4 2015
Blockedon: chromium:566226
Project Member Comment 3 by bugdroid1@chromium.org, Dec 15 2015
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/472398196d9109be16d13f3af4e8c423ce45d2e3

commit 472398196d9109be16d13f3af4e8c423ce45d2e3
Author: leviw <leviw@chromium.org>
Date: Tue Dec 15 06:20:14 2015

Implement Paint Containment

Paint containment acts as a containing block for all objects, including
fixed. It also clips them. It's also a formatting context and a
stacking context.

The approach in this patch differs from the spec in one very notable
way: it does not mess with the computed style of the overflow property.
This is a conscious decision I hope to work with Tab to address.

Paint Containment description from spec:
https://drafts.csswg.org/css-containment/#containment-paint

Intent to implement:
https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/9W80Kw-z3ss
BUG= 561713 

Review URL: https://codereview.chromium.org/1490063002

Cr-Commit-Position: refs/heads/master@{#365178}

[add] http://crrev.com/472398196d9109be16d13f3af4e8c423ce45d2e3/third_party/WebKit/LayoutTests/fast/css/containment/paint-containment-as-formatting-context-expected.txt
[add] http://crrev.com/472398196d9109be16d13f3af4e8c423ce45d2e3/third_party/WebKit/LayoutTests/fast/css/containment/paint-containment-as-formatting-context.html
[add] http://crrev.com/472398196d9109be16d13f3af4e8c423ce45d2e3/third_party/WebKit/LayoutTests/fast/css/containment/paint-containment-with-absolute-position-expected.html
[add] http://crrev.com/472398196d9109be16d13f3af4e8c423ce45d2e3/third_party/WebKit/LayoutTests/fast/css/containment/paint-containment-with-absolute-position.html
[add] http://crrev.com/472398196d9109be16d13f3af4e8c423ce45d2e3/third_party/WebKit/LayoutTests/fast/css/containment/paint-containment-with-box-shadow-expected.html
[add] http://crrev.com/472398196d9109be16d13f3af4e8c423ce45d2e3/third_party/WebKit/LayoutTests/fast/css/containment/paint-containment-with-box-shadow.html
[add] http://crrev.com/472398196d9109be16d13f3af4e8c423ce45d2e3/third_party/WebKit/LayoutTests/fast/css/containment/paint-containment-with-fixed-position-expected.html
[add] http://crrev.com/472398196d9109be16d13f3af4e8c423ce45d2e3/third_party/WebKit/LayoutTests/fast/css/containment/paint-containment-with-fixed-position.html
[add] http://crrev.com/472398196d9109be16d13f3af4e8c423ce45d2e3/third_party/WebKit/LayoutTests/fast/css/containment/paint-containment-with-transformed-descendant-expected.html
[add] http://crrev.com/472398196d9109be16d13f3af4e8c423ce45d2e3/third_party/WebKit/LayoutTests/fast/css/containment/paint-containment-with-transformed-descendant.html
[add] http://crrev.com/472398196d9109be16d13f3af4e8c423ce45d2e3/third_party/WebKit/LayoutTests/hittesting/paint-containment-hittest-expected.txt
[add] http://crrev.com/472398196d9109be16d13f3af4e8c423ce45d2e3/third_party/WebKit/LayoutTests/hittesting/paint-containment-hittest.html
[modify] http://crrev.com/472398196d9109be16d13f3af4e8c423ce45d2e3/third_party/WebKit/Source/core/core.gypi
[modify] http://crrev.com/472398196d9109be16d13f3af4e8c423ce45d2e3/third_party/WebKit/Source/core/css/ComputedStyleCSSValueMapping.cpp
[modify] http://crrev.com/472398196d9109be16d13f3af4e8c423ce45d2e3/third_party/WebKit/Source/core/css/resolver/StyleAdjuster.cpp
[modify] http://crrev.com/472398196d9109be16d13f3af4e8c423ce45d2e3/third_party/WebKit/Source/core/layout/LayoutBlock.cpp
[modify] http://crrev.com/472398196d9109be16d13f3af4e8c423ce45d2e3/third_party/WebKit/Source/core/layout/LayoutBox.cpp
[modify] http://crrev.com/472398196d9109be16d13f3af4e8c423ce45d2e3/third_party/WebKit/Source/core/layout/LayoutInline.cpp
[modify] http://crrev.com/472398196d9109be16d13f3af4e8c423ce45d2e3/third_party/WebKit/Source/core/layout/LayoutInline.h
[modify] http://crrev.com/472398196d9109be16d13f3af4e8c423ce45d2e3/third_party/WebKit/Source/core/layout/LayoutObject.h
[add] http://crrev.com/472398196d9109be16d13f3af4e8c423ce45d2e3/third_party/WebKit/Source/core/layout/PaintContainmentTest.cpp
[modify] http://crrev.com/472398196d9109be16d13f3af4e8c423ce45d2e3/third_party/WebKit/Source/core/layout/compositing/CompositedLayerMapping.cpp
[modify] http://crrev.com/472398196d9109be16d13f3af4e8c423ce45d2e3/third_party/WebKit/Source/core/layout/compositing/CompositingInputsUpdater.cpp
[modify] http://crrev.com/472398196d9109be16d13f3af4e8c423ce45d2e3/third_party/WebKit/Source/core/layout/compositing/CompositingInputsUpdater.h
[modify] http://crrev.com/472398196d9109be16d13f3af4e8c423ce45d2e3/third_party/WebKit/Source/core/layout/compositing/CompositingRequirementsUpdater.cpp
[modify] http://crrev.com/472398196d9109be16d13f3af4e8c423ce45d2e3/third_party/WebKit/Source/core/layout/compositing/PaintLayerCompositor.cpp
[modify] http://crrev.com/472398196d9109be16d13f3af4e8c423ce45d2e3/third_party/WebKit/Source/core/paint/BoxClipper.cpp
[modify] http://crrev.com/472398196d9109be16d13f3af4e8c423ce45d2e3/third_party/WebKit/Source/core/paint/PaintLayer.cpp
[modify] http://crrev.com/472398196d9109be16d13f3af4e8c423ce45d2e3/third_party/WebKit/Source/core/paint/PaintLayer.h
[modify] http://crrev.com/472398196d9109be16d13f3af4e8c423ce45d2e3/third_party/WebKit/Source/core/paint/PaintLayerClipper.cpp
[modify] http://crrev.com/472398196d9109be16d13f3af4e8c423ce45d2e3/third_party/WebKit/Source/core/style/ComputedStyle.h

Labels: -M-49
Project Member Comment 5 by bugdroid1@chromium.org, Feb 16 2016
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/f1ded8f72e6c34c6561ba5d95ec7cff42dd82fd1

commit f1ded8f72e6c34c6561ba5d95ec7cff42dd82fd1
Author: leviw <leviw@chromium.org>
Date: Tue Feb 16 22:31:37 2016

Implement Style Containment

The only CSS feature we support that is bound by style containment is
counters. This patch adds the concept of an enclosing style containment
ancestor to the tree walking logic in LayoutCounter and avoids crossing
these boundaries when matching counters.

Layout Containment description from spec:
https://drafts.csswg.org/css-containment/#containment-style

Intent to implement:
https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/9W80Kw-z3ss
BUG= 561713 

Review URL: https://codereview.chromium.org/1519123003

Cr-Commit-Position: refs/heads/master@{#375684}

[add] http://crrev.com/f1ded8f72e6c34c6561ba5d95ec7cff42dd82fd1/third_party/WebKit/LayoutTests/fast/css/containment/style-contain-dialogue-element-expected.html
[add] http://crrev.com/f1ded8f72e6c34c6561ba5d95ec7cff42dd82fd1/third_party/WebKit/LayoutTests/fast/css/containment/style-contain-dialogue-element.html
[add] http://crrev.com/f1ded8f72e6c34c6561ba5d95ec7cff42dd82fd1/third_party/WebKit/LayoutTests/fast/css/containment/style-containment-with-counter-nodes-expected.html
[add] http://crrev.com/f1ded8f72e6c34c6561ba5d95ec7cff42dd82fd1/third_party/WebKit/LayoutTests/fast/css/containment/style-containment-with-counter-nodes.html
[modify] http://crrev.com/f1ded8f72e6c34c6561ba5d95ec7cff42dd82fd1/third_party/WebKit/Source/core/css/ComputedStyleCSSValueMapping.cpp
[modify] http://crrev.com/f1ded8f72e6c34c6561ba5d95ec7cff42dd82fd1/third_party/WebKit/Source/core/layout/LayoutCounter.cpp
[modify] http://crrev.com/f1ded8f72e6c34c6561ba5d95ec7cff42dd82fd1/third_party/WebKit/Source/core/style/ComputedStyle.h

Comment 6 by yio...@gmail.com, Feb 25 2016
Please update 'Chrome Platform Status'.
Project Member Comment 7 by bugdroid1@chromium.org, Mar 3 2016
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/b66c49fa179e76970cc9cf4500fee1f9f0ff2cb8

commit b66c49fa179e76970cc9cf4500fee1f9f0ff2cb8
Author: leviw <leviw@chromium.org>
Date: Thu Mar 03 01:30:11 2016

Implement Layout Containment

Layout containment provides a guarantee that an element's subtree will
not escape its bounds in a layout-impactful way. This means that the
element's descendants don't impact its size, so it collapses away
when the size isn't specified. It also creates a formatting context.

Layout Containment description from spec:
https://drafts.csswg.org/css-containment/#containment-layout

Intent to implement:
https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/9W80Kw-z3ss
BUG= 561713 

Review URL: https://codereview.chromium.org/1530303003

Cr-Commit-Position: refs/heads/master@{#378906}

[add] https://crrev.com/b66c49fa179e76970cc9cf4500fee1f9f0ff2cb8/third_party/WebKit/LayoutTests/fast/css/containment/layout-containment-sizing-expected.txt
[add] https://crrev.com/b66c49fa179e76970cc9cf4500fee1f9f0ff2cb8/third_party/WebKit/LayoutTests/fast/css/containment/layout-containment-sizing.html
[modify] https://crrev.com/b66c49fa179e76970cc9cf4500fee1f9f0ff2cb8/third_party/WebKit/Source/core/layout/LayoutBlock.cpp
[modify] https://crrev.com/b66c49fa179e76970cc9cf4500fee1f9f0ff2cb8/third_party/WebKit/Source/core/layout/LayoutBox.cpp
[modify] https://crrev.com/b66c49fa179e76970cc9cf4500fee1f9f0ff2cb8/third_party/WebKit/Source/core/layout/LayoutObject.cpp
[modify] https://crrev.com/b66c49fa179e76970cc9cf4500fee1f9f0ff2cb8/third_party/WebKit/Source/core/style/ComputedStyle.h

Blockedon: 606342
Comment 9 by e...@chromium.org, May 10 2016
Labels: -OWP-Design-No OWP-Design-Yes Launch-Status-Approved
Comment 10 by e...@chromium.org, May 17 2016
Owner: e...@chromium.org
Status: Started
Comment 12 by e...@chromium.org, May 19 2016
Status: Fixed
leviw@ please see  issue 619864 
Blockedon: 619864
Project Member Comment 15 by bugdroid1@chromium.org, Jun 27 2016
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/f2168263f19ab4f81c56d6258db7d9e6fa0b07fb

commit f2168263f19ab4f81c56d6258db7d9e6fa0b07fb
Author: paulirish <paulirish@chromium.org>
Date: Mon Jun 27 17:39:41 2016

DevTools: add CSS completion for contain property.

BUG= 561713 

Review-Url: https://codereview.chromium.org/2087773002
Cr-Commit-Position: refs/heads/master@{#402216}

[modify] https://crrev.com/f2168263f19ab4f81c56d6258db7d9e6fa0b07fb/third_party/WebKit/Source/devtools/front_end/sdk/CSSMetadata.js

contain: layout must be establish a containing block, see spec:

"The element acts as a containing block for absolutely positioned and fixed positioned descendants."

https://drafts.csswg.org/css-contain/#containment-layout
Sign in to add a comment