container-units-in-at-container.html

<!doctype html>
<title>Container Relative Units: in @container prelude</title>
<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-lengths">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/cq-testcommon.js"></script>
<style>
  .size { container-type: size; }
  .inline { container-type: inline-size; }
  .ancestor {
     container-type: size;
     width: 64px;
     height: 160px;
  }
  .parent {
     container-type: inline-size;
     width: 32px;
     height: 77px;
   }
  .container {
    container-type: size;
    width: 16px;
    height: 16px;
  }

  /* Unit should resolve against .parent width. */
  @container ((width = 16px) and (width = 50cqw)) { #child1 { --cqw:true;  } }

  /* Unit should resolve against .ancestor height. */
  @container ((width = 16px) and (width = 10cqh)) { #child1 { --cqh:true;  } }

  /* Unit should resolve against .parent width. */
  @container ((width = 16px) and (width = 50cqi)) { #child1 { --cqi:true;  } }

  /* Unit should resolve against .ancestor height. */
  @container ((width = 16px) and (width = 10cqb)) { #child1 { --cqb:true;  } }

  /* Unit should resolve against biggest of w/h. */
  @container ((width = 16px) and (width = 10cqmax)) { #child1 { --cqmax:true;  } }

  /* Unit should resolve against smallest of w/h. */
  @container ((width = 16px) and (width = 50cqmin)) { #child1 { --cqmin:true;  } }

  /* Flipped writing mode: */

  /* Non-logical units are the same as above */
  @container ((width = 16px) and (width = 50cqw)) { #child2 { --cqw:true;  } }
  @container ((width = 16px) and (width = 10cqh)) { #child2 { --cqh:true;  } }
  @container ((width = 16px) and (width = 10cqmax)) { #child2 { --cqmax:true;  } }
  @container ((width = 16px) and (width = 50cqmin)) { #child2 { --cqmin:true;  } }

  /* Unit should resolve against .ancestor height. */
  @container ((width = 16px) and (width = 50cqb)) { #child2 { --cqi:true;  } }

  /* Unit should resolve against .parent width. */
  @container ((width = 16px) and (width = 10cqi)) { #child2 { --cqb:true;  } }
</style>

<div class=ancestor>
  <div class=parent>
    <div class=container>
      <div id=child1>Test1</div>
    </div>
  </div>
</div>

<div class=ancestor>
  <div class=parent>
    <div class=container style="writing-mode:vertical-rl;">
      <div id=child2>Test1</div>
    </div>
  </div>
</div>

<script>
  setup(() => assert_implements_container_queries());

  let units = [
    'cqw',
    'cqh',
    'cqi',
    'cqb',
    'cqmin',
    'cqmax',
  ];

  for (let unit of units) {
    test(() => {
      assert_equals(getComputedStyle(child1).getPropertyValue(`--${unit}`), 'true');
    }, `${unit} unit resolves against appropriate container`);
  }

  // Ensure that the writing mode of the subject element is not relevant for
  // container-relative units in the @container prelude.
  for (let unit of units) {
    test((t) => {
      t.add_cleanup(() => {
        child1.style = '';
      });
      child1.style.writingMode = 'vertical-rl';
      assert_equals(getComputedStyle(child1).getPropertyValue(`--${unit}`), 'true');
    }, `${unit} unit resolves against appropriate container (vertical writing-mode on subject)`);
  }

  for (let unit of units) {
    test(() => {
      assert_equals(getComputedStyle(child2).getPropertyValue(`--${unit}`), 'true');
    }, `${unit} unit resolves against appropriate container (vertical writing-mode on container)`);
  }

</script>
chromium/third_party/blink/web_tests/external/wpt/css/css-conditional/container-queries/container-units-in-at-container.html
