Skip to content

Commit 695b065

Browse files
AlaskanEmilyAlaskanEmily
committed
Bug 2019254 Part 2 - Implement comma-separated container conditions parsing. r=firefox-style-system-reviewers,emilio
Differential Revision: https://phabricator.services.mozilla.com/D290612
1 parent ca67bf8 commit 695b065

9 files changed

Lines changed: 60 additions & 29 deletions

File tree

‎servo/components/style/stylesheets/rule_parser.rs‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -720,8 +720,12 @@ impl<'a, 'i> AtRuleParser<'i> for NestedRuleParser<'a, 'i> {
720720
AtRulePrelude::FontFace
721721
},
722722
"container" if cfg!(feature = "gecko") => {
723-
let condition = ContainerCondition::parse(&self.context, input)?;
724-
let conditions = ArcSlice::from_iter(core::iter::once(condition));
723+
let conditions = input.parse_comma_separated(|input| {
724+
ContainerCondition::parse(&self.context, input)
725+
})?;
726+
// Container rules must have at least one condition.
727+
debug_assert!(!conditions.is_empty());
728+
let conditions = ArcSlice::from_iter(conditions.into_iter());
725729
AtRulePrelude::Container(conditions)
726730
},
727731
"layer" => {

‎testing/web-platform/meta/css/css-conditional/container-queries/at-container-parsing.html.ini‎

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎testing/web-platform/meta/css/css-conditional/container-queries/at-container-serialization.html.ini‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎testing/web-platform/meta/css/css-conditional/container-queries/container-rule-cssom.html.ini‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎testing/web-platform/meta/css/css-conditional/container-queries/multiple-size-containers-comma-separated-queries.html.ini‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎testing/web-platform/meta/css/css-conditional/container-queries/multiple-style-containers-comma-separated-queries.html.ini‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎testing/web-platform/tests/css/css-conditional/container-queries/WEB_FEATURES.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,7 @@ features:
135135
- at-container-style-*
136136
- custom-property-style-*
137137
- display-contents-dynamic-style-queries.html
138+
- multiple-conditions-001.html
138139
- multiple-style-containers-comma-separated-queries.html
139140
- nested-size-style-container-invalidation.html
140141
- pseudo-elements-005.html

‎testing/web-platform/tests/css/css-conditional/container-queries/multiple-conditions-001-ref.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<!-- Any copyright is dedicated to the Public Domain.
3+
- https://creativecommons.org/publicdomain/zero/1.0/ -->
4+
<title>CSS Container Queries With Multiple Conditions - Reference</title>
5+
<link rel="author" title="Emily McDonough" href="mailto:emcdonough@mozilla.com">
6+
<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-queries">
7+
<style>
8+
.container{
9+
container-type: inline-size;
10+
}
11+
.container > div{
12+
border: thick double black;
13+
width: 100%;
14+
height: 20px;
15+
margin: 1px;
16+
}
17+
</style>
18+
<div class="container" style="width: 50px"><div style="background-color: cyan">A</div></div>
19+
<div class="container" style="width: 100px"><div style="background-color: pink">B</div></div>
20+
<div class="container" style="width: 175px"><div style="background-color: cyan">C</div></div>
21+
<div class="container" style="width: 200px"><div style="background-color: pink">D</div></div>

‎testing/web-platform/tests/css/css-conditional/container-queries/multiple-conditions-001.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<!-- Any copyright is dedicated to the Public Domain.
3+
- https://creativecommons.org/publicdomain/zero/1.0/ -->
4+
<title>CSS Container Queries With Multiple Conditions</title>
5+
<link rel="author" title="Emily McDonough" href="mailto:emcdonough@mozilla.com">
6+
<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-queries">
7+
<link rel="match" href="multiple-conditions-001-ref.html">
8+
<style>
9+
.container{
10+
container-type: inline-size;
11+
}
12+
.container > div{
13+
border: thick double black;
14+
width: 100%;
15+
height: 20px;
16+
margin: 1px;
17+
}
18+
@container (width < 75px), (width > 150px) {
19+
div {
20+
background-color: cyan;
21+
}
22+
}
23+
@container (75px <= width <= 150px), (width = 200px) {
24+
div {
25+
background-color: pink;
26+
}
27+
}
28+
</style>
29+
<div class="container" style="width: 50px"><div>A</div></div>
30+
<div class="container" style="width: 100px"><div>B</div></div>
31+
<div class="container" style="width: 175px"><div>C</div></div>
32+
<div class="container" style="width: 200px"><div>D</div></div>

0 commit comments

Comments
 (0)