css/css-conditional/container-queries-basic.html

<!DOCTYPE html>
<title>CSS @container queries basic support</title>
<meta charset="utf-8">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-rule">
<!-- Regression test for https://github.com/jsdom/jsdom/issues/3597 -->

<style>
  .container {
    container-type: inline-size;
    width: 800px;
  }

  @container (min-width: 700px) {
    .card h2 {
      font-size: 2em;
      color: blue;
    }
  }

  h2 {
    font-size: 1em;
    color: black;
  }
</style>

<div class="container">
  <div class="card">
    <h2 id="testHeader">Test header</h2>
  </div>
</div>

<script>
"use strict";

test(() => {
  const h2 = document.getElementById("testHeader");
  const styles = window.getComputedStyle(h2);

  assert_equals(styles.fontSize, "32px");
  assert_equals(styles.color, "rgb(0, 0, 255)");
});
</script>