[css-contain-3] Spec syntax for size queries #6870

una · 2021-12-08T22:28:03Z

Contain level 3 adds a size() function for querying the parent size.

I understand this makes it more explicit due to multiple types of queries (i.e. its possible to query a style() in this spec). However, this might be potentially confusing for someone expecting the same experience as @media, i.e @media (min-width: 300px).

Would it be possible to support both syntaxes (@container (min-width: 300px) and @container size(min-width: 300px)) to reduce developer confusion and possible frustration?
If we introduce size() for @container, we should probably also support size() for @media.

The text was updated successfully, but these errors were encountered:

SebastianZ · 2021-12-27T22:53:49Z

The examples within the spec. already indicate that the function names are not needed. E.g. the example in Size Container Features looks like this:

@container (width > 40em) {
  h2 { font-size: 1.5em; }
}

Though the syntax definition currently does not allow that.

@una Your examples are missing the colon between property name and value.

Sebastian

bramus · 2021-12-27T23:14:44Z

@SebastianZ The syntax and examples indeed are out of sync. This has been reported in this separate issue: #6820

As @mirisuzanne replied in #6393 (comment):

I'll make sure to update the examples at some point here.

With the holidays around, it'll take some time though.

css-meeting-bot · 2022-01-12T17:20:32Z

The CSS Working Group just discussed CSS Containment L3.

The full IRC log of that discussion

<fantasai> Topic: CSS Containment L3
<fantasai> github: https://github.com//issues/6870
<fantasai> una: Written similar to MQ that could write width/min-width to query for a size
<fantasai> una: but this was removed from the spec
<fantasai> una: requires size() function
<fantasai> una: my suggestion is to keep the bare parens syntax
<fantasai> una: as well as size() function
<fantasai> una: easier for developers because similar to MQ
<fantasai> una: think devs would be confused if it doesn't work like MQ
<fantasai> miriam: So anything in parens that's not a unction, would be a size query
<fantasai> miriam: I'm OK with that, we went with consistency in the first draft
<fantasai> fantasai: I don't think we should have two syntaxes
<fantasai> fantasai: Either have a function, or don't have a function
<fantasai> una: I prefer not using the functional notation
<fantasai> una: I think it's clear enough without
<fantasai> miriam: The function is there to be consistent with / distinguish from style queries
<fantasai> miriam: both can be querying 'width' or 'min-width'
<fantasai> una: If someone has mental model of familiar tech like MQ, will likely try that syntax first for container query
<fantasai> una: querying size will be a popular technique
<florian_irc> s/'width' or 'min-width'/'min-width' as a size or 'min-width' as a property/
<iank_> what does it look like when you combine size & state/etc?
<fantasai> fantasai: anyone have an opinion?
<fantasai> jensimmons_: I agree with all three people
<fantasai> fantasai: but what does that mean?
<fantasai> jensimmons_: doesn't mean anything
<fantasai> Rossen_: Should discuss in issue maybe? Get a stronger opinion?
<fantasai> miriam: I'd like it if people put their opinions in the issue. Has been open, not many comments.
<fantasai> Rossen_: Ok, so pls add your opinions, and we'll come back to this next week

dbaron · 2022-01-12T17:21:45Z

To follow up to today's call, I think I'd lean towards dropping the size() syntax and having only the () syntax for size queries, to support both (a) consistency with @media and (b) not having multiple ways to write the same thing (which makes the language harder to read). I'd want to keep style().

css-meeting-bot · 2022-01-26T17:35:31Z

The CSS Working Group just discussed [css-contain-3] Spec syntax for size queries, and agreed to the following:

RESOLVED: drop the function syntax for querying sizes, but keep the function syntax for querying styles

The full IRC log of that discussion

<emeyer> Topic: [css-contain-3] Spec syntax for size queries
<emeyer> github: https://github.com//issues/6870
<emeyer> miriam: A while back we added the `style` container query, so we added `size`. Would we rather have size queries match media queries? I’m happy either way.
<dbaron> I *think* (although I'm not sure) that what I wrote in the issue was the same thing fantasai argued for on the call.
<emeyer> una: I like the solution of of dropping the size function syntax like in media queries, but requiring the style function for querying styles.
<fantasai> wfm
<emeyer> RESOLVED: drop the function syntax for querying sizes, but keep the function syntax for querying styles

https://bugs.webkit.org/show_bug.cgi?id=236580 Reviewed by Sam Weinig. LayoutTests/imported/w3c: * web-platform-tests/css/css-contain/container-queries/at-container-parsing-expected.txt: * web-platform-tests/css/css-contain/container-queries/container-for-shadow-dom.tentative-expected.txt: * web-platform-tests/css/css-contain/container-queries/container-type-invalidation-expected.txt: * web-platform-tests/css/css-contain/container-queries/query-evaluation-expected.txt: * web-platform-tests/css/css-contain/container-queries/size-feature-evaluation-expected.txt: Source/WebCore: So far we have been using the media query parser to parse container queries. It does not support nesting and other necessary features. Also the produced data structures are awkward to evaluate. https://drafts.csswg.org/css-contain-3/#container-rule This patch supports size queries but not style queries. It supports both the current spec size query syntax "size(foo)" (used in WPTs), and the non-function POR syntax from w3c/csswg-drafts#6870 (comment). * Sources.txt: * WebCore.xcodeproj/project.pbxproj: * css/ContainerQuery.h: * css/ContainerQueryParser.cpp: Added. (WebCore::ContainerQueryParser::parse): (WebCore::ContainerQueryParser::consumeContainerQuery): (WebCore::ContainerQueryParser::consumeCondition): (WebCore::ContainerQueryParser::consumeSizeQuery): No support for range operators ('<' etc) yet. * css/ContainerQueryParser.h: Copied from Source/WebCore/css/ContainerQuery.h. (WebCore::ContainerQueryParser::ContainerQueryParser): * css/parser/CSSParserImpl.cpp: (WebCore::CSSParserImpl::consumeContainerRule): * style/ContainerQueryEvaluator.cpp: (WebCore::Style::computeSize): (WebCore::Style::ContainerQueryEvaluator::evaluate const): (WebCore::Style::ContainerQueryEvaluator::evaluateQuery const): (WebCore::Style::ContainerQueryEvaluator::evaluateCondition const): (WebCore::Style::ContainerQueryEvaluator::evaluateSizeFeature const): Just 'width' and 'height' for now, no new size features yet. * style/ContainerQueryEvaluator.h: LayoutTests: * TestExpectations: Canonical link: https://commits.webkit.org/247226@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@289742 268f45cc-cd09-0410-ab3c-d52691b4dbfc

https://bugs.webkit.org/show_bug.cgi?id=236580 Reviewed by Sam Weinig. LayoutTests/imported/w3c: * web-platform-tests/css/css-contain/container-queries/at-container-parsing-expected.txt: * web-platform-tests/css/css-contain/container-queries/container-for-shadow-dom.tentative-expected.txt: * web-platform-tests/css/css-contain/container-queries/container-type-invalidation-expected.txt: * web-platform-tests/css/css-contain/container-queries/query-evaluation-expected.txt: * web-platform-tests/css/css-contain/container-queries/size-feature-evaluation-expected.txt: Source/WebCore: So far we have been using the media query parser to parse container queries. It does not support nesting and other necessary features. Also the produced data structures are awkward to evaluate. https://drafts.csswg.org/css-contain-3/#container-rule This patch supports size queries but not style queries. It supports both the current spec size query syntax "size(foo)" (used in WPTs), and the non-function POR syntax from w3c/csswg-drafts#6870 (comment). * Sources.txt: * WebCore.xcodeproj/project.pbxproj: * css/ContainerQuery.h: * css/ContainerQueryParser.cpp: Added. (WebCore::ContainerQueryParser::parse): (WebCore::ContainerQueryParser::consumeContainerQuery): (WebCore::ContainerQueryParser::consumeCondition): (WebCore::ContainerQueryParser::consumeSizeQuery): No support for range operators ('<' etc) yet. * css/ContainerQueryParser.h: Copied from Source/WebCore/css/ContainerQuery.h. (WebCore::ContainerQueryParser::ContainerQueryParser): * css/parser/CSSParserImpl.cpp: (WebCore::CSSParserImpl::consumeContainerRule): * style/ContainerQueryEvaluator.cpp: (WebCore::Style::computeSize): (WebCore::Style::ContainerQueryEvaluator::evaluate const): (WebCore::Style::ContainerQueryEvaluator::evaluateQuery const): (WebCore::Style::ContainerQueryEvaluator::evaluateCondition const): (WebCore::Style::ContainerQueryEvaluator::evaluateSizeFeature const): Just 'width' and 'height' for now, no new size features yet. * style/ContainerQueryEvaluator.h: LayoutTests: * TestExpectations: git-svn-id: http://svn.webkit.org/repository/webkit/trunk@289742 268f45cc-cd09-0410-ab3c-d52691b4dbfc

…enclosed #6396

https://bugs.webkit.org/show_bug.cgi?id=237638 Reviewed by Antoine Quint. LayoutTests/imported/w3c: Upstream has been updated with the new syntax from w3c/csswg-drafts#6870 and behavior from w3c/csswg-drafts#6644 * resources/resource-files.json: * web-platform-tests/css/css-contain/container-queries/animation-container-size.html: * web-platform-tests/css/css-contain/container-queries/animation-container-type-dynamic.html: * web-platform-tests/css/css-contain/container-queries/animation-nested-animation.html: * web-platform-tests/css/css-contain/container-queries/animation-nested-transition.html: * web-platform-tests/css/css-contain/container-queries/aspect-ratio-feature-evaluation.html: * web-platform-tests/css/css-contain/container-queries/at-container-parsing-expected.txt: * web-platform-tests/css/css-contain/container-queries/at-container-parsing.html: * web-platform-tests/css/css-contain/container-queries/auto-scrollbars.html: * web-platform-tests/css/css-contain/container-queries/backdrop-invalidation.html: * web-platform-tests/css/css-contain/container-queries/canvas-as-container-005-expected.txt: Added. * web-platform-tests/css/css-contain/container-queries/canvas-as-container-005.html: Added. * web-platform-tests/css/css-contain/container-queries/canvas-as-container-006-expected.txt: Added. * web-platform-tests/css/css-contain/container-queries/canvas-as-container-006.html: Added. * web-platform-tests/css/css-contain/container-queries/change-display-in-container.html: * web-platform-tests/css/css-contain/container-queries/conditional-container-status.html: * web-platform-tests/css/css-contain/container-queries/container-computed-expected.txt: * web-platform-tests/css/css-contain/container-queries/container-computed.html: * web-platform-tests/css/css-contain/container-queries/container-for-shadow-dom-expected.txt: Renamed from LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-for-shadow-dom.tentative-expected.txt. * web-platform-tests/css/css-contain/container-queries/container-for-shadow-dom.html: Renamed from LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-for-shadow-dom.tentative.html. * web-platform-tests/css/css-contain/container-queries/container-inner-at-rules-expected.txt: Added. * web-platform-tests/css/css-contain/container-queries/container-inner-at-rules.html: Added. * web-platform-tests/css/css-contain/container-queries/container-name-computed-expected.txt: * web-platform-tests/css/css-contain/container-queries/container-name-computed.html: * web-platform-tests/css/css-contain/container-queries/container-name-invalidation.html: * web-platform-tests/css/css-contain/container-queries/container-name-parsing-expected.txt: * web-platform-tests/css/css-contain/container-queries/container-name-parsing.html: * web-platform-tests/css/css-contain/container-queries/container-nested-expected.txt: * web-platform-tests/css/css-contain/container-queries/container-nested.html: * web-platform-tests/css/css-contain/container-queries/container-parsing-expected.txt: * web-platform-tests/css/css-contain/container-queries/container-parsing.html: * web-platform-tests/css/css-contain/container-queries/container-selection-expected.txt: * web-platform-tests/css/css-contain/container-queries/container-selection.html: * web-platform-tests/css/css-contain/container-queries/container-size-invalidation.html: * web-platform-tests/css/css-contain/container-queries/container-type-invalidation.html: * web-platform-tests/css/css-contain/container-queries/container-units-small-viewport-fallback-expected.txt: Added. * web-platform-tests/css/css-contain/container-queries/container-units-small-viewport-fallback.html: Added. * web-platform-tests/css/css-contain/container-queries/counters-flex-circular.html: * web-platform-tests/css/css-contain/container-queries/counters-in-container-dynamic.html: * web-platform-tests/css/css-contain/container-queries/counters-in-container.html: * web-platform-tests/css/css-contain/container-queries/deep-nested-inline-size-containers-expected.txt: Added. * web-platform-tests/css/css-contain/container-queries/deep-nested-inline-size-containers.html: Added. * web-platform-tests/css/css-contain/container-queries/display-contents.html: * web-platform-tests/css/css-contain/container-queries/display-in-container.html: * web-platform-tests/css/css-contain/container-queries/display-none.html: * web-platform-tests/css/css-contain/container-queries/fieldset-legend-change.html: * web-platform-tests/css/css-contain/container-queries/flex-in-columns-000-crash.html: * web-platform-tests/css/css-contain/container-queries/flex-in-columns-001-crash.html: * web-platform-tests/css/css-contain/container-queries/flex-in-columns-002-crash.html: * web-platform-tests/css/css-contain/container-queries/flex-in-columns-003-crash.html: * web-platform-tests/css/css-contain/container-queries/focus-inside-content-visibility-crash.html: * web-platform-tests/css/css-contain/container-queries/font-relative-units-dynamic.html: * web-platform-tests/css/css-contain/container-queries/font-relative-units.html: * web-platform-tests/css/css-contain/container-queries/fragmented-container-001-expected.txt: Added. * web-platform-tests/css/css-contain/container-queries/fragmented-container-001.html: Added. * web-platform-tests/css/css-contain/container-queries/get-animations.html: * web-platform-tests/css/css-contain/container-queries/grid-in-columns-000-crash.html: * web-platform-tests/css/css-contain/container-queries/grid-in-columns-001-crash.html: * web-platform-tests/css/css-contain/container-queries/grid-in-columns-002-crash.html: * web-platform-tests/css/css-contain/container-queries/grid-in-columns-003-crash.html: * web-platform-tests/css/css-contain/container-queries/iframe-invalidation.html: * web-platform-tests/css/css-contain/container-queries/ineligible-containment.html: * web-platform-tests/css/css-contain/container-queries/inline-multicol-inside-container-crash.html: * web-platform-tests/css/css-contain/container-queries/inline-size-and-min-width.html: * web-platform-tests/css/css-contain/container-queries/inline-size-bfc-floats.html: * web-platform-tests/css/css-contain/container-queries/inline-size-containment-vertical-rl.html: * web-platform-tests/css/css-contain/container-queries/inline-size-containment.html: * web-platform-tests/css/css-contain/container-queries/inline-with-columns-000-crash.html: * web-platform-tests/css/css-contain/container-queries/inline-with-columns-001-crash.html: * web-platform-tests/css/css-contain/container-queries/multicol-container-001-expected.txt: Added. * web-platform-tests/css/css-contain/container-queries/multicol-container-001.html: Added. * web-platform-tests/css/css-contain/container-queries/multicol-inside-container.html: * web-platform-tests/css/css-contain/container-queries/never-match-container-expected.txt: Added. * web-platform-tests/css/css-contain/container-queries/never-match-container.html: Added. * web-platform-tests/css/css-contain/container-queries/orthogonal-wm-container-query.html: * web-platform-tests/css/css-contain/container-queries/percentage-padding-orthogonal.html: * web-platform-tests/css/css-contain/container-queries/pseudo-elements-001.html: * web-platform-tests/css/css-contain/container-queries/pseudo-elements-002.tentative-expected.html: Removed. * web-platform-tests/css/css-contain/container-queries/pseudo-elements-002.tentative-ref.html: Removed. * web-platform-tests/css/css-contain/container-queries/pseudo-elements-002.tentative.html: Removed. * web-platform-tests/css/css-contain/container-queries/pseudo-elements-003-expected.txt: Renamed from LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/pseudo-elements-003.tentative-expected.txt. * web-platform-tests/css/css-contain/container-queries/pseudo-elements-003.html: Renamed from LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/pseudo-elements-003.tentative.html. * web-platform-tests/css/css-contain/container-queries/query-content-box.html: * web-platform-tests/css/css-contain/container-queries/query-evaluation-expected.txt: * web-platform-tests/css/css-contain/container-queries/query-evaluation.html: * web-platform-tests/css/css-contain/container-queries/reattach-container-with-dirty-child.html: * web-platform-tests/css/css-contain/container-queries/resize-while-content-visibility-hidden.html: * web-platform-tests/css/css-contain/container-queries/size-container-no-principal-box.html: * web-platform-tests/css/css-contain/container-queries/size-feature-evaluation-expected.txt: * web-platform-tests/css/css-contain/container-queries/size-feature-evaluation.html: * web-platform-tests/css/css-contain/container-queries/style-change-in-container.html: * web-platform-tests/css/css-contain/container-queries/svg-layout-root-crash.html: * web-platform-tests/css/css-contain/container-queries/svg-root-size-container-expected.txt: Added. * web-platform-tests/css/css-contain/container-queries/svg-root-size-container.html: Added. * web-platform-tests/css/css-contain/container-queries/table-in-columns-000-crash.html: * web-platform-tests/css/css-contain/container-queries/table-in-columns-001-crash.html: * web-platform-tests/css/css-contain/container-queries/table-in-columns-002-crash.html: * web-platform-tests/css/css-contain/container-queries/table-in-columns-003-crash.html: * web-platform-tests/css/css-contain/container-queries/top-layer-dialog-backdrop.html: * web-platform-tests/css/css-contain/container-queries/top-layer-dialog-container.html: * web-platform-tests/css/css-contain/container-queries/top-layer-dialog.html: * web-platform-tests/css/css-contain/container-queries/top-layer-nested-dialog.html: * web-platform-tests/css/css-contain/container-queries/transition-scrollbars.html: * web-platform-tests/css/css-contain/container-queries/transition-style-change-event.html: * web-platform-tests/css/css-contain/container-queries/unsupported-axis-expected.txt: * web-platform-tests/css/css-contain/container-queries/unsupported-axis.html: * web-platform-tests/css/css-contain/container-queries/viewport-units-dynamic.html: * web-platform-tests/css/css-contain/container-queries/viewport-units.html: * web-platform-tests/css/css-contain/container-queries/w3c-import.log: * web-platform-tests/css/css-contain/container-queries/whitespace-update-after-removal.html: LayoutTests: * TestExpectations: Canonical link: https://commits.webkit.org/248210@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@291036 268f45cc-cd09-0410-ab3c-d52691b4dbfc

https://bugs.webkit.org/show_bug.cgi?id=237639 Reviewed by Antoine Quint. LayoutTests/imported/w3c: * web-platform-tests/css/css-contain/container-queries/at-container-parsing-expected.txt: * web-platform-tests/css/css-contain/container-queries/container-name-parsing-expected.txt: Source/WebCore: Per w3c/csswg-drafts#6870 * css/ContainerQueryParser.cpp: (WebCore::ContainerQueryParser::consumeContainerQuery): * css/parser/CSSPropertyParserHelpers.cpp: (WebCore::CSSPropertyParserHelpers::consumeSingleContainerName): Also disallow strings as container names (they need to be identifiers). Canonical link: https://commits.webkit.org/248220@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@291046 268f45cc-cd09-0410-ab3c-d52691b4dbfc

https://bugs.webkit.org/show_bug.cgi?id=237638 Reviewed by Antoine Quint. LayoutTests/imported/w3c: Upstream has been updated with the new syntax from w3c/csswg-drafts#6870 and behavior from w3c/csswg-drafts#6644 * resources/resource-files.json: * web-platform-tests/css/css-contain/container-queries/animation-container-size.html: * web-platform-tests/css/css-contain/container-queries/animation-container-type-dynamic.html: * web-platform-tests/css/css-contain/container-queries/animation-nested-animation.html: * web-platform-tests/css/css-contain/container-queries/animation-nested-transition.html: * web-platform-tests/css/css-contain/container-queries/aspect-ratio-feature-evaluation.html: * web-platform-tests/css/css-contain/container-queries/at-container-parsing-expected.txt: * web-platform-tests/css/css-contain/container-queries/at-container-parsing.html: * web-platform-tests/css/css-contain/container-queries/auto-scrollbars.html: * web-platform-tests/css/css-contain/container-queries/backdrop-invalidation.html: * web-platform-tests/css/css-contain/container-queries/canvas-as-container-005-expected.txt: Added. * web-platform-tests/css/css-contain/container-queries/canvas-as-container-005.html: Added. * web-platform-tests/css/css-contain/container-queries/canvas-as-container-006-expected.txt: Added. * web-platform-tests/css/css-contain/container-queries/canvas-as-container-006.html: Added. * web-platform-tests/css/css-contain/container-queries/change-display-in-container.html: * web-platform-tests/css/css-contain/container-queries/conditional-container-status.html: * web-platform-tests/css/css-contain/container-queries/container-computed-expected.txt: * web-platform-tests/css/css-contain/container-queries/container-computed.html: * web-platform-tests/css/css-contain/container-queries/container-for-shadow-dom-expected.txt: Renamed from LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-for-shadow-dom.tentative-expected.txt. * web-platform-tests/css/css-contain/container-queries/container-for-shadow-dom.html: Renamed from LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/container-for-shadow-dom.tentative.html. * web-platform-tests/css/css-contain/container-queries/container-inner-at-rules-expected.txt: Added. * web-platform-tests/css/css-contain/container-queries/container-inner-at-rules.html: Added. * web-platform-tests/css/css-contain/container-queries/container-name-computed-expected.txt: * web-platform-tests/css/css-contain/container-queries/container-name-computed.html: * web-platform-tests/css/css-contain/container-queries/container-name-invalidation.html: * web-platform-tests/css/css-contain/container-queries/container-name-parsing-expected.txt: * web-platform-tests/css/css-contain/container-queries/container-name-parsing.html: * web-platform-tests/css/css-contain/container-queries/container-nested-expected.txt: * web-platform-tests/css/css-contain/container-queries/container-nested.html: * web-platform-tests/css/css-contain/container-queries/container-parsing-expected.txt: * web-platform-tests/css/css-contain/container-queries/container-parsing.html: * web-platform-tests/css/css-contain/container-queries/container-selection-expected.txt: * web-platform-tests/css/css-contain/container-queries/container-selection.html: * web-platform-tests/css/css-contain/container-queries/container-size-invalidation.html: * web-platform-tests/css/css-contain/container-queries/container-type-invalidation.html: * web-platform-tests/css/css-contain/container-queries/container-units-small-viewport-fallback-expected.txt: Added. * web-platform-tests/css/css-contain/container-queries/container-units-small-viewport-fallback.html: Added. * web-platform-tests/css/css-contain/container-queries/counters-flex-circular.html: * web-platform-tests/css/css-contain/container-queries/counters-in-container-dynamic.html: * web-platform-tests/css/css-contain/container-queries/counters-in-container.html: * web-platform-tests/css/css-contain/container-queries/deep-nested-inline-size-containers-expected.txt: Added. * web-platform-tests/css/css-contain/container-queries/deep-nested-inline-size-containers.html: Added. * web-platform-tests/css/css-contain/container-queries/display-contents.html: * web-platform-tests/css/css-contain/container-queries/display-in-container.html: * web-platform-tests/css/css-contain/container-queries/display-none.html: * web-platform-tests/css/css-contain/container-queries/fieldset-legend-change.html: * web-platform-tests/css/css-contain/container-queries/flex-in-columns-000-crash.html: * web-platform-tests/css/css-contain/container-queries/flex-in-columns-001-crash.html: * web-platform-tests/css/css-contain/container-queries/flex-in-columns-002-crash.html: * web-platform-tests/css/css-contain/container-queries/flex-in-columns-003-crash.html: * web-platform-tests/css/css-contain/container-queries/focus-inside-content-visibility-crash.html: * web-platform-tests/css/css-contain/container-queries/font-relative-units-dynamic.html: * web-platform-tests/css/css-contain/container-queries/font-relative-units.html: * web-platform-tests/css/css-contain/container-queries/fragmented-container-001-expected.txt: Added. * web-platform-tests/css/css-contain/container-queries/fragmented-container-001.html: Added. * web-platform-tests/css/css-contain/container-queries/get-animations.html: * web-platform-tests/css/css-contain/container-queries/grid-in-columns-000-crash.html: * web-platform-tests/css/css-contain/container-queries/grid-in-columns-001-crash.html: * web-platform-tests/css/css-contain/container-queries/grid-in-columns-002-crash.html: * web-platform-tests/css/css-contain/container-queries/grid-in-columns-003-crash.html: * web-platform-tests/css/css-contain/container-queries/iframe-invalidation.html: * web-platform-tests/css/css-contain/container-queries/ineligible-containment.html: * web-platform-tests/css/css-contain/container-queries/inline-multicol-inside-container-crash.html: * web-platform-tests/css/css-contain/container-queries/inline-size-and-min-width.html: * web-platform-tests/css/css-contain/container-queries/inline-size-bfc-floats.html: * web-platform-tests/css/css-contain/container-queries/inline-size-containment-vertical-rl.html: * web-platform-tests/css/css-contain/container-queries/inline-size-containment.html: * web-platform-tests/css/css-contain/container-queries/inline-with-columns-000-crash.html: * web-platform-tests/css/css-contain/container-queries/inline-with-columns-001-crash.html: * web-platform-tests/css/css-contain/container-queries/multicol-container-001-expected.txt: Added. * web-platform-tests/css/css-contain/container-queries/multicol-container-001.html: Added. * web-platform-tests/css/css-contain/container-queries/multicol-inside-container.html: * web-platform-tests/css/css-contain/container-queries/never-match-container-expected.txt: Added. * web-platform-tests/css/css-contain/container-queries/never-match-container.html: Added. * web-platform-tests/css/css-contain/container-queries/orthogonal-wm-container-query.html: * web-platform-tests/css/css-contain/container-queries/percentage-padding-orthogonal.html: * web-platform-tests/css/css-contain/container-queries/pseudo-elements-001.html: * web-platform-tests/css/css-contain/container-queries/pseudo-elements-002.tentative-expected.html: Removed. * web-platform-tests/css/css-contain/container-queries/pseudo-elements-002.tentative-ref.html: Removed. * web-platform-tests/css/css-contain/container-queries/pseudo-elements-002.tentative.html: Removed. * web-platform-tests/css/css-contain/container-queries/pseudo-elements-003-expected.txt: Renamed from LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/pseudo-elements-003.tentative-expected.txt. * web-platform-tests/css/css-contain/container-queries/pseudo-elements-003.html: Renamed from LayoutTests/imported/w3c/web-platform-tests/css/css-contain/container-queries/pseudo-elements-003.tentative.html. * web-platform-tests/css/css-contain/container-queries/query-content-box.html: * web-platform-tests/css/css-contain/container-queries/query-evaluation-expected.txt: * web-platform-tests/css/css-contain/container-queries/query-evaluation.html: * web-platform-tests/css/css-contain/container-queries/reattach-container-with-dirty-child.html: * web-platform-tests/css/css-contain/container-queries/resize-while-content-visibility-hidden.html: * web-platform-tests/css/css-contain/container-queries/size-container-no-principal-box.html: * web-platform-tests/css/css-contain/container-queries/size-feature-evaluation-expected.txt: * web-platform-tests/css/css-contain/container-queries/size-feature-evaluation.html: * web-platform-tests/css/css-contain/container-queries/style-change-in-container.html: * web-platform-tests/css/css-contain/container-queries/svg-layout-root-crash.html: * web-platform-tests/css/css-contain/container-queries/svg-root-size-container-expected.txt: Added. * web-platform-tests/css/css-contain/container-queries/svg-root-size-container.html: Added. * web-platform-tests/css/css-contain/container-queries/table-in-columns-000-crash.html: * web-platform-tests/css/css-contain/container-queries/table-in-columns-001-crash.html: * web-platform-tests/css/css-contain/container-queries/table-in-columns-002-crash.html: * web-platform-tests/css/css-contain/container-queries/table-in-columns-003-crash.html: * web-platform-tests/css/css-contain/container-queries/top-layer-dialog-backdrop.html: * web-platform-tests/css/css-contain/container-queries/top-layer-dialog-container.html: * web-platform-tests/css/css-contain/container-queries/top-layer-dialog.html: * web-platform-tests/css/css-contain/container-queries/top-layer-nested-dialog.html: * web-platform-tests/css/css-contain/container-queries/transition-scrollbars.html: * web-platform-tests/css/css-contain/container-queries/transition-style-change-event.html: * web-platform-tests/css/css-contain/container-queries/unsupported-axis-expected.txt: * web-platform-tests/css/css-contain/container-queries/unsupported-axis.html: * web-platform-tests/css/css-contain/container-queries/viewport-units-dynamic.html: * web-platform-tests/css/css-contain/container-queries/viewport-units.html: * web-platform-tests/css/css-contain/container-queries/w3c-import.log: * web-platform-tests/css/css-contain/container-queries/whitespace-update-after-removal.html: LayoutTests: * TestExpectations: git-svn-id: http://svn.webkit.org/repository/webkit/trunk@291036 268f45cc-cd09-0410-ab3c-d52691b4dbfc

https://bugs.webkit.org/show_bug.cgi?id=237639 Reviewed by Antoine Quint. LayoutTests/imported/w3c: * web-platform-tests/css/css-contain/container-queries/at-container-parsing-expected.txt: * web-platform-tests/css/css-contain/container-queries/container-name-parsing-expected.txt: Source/WebCore: Per w3c/csswg-drafts#6870 * css/ContainerQueryParser.cpp: (WebCore::ContainerQueryParser::consumeContainerQuery): * css/parser/CSSPropertyParserHelpers.cpp: (WebCore::CSSPropertyParserHelpers::consumeSingleContainerName): Also disallow strings as container names (they need to be identifiers). git-svn-id: http://svn.webkit.org/repository/webkit/trunk@291046 268f45cc-cd09-0410-ab3c-d52691b4dbfc

yisibl · 2022-04-15T08:45:26Z

Chrome Remove size() function in https://chromium-review.googlesource.com/c/chromium/src/+/3497743

una added css-contain-3 Agenda+ labels Dec 8, 2021

fantasai added the Needs Naming (Request to Bikeshed) label Jan 12, 2022

css-meeting-bot removed the Agenda+ label Jan 26, 2022

mozilla-apprentice mentioned this issue Jan 26, 2022

[css-contain-3] Spec syntax for size queries mozilla/wg-decisions#727

Closed

mirisuzanne added Needs Edits Closed Accepted by CSSWG Resolution labels Jan 26, 2022

mirisuzanne added a commit that referenced this issue Feb 17, 2022

[css-contain-3] Update syntax for size-queries #6870 & allow general-…

d8501fc

…enclosed #6396

mirisuzanne removed the Needs Edits label Feb 17, 2022

mirisuzanne closed this as completed Feb 17, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[css-contain-3] Spec syntax for size queries #6870

[css-contain-3] Spec syntax for size queries #6870

una commented Dec 8, 2021 •

edited

Loading

SebastianZ commented Dec 27, 2021

bramus commented Dec 27, 2021

css-meeting-bot commented Jan 12, 2022

dbaron commented Jan 12, 2022

css-meeting-bot commented Jan 26, 2022

yisibl commented Apr 15, 2022

[css-contain-3] Spec syntax for size queries #6870

[css-contain-3] Spec syntax for size queries #6870

Comments

una commented Dec 8, 2021 • edited Loading

SebastianZ commented Dec 27, 2021

bramus commented Dec 27, 2021

css-meeting-bot commented Jan 12, 2022

dbaron commented Jan 12, 2022

css-meeting-bot commented Jan 26, 2022

yisibl commented Apr 15, 2022

una commented Dec 8, 2021 •

edited

Loading