Blitz - WPT: multiple-conditions-001.html

wpt / css / css-conditional / container-queries / multiple-conditions-001.html

/css/css-conditional/container-queries/multiple-conditions-001.html

<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
   - https://creativecommons.org/publicdomain/zero/1.0/ -->
<title>CSS Container Queries With Multiple Conditions</title>
<link rel="author" title="Emily McDonough" href="mailto:emcdonough@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-queries">
<link rel="match" href="multiple-conditions-001-ref.html">
<style>
.container{
    container-type: inline-size;
}
.container > div{
    border: thick double black;
    width: 100%;
    height: 20px;
    margin: 1px;
}
@container (width < 75px), (width > 150px) {
    div {
        background-color: cyan;
    }
}
@container (75px <= width <= 150px), (width = 200px) {
    div {
        background-color: pink;
    }
}
</style>
<div class="container" style="width: 50px"><div>A</div></div>
<div class="container" style="width: 100px"><div>B</div></div>
<div class="container" style="width: 175px"><div>C</div></div>
<div class="container" style="width: 200px"><div>D</div></div>

/css/css-conditional/container-queries/multiple-conditions-001-ref.html

<!DOCTYPE html>
<!-- Any copyright is dedicated to the Public Domain.
   - https://creativecommons.org/publicdomain/zero/1.0/ -->
<title>CSS Container Queries With Multiple Conditions - Reference</title>
<link rel="author" title="Emily McDonough" href="mailto:emcdonough@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-queries">
<style>
.container{
    container-type: inline-size;
}
.container > div{
    border: thick double black;
    width: 100%;
    height: 20px;
    margin: 1px;
}
</style>
<div class="container" style="width: 50px"><div style="background-color: cyan">A</div></div>
<div class="container" style="width: 100px"><div style="background-color: pink">B</div></div>
<div class="container" style="width: 175px"><div style="background-color: cyan">C</div></div>
<div class="container" style="width: 200px"><div style="background-color: pink">D</div></div>