Bug 1879109 [wpt PR 44441] - Add tests for animation of CSS calc-size()., a=testonly

Automatic update from web-platform-tests
Add tests for animation of CSS calc-size().

Bug: 313072
Change-Id: Iffb1d69673a24a5e13e6a88606e5f9f4b0215de3
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5254963
Reviewed-by: Daniil Sakhapov <sakhapov@chromium.org>
Commit-Queue: David Baron <dbaron@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1258293}

--

wpt-commits: da25e93244e17fa16f245a955af8e0638230acab
wpt-pr: 44441
This commit is contained in:
L. David Baron 2024-02-12 08:41:23 +00:00 коммит произвёл moz-wptsync-bot
Родитель 013ced4200
Коммит 02b2926f36
1 изменённых файлов: 57 добавлений и 0 удалений

Просмотреть файл

@ -0,0 +1,57 @@
<!DOCTYPE html>
<meta charset="UTF-8">
<title>width: calc-size() animations</title>
<link rel="help" href="https://drafts.csswg.org/css-values-5/">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/626#issuecomment-1800254442">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../../support/interpolation-testcommon.js"></script>
<style>
.parent {
display: block;
width: 200px;
}
.target {
display: block;
}
.target::before {
display: block;
content: "";
width: 100px;
}
</style>
<body>
<script>
test_interpolation({
property: 'width',
from: neutralKeyframe,
to: 'calc-size(auto, size * 2)',
}, [
{ at: -0.25, expect: '150px' },
{ at: 0, expect: '200px' },
{ at: 0.25, expect: 'calc-size(auto, size * 1.25)' },
{ at: 0.5, expect: 'calc-size(auto, size * 1.5)' },
{ at: 0.75, expect: 'calc-size(auto, size * 1.75)' },
{ at: 1, expect: 'calc-size(auto, size * 2)' },
{ at: 1.25, expect: 'calc-size(auto, size * 2.25)' },
]);
test_interpolation({
property: 'width',
from: 'calc-size(min-content, 0px)',
to: 'calc-size(min-content, size)',
}, [
{ at: -0.25, expect: '0' },
{ at: 0, expect: '0' },
{ at: 0.25, expect: '25px' },
{ at: 0.5, expect: '50px' },
{ at: 0.75, expect: '75px' },
{ at: 1, expect: '100px' },
{ at: 1.25, expect: '125px' },
]);
</script>