dom-get-container-for-node.html | Explore in Territory

<!DOCTYPE html>
<style>
#named-container {
  container-name: container-with-name;
  container-type: inline-size;
  width: 300px;
}

#block-size-container {
  container-type: size;
  width: 100px;
}

#unnamed-container {
  container-type: inline-size;
  width: 50px;
}

#dynamic-container {
  width: 50px;
}

@container container-with-name (min-width: 200px) {
  .item {
    margin-top: 10px;
  }
}

@container (max-width: 80px) {
  .item {
    margin-bottom: 5px;
  }
}
</style>
<body>
<div id="named-container">
  <div id="block-size-container">
    <div id="unnamed-container">
      <div id="dynamic-container">
        <div id="style-container">
          <div class="item"></div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>

chromium/third_party/blink/web_tests/inspector-protocol/dom/resources/dom-get-container-for-node.html