trig-functions-with-runtime-angle-arguments.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 4 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /css/css-values/tree-counting/trig-functions-with-runtime-angle-arguments.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<title>CSS Values: trig functions with runtime-dependent angle arguments via sibling-index()</title>

<link rel="help" href="https://drafts.csswg.org/css-values-5/#tree-counting">

<link rel="help" href="https://drafts.csswg.org/css-values-4/#trig-funcs">

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

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

<style>

  .test > div {

    --i: calc((sibling-index() - 1) / (sibling-count() - 1));

    --angle: calc(30deg + 120deg * var(--i));

    --cos-val: calc(cos(var(--angle)));

    rotate: calc(var(--cos-val) * 45deg);

    transform: rotate(calc(var(--cos-val) * 45deg));

</style>

<div class="test">

  <div id="first"></div>

  <div id="middle"></div>

  <div id="last"></div>

</div>

<script>

// first:  --i=0,   --angle=30deg,  cos(30deg)≈0.866,  rotate≈38.97deg

// middle: --i=0.5, --angle=90deg,  cos(90deg)≈0,      rotate≈0deg

// last:   --i=1,   --angle=150deg, cos(150deg)≈-0.866, rotate≈-38.97deg

test(() => {

  const rotate = getComputedStyle(middle).rotate;

  const angle = parseFloat(rotate);

  assert_approx_equals(angle, 0, 1,

    "cos(90deg) ≈ 0, so rotate should be ≈ 0deg");

}, "rotate property: cos() with runtime angle argument converts degrees to radians");

test(() => {

  const rotate = getComputedStyle(first).rotate;

  const angle = parseFloat(rotate);

  assert_approx_equals(angle, 38.97, 1,

    "cos(30deg) ≈ 0.866, so rotate should be ≈ 38.97deg");

}, "rotate property: first element gets correct cos(30deg) value");

test(() => {

  const rotate = getComputedStyle(last).rotate;

  const angle = parseFloat(rotate);

  assert_approx_equals(angle, -38.97, 1,

    "cos(150deg) ≈ -0.866, so rotate should be ≈ -38.97deg");

}, "rotate property: last element gets correct cos(150deg) value");

test(() => {

  const transform = getComputedStyle(middle).transform;

  assert_not_equals(transform, "none");

  const match = transform.match(/matrix\(([^)]+)\)/);

  assert_true(!!match, "transform should be a matrix");

  const values = match[1].split(",").map(Number);

  // For ≈0deg rotation: matrix cos≈1, sin≈0

  assert_approx_equals(values[0], 1, 0.05, "matrix a (cos) should be ≈ 1");

  assert_approx_equals(values[1], 0, 0.05, "matrix b (sin) should be ≈ 0");

}, "transform rotate(): cos() with runtime angle argument converts degrees to radians");

</script>