Ahmad Saleem
3285547587
Automatic update from web-platform-tests WebKit export of https://bugs.webkit.org/show_bug.cgi?id=313300 (#59831) -- wpt-commits: 05eca7e3be07db10f22273878e7cf84f7910d708 wpt-pr: 59831
58 lines
2.3 KiB
HTML
58 lines
2.3 KiB
HTML
<!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>
|