css/css-mixins/function-attr.html

<!DOCTYPE html>
<title>Custom Functions: attr(), url(), tainting</title>
<link rel="help" href="https://drafts.csswg.org/css-mixins-1/#using-custom-functions">
<link rel="help" href="https://drafts.csswg.org/css-values-5/#attr-security">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/utils.js"></script>

<style>
  #parent {
    list-style-image: url(parent);
  }
</style>
<div id=parent>
  <div id=actual data-42="42px" data-cat="url(cat.png)"></div>
  <div id=expected></div>
</div>
<main id=main></main>

<!--
  Each <template> represents a test, and is executed by comparing the computed
  values of #actual and #expected.
-->
<script>
  // Only these properties are actually compared.
  let relevant_properties = ['list-style-image', 'width'];
</script>

<template data-name="Return untyped url() from function">
  <style>
    @function --f() {
      result: url(img.png);
    }
    #actual { list-style-image: --f(); }
    #expected { list-style-image: url(img.png); }
  </style>
</template>

<template data-name="Return untyped url() from function, quoted">
  <style>
    @function --f() {
      result: url("img.png");
    }
    #actual { list-style-image: --f(); }
    #expected { list-style-image: url("img.png"); }
  </style>
</template>

<template data-name="Return typed url() from function">
  <style>
    @function --f() returns <url> {
      result: url(img.png);
    }
    #actual { list-style-image: --f(); }
    #expected { list-style-image: url(img.png); }
  </style>
</template>

<template data-name="Return typed url() from function, quoted">
  <style>
    @function --f() returns <url> {
      result: url("img.png");
    }
    #actual { list-style-image: --f(); }
    #expected { list-style-image: url("img.png"); }
  </style>
</template>

<!-- Permitted uses of attr() -->

<template data-name="Return attr(type(<length>)) from untyped function">
  <style>
    @function --f() {
      result: attr(data-42 type(<length>));
    }
    #actual { width: --f(); }
    #expected { width: 42px; }
  </style>
</template>

<template data-name="Return attr(type(<length>)) from typed function">
  <style>
    @function --f() returns <length> {
      result: attr(data-42 type(<length>));
    }
    #actual { width: --f(); }
    #expected { width: 42px; }
  </style>
</template>

<template data-name="Return attr(type(*)) from typed function">
  <style>
    @function --f() returns <length> {
      result: attr(data-42 type(*));
    }
    #actual { width: --f(); }
    #expected { width: 42px; }
  </style>
</template>

<template data-name="Return attr(type(*)) from untyped function">
  <style>
    @function --f() {
      result: attr(data-42 type(*));
    }
    #actual { width: --f(); }
    #expected { width: 42px; }
  </style>
</template>

<template data-name="attr() in default parameter value">
  <style>
    @function --f(--a : attr(data-42 type(*))) {
      result: var(--a);
    }
    #actual { width: --f(); }
    #expected { width: 42px; }
  </style>
</template>

<template data-name="attr() in local variable">
  <style>
    @function --f() {
      --l: attr(data-42 type(*));
      result: var(--l);
    }
    #actual { width: --f(); }
    #expected { width: 42px; }
  </style>
</template>

<!-- Invalid uses of attr() -->

<template data-name="Returned url() is attr-tainted">
  <style>
    @function --f() {
      result: attr(data-cat type(*));
    }
    #actual { list-style-image: --f(); }
    #expected { list-style-image: url(parent); }
  </style>
</template>

<template data-name="Returned url() is attr-tainted, typed attr()">
  <style>
    @function --f() {
      result: attr(data-cat type(<url>));
    }
    #actual { list-style-image: --f(); }
    #expected { list-style-image: url(parent); }
  </style>
</template>

<template data-name="Returned url() is attr-tainted, typed return">
  <style>
    @function --f() returns <url> {
      result: attr(data-cat type(*));
    }
    #actual { list-style-image: --f(); }
    #expected { list-style-image: url(parent); }
  </style>
</template>

<template data-name="Returned url() is attr-tainted, local">
  <style>
    @function --f() returns <url> {
      --local: attr(data-cat type(*));
      result: var(--local);
    }
    #actual { list-style-image: --f(); }
    #expected { list-style-image: url(parent); }
  </style>
</template>

<template data-name="Returned url() is attr-tainted, argument">
  <style>
    @function --f(--arg) returns <url> {
      result: var(--arg);
    }
    #actual { list-style-image: --f(attr(data-cat type(*))); }
    #expected { list-style-image: url(parent); }
  </style>
</template>

<template data-name="Returned url() is attr-tainted, default">
  <style>
    @function --f(--arg: attr(data-cat type(*))) {
      result: var(--arg);
    }
    #actual { list-style-image: --f(); }
    #expected { list-style-image: url(parent); }
  </style>
</template>

<template data-name="Returned url() is attr-tainted, parent stack frame">
  <style>
    @function --f() {
      --x: attr(data-cat type(*));
      result: --g();
    }
    @function --g() {
      result: var(--x);
    }
    #actual { list-style-image: --f(); }
    #expected { list-style-image: url(parent); }
  </style>
</template>

<template data-name="Returned url() is attr-tainted, initial">
  <style>
    @function --f(--x: attr(data-cat type(*))) {
      --x: initial;
      result: --g();
    }
    #actual { list-style-image: --f(); }
    #expected { list-style-image: url(parent); }
  </style>
</template>

<template data-name="Returned url() is attr-tainted, inherit">
  <style>
    @function --f() {
      --x: attr(data-cat type(*));
      result: --g();
    }
    @function --g() {
      --x: inherit;
      result: var(--x);
    }
    #actual { list-style-image: --f(); }
    #expected { list-style-image: url(parent); }
  </style>
</template>

<script>
  let templates = document.querySelectorAll('template');
  for (let template of templates) {
    test((t) => {
      t.add_cleanup(() => main.replaceChildren());
      main.append(template.content.cloneNode(true));
      for (let p of relevant_properties) {
        assert_equals(getComputedStyle(actual).getPropertyValue(p),
                      getComputedStyle(expected).getPropertyValue(p));
      }
    }, template.getAttribute('data-name'));
  }
</script>