Skip to content

GitLab

T
tangled
Commit eb99c8ab authored by Anders Hartvoll Ruud's avatar Anders Hartvoll Ruud Committed by Chromium LUCI CQ
Browse files
Options

[@container] Add virtual/container-queries test suite 

This runs tests under wpt_internal, since we don't have a spec yet.

Bug: 1145970
Change-Id: Ibf9339d0c3faf89495cee08d51a9c65b694fefb6
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2632750Reviewed-by: default avatarRune Lillesveen <futhark@chromium.org>
Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org>
Cr-Commit-Position: refs/heads/master@{#844484}
parent 17fc529b
Show whitespace changes
Inline Side-by-side
Showing with 211 additions and 0 deletions
third_party/blink/web_tests/TestExpectations
View file @ eb99c8ab
...@@ -1315,6 +1315,12 @@ crbug.com/1158554 external/wpt/css/css-conditional/css-supports-040.xht [ Failur ...@@ -1315,6 +1315,12 @@ crbug.com/1158554 external/wpt/css/css-conditional/css-supports-040.xht [ Failur
crbug.com/1158554 external/wpt/css/css-conditional/css-supports-041.xht [ Failure ] crbug.com/1158554 external/wpt/css/css-conditional/css-supports-041.xht [ Failure ]
crbug.com/1158554 external/wpt/css/css-conditional/css-supports-042.xht [ Failure ] crbug.com/1158554 external/wpt/css/css-conditional/css-supports-042.xht [ Failure ]
# @container
# These tests are only valid when the runtime flag CSSContainerQueries is
# enabled.
crbug.com/1145970 wpt_internal/css/css-conditional/container-queries/* [ Failure ]
crbug.com/1145970 virtual/container-queries/* [ Pass ]
# ====== Style team owned tests to here ====== # ====== Style team owned tests to here ======
......
third_party/blink/web_tests/VirtualTestSuites
View file @ eb99c8ab
...@@ -587,6 +587,11 @@ ...@@ -587,6 +587,11 @@
"--enable-blink-features=CSSColorScheme,CSSColorSchemeUARendering", "--enable-blink-features=CSSColorScheme,CSSColorSchemeUARendering",
"--enable-features=EyeDropper"] "--enable-features=EyeDropper"]
}, },
{
"prefix": "container-queries",
"bases": ["wpt_internal/css/css-conditional/container-queries"],
"args": ["--enable-blink-features=CSSContainerQueries"]
},
{ {
"prefix": "appcache-origin-trial", "prefix": "appcache-origin-trial",
"bases": ["http/tests/appcache"], "bases": ["http/tests/appcache"],
......
third_party/blink/web_tests/virtual/container-queries/README.md 0 → 100644
View file @ eb99c8ab
Virtual test suites for container queries (runtime flag: CSSContainerQueries).
third_party/blink/web_tests/wpt_internal/css/css-conditional/container-queries/at-container-001-ref.html 0 → 100644
View file @ eb99c8ab
<!DOCTYPE html>
<title>Tests basic evaluation of @container queries</title>
<style>
.container {
width: 30px;
height: 50px;
border: 1px solid black;
display: inline-block;
}
.box {
background-color: black;
width: 20px;
height: 20px;
}
</style>
<div class=width>
<div class=container style="width:29px"><div class=box></div></div>
<div class=container style="width:30px"><div class=box style="background-color:coral"></div></div>
<div class=container style="width:35px"><div class=box style="background-color:coral"></div></div>
<div class=container style="width:40px"><div class=box style="background-color:skyblue"></div></div>
<div class=container style="width:50px"><div class=box style="background-color:hotpink"></div></div>
<div class=container style="width:60px"><div class=box style="background-color:seagreen"></div></div>
<div class=container style="width:70px"><div class=box style="background-color:seagreen"></div></div>
</div>
<div class=height>
<div class=container style="height:49px"><div class=box></div></div>
<div class=container style="height:50px"><div class=box style="background-color:coral"></div></div>
<div class=container style="height:55px"><div class=box style="background-color:coral"></div></div>
<div class=container style="height:60px"><div class=box style="background-color:skyblue"></div></div>
<div class=container style="height:70px"><div class=box style="background-color:hotpink"></div></div>
<div class=container style="height:80px"><div class=box style="background-color:seagreen"></div></div>
<div class=container style="height:90px"><div class=box style="background-color:seagreen"></div></div>
</div>
\ No newline at end of file
third_party/blink/web_tests/wpt_internal/css/css-conditional/container-queries/at-container-001.html 0 → 100644
View file @ eb99c8ab
<!DOCTYPE html>
<link rel="match" href="at-container-001-ref.html">
<title>Tests basic evaluation of @container queries</title>
<style>
.container {
contain: size layout;
width: 30px;
height: 50px;
border: 1px solid black;
display: inline-block;
}
.box {
background-color: black;
width: 20px;
height: 20px;
}
@container (min-width: 30px) { .width .box { background-color: coral; } }
@container (min-width: 40px) { .width .box { background-color: skyblue; } }
@container (min-width: 50px) { .width .box { background-color: hotpink; } }
@container (min-width: 60px) { .width .box { background-color: seagreen; } }
@container (min-height: 50px) { .height .box { background-color: coral; } }
@container (min-height: 60px) { .height .box { background-color: skyblue; } }
@container (min-height: 70px) { .height .box { background-color: hotpink; } }
@container (min-height: 80px) { .height .box { background-color: seagreen; } }
/* Should not apply to anything: */
@container (min-width: 9999px) { .width .box { background-color: red; } }
@container (min-height: 9999px) { .height .box { background-color: red; } }
</style>
<div class=width>
<div class=container style="width:29px"><div class=box></div></div>
<div class=container style="width:30px"><div class=box></div></div>
<div class=container style="width:35px"><div class=box></div></div>
<div class=container style="width:40px"><div class=box></div></div>
<div class=container style="width:50px"><div class=box></div></div>
<div class=container style="width:60px"><div class=box></div></div>
<div class=container style="width:70px"><div class=box></div></div>
</div>
<div class=height>
<div class=container style="height:49px"><div class=box></div></div>
<div class=container style="height:50px"><div class=box></div></div>
<div class=container style="height:55px"><div class=box></div></div>
<div class=container style="height:60px"><div class=box></div></div>
<div class=container style="height:70px"><div class=box></div></div>
<div class=container style="height:80px"><div class=box></div></div>
<div class=container style="height:90px"><div class=box></div></div>
</div>
\ No newline at end of file
third_party/blink/web_tests/wpt_internal/css/css-conditional/container-queries/at-container-002-ref.html 0 → 100644
View file @ eb99c8ab
<!DOCTYPE html>
<title>Tests @container queries affecting display type</title>
<style>
.container, .not_a_container {
width: auto;
height: 100px;
border: 1px solid black;
margin-bottom: 10px;
}
span {
border: 1px solid green;
margin: 2px;
}
</style>
<div style="width:150px">
<div class=container>
<main>
<div style="display:flex">
<span style="flex:1">Test1</span>
<span style="flex:1">Test2</span>
<span style="flex:1">Test3</span>
</div>
</main>
</div>
</div>
<div style="width:200px">
<div class=container>
<main>
<div>
<span style="display:block">Test1</span>
<span style="display:block">Test2</span>
<span style="display:block">Test3</span>
</div>
</main>
</div>
</div>
<div style="width:150px">
<div class=not_a_container>
<main>
<div>
<span>Test1</span>
<span>Test2</span>
<span>Test3</span>
</div>
</main>
</div>
</div>
\ No newline at end of file
third_party/blink/web_tests/wpt_internal/css/css-conditional/container-queries/at-container-002.html 0 → 100644
View file @ eb99c8ab
<!DOCTYPE html>
<link rel="match" href="at-container-002-ref.html">
<title>Tests @container queries affecting display type<</title>
<style>
.container, .not_a_container {
width: auto;
height: 100px;
border: 1px solid black;
margin-bottom: 10px;
}
.container {
contain: size layout;
}
span {
border: 1px solid green;
margin: 2px;
}
/* Note: 150px - 2px, since .container has a 1px border */
@container (min-width: 148px) {
div { display: flex; }
span { flex: 1; }
}
/* Note: 200px - 2px, since .container has a 1px border */
@container (min-width: 198px) {
div { display: revert; }
span { display: block; }
}
/* Should not apply: */
@container (min-width: 199px) {
* { color: red; background-color: red; }
}
</style>
<div style="width:150px">
<div class=container>
<main>
<div>
<span>Test1</span>
<span>Test2</span>
<span>Test3</span>
</div>
</main>
</div>
</div>
<div style="width:200px">
<div class=container>
<main>
<div>
<span>Test1</span>
<span>Test2</span>
<span>Test3</span>
</div>
</main>
</div>
</div>
<div style="width:150px">
<div class=not_a_container>
<main>
<div>
<span>Test1</span>
<span>Test2</span>
<span>Test3</span>
</div>
</main>
</div>
</div>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment