tor-browser

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

custom-property-style-query-change.html (2676B)

      1 <!doctype html>
      2 <title>CSS Container Queries Test: custom property style query changes</title>
      3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#style-container">
      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  #container { container-name: my-container; }
      9  #child, #grandchild { color: red; }
     10  @container style(--target: child) {
     11    #child { color: green; }
     12  }
     13  @container my-container style(--target: grandchild) {
     14    #grandchild { color: green; }
     15  }
     16 </style>
     17 <div id="container">
     18  <div id="child"></div>
     19  <div>
     20    <div id="grandchild"></div>
     21  </div>
     22 </div>
     23 <script>
     24  setup(() => assert_implements_style_container_queries());
     25 
     26  const green = "rgb(0, 128, 0)";
     27  const red = "rgb(255, 0, 0)";
     28 
     29  test(() => {
     30    assert_equals(getComputedStyle(child).color, red);
     31    assert_equals(getComputedStyle(grandchild).color, red);
     32  }, "Initially no queries match.");
     33 
     34  test(() => {
     35    container.style.setProperty("--target", "child");
     36    assert_equals(getComputedStyle(child).color, green);
     37    assert_equals(getComputedStyle(grandchild).color, red);
     38  }, "Target child");
     39 
     40  test(() => {
     41    container.style.setProperty("--target", "grandchild");
     42    assert_equals(getComputedStyle(child).color, red);
     43    assert_equals(getComputedStyle(grandchild).color, green);
     44  }, "Target grandchild");
     45 </script>
     46 
     47 <style>
     48  @property --length {
     49    syntax: "<length>";
     50    inherits: false;
     51    initial-value: 0px;
     52  }
     53 
     54  #reg_container {
     55    container-name: my-reg-container;
     56    font-size: 50px;
     57  }
     58  #reg_child, #reg_grandchild { color: red; }
     59  @container style(--length: 100px) {
     60    #reg_child { color: green; }
     61  }
     62  @container my-reg-container style(--length: 200px) {
     63    #reg_grandchild { color: green; }
     64  }
     65 </style>
     66 <div id="reg_container">
     67  <div id="reg_child"></div>
     68  <div>
     69    <div id="reg_grandchild"></div>
     70  </div>
     71 </div>
     72 <script>
     73  test(() => {
     74    assert_equals(getComputedStyle(reg_child).color, red);
     75    assert_equals(getComputedStyle(reg_grandchild).color, red);
     76  }, "Initially no queries for registered property match.");
     77 
     78  test(() => {
     79    reg_container.style.setProperty("--length", "2em");
     80    assert_equals(getComputedStyle(reg_child).color, green);
     81    assert_equals(getComputedStyle(reg_grandchild).color, red);
     82  }, "Registered property query child");
     83 
     84  test(() => {
     85    reg_container.style.setProperty("--length", "200px");
     86    assert_equals(getComputedStyle(reg_child).color, red);
     87    assert_equals(getComputedStyle(reg_grandchild).color, green);
     88  }, "Registered property query grandchild");
     89 </script>