tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

container-units-invalidation.html (3329B)

      1 <!doctype html>
      2 <title>Container Relative Units: Invalidation</title>
      3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-lengths">
      4 <script src="/resources/testharness.js"></script>
      5 <script src="/resources/testharnessreport.js"></script>
      6 <script src="support/cq-testcommon.js"></script>
      7 <style>
      8  #inline { container-type: inline-size; }
      9  #size, #outer { container-type: size; }
     10  .h600 { height: 600px; }
     11  .w500 { width: 500px; }
     12  .h400 { height: 400px; }
     13  .w300 { width: 300px; }
     14  .child {
     15    padding-left: 10cqi;
     16    padding-right: 10cqb;
     17  }
     18 </style>
     19 <div id=ref></div>
     20 <div id=outer class="h600">
     21  <div id=size class="w500 h400">
     22    <div id=inline class="w300">
     23      <div id=child class="child">Test</div>
     24      <div><div id=deeper class="child">Test</div></div>
     25    </div>
     26  </div>
     27 </div>
     28 <script>
     29  setup(() => assert_implements_size_container_queries());
     30 
     31  function assert_cqi_equals(element, expected) {
     32    assert_equals(getComputedStyle(element).paddingLeft, expected);
     33  }
     34 
     35  function assert_cqb_equals(element, expected) {
     36    assert_equals(getComputedStyle(element).paddingRight, expected);
     37  }
     38 
     39  test(function(t) {
     40    assert_cqi_equals(child, '30px');
     41    assert_cqi_equals(deeper, '30px');
     42 
     43    try {
     44      inline.style.containerType = 'normal';
     45      assert_cqi_equals(child, '50px');
     46      assert_cqi_equals(deeper, '50px');
     47    } finally {
     48      inline.style = '';
     49    }
     50 
     51    assert_cqi_equals(child, '30px');
     52    assert_cqi_equals(deeper, '30px');
     53  }, `cqi respond when selected container changes type (inline-size -> normal)`);
     54 
     55  test(function() {
     56    assert_cqb_equals(child, '40px');
     57    assert_cqb_equals(deeper, '40px');
     58 
     59    try {
     60      size.style.containerType = 'normal';
     61      assert_cqb_equals(child, '60px');
     62      assert_cqb_equals(deeper, '60px');
     63    } finally {
     64      size.style = '';
     65    }
     66 
     67    assert_cqb_equals(child, '40px');
     68    assert_cqb_equals(deeper, '40px');
     69  }, `cqb respond when selected container changes type (size -> normal)`);
     70 
     71  test(function() {
     72    assert_cqb_equals(child, '40px');
     73    assert_cqb_equals(deeper, '40px');
     74 
     75    try {
     76      inline.style.containerType = 'size';
     77      inline.style.height = '200px';
     78      assert_cqb_equals(child, '20px');
     79      assert_cqb_equals(deeper, '20px');
     80    } finally {
     81      inline.style = '';
     82    }
     83 
     84    assert_cqb_equals(child, '40px');
     85    assert_cqb_equals(deeper, '40px');
     86  }, `cqb respond when intermediate container changes type (inline-size -> size)`);
     87 
     88  test(function() {
     89    assert_cqi_equals(child, '30px');
     90    assert_cqi_equals(deeper, '30px');
     91 
     92    try {
     93      inline.style.width = '50px';
     94      assert_cqi_equals(child, '5px');
     95      assert_cqi_equals(deeper, '5px');
     96    } finally {
     97      inline.style = '';
     98    }
     99 
    100    assert_cqi_equals(child, '30px');
    101    assert_cqi_equals(deeper, '30px');
    102  }, 'cqi respond when selected container changes inline-size');
    103 
    104  test(function() {
    105    assert_cqb_equals(child, '40px');
    106    assert_cqb_equals(deeper, '40px');
    107 
    108    try {
    109      size.style.height = '50px';
    110      assert_cqb_equals(child, '5px');
    111      assert_cqb_equals(deeper, '5px');
    112    } finally {
    113      size.style = '';
    114    }
    115 
    116    assert_cqb_equals(child, '40px');
    117    assert_cqb_equals(deeper, '40px');
    118  }, 'cqb respond when selected container changes block-size');
    119 </script>