css/css-conditional/container-queries/nested-query-containers.html

<!DOCTYPE html>
<title>Nested query containers affecting each other</title>
<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#size-container">
<link rel="help" href="https://drafts.csswg.org/css-contain-2/#containment-size">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/cq-testcommon.js"></script>
<style>
  body > section {
    contain: strict;
    width: 500px;
  }
</style>
<body>
<script>
promise_setup(() => {
  assert_implements_size_container_queries();
  return new Promise(resolve => {
    addEventListener("load", () => {
      requestAnimationFrame(() => {
        requestAnimationFrame(() => {
          document.body.className = "run";
          resolve();
        });
      });
    }, {once: true});
  });
});

function booleanTuples(n) {
  const tuple = new Array(n);
  function* recursion(i) {
    if (i == n) {
      yield tuple.slice();
      return;
    }
    tuple[i] = false;
    yield* recursion(i + 1);
    tuple[i] = true;
    yield* recursion(i + 1);
  }
  return recursion(0);
}

// The following display values evaluate container queries to unknown.
const testCases = [
  {
    display: "inline",
    expected: {
      width: depth => depth % 2 ? 0 : 500 - depth,
      height: depth => 0,
    },
  },
  {
    display: "contents",
    expected: {
      width: depth => depth % 2 ? 0 : 500 - depth,
      height: depth => 0,
    },
  },
  {
    display: "table-cell",
    expected: {
      width: depth => depth % 2 ? 2 : 0,
      height: depth => depth % 2 ? 2 : 0,
    },
  },
  {
    display: "table",
    expected: {
      width: depth => depth % 2 ? 4 : 0,
      height: depth => depth % 2 ? 4 : 0,
    },
  },
];

let testNum = 1;
for (let testCase of testCases) {
  for (let tuple of booleanTuples(3)) {
    const section = document.createElement("section");
    const id = "test" + testNum;
    section.id = id;
    const style = document.createElement("style");
    style.textContent = `
      :where(body${tuple[0] ? ".run" : ""}) > #${id} {
        container-type: size;
        container-name: name;
      }
      :where(body${tuple[1] ? ".run" : ""}) > #${id} div {
        container-type: size;
        container-name: name;
        border: solid;
        border-width: 1px;
      }
      @container name (width >= 0) {
        :where(body${tuple[2] ? ".run" : ""}) > #${id} div {
          display: ${testCase.display};
          border-style: dotted;
        }
      }
    `;
    section.appendChild(style);
    section.insertAdjacentHTML(
      "beforeend",
      "<div><div><div><div><div><div></div></div></div></div></div></div>"
    );
    document.body.appendChild(section);
    promise_test(async function() {
      let div = section.querySelector("div");
      let depth = 1;
      while (div) {
        const cs = getComputedStyle(div);
        assert_equals(cs.display, depth % 2 ? testCase.display : "block");
        assert_equals(cs.borderStyle, depth % 2 ? "dotted" : "solid", "borderStyle");
        assert_equals(div.clientWidth, testCase.expected.width(depth), "clientWidth");
        assert_equals(div.clientHeight, testCase.expected.height(depth), "clientHeight");
        div = div.firstElementChild;
        depth += 1;
      }
    }, id + " - " + testCase.display + " - 0b" + tuple.map(Number).join(""));
    testNum += 1;
  }
}
</script>
</body>