mirror of
https://github.com/HeyPuter/firefox.git
synced 2026-11-13 20:14:57 -10:00
Rune Lillesveen
ebaa071440
Automatic update from web-platform-tests Move tree-counting wpt test to separate directory Also, tree-scoped behavior is now supported by the ED, making test no longer tentative. Bug: 40282719 Change-Id: I1f5111062f48513ce253b4efd2d94bf434aef467 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6345394 Auto-Submit: Rune Lillesveen <[email protected]> Commit-Queue: Anders Hartvoll Ruud <[email protected]> Reviewed-by: Anders Hartvoll Ruud <[email protected]> Cr-Commit-Position: refs/heads/main@{#1431431} -- wpt-commits: a0d74d68da019d58028c0847ca84cffd0eed75e4 wpt-pr: 51288
68 lines
2.1 KiB
HTML
68 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<title>CSS Values and Units Test: sibling-index() and sibling-count() in container queries</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-values-5/#tree-counting">
|
|
<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-features">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<style>
|
|
@property --length {
|
|
syntax: "<length>";
|
|
initial-value: 0px;
|
|
inherits: false;
|
|
}
|
|
.container { container-type: inline-size; }
|
|
#c1 {
|
|
width: 100px;
|
|
--length: 100px;
|
|
}
|
|
#c2 {
|
|
width: 400px;
|
|
--length: 400px;
|
|
}
|
|
span {
|
|
--match-100: no;
|
|
--match-400: no;
|
|
}
|
|
@container (width = calc(100px * sibling-index())) {
|
|
span { background-color: green; }
|
|
}
|
|
@container (width = calc(200px * sibling-count())) {
|
|
span { color: lime; }
|
|
}
|
|
@container style(--length: calc(100px * sibling-index())) {
|
|
span { --match-100: yes; }
|
|
}
|
|
@container style(--length: calc(200px * sibling-count())) {
|
|
span { --match-400: yes; }
|
|
}
|
|
</style>
|
|
<div style="color:black">
|
|
<div id="c1" class="container">
|
|
<span id="t1"></span>
|
|
</div>
|
|
<div id="c2" class="container">
|
|
<span id="t2"></span>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
test(() => {
|
|
assert_equals(getComputedStyle(t1).backgroundColor, "rgb(0, 128, 0)");
|
|
assert_equals(getComputedStyle(t1).color, "rgb(0, 0, 0)");
|
|
}, "sibling-index() in @container width query");
|
|
|
|
test(() => {
|
|
assert_equals(getComputedStyle(t2).backgroundColor, "rgba(0, 0, 0, 0)");
|
|
assert_equals(getComputedStyle(t2).color, "rgb(0, 255, 0)");
|
|
}, "sibling-count() in @container width query");
|
|
|
|
test(() => {
|
|
assert_equals(getComputedStyle(t1).getPropertyValue("--match-100"), "yes");
|
|
assert_equals(getComputedStyle(t1).getPropertyValue("--match-400"), "no");
|
|
}, "sibling-index() in @container style() query");
|
|
|
|
test(() => {
|
|
assert_equals(getComputedStyle(t2).getPropertyValue("--match-100"), "no");
|
|
assert_equals(getComputedStyle(t2).getPropertyValue("--match-400"), "yes");
|
|
}, "sibling-count() in @container style() query");
|
|
</script>
|