dom-get-querying-descendants-for-container.html

<!DOCTYPE html>
<style>
#container-unnamed {
  container-type: size;
  width: 100px;
  height: 100px;
}

#container-named {
  container-name: container-named;
  container-type: inline-size;
  width: 100px;
  height: 100px;
}

#container-unnamed-style {
  --foo: bar;
}

#container-named-style {
  container-name: container-named-style;
  --foo: bar;
}

@container ((min-width: 50px) and (min-height: 50px)) {
  .query-unnamed { margin-top: 5px; }
}

@container container-named (min-width: 50px) {
  .query-named { margin-top: 10px; }
}

@container (min-width: 50px) {
  .query-unnamed-inline { margin-top: 15px; }
}

@container container-named-other (min-height: 50px) {
  .query-named-other { margin-top: 20px; }
}

@container style(--foo: bar) {
  .query-unnamed-style { margin-top: 5px; }
}

@container container-named-style style(--foo: bar) {
  .query-named-style { margin-top: 10px; }
}
</style>
<body>
<div id="container-unnamed">
  <div class="query-unnamed desc-unnamed"></div>
  <div class="query-unnamed desc-unnamed" id="container-named">    
    <div class="query-named-other">
      <div class="query-unnamed desc-unnamed"></div>
      <div class="query-unnamed-inline desc-named"></div>
    </div>
    <div class="query-named desc-named"></div>
  </div>
  <div>
    <div class="query-unnamed desc-unnamed"></div>
  </div>
</div>

<div id="container-named-style">
  <div class="query-named-style desc-named-style"></div>
  <div id="container-unnamed-style">
    <div class="query-unnamed-style desc-unnamed-style"></div>
    <div class="query-unnamed-style desc-unnamed-style">
      <div class="query-named-style desc-named-style"></div>
      <div class="query-unnamed-style"></div>
    </div>
    <div class="query-named-style desc-named-style"></div>
  </div>
</div>
</body>
chromium/third_party/blink/web_tests/inspector-protocol/dom/resources/dom-get-querying-descendants-for-container.html
