css/css-values/if-cycle.html

<!DOCTYPE html>
<title>CSS Values and Units Test: CSS if() function cycles</title>
<meta name="assert" content="Test cycles in if() function">
<link rel="help" href="https://drafts.csswg.org/css-values-5/#if-notation">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

<div id="attr"></div>
<div id="expected"></div>

<body>
  <div id="if"></div>
</body>

<script>
  function set_custom_properties(customPropertiesData) {
    customPropertiesData.forEach(entry => {
      const [customPropertyName, customPropertyValue] = entry;
      document.getElementById("if").style.setProperty(customPropertyName, customPropertyValue);
    });
  }

  function test_if(ifValue, customPropertiesData, expectedValue) {
    set_custom_properties(customPropertiesData);
    var elem = document.getElementById("if");
    var property = "--prop";
    elem.style.setProperty(property, ifValue);

    test(() => {
      assert_equals(window.getComputedStyle(elem).getPropertyValue(property),
      expectedValue,
        '"' + ifValue + '" should be substituted to "' + expectedValue + '".');
    });

    elem.style.setProperty(property, '');
  }

  var ifElem = document.getElementById("if");

  // var() cycle in declaration value
  //
  // Note: 'test_if()' places the 'if()' in a custom property '--prop'.
  test_if(`if(style(--x: 3): var(--prop); else: value)`,
        [['--x', '3']],
        '');
  test_if(`if(style(--x: 3): value; else: var(--prop))`,
        [['--x', '0']],
        '');

  // attr() cycle in declaration value
  ifElem.setAttribute('data-foo', 'var(--prop)');
  test_if(`if(style(--x: 3): attr(data-foo type(*)); else: value)`,
        [['--x', '3']],
        '');

  ifElem.setAttribute('data-foo', 'var(--prop)');
  test_if(`if(style(--x: 3): value; else: attr(data-foo type(*)))`,
        [['--x', '0']],
        '');

  // Cycle in the condition
  //
  // Note: 'test_if()' places the 'if()' in a custom property '--prop'.
  test_if(`if(style(--prop): var(--prop); else: value)`,
        [],
        '');
  test_if(`if(style(--x): var(--prop); else: value)`,
        [['--x', 'var(--prop)']],
        '');
  test_if(`if(style(--prop: 3): true_value;
          else: false_value)`,
        [['--prop', '3']],
        '');
  test_if(`if(style(--x: 3): true_value;
          else: false_value)`,
        [['--x', 'var(--prop)']],
        '');
  test_if(`if(style(not (--prop)): true_value;
          else: false_value)`,
        [],
        '');
  test_if(`if(style(not (--x: var(--y))): true_value;
          else: false_value)`,
        [['--x', '11'], ['--y', 'var(--prop)']],
        '');
  test_if(`if(style((--prop) or (--y)): true_value;
          else: false_value)`,
        [['--y', '3']],
        '');
  test_if(`if(style((--prop) and (--y)): true_value;
          else: false_value)`,
        [['--y', '3']],
        '');
  test_if(`if(style(--x: var(--prop)): true_value;
          else: false_value)`,
        [['--x', '3']],
        '');
  test_if(`if(style(--x: var(--y)): true_value;
          else: false_value)`,
        [['--x', '3'], ['--y', 'var(--prop)']],
        '');

  ifElem.setAttribute('data-foo', 'var(--prop)');
  test_if(`if(style(--x: 3): true_value;
          else: false_value)`,
        [['--x', 'attr(data-foo type(*))']],
        '');

  ifElem.setAttribute('data-foo', 'var(--prop)');
  test_if(`if(style(--x: 3): true_value;
          else: false_value)`,
        [['--x', 'var(--y)'], ['--y', 'attr(data-foo type(*))']],
        '');

  ifElem.setAttribute('data-foo', 'var(--prop)');
  test_if(`if(style(--x: attr(data-foo type(*))): true_value;
          else: false_value)`,
        [['--x', '30px']],
        '');

  // var() cycle in condition's custom property
  test_if(`if(style(--y): true_value;
          else: false_value)`,
        [['--y', 'var(--x)'], ['--x', 'var(--y)']],
        'false_value');
  test_if(`if(style(not (--x: var(--y))): true_value;
          else: false_value)`,
        [['--x', '11'], ['--y', 'var(--y)']],
        'true_value');
  test_if(`if(style(not (--x: var(--y))): true_value;
          else: false_value)`,
        [['--x', '11'], ['--y', 'var(--y)']],
        'true_value');
  test_if(`if(style((--x) or (--y)): true_value;
          else: false_value)`,
        [['--x', 'var(--x)'], ['--y', '3']],
        'true_value');
  test_if(`if(style((--x) and (--y)): true_value;
          else: false_value)`,
        [['--x', 'var(--x)'], ['--y', '3']],
        'false_value');
  test_if(`if(style((not (--z)) or (--y)): true_value;
          else: false_value)`,
        [['--z', 'var(--x)'], ['--x', 'var(--z)'], ['--y', '3']],
        'true_value');
  test_if(`if(style((not (--z)) and (--y)): true_value;
          else: false_value)`,
        [['--z', 'var(--x)'], ['--x', 'var(--z)'], ['--y', '3']],
        'true_value');

  // cycle with var() and attr() in condition's custom property
  ifElem.setAttribute('data-foo', 'var(--x)');
  test_if(`if(style(--x: 3): true_value;
          else: false_value)`,
        [['--x', 'attr(data-foo type(*))']],
        'false_value');

  ifElem.setAttribute('data-foo', 'var(--y)');
  test_if(`if(style(--x: 3): true_value;
          else: false_value)`,
        [['--x', 'var(--y)'], ['--y', 'attr(data-foo type(*))']],
        'false_value');

  // var() cycle in condition specified value
  test_if(`if(style(--x: var(--y)): true_value;
          else: false_value)`,
        [['--x', '3'], ['--y', 'var(--z)'], ['--z', 'var(--y)']],
        'false_value');
  test_if(`if(style(--x: var(--y)): true_value;
          else: false_value)`,
        [['--x', '3'], ['--y', 'var(--y)']],
        'false_value');

  // attr() cycle in condition specified value
  ifElem.setAttribute('data-foo', 'attr(data-foo type(*))');
  test_if(`if(style(--x: attr(data-foo type(*))): true_value;
          else: false_value)`,
        [['--x', '30px']],
        'false_value');

  ifElem.setAttribute('data-foo', '30px');
  test_if(`if(style(--x: attr(data-foo, var(--y))): true_value;
          else: false_value)`,
        [['--x', '"30px"'], ['--y', 'var(--y)']],
        'true_value');

  // self cycle in unused condition
  test_if(`if(style(--x: 0): value1; style(--prop): value2)`,
        [['--x', '0']],
        'value1');
  test_if(`if(style(--x: 3): value1;
          style(--y: 3): value2;
          else: value3)`,
        [['--x', '3'], ['--y', 'var(--prop)']],
        'value1');

  // cycle in unused condition
  test_if(`if(style(--x: 0): value1; style(--y): value2)`,
        [['--x', '0'], ['--y', 'var(--y)']],
        'value1');
  test_if(`if(style(--x: 3): value1;
          style(--y: 3): value2;
          else: value3)`,
        [['--x', '3'], ['--y', 'var(--y)']],
        'value1');

  // var() cycle in unused declaration value
  test_if(`if(style(--x: 0): var(--prop); else: value)`,
        [['--x', '3']],
        'value');
  test_if(`if(style(--x: 0): value; else: var(--prop))`,
        [['--x', '0']],
        'value');
  test_if(`if(style(--x: 3): value1;
          style(--y: 3): var(--prop);
          else: value3)`,
        [['--x', '3'], ['--y', '0']],
        'value1');
  test_if(`if(style(--x: 3): var(--prop);
          style(--y: 3): var(--prop);
          else: value3)`,
        [['--x', '0'], ['--y', '0']],
        'value3');

  // no cycle
  test_if(`if(style(--x: 3): var(--x);
          else: value)`,
        [['--x', '3']],
        '3');
  test_if(`if(style(--x: var(--y)): var(--y);
          else: value)`,
        [['--x', '3'], ['--y', '3']],
        '3');
  test_if(`if(style(--x: var(--x)): true_value;
          else: false_value)`,
        [['--x', '3']],
        'true_value');
  test_if(`if(style(--non-existent: var(--non-existent)): true_value;
          else: false_value)`,
        [],
        'false_value');
  test_if(`if(style(--x: 3): true_value;
          else: var(--x))`,
        [['--x', '1']],
        '1');
  test_if(`if(style(--x: var(--x)): value1;
          style(--x: 3): value2;
          else: value3;)`,
        [['--x', '3']],
        'value1');
  test_if(`if(style(--x: var(--y)): value1;
          style(--z: 3): value2;
          else: value3;)`,
        [['--x', 'var(--y)'], ['--y', 'var(--y)'], ['--z', '3']],
        'value2');
  test_if(`if(style(--z: var(--y)): value1;
          style(--z: 3): value2;
          else: value3;)`,
        [['--x', 'var(--y)'], ['--y', 'var(--y)'], ['--z', '3']],
        'value2');
</script>