query-evaluation-style.html

<!doctype html>

<title>Evaluation of style queries</title>

<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-rule">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="support/cq-testcommon.js"></script>

<style>

  @property --length {

    syntax: "<length>";

    inherits: false;

    initial-value: 3px;

  @property --length-inherited {

    syntax: "<length>";

    inherits: true;

    initial-value: 3px;

  @property --percentage {

    syntax: "<percentage>";

    inherits: true;

    initial-value: 30%;

  @property --number {

    syntax: "<number>";

    inherits: true;

    initial-value: 3;

  @property --angle {

    syntax: "<angle>";

    inherits: true;

    initial-value: 3deg;

  @property --time {

    syntax: "<time>";

    inherits: true;

    initial-value: 3s;

  @property --resolution {

    syntax: "<resolution>";

    inherits: true;

    initial-value: 3dpi;

  #container {

    --applied: false;

    --foo: bar;

</style>

<div id=container>

  <div id=inner data-foo="3px"></div>

</div>

<script>

  setup(() => assert_implements_size_container_queries());

  function test_query(query, expected) {

    test((t) => {

      let style = document.createElement('style');

      t.add_cleanup(() => { style.remove(); });

      style.innerText = `@container ${query} { #inner { --applied:true; } }`;

      let cs = getComputedStyle(inner);

      assert_equals(cs.getPropertyValue('--applied'), 'false');

      document.head.append(style);

      assert_equals(cs.getPropertyValue('--applied'), expected.toString());

    }, query);

};

  function test_query_with_custom_properties(query, customPropertiesData, expected) {

    customPropertiesData.forEach(entry => {

      const [customPropertyName, customPropertyValue] = entry;

      document.getElementById("container").style.setProperty(customPropertyName, customPropertyValue);

});

    test_query(query, expected);

    customPropertiesData.forEach(entry => {

      const [customPropertyName, customPropertyValue] = entry;

      document.getElementById("container").style.removeProperty(customPropertyName);

});

  // Note that the following assumes that elements are style containers by

  // default [1], and that:

//

  // - style(--foo: bar) is a query that returns 'true', and

  // - style(--baz: qux) is a query that returns 'false'.

//

  // [1] https://github.com/w3c/csswg-drafts/issues/7066

  // Nesting in <style-query>:

  test_query('style((--foo: bar))', true);

  test_query('style((--baz: qux))', false);

  test_query('style((unknown))', false);

  test_query('unknown((--foo: bar))', false);

  // "not" in <style-query>:

  test_query('style(not (--foo: bar))', false);

  test_query('style(not (--baz: qux))', true);

  test_query('style(not (unknown))', false);

  // "and" in <style-query>:

  test_query('style((--foo: bar) and (--foo: bar))', true);

  test_query('style((--foo: bar) and (--foo: bar) and (--foo: bar))', true);

  test_query('style((--baz: qux) and (--baz: qux))', false);

  test_query('style((--baz: qux) and (--foo: bar) and (--foo: bar))', false);

  test_query('style((--foo: bar) and (--baz: qux) and (--foo: bar))', false);

  test_query('style((--foo: bar) and (--foo: bar) and (--baz: qux))', false);

  test_query('style((unknown) and (--foo: bar) and (--foo: bar))', false);

  test_query('style((--foo: bar) and (unknown) and (--foo: bar))', false);

  test_query('style((--foo: bar) and (--foo: bar) and (unknown))', false);

  // "or" in <style-query>:

  test_query('style((--foo: bar) or (--foo: bar))', true);

  test_query('style((--foo: bar) or (--foo: bar) or (--foo: bar))', true);

  test_query('style((--baz: qux) or (--baz: qux))', false);

  test_query('style((--baz: qux) or (--foo: bar) or (--foo: bar))', true);

  test_query('style((--foo: bar) or (--baz: qux) or (--foo: bar))', true);

  test_query('style((--foo: bar) or (--foo: bar) or (--baz: qux))', true);

  test_query('style((unknown) or (--foo: bar) or (--foo: bar))', false);

  test_query('style((--foo: bar) or (unknown) or (--foo: bar))', false);

  test_query('style((--foo: bar) or (--foo: bar) or (unknown))', false);

  test_query('style((unknown) or (--baz: qux) or (--foo: bar))', false);

  // Combinations, <style-query>:

  test_query('style(not ((--foo: bar) and (--foo: bar)))', false);

  test_query('style(not ((--foo: bar) and (--baz: qux)))', true);

  test_query('style((--foo: bar) and (not ((--baz: qux) or (--foo: bar))))', false);

  test_query('style((--baz: qux) or (not ((--baz: qux) and (--foo: bar))))', true);

  test_query('style((--baz: qux) or ((--baz: qux) and (--foo: bar)))', false);

  // Range style() querirs:

  test_query('style(5 >= calc(3 + 1))', true);

  test_query('style(1px <= 1em)', true);

  test_query('style(5 >= 3)', true);

  test_query('style(3px >= 3px)', true);

  test_query('style(3px > 3px)', false);

  test_query('style(1em > 1px)', true);

  test_query('style(1em <= 1px)', false);

  test_query('style(3turn > 3deg)', true);

  test_query('style(3% >= 3%)', true);

  test_query('style(3s > 3ms)', true);

  test_query('style(3dppx > 96dpi)', true);

  test_query_with_custom_properties('style(3 <= --x)',

                                  [['--x', '3']],

                                  true);

  test_query_with_custom_properties('style(--x >= 3)',

                                  [['--x', '3']],

                                  true);

  test_query_with_custom_properties('style(--x <= --x)',

                                  [['--x', '3']],

                                  true);

  test_query_with_custom_properties('style(--x >= --y)',

                                  [['--x', '3'], ['--y', '3']],

                                  true);

  test_query_with_custom_properties('style(--length > 3px)',

                                  [['--length', '11px']],

                                  true);

  test_query_with_custom_properties('style(--x > 3px)',

                                  [['--x', '11px']],

                                  true);

  test_query_with_custom_properties('style(--number >= 3)',

                                  [['--number', '3']],

                                  true);

  test_query_with_custom_properties('style(--x >= 1)',

                                  [['--x', '1']],

                                  true);

  test_query_with_custom_properties('style(--percentage > 3%)',

                                  [['--percentage', '5%']],

                                  true);

  test_query_with_custom_properties('style(--x > 3%)',

                                  [['--x', '5%']],

                                  true);

  test_query_with_custom_properties('style(--angle < 1turn)',

                                  [['--angle', '1deg']],

                                  true);

  test_query_with_custom_properties('style(--x < 1turn)',

                                  [['--x', '1deg']],

                                  true);

  test_query_with_custom_properties('style(--time <= 1000ms)',

                                  [['--time', '1s']],

                                  true);

  test_query_with_custom_properties('style(--x <= 1000ms)',

                                  [['--x', '1s']],

                                  true);

  test_query_with_custom_properties('style(3dppx > --resolution)',

                                  [['--resolution', '96dpi']],

                                  true);

  test_query_with_custom_properties('style(3dppx > --x)',

                                  [['--x', '96dpi']],

                                  true);

  test_query_with_custom_properties('style(--x >= calc(3px + 3px))',

                                  [['--x', '7px']],

                                  true);

  test_query_with_custom_properties('style(--x <= var(--x))',

                                  [['--x', '3']],

                                  true);

  test_query_with_custom_properties('style(calc(var(--x) + 1) >= var(--y))',

                                  [['--x', '5'], ['--y', '3']],

                                  true);

  test_query_with_custom_properties('style(var(--x) >= --x)',

                                  [['--x', '3']],

                                  true);

  test_query_with_custom_properties('style(--x <= 10em)',

                                  [['--x', '10px']],

                                  true);

  test_query_with_custom_properties('style(--x + 1 >= --y)',

                                  [['--x', '5'], ['--y', '3']],

                                  false);

  test_query_with_custom_properties('style(--x >= --y + 1)',

                                  [['--x', '5'], ['--y', '3']],

                                  false);

  test_query_with_custom_properties('style(calc(--x + 1) >= --y)',

                                  [['--x', '5'], ['--y', '3']],

                                  false);

  test_query_with_custom_properties('style(--x >= calc(--y + 1))',

                                  [['--x', '5'], ['--y', '3']],

                                  false);

  test_query_with_custom_properties('style(3px > 3)',

[],

                                  false);

  test_query_with_custom_properties('style(3em > 3deg)',

[],

                                  false);

  test_query_with_custom_properties('style(1px >= 1%) or style(1px <= 1%)',

[],

                                  false);

  test_query_with_custom_properties('style(--length > 3)',

                                  [['--length', '11em']],

                                  false);

  test_query_with_custom_properties('style(--number > 3px)',

                                  [['--number', '11']],

                                  false);

  test_query_with_custom_properties('style(--x >= 3ms)',

                                  [['--x', '3px']],

                                  false);

  test_query_with_custom_properties(`style(--length <= 30px)`,

                                  [['--length', 'attr(data-foo type(<length>))']],

                                  true);

  test_query('style(10px <= 10px < 11px)', true);

  test_query_with_custom_properties(

    'style(3 < --x <= 5)',

    [['--x', '5']],

    true);

  test_query_with_custom_properties(

    'style(--x >= --y > --z)',

    [['--x', '3'], ['--y', '3'], ['--z', '1']],

    true);

</script>

Source code

Revision control

Copy as Markdown

Other Tools

Test Info: Warnings