-
Notifications
You must be signed in to change notification settings - Fork 3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[@container] Add tests for container-name being a tree-scoped name
Bug: 1382790 Change-Id: I0ebe47ebff02298c7ce9abfe0d5bcc28251c8dba Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4016835 Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org> Commit-Queue: Rune Lillesveen <futhark@chromium.org> Cr-Commit-Position: refs/heads/main@{#1069268}
- Loading branch information
1 parent
67d30af
commit 036e4ce
Showing
1 changed file
with
72 additions
and
0 deletions.
There are no files selected for viewing
72 changes: 72 additions & 0 deletions
72
css/css-contain/container-queries/container-name-tree-scoped.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,72 @@ | ||
<!doctype html> | ||
<meta charset="utf-8"> | ||
<title>CSS Container Queries Test: Tree scoped container-name</title> | ||
<link rel="help" href="https://drafts.csswg.org/css-contain-3/#query-container"> | ||
<link rel="help" href="https://drafts.csswg.org/css-scoping-1/#shadow-names"> | ||
<script src="/resources/testharness.js"></script> | ||
<script src="/resources/testharnessreport.js"></script> | ||
<script src="support/cq-testcommon.js"></script> | ||
|
||
<div id="container-name-host"> | ||
<div> | ||
<template shadowroot="open"> | ||
<style> | ||
:host { container-name: foo; } | ||
</style> | ||
<slot></slot> | ||
</template> | ||
<div id="t1"></div> | ||
</div> | ||
<style> | ||
#container-name-host > div { | ||
container-type: inline-size; | ||
} | ||
#t1 { color: green; } | ||
@container foo (width > 0px) { | ||
#t1 { color: red; } | ||
} | ||
</style> | ||
</div> | ||
|
||
<div id="container-name-slotted"> | ||
<div> | ||
<template shadowroot="open"> | ||
<style> | ||
::slotted(div) { | ||
container-name: foo; | ||
} | ||
</style> | ||
<slot></slot> | ||
</template> | ||
<div> | ||
<div id="t2"></div> | ||
</div> | ||
</div> | ||
<style> | ||
#container-name-slotted > div > div { | ||
container-type: inline-size; | ||
} | ||
#t2 { color: green; } | ||
@container foo (width > 0px) { | ||
#t2 { color: red; } | ||
} | ||
</style> | ||
</div> | ||
|
||
<script> | ||
setup(() => { | ||
assert_implements_container_queries(); | ||
polyfill_declarative_shadow_dom(document); | ||
}); | ||
|
||
const green = "rgb(0, 128, 0)"; | ||
|
||
test(() => { | ||
assert_equals(getComputedStyle(t1).color, green); | ||
}, "Outer scope query should not match container-name set by :host rule in shadow tree"); | ||
|
||
test(() => { | ||
assert_equals(getComputedStyle(t2).color, green); | ||
}, "Outer scope query should not match container-name set by ::slotted rule in shadow tree"); | ||
|
||
</script> |