Blitz - WPT: query-style-color.html

wpt / css / css-conditional / container-queries / query-style-color.html

/css/css-conditional/container-queries/query-style-color.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS container style query: color values</title>

<!-- based on @leaverou's codepen example in the csswg issue: -->
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/13157">

<link rel="match" href="query-style-color-ref.html">

<style>
@property --c {
  syntax: "<color>";
  initial-value: transparent;
  inherits: true;
}

body {
  font-family: system-ui, sans-serif;
}

.outer,
.outer-ne {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
  gap: .5em;
}

.outer div,
.outer-ne div {
  border-left: 1em solid var(--c);
  color: white;
}

.outer div::before {
  content: attr(style);
	display: block;
  padding: .5em;
  background: red;
}

@container style(--c: black) {
  .outer div::before {
    background: green;
  }
}

.outer-ne div::before {
  content: attr(style);
	display: block;
  padding: .5em;
  background: green;
}

@container style(--c: black) {
  .outer-ne div::before {
    background: red;
  }
}
</style>

<body>
  <p>All items should have a green background:</p>
  <div class="outer">
    <!-- All the colors here should "equal" black. -->
    <div style="--c: black"></div>
    <div style="--c: #000"></div>
    <div style="--c: #000f"></div>
    <div style="--c: rgb(0 0 0)"></div>
    <div style="--c: rgb(calc(5 - 5) 0 0)"></div>
    <div style="--c: rgb(clamp(-1, pi, 0) 0 0)"></div>
    <div style="--c: rgba(0, 0, 0, 1)"></div>
    <div style="--c: rgb(-10 0 0)"></div>
    <div style="--c: rgb(from black r g b)"></div>
    <div style="--c: hwb(0 0 100)"></div>
    <div style="--c: hsl(0 0 0)"></div>
    <div style="--c: color(srgb 0 0 0)"></div>
    <div style="--c: color(srgb-linear 0 0 0)"></div>
    <div style="--c: color(display-p3 0 0 0)"></div>
    <div style="--c: color(xyz-d65 0 0 0)"></div>
    <div style="--c: lab(0 0 0)"></div>
    <div style="--c: oklch(0 0 0)"></div>
    <div style="--c: oklab(from black l a b)"></div>
  </div>
  <hr>
  <div class="outer-ne">
    <!-- Although these render as black, they are not considered equal to it,
         so the container-style query to set a red background does NOT apply. -->
    <div style="--c: hwb(none 0 100)"></div>
    <div style="--c: hsl(none 0 0)"></div>
    <div style="--c: color(srgb none 0 0)"></div>
    <div style="--c: color(srgb-linear 0 none 0)"></div>
    <div style="--c: oklch(0 0 none)"></div>
    <div style="--c: oklab(0 none none)"></div>
  </div>
</body>

/css/css-conditional/container-queries/query-style-color-ref.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS container style query reference</title>

<style>
@property --c {
  syntax: "<color>";
  initial-value: transparent;
  inherits: true;
}

body {
  font-family: system-ui, sans-serif;
}

.outer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
  gap: .5em;
}

.outer div {
  border-left: 1em solid black;
  color: white;
}

.outer div::before {
  content: attr(style);
	display: block;
  padding: .5em;
  background: green;
}
</style>

<body>
  <p>All items should have a green background:</p>
  <div class="outer">
    <div style="--c: black"></div>
    <div style="--c: #000"></div>
    <div style="--c: #000f"></div>
    <div style="--c: rgb(0 0 0)"></div>
    <div style="--c: rgb(calc(5 - 5) 0 0)"></div>
    <div style="--c: rgb(clamp(-1, pi, 0) 0 0)"></div>
    <div style="--c: rgba(0, 0, 0, 1)"></div>
    <div style="--c: rgb(-10 0 0)"></div>
    <div style="--c: rgb(from black r g b)"></div>
    <div style="--c: hwb(0 0 100)"></div>
    <div style="--c: hsl(0 0 0)"></div>
    <div style="--c: color(srgb 0 0 0)"></div>
    <div style="--c: color(srgb-linear 0 0 0)"></div>
    <div style="--c: color(display-p3 0 0 0)"></div>
    <div style="--c: color(xyz-d65 0 0 0)"></div>
    <div style="--c: lab(0 0 0)"></div>
    <div style="--c: oklch(0 0 0)"></div>
    <div style="--c: oklab(from black l a b)"></div>
  </div>
  <hr>
  <div class="outer">
    <div style="--c: hwb(none 0 100)"></div>
    <div style="--c: hsl(none 0 0)"></div>
    <div style="--c: color(srgb none 0 0)"></div>
    <div style="--c: color(srgb-linear 0 none 0)"></div>
    <div style="--c: oklch(0 0 none)"></div>
    <div style="--c: oklab(0 none none)"></div>
  </div>
</body>