BigContainerQuery.html | Explore in Territory

<!DOCTYPE html>
<script src="../resources/runner.js"></script>
<style>
  #container {
    width: 200px;
  }
  .inline_size {
    container-type: inline-size;
  }
</style>
<div id=container>
  <div id=target></div>
</div>
<style id=style></style>
<script>

// Makes a big container query as follows:
//
// @container ((width = 1000px) or (width = 1001px) or ... (width = (1000+n)px) or (width = 200px)) {
//   #target {}
//   #target {}
//   ... n times in total ...
//   #target {}
// }
function makeQuery(n) {
  let expressions = [];
  let rules = [];
  for (let i = 0; i < n; i++) {
    expressions.push(`(width = ${1000+i}px)`);
    rules.push('#target { }');
  }
  expressions.push(`(width = 200px)`);
  return `@container (${expressions.join(' or ')}) { ${rules.join('\n') } }`;
}

function setup() {
  style.textContent = makeQuery(1000);
}

setup();

PerfTestRunner.measureTime({
    description: 'Big container query with many inner rules',
    run: () => {
      target.offsetTop;
      container.classList.toggle('inline_size');
      target.offsetTop;
      container.classList.toggle('inline_size');
    }
});

</script>
chromium/third_party/blink/perf_tests/css/BigContainerQuery.html
