Implement CSS 'contain: style'
Categories
(Core :: CSS Parsing and Computation, enhancement, P3)
Tracking
()
Tracking | Status | |
---|---|---|
firefox103 | --- | fixed |
People
(Reporter: dholbert, Assigned: mrobinson)
References
(Depends on 2 open bugs, Blocks 2 open bugs)
Details
(Keywords: dev-doc-complete, Whiteboard: [layout:p2], [wptsync upstream])
Attachments
(1 file, 3 obsolete files)
Reporter | ||
Updated•6 years ago
|
Comment hidden (mozreview-request) |
Comment hidden (mozreview-request) |
Comment 3•6 years ago
|
||
Updated•6 years ago
|
Comment 4•6 years ago
|
||
Comment 5•6 years ago
|
||
mozreview-review |
Comment 6•6 years ago
|
||
Comment 7•6 years ago
|
||
Comment 8•6 years ago
|
||
mozreview-review |
Comment 9•6 years ago
|
||
Comment hidden (mozreview-request) |
Updated•6 years ago
|
Comment 11•6 years ago
|
||
mozreview-review |
Comment 12•6 years ago
|
||
mozreview-review-reply |
Comment 13•6 years ago
|
||
Comment hidden (mozreview-request) |
Reporter | ||
Comment 15•6 years ago
|
||
mozreview-review |
Reporter | ||
Updated•6 years ago
|
Comment 16•6 years ago
|
||
Comment hidden (mozreview-request) |
Comment 18•6 years ago
|
||
Comment hidden (mozreview-request) |
Comment hidden (mozreview-request) |
Comment 21•6 years ago
|
||
mozreview-review |
Comment 22•6 years ago
|
||
Comment hidden (mozreview-request) |
Comment 24•6 years ago
|
||
Comment 25•6 years ago
|
||
mozreview-review |
Comment 26•6 years ago
|
||
Comment 27•6 years ago
|
||
Comment 28•6 years ago
|
||
Comment 29•6 years ago
|
||
Comment 30•6 years ago
|
||
Comment 31•6 years ago
|
||
Comment 32•6 years ago
|
||
Comment hidden (mozreview-request) |
Comment 35•6 years ago
•
|
||
Comment hidden (mozreview-request) |
Comment hidden (mozreview-request) |
Comment 38•6 years ago
|
||
Comment 39•6 years ago
|
||
Comment 40•6 years ago
|
||
Comment 41•6 years ago
|
||
mozreview-review |
Updated•6 years ago
|
Comment 42•6 years ago
|
||
Comment 43•6 years ago
|
||
mozreview-review-reply |
Comment 44•6 years ago
|
||
Comment 45•6 years ago
|
||
mozreview-review |
Comment 46•6 years ago
|
||
Comment 47•6 years ago
|
||
Comment 48•6 years ago
|
||
Comment 49•6 years ago
|
||
Updated•6 years ago
|
Comment 50•6 years ago
|
||
Comment 51•6 years ago
|
||
Comment 52•6 years ago
|
||
Updated•6 years ago
|
Comment 53•5 years ago
|
||
FF69 flags contain:style as an invalid value.
In FF68 it was ok.
In our particular case we were using "contain: paint style layout" and because it was marked invalid it fell back to another value that then caused the UI to render incorrectly.
Reporter | ||
Comment 54•5 years ago
|
||
(In reply to robertedgar from comment #53)
FF69 flags contain:style as an invalid value. In FF68 it was ok.
Firefox's CSS parser has rejected contain:style
(and values including it) ever since Firefox 67, actually, via bug 1530896.
The change in Firefox 69 is that CSS Containment became enabled by default (bug 1487493). For now, you probably don't to use contain:style
in your markup -- it really doesn't do much, if you're not using automatic CSS-based counter-numbering or quote-matching. See https://github.com/w3c/csswg-drafts/issues/3280 for more (note that contain:style
was marked as "at-risk" in the spec as part of that github issue.)
You probably want just contain: paint layout
or contain:strict
(if you also want size-containment).
Comment 55•5 years ago
|
||
(In reply to robertedgar from comment #53)
FF69 flags contain:style as an invalid value.
In FF68 it was ok.
In our particular case we were using "contain: paint style layout" and because it was marked invalid it fell back to another value that then caused the UI to render incorrectly.
Hmm, but Firefox 68 didn't parse contain at all, right? Bug 1487493 landed in 70 and was uplifted to 69. As far as I know, to use it in FF68 you need to toggle the layout.css.contain.enabled pref yourself. Is that what you were doing?
See https://github.com/w3c/csswg-drafts/issues/3280 for why we removed support for contain: style
(but afaict we never shipped it).
In any case seems like you want contain: content
, right?
Comment 56•5 years ago
|
||
Sorry, the comment above mid-aired :)
Comment 57•5 years ago
|
||
Actually on reflection I think it was FF69 implementing size that might be the problem.
The element has initially has a class 'A' with contain:strict ( size layout paint), this is then overridden by another class "B" with contain:paint style layout.
In class A the size is independent of the children, but in class B it is dependent on the children (amongst other changes).
In FF68 everything displays correctly, in FF69 it fails as the height is 0.
So I assume FF69 implemented size whereas FF68 didnt.
This meant for us in FF68 contain in both classes didnt work whereas in FF69 one works the other doesn't.
FWIW in Chrome etc. there was no issue.
Sorry for misinformation before, took me a while to reflect on this and realise it was size being implemented that was the source of our problem
Reporter | ||
Comment 58•5 years ago
|
||
That makes more sense. Could you please file a new bug with a link to the affected page[1], and CC me on it? I'd very much like to take a look.
https://bugzilla.mozilla.org/enter_bug.cgi?product=Core&component=Layout
[1] (or a testcase, or some other way I can reproduce the issue & behavior-difference with e.g. Chrome)
Comment 59•5 years ago
|
||
(In reply to Daniel Holbert [:dholbert] from comment #58)
That makes more sense. Could you please file a new bug with a link to the affected page[1], and CC me on it? I'd very much like to take a look.
https://bugzilla.mozilla.org/enter_bug.cgi?product=Core&component=Layout
[1] (or a testcase, or some other way I can reproduce the issue & behavior-difference with e.g. Chrome)
Bug 1579336 - Page Layout issue in FF69 caused by implementing CSS 'contain: size' but not 'contain: style'
Reporter | ||
Comment 62•3 years ago
|
||
(In reply to robertedgar from comment #59)
(In reply to Daniel Holbert [:dholbert] from comment #58)
That makes more sense. Could you please file a new bug
Bug 1579336 - Page Layout issue in FF69 caused by implementing CSS 'contain: size' but not 'contain: style'
(Sorry for taking a while to take a look at that -- I ended up marking that bug as a duplicate of this one, with some notes/reasoning in bug 1579336 comment 6.)
Comment 63•3 years ago
|
||
The bug assignee didn't login in Bugzilla in the last 7 months.
:emilio, could you have a look please?
For more information, please visit auto_nag documentation.
Updated•3 years ago
|
Reporter | ||
Comment 64•3 years ago
|
||
I'm going to plan on picking this back up in the near future. --> self-assigning.
Reporter | ||
Updated•3 years ago
|
Assignee | ||
Comment 65•2 years ago
|
||
Add an implementation of CSS contain: style
. This introduces two new
data structures, the ContainStyleScope and ContainStyleScopeManager.
ContainStyleScope manages one contain: style
"world" which has its own
counter and quote lists. The contents of these lists depend on their
parent scopes, but are not affected by their children.
ContainStyleScopeManager manages a tree of scopes starting at a root
scope which is outside of any contain: style
element.
Scopes are stored in a hash table that is keyed off of the nsIContent
which establishes the contain: style
scope. When modifying quote or
content lists, the ContainStyleScopeManager is responsible for finding
the appropriate contain: style
scope to modify.
Perhaps the most complex part of this is that counters and quotes have
read access to the state of counters and quotes that are in ancestor
contain: style
scopes. In the case of counters, USE nodes that are at
the beginning of counter lists might have a counter scope that starts in
an ancestor contain: style
scope. When nsCounterNode::SetScope() is
called, the code may look upward in the contain: style
scope tree to
find the start of the counter scope. In the case of quotes, the first
node in the quote list must look for the state of quotes in ancestor
contain: style
scopes.
Comment 66•2 years ago
|
||
Comment 68•2 years ago
|
||
Backed out for causing xpcshell failures on test_css-properties-db.js
Failure line: TEST-UNEXPECTED-FAIL | devtools/shared/tests/xpcshell/test_css-properties-db.js | xpcshell return code: 0
[task 2022-06-22T12:29:48.728Z] 12:29:48 INFO - TEST-PASS | devtools/shared/tests/xpcshell/test_require.js | took 1849ms
[task 2022-06-22T12:29:48.828Z] 12:29:48 INFO - TEST-PASS | devtools/shared/tests/xpcshell/test_console_filtering.js | took 3405ms
[task 2022-06-22T12:29:48.991Z] 12:29:48 INFO - TEST-PASS | devtools/shared/tests/xpcshell/test_sprintfjs.js | took 1231ms
[task 2022-06-22T12:29:49.077Z] 12:29:49 INFO - TEST-PASS | devtools/shared/tests/xpcshell/test_stack.js | took 948ms
[task 2022-06-22T12:29:49.089Z] 12:29:49 INFO - TEST-PASS | devtools/shared/tests/xpcshell/test_executeSoon.js | took 762ms
[task 2022-06-22T12:29:49.162Z] 12:29:49 INFO - TEST-PASS | devtools/shared/tests/xpcshell/test_defer.js | took 897ms
[task 2022-06-22T12:29:49.164Z] 12:29:49 INFO - Retrying tests that failed when run in parallel.
[task 2022-06-22T12:29:49.168Z] 12:29:49 INFO - TEST-START | devtools/shared/tests/xpcshell/test_css-properties-db.js
[task 2022-06-22T12:29:49.625Z] 12:29:49 WARNING - TEST-UNEXPECTED-FAIL | devtools/shared/tests/xpcshell/test_css-properties-db.js | xpcshell return code: 0
[task 2022-06-22T12:29:49.626Z] 12:29:49 INFO - TEST-INFO took 448ms
[task 2022-06-22T12:29:49.626Z] 12:29:49 INFO - >>>>>>>
[task 2022-06-22T12:29:49.626Z] 12:29:49 INFO - PID 4046 | [Parent 4046, Main Thread] WARNING: Couldn't get the user appdata directory. Crash events may not be produced.: file /builds/worker/checkouts/gecko/toolkit/crashreporter/nsExceptionHandler.cpp:2972
[task 2022-06-22T12:29:49.626Z] 12:29:49 INFO - (xpcshell/head.js) | test MAIN run_test pending (1)
[task 2022-06-22T12:29:49.626Z] 12:29:49 INFO - TEST-PASS | devtools/shared/tests/xpcshell/test_css-properties-db.js | run_test - [run_test : 42] The pseudo elements match on the client and platform. If this assertion fails, then the client side CSS properties list in devtools is out of sync with the CSS properties on the platform. To fix this assertion run `mach devtools-css-db` to re-generate the client side properties. - ["::after","::before","::marker","::backdrop","::cue","::first-letter","::first-line","::selection","::-moz-focus-inner","::-moz-progress-bar","::-moz-range-track","::-moz-range-progress","::-moz-range-thumb","::-moz-meter-bar","::placeholder","::-moz-color-swatch","::file-selector-button"] deepEqual ["::after","::before","::marker","::backdrop","::cue","::first-letter","::first-line","::selection","::-moz-focus-inner","::-moz-progress-bar","::-moz-range-track","::-moz-range-progress","::-moz-range-thumb","::-moz-meter-bar","::placeholder","::-moz-color-swatch","::file-selector-button"]
[task 2022-06-22T12:29:49.628Z] 12:29:49 INFO - TEST-PASS | devtools/shared/tests/xpcshell/test_css-properties-db.js | run_test - [run_test : 50] The preferences match on the client and platform. If this assertion fails, then the client side CSS properties list in devtools is out of sync with the CSS properties on the platform. To fix this assertion run `mach devtools-css-db` to re-generate the client side properties. - [["aspect-ratio","layout.css.aspect-ratio.enabled"],["container-type","layout.css.container-queries.enabled"],["content-visibility","layout.css.content-visibility.enabled"],["font-optical-sizing","layout.css.font-variations.enabled"],["initial-letter","layout.css.initial-letter.enabled"],["masonry-auto-flow","layout.css.grid-template-masonry-value.enabled"],["math-depth","layout.css.math-depth.enabled"],["math-style","layout.css.math-style.enabled"],["-moz-control-character-visibility","layout.css.moz-control-character-visibility.enabled"],["-moz-osx-font-smoothing","layout.css.osx-font-smoothing.enabled"],["offset-rotate","layout.css.motion-path.enabled"],["overflow-anchor","layout.css.scroll-anchoring.enabled"],["scrollbar-gutter","layout.css.scrollbar-gutter.enabled"],["-webkit-line-clamp","layout.css.webkit-line-clamp.enabled"],["overflow-clip-box-block","layout.css.overflow-clip-box.enabled"],["overflow-clip-box-inline","layout.css.overflow-clip-box.enabled"],["overflow-block","layout.css.overflow-logical.enabled"],["overflow-inline","layout.css.overflow-logical.enabled"],["overscroll-behavior-block","layout.css.overscroll-behavior.enabled"],["overscroll-behavior-inline","layout.css.overscroll-behavior.enabled"],["overscroll-behavior-x","layout.css.overscroll-behavior.enabled"],["overscroll-behavior-y","layout.css.overscroll-behavior.enabled"],["accent-color","layout.css.accent-color.enabled"],["align-tracks","layout.css.grid-template-masonry-value.enabled"],["animation-timeline","layout.css.scroll-linked-animations.enabled"],["backdrop-filter","layout.css.backdrop-filter.enabled"],["color-scheme","layout.css.color-scheme.enabled"],["container-name","layout.css.container-queries.enabled"],["d","layout.css.d-property.enabled"],["font-variation-settings","layout.css.font-variations.enabled"],["hyphenate-character","layout.css.hyphenate-character.enabled"],["justify-tracks","layout.css.grid-template-masonry-value.enabled"],["-moz-context-properties","svg.context-properties.content.enabled"],["offset-anchor","layout.css.motion-path.enabled"],["offset-path","layout.css.motion-path.enabled"],["page","layout.css.named-pages.enabled"],["rotate","layout.css.individual-transform.enabled"],["scale","layout.css.individual-transform.enabled"],["scroll-timeline-axis","layout.css.scroll-linked-animations.enabled"],["scroll-timeline-name","layout.css.scroll-linked-animations.enabled"],["size","layout.css.page-size.enabled"],["translate","layout.css.individual-transform.enabled"],["offset-distance","layout.css.motion-path.enabled"],["overflow-clip-box","layout.css.overflow-clip-box.enabled"],["overscroll-behavior","layout.css.overscroll-behavior.enabled"],["container","layout.css.container-queries.enabled"],["offset","layout.css.motion-path.enabled"],["zoom","layout.css.zoom-transform-hack.enabled"],["scroll-timeline","layout.css.scroll-linked-animations.enabled"],["-moz-transform","layout.css.prefixes.transforms"],["-moz-perspective","layout.css.prefixes.transforms"],["-moz-perspective-origin","layout.css.prefixes.transforms"],["-moz-backface-visibility","layout.css.prefixes.transforms"],["-moz-transform-style","layout.css.prefixes.transforms"],["-moz-transform-origin","layout.css.prefixes.transforms"],["-moz-font-feature-settings","layout.css.prefixes.font-features"],["-moz-font-language-override","layout.css.prefixes.font-features"],["-moz-box-sizing","layout.css.prefixes.box-sizing"],["-moz-transition-duration","layout.css.prefixes.transitions"],["-moz-transition-timing-function","layout.css.prefixes.transitions"],["-moz-transition-property","layout.css.prefixes.transitions"],["-moz-transition-delay","layout.css.prefixes.transitions"],["-moz-animation-name","layout.css.prefixes.animations"],["-moz-animation-duration","layout.css.prefixes.animations"],["-moz-animation-timing-function","layout.css.prefixes.animations"],["-moz-animation-iteration-count","layout.css.prefixes.animations"],["-moz-animation-direction","layout.css.prefixes.animations"],["-moz-animation-play-state","layout.css.prefixes.animations"],["-moz-animation-fill-mode","layout.css.prefixes.animations"],["-moz-animation-delay","layout.css.prefixes.animations"],["-moz-border-image","layout.css.prefixes.border-image"],["-moz-transition","layout.css.prefixes.transitions"],["-moz-animation","layout.css.prefixes.animations"]] deepEqual [["aspect-ratio","layout.css.aspect-ratio.enabled"],["container-type","layout.css.container-queries.enabled"],["content-visibility","layout.css.content-visibility.enabled"],["font-optical-sizing","layout.css.font-variations.enabled"],["initial-letter","layout.css.initial-letter.enabled"],["masonry-auto-flow","layout.css.grid-template-masonry-value.enabled"],["math-depth","layout.css.math-depth.enabled"],["math-style","layout.css.math-style.enabled"],["-moz-control-character-visibility","layout.css.moz-control-character-visibility.enabled"],["-moz-osx-font-smoothing","layout.css.osx-font-smoothing.enabled"],["offset-rotate","layout.css.motion-path.enabled"],["overflow-anchor","layout.css.scroll-anchoring.enabled"],["scrollbar-gutter","layout.css.scrollbar-gutter.enabled"],["-webkit-line-clamp","layout.css.webkit-line-clamp.enabled"],["overflow-clip-box-block","layout.css.overflow-clip-box.enabled"],["overflow-clip-box-inline","layout.css.overflow-clip-box.enabled"],["overflow-block","layout.css.overflow-logical.enabled"],["overflow-inline","layout.css.overflow-logical.enabled"],["overscroll-behavior-block","layout.css.overscroll-behavior.enabled"],["overscroll-behavior-inline","layout.css.overscroll-behavior.enabled"],["overscroll-behavior-x","layout.css.overscroll-behavior.enabled"],["overscroll-behavior-y","layout.css.overscroll-behavior.enabled"],["accent-color","layout.css.accent-color.enabled"],["align-tracks","layout.css.grid-template-masonry-value.enabled"],["animation-timeline","layout.css.scroll-linked-animations.enabled"],["backdrop-filter","layout.css.backdrop-filter.enabled"],["color-scheme","layout.css.color-scheme.enabled"],["container-name","layout.css.container-queries.enabled"],["d","layout.css.d-property.enabled"],["font-variation-settings","layout.css.font-variations.enabled"],["hyphenate-character","layout.css.hyphenate-character.enabled"],["justify-tracks","layout.css.grid-template-masonry-value.enabled"],["-moz-context-properties","svg.context-properties.content.enabled"],["offset-anchor","layout.css.motion-path.enabled"],["offset-path","layout.css.motion-path.enabled"],["page","layout.css.named-pages.enabled"],["rotate","layout.css.individual-transform.enabled"],["scale","layout.css.individual-transform.enabled"],["scroll-timeline-axis","layout.css.scroll-linked-animations.enabled"],["scroll-timeline-name","layout.css.scroll-linked-animations.enabled"],["size","layout.css.page-size.enabled"],["translate","layout.css.individual-transform.enabled"],["offset-distance","layout.css.motion-path.enabled"],["overflow-clip-box","layout.css.overflow-clip-box.enabled"],["overscroll-behavior","layout.css.overscroll-behavior.enabled"],["container","layout.css.container-queries.enabled"],["offset","layout.css.motion-path.enabled"],["zoom","layout.css.zoom-transform-hack.enabled"],["scroll-timeline","layout.css.scroll-linked-animations.enabled"],["-moz-transform","layout.css.prefixes.transforms"],["-moz-perspective","layout.css.prefixes.transforms"],["-moz-perspective-origin","layout.css.prefixes.transforms"],["-moz-backface-visibility","layout.css.prefixes.transforms"],["-moz-transform-style","layout.css.prefixes.transforms"],["-moz-transform-origin","layout.css.prefixes.transforms"],["-moz-font-feature-settings","layout.css.prefixes.font-features"],["-moz-font-language-override","layout.css.prefixes.font-features"],["-moz-box-sizing","layout.css.prefixes.box-sizing"],["-moz-transition-duration","layout.css.prefixes.transitions"],["-moz-transition-timing-function","layout.css.prefixes.transitions"],["-moz-transition-property","layout.css.prefixes.transitions"],["-moz-transition-delay","layout.css.prefixes.transitions"],["-moz-animation-name","layout.css.prefixes.animations"],["-moz-animation-duration","layout.css.prefixes.animations"],["-moz-animation-timing-function","layout.css.prefixes.animations"],["-moz-animation-iteration-count","layout.css.prefixes.animations"],["-moz-animation-direction","layout.css.prefixes.animations"],["-moz-animation-play-state","layout.css.prefixes.animations"],["-moz-animation-fill-mode","layout.css.prefixes.animations"],["-moz-animation-delay","layout.css.prefixes.animations"],["-moz-border-image","layout.css.prefixes.border-image"],["-moz-transition","layout.css.prefixes.transitions"],["-moz-animation","layout.css.prefixes.animations"]]
[task 2022-06-22T12:29:49.629Z] 12:29:49 INFO - TEST-PASS | devtools/shared/tests/xpcshell/test_css-properties-db.js | run_test - [run_test : 71] The static database and platform match for "-moz-animation". - true == true
[task 2022-06-22T12:29:49.630Z] 12:29:49 INFO - TEST-PASS | devtools/shared/tests/xpcshell/test_css-properties-db.js | run_test - [run_test : 71] The static database and platform match for "-moz-animation-delay". - true == true
[task 2022-06-22T12:29:49.631Z] 12:29:49 INFO - TEST-PASS | devtools/shared/tests/xpcshell/test_css-properties-db.js | run_test - [run_test : 71] The static database and platform match for "-moz-animation-direction". - true == true
[task 2022-06-22T12:29:49.631Z] 12:29:49 INFO - TEST-PASS | devtools/shared/tests/xpcshell/test_css-properties-db.js | run_test - [run_test : 71] The static database and platform match for "-moz-animation-duration". - true == true
[task 2022-06-22T12:29:49.632Z] 12:29:49 INFO - TEST-PASS | devtools/shared/tests/xpcshell/test_css-properties-db.js | run_test - [run_test : 71] The static database and platform match for "-moz-animation-fill-mode". - true == true
[task 2022-06-22T12:29:49.632Z] 12:29:49 INFO - TEST-PASS | devtools/shared/tests/xpcshell/test_css-properties-db.js | run_test - [run_test : 71] The static database and platform match for "-moz-animation-iteration-count". - true == true
Comment 69•2 years ago
|
||
Martin, I think you just need to run ./mach devtools-css-db
, add the changes and re-land (bug 1320607 tracks getting rid of this, bites us way too often :/).
Comment 71•2 years ago
|
||
Assignee | ||
Comment 72•2 years ago
|
||
(In reply to Emilio Cobos Álvarez (:emilio) from comment #69)
Martin, I think you just need to run
./mach devtools-css-db
, add the changes and re-land (bug 1320607 tracks getting rid of this, bites us way too often :/).
Oof. Thanks. I've run this and landed the change again.
Comment 73•2 years ago
|
||
bugherder |
Updated•2 years ago
|
Description
•