Skip to content

GitLab

T
tangled
Commit 4acf59b6 authored by haozhe's avatar haozhe Committed by Commit Bot
Browse files
Options

Avoid dereferencing a null pointer in list_interpolation_function 

The current code doesn't catch the case where non_interpolatable_value
is null for the interpolation_list. This patch add a protection for
this situation.

Bug: 1039733
Change-Id: I442a56e4984285dfe524dcd669fae9f4da0a7f94
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2011167
Commit-Queue: Hao Sheng <haozhes@chromium.org>
Reviewed-by: default avatarStephen McGruer <smcgruer@chromium.org>
Reviewed-by: default avatarXida Chen <xidachen@chromium.org>
Reviewed-by: default avatarKevin Ellis <kevers@chromium.org>
Cr-Commit-Position: refs/heads/master@{#736481}
parent eb7a973b
Hide whitespace changes
Inline Side-by-side
Showing with 235 additions and 199 deletions
third_party/blink/renderer/core/animation/list_interpolation_functions.cc
View file @ 4acf59b6
......@@ -165,24 +165,28 @@ PairwiseInterpolationValue ListInterpolationFunctions::MaybeMergeSingles(
auto& start_interpolable_list =
To<InterpolableList>(*start.interpolable_value);
auto& end_interpolable_list = To<InterpolableList>(*end.interpolable_value);
const auto& start_non_interpolable_list =
To<NonInterpolableList>(*start.non_interpolable_value);
const auto& end_non_interpolable_list =
To<NonInterpolableList>(*end.non_interpolable_value);
const auto* start_non_interpolable_list =
To<NonInterpolableList>(start.non_interpolable_value.get());
const auto* end_non_interpolable_list =
To<NonInterpolableList>(end.non_interpolable_value.get());
const wtf_size_t start_non_interpolable_length =
To<NonInterpolableList>(*start.non_interpolable_value).length();
start_non_interpolable_list ? start_non_interpolable_list->length() : 0;
const wtf_size_t end_non_interpolable_length =
To<NonInterpolableList>(*end.non_interpolable_value).length();
end_non_interpolable_list ? end_non_interpolable_list->length() : 0;
for (wtf_size_t i = 0; i < final_length; i++) {
if (length_matching_strategy ==
LengthMatchingStrategy::kLowestCommonMultiple ||
(i < start_length && i < end_length)) {
InterpolationValue start_merge(
start_interpolable_list.Get(i % start_length)->Clone(),
start_non_interpolable_list.Get(i % start_non_interpolable_length));
start_non_interpolable_list ? start_non_interpolable_list->Get(
i % start_non_interpolable_length)
: nullptr);
InterpolationValue end_merge(
end_interpolable_list.Get(i % end_length)->Clone(),
end_non_interpolable_list.Get(i % end_non_interpolable_length));
end_non_interpolable_list
? end_non_interpolable_list->Get(i % end_non_interpolable_length)
: nullptr);
PairwiseInterpolationValue result = merge_single_item_conversions.Run(
std::move(start_merge), std::move(end_merge));
if (!result)
......@@ -203,7 +207,7 @@ PairwiseInterpolationValue ListInterpolationFunctions::MaybeMergeSingles(
i, start_interpolable_list.Get(i)->CloneAndZero());
result_non_interpolable_values[i] =
(i < start_non_interpolable_length)
? start_non_interpolable_list.Get(i)
? start_non_interpolable_list->Get(i)
: nullptr;
} else {
DCHECK_LT(i, end_length);
......@@ -212,8 +216,9 @@ PairwiseInterpolationValue ListInterpolationFunctions::MaybeMergeSingles(
result_end_interpolable_list->Set(
i, end_interpolable_list.Get(i)->Clone());
result_non_interpolable_values[i] =
(i < end_non_interpolable_length) ? end_non_interpolable_list.Get(i)
: nullptr;
(i < end_non_interpolable_length)
? end_non_interpolable_list->Get(i)
: nullptr;
}
}
}
......
third_party/blink/web_tests/animations/composition/box-shadow-composition.html deleted 100644 → 0
View file @ eb7a973b
<!DOCTYPE html>
<meta charset="UTF-8">
<style>
.target {
width: 40px;
height: 40px;
background-color: black;
}
.expected {
background-color: green;
}
</style>
<body>
<script src="../interpolation/resources/interpolation-test.js"></script>
<script>
assertComposition({
property: 'box-shadow',
underlying: 'rgb(10, 20, 30) 1px 2px 3px 4px',
addFrom: 'rgb(100, 100, 100) 10px 20px 30px 40px',
addTo: 'rgb(200, 200, 200) 20px 40px 60px 80px',
}, [
{at: -0.3, is: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(70, 70, 70) 7px 14px 21px 28px'},
{at: 0, is: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(100, 100, 100) 10px 20px 30px 40px'},
{at: 0.5, is: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(150, 150, 150) 15px 30px 45px 60px'},
{at: 1, is: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(200, 200, 200) 20px 40px 60px 80px'},
{at: 1.5, is: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(250, 250, 250) 25px 50px 75px 100px'},
]);
assertComposition({
property: 'box-shadow',
underlying: 'rgb(10, 20, 30) 1px 2px 3px 4px',
addFrom: 'rgb(100, 100, 100) 10px 20px 30px 40px inset',
addTo: 'rgb(200, 200, 200) 20px 40px 60px 80px inset',
}, [
{at: -0.3, is: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(70, 70, 70) 7px 14px 21px 28px inset'},
{at: 0, is: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(100, 100, 100) 10px 20px 30px 40px inset'},
{at: 0.5, is: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(150, 150, 150) 15px 30px 45px 60px inset'},
{at: 1, is: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(200, 200, 200) 20px 40px 60px 80px inset'},
{at: 1.5, is: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(250, 250, 250) 25px 50px 75px 100px inset'},
]);
assertComposition({
property: 'box-shadow',
underlying: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px',
addFrom: 'rgb(100, 100, 100) 10px 20px 30px 40px',
addTo: 'rgb(200, 200, 200) 20px 40px 60px 80px',
}, [
{at: -0.3, is: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px, rgb(70, 70, 70) 7px 14px 21px 28px'},
{at: 0, is: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px, rgb(100, 100, 100) 10px 20px 30px 40px'},
{at: 0.5, is: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px, rgb(150, 150, 150) 15px 30px 45px 60px'},
{at: 1, is: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px, rgb(200, 200, 200) 20px 40px 60px 80px'},
{at: 1.5, is: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px, rgb(250, 250, 250) 25px 50px 75px 100px'},
]);
assertComposition({
property: 'box-shadow',
underlying: 'rgb(10, 20, 30) 1px 2px 3px 4px',
addFrom: 'rgb(100, 100, 100) 10px 20px 30px 40px, rgb(100, 100, 100) 10px 20px 30px 40px inset',
addTo: 'rgb(200, 200, 200) 20px 40px 60px 80px, rgb(200, 200, 200) 20px 40px 60px 80px inset',
}, [
{at: -0.3, is: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(70, 70, 70) 7px 14px 21px 28px, rgb(70, 70, 70) 7px 14px 21px 28px inset'},
{at: 0, is: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(100, 100, 100) 10px 20px 30px 40px, rgb(100, 100, 100) 10px 20px 30px 40px inset'},
{at: 0.5, is: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(150, 150, 150) 15px 30px 45px 60px, rgb(150, 150, 150) 15px 30px 45px 60px inset'},
{at: 1, is: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(200, 200, 200) 20px 40px 60px 80px, rgb(200, 200, 200) 20px 40px 60px 80px inset'},
{at: 1.5, is: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(250, 250, 250) 25px 50px 75px 100px, rgb(250, 250, 250) 25px 50px 75px 100px inset'},
]);
assertComposition({
property: 'box-shadow',
underlying: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px',
addFrom: 'rgb(100, 100, 100) 10px 20px 30px 40px',
replaceTo: 'rgb(200, 200, 200) 20px 40px 60px 80px',
}, [
{at: -0.3, is: 'rgb(0, 0, 0) -4.7px -9.4px 0px -18.8px, rgb(26, 52, 78) 2.6px 5.2px 7.8px 10.4px, rgb(130, 130, 130) 13px 26px 39px 52px'},
{at: 0, is: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px, rgb(100, 100, 100) 10px 20px 30px 40px'},
{at: 0.5, is: 'rgb(105, 110, 115) 10.5px 21px 31.5px 42px, rgba(20, 40, 60, 0.5) 1px 2px 3px 4px, rgba(100, 100, 100, 0.5) 5px 10px 15px 20px'},
{at: 1, is: 'rgb(200, 200, 200) 20px 40px 60px 80px'},
{at: 1.5, is: 'rgb(255, 255, 255) 29.5px 59px 88.5px 118px, rgba(0, 0, 0, 0) -1px -2px 0px -4px, rgba(0, 0, 0, 0) -5px -10px 0px -20px'},
]);
assertComposition({
property: 'box-shadow',
underlying: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px',
replaceFrom: 'rgb(100, 100, 100) 10px 20px 30px 40px',
addTo: 'rgb(200, 200, 200) 20px 40px 60px 80px',
}, [
{at: -0.3, is: 'rgb(127, 124, 121) 12.7px 25.4px 38.1px 50.8px, rgba(0, 0, 0, 0) -0.6px -1.2px 0px -2.4px, rgba(0, 0, 0, 0) -6px -12px 0px -24px'},
{at: 0, is: 'rgb(100, 100, 100) 10px 20px 30px 40px'},
{at: 0.5, is: 'rgb(55, 60, 65) 5.5px 11px 16.5px 22px, rgba(20, 40, 60, 0.5) 1px 2px 3px 4px, rgba(200, 200, 200, 0.5) 10px 20px 30px 40px'},
{at: 1, is: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px, rgb(200, 200, 200) 20px 40px 60px 80px'},
{at: 1.5, is: 'rgb(0, 0, 0) -3.5px -7px 0px -14px, rgb(30, 60, 90) 3px 6px 9px 12px, rgb(255, 255, 255) 30px 60px 90px 120px'},
]);
assertComposition({
property: 'box-shadow',
underlying: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px, rgb(40, 80, 120) 4px 8px 12px 16px',
addFrom: 'rgb(100, 100, 100) 10px 20px 30px 40px, rgb(200, 200, 200) 20px 40px 60px 80px',
replaceTo: 'rgb(200, 200, 200) 20px 40px 60px 80px',
}, [
{at: -0.3, is: 'rgb(0, 0, 0) -4.7px -9.4px 0px -18.8px, rgb(26, 52, 78) 2.6px 5.2px 7.8px 10.4px, rgb(52, 104, 156) 5.2px 10.4px 15.6px 20.8px, rgb(130, 130, 130) 13px 26px 39px 52px, rgb(255, 255, 255) 26px 52px 78px 104px'},
{at: 0, is: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px, rgb(40, 80, 120) 4px 8px 12px 16px, rgb(100, 100, 100) 10px 20px 30px 40px, rgb(200, 200, 200) 20px 40px 60px 80px'},
{at: 0.5, is: 'rgb(105, 110, 115) 10.5px 21px 31.5px 42px, rgba(20, 40, 60, 0.5) 1px 2px 3px 4px, rgba(40, 80, 120, 0.5) 2px 4px 6px 8px, rgba(100, 100, 100, 0.5) 5px 10px 15px 20px, rgba(200, 200, 200, 0.5) 10px 20px 30px 40px'},
{at: 1, is: 'rgb(200, 200, 200) 20px 40px 60px 80px'},
{at: 1.5, is: 'rgb(255, 255, 255) 29.5px 59px 88.5px 118px, rgba(0, 0, 0, 0) -1px -2px 0px -4px, rgba(0, 0, 0, 0) -2px -4px 0px -8px, rgba(0, 0, 0, 0) -5px -10px 0px -20px, rgba(0, 0, 0, 0) -10px -20px 0px -40px'},
]);
</script>
</body>
third_party/blink/web_tests/animations/composition/text-shadow-composition.html deleted 100644 → 0
View file @ eb7a973b
<!DOCTYPE html>
<meta charset="UTF-8">
<style>
.target {
width: 40px;
height: 40px;
background-color: black;
}
.expected {
background-color: green;
}
</style>
<body>
<script src="../interpolation/resources/interpolation-test.js"></script>
<script>
assertComposition({
property: 'text-shadow',
underlying: 'rgb(10, 20, 30) 1px 2px 3px',
addFrom: 'rgb(100, 100, 100) 10px 20px 30px',
addTo: 'rgb(200, 200, 200) 20px 40px 60px',
}, [
{at: -0.3, is: 'rgb(10, 20, 30) 1px 2px 3px, rgb(70, 70, 70) 7px 14px 21px'},
{at: 0, is: 'rgb(10, 20, 30) 1px 2px 3px, rgb(100, 100, 100) 10px 20px 30px'},
{at: 0.5, is: 'rgb(10, 20, 30) 1px 2px 3px, rgb(150, 150, 150) 15px 30px 45px'},
{at: 1, is: 'rgb(10, 20, 30) 1px 2px 3px, rgb(200, 200, 200) 20px 40px 60px'},
{at: 1.5, is: 'rgb(10, 20, 30) 1px 2px 3px, rgb(250, 250, 250) 25px 50px 75px'},
]);
assertComposition({
property: 'text-shadow',
underlying: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px',
addFrom: 'rgb(100, 100, 100) 10px 20px 30px',
addTo: 'rgb(200, 200, 200) 20px 40px 60px',
}, [
{at: -0.3, is: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(70, 70, 70) 7px 14px 21px'},
{at: 0, is: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(100, 100, 100) 10px 20px 30px'},
{at: 0.5, is: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(150, 150, 150) 15px 30px 45px'},
{at: 1, is: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(200, 200, 200) 20px 40px 60px'},
{at: 1.5, is: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(250, 250, 250) 25px 50px 75px'},
]);
assertComposition({
property: 'text-shadow',
underlying: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px',
addFrom: 'rgb(100, 100, 100) 10px 20px 30px',
replaceTo: 'rgb(200, 200, 200) 20px 40px 60px',
}, [
{at: -0.3, is: 'rgb(0, 0, 0) -4.7px -9.4px 0px, rgb(26, 52, 78) 2.6px 5.2px 7.8px, rgb(130, 130, 130) 13px 26px 39px'},
{at: 0, is: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(100, 100, 100) 10px 20px 30px'},
{at: 0.5, is: 'rgb(105, 110, 115) 10.5px 21px 31.5px, rgba(20, 40, 60, 0.5) 1px 2px 3px, rgba(100, 100, 100, 0.5) 5px 10px 15px'},
{at: 1, is: 'rgb(200, 200, 200) 20px 40px 60px'},
{at: 1.5, is: 'rgb(255, 255, 255) 29.5px 59px 88.5px, rgba(0, 0, 0, 0) -1px -2px 0px, rgba(0, 0, 0, 0) -5px -10px 0px'},
]);
assertComposition({
property: 'text-shadow',
underlying: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px',
replaceFrom: 'rgb(100, 100, 100) 10px 20px 30px',
addTo: 'rgb(200, 200, 200) 20px 40px 60px',
}, [
{at: -0.3, is: 'rgb(127, 124, 121) 12.7px 25.4px 38.1px, rgba(0, 0, 0, 0) -0.6px -1.2px 0px, rgba(0, 0, 0, 0) -6px -12px 0px'},
{at: 0, is: 'rgb(100, 100, 100) 10px 20px 30px'},
{at: 0.5, is: 'rgb(55, 60, 65) 5.5px 11px 16.5px, rgba(20, 40, 60, 0.5) 1px 2px 3px, rgba(200, 200, 200, 0.5) 10px 20px 30px'},
{at: 1, is: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(200, 200, 200) 20px 40px 60px'},
{at: 1.5, is: 'rgb(0, 0, 0) -3.5px -7px 0px, rgb(30, 60, 90) 3px 6px 9px, rgb(255, 255, 255) 30px 60px 90px'},
]);
assertComposition({
property: 'text-shadow',
underlying: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(40, 80, 120) 4px 8px 12px',
addFrom: 'rgb(100, 100, 100) 10px 20px 30px, rgb(200, 200, 200) 20px 40px 60px',
replaceTo: 'rgb(200, 200, 200) 20px 40px 60px',
}, [
{at: -0.3, is: 'rgb(0, 0, 0) -4.7px -9.4px 0px, rgb(26, 52, 78) 2.6px 5.2px 7.8px, rgb(52, 104, 156) 5.2px 10.4px 15.6px, rgb(130, 130, 130) 13px 26px 39px, rgb(255, 255, 255) 26px 52px 78px'},
{at: 0, is: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(40, 80, 120) 4px 8px 12px, rgb(100, 100, 100) 10px 20px 30px, rgb(200, 200, 200) 20px 40px 60px'},
{at: 0.5, is: 'rgb(105, 110, 115) 10.5px 21px 31.5px, rgba(20, 40, 60, 0.5) 1px 2px 3px, rgba(40, 80, 120, 0.5) 2px 4px 6px, rgba(100, 100, 100, 0.5) 5px 10px 15px, rgba(200, 200, 200, 0.5) 10px 20px 30px'},
{at: 1, is: 'rgb(200, 200, 200) 20px 40px 60px'},
{at: 1.5, is: 'rgb(255, 255, 255) 29.5px 59px 88.5px, rgba(0, 0, 0, 0) -1px -2px 0px, rgba(0, 0, 0, 0) -2px -4px 0px, rgba(0, 0, 0, 0) -5px -10px 0px, rgba(0, 0, 0, 0) -10px -20px 0px'},
]);
</script>
</body>
third_party/blink/web_tests/external/wpt/css/css-backgrounds/animations/box-shadow-composition.html 0 → 100644
View file @ 4acf59b6
<!DOCTYPE html>
<meta charset="UTF-8">
<title>box-shadow composition</title>
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#box-shadow">
<meta name="test" content="box-shadow supports animation">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<style>
.target {
width: 40px;
height: 40px;
background-color: black;
}
.expected {
background-color: green;
}
</style>
<body>
<script>
test_composition({
property: 'box-shadow',
replaceFrom: 'rgb(100, 100, 100) 10px 20px 30px 40px',
addTo: 'rgb(200, 200, 200) 20px 40px 60px 80px',
}, [
{at: -0.3, expect: 'rgb(70, 70, 70 ) 7px 14px 21px 28px'},
{at: 0, expect: 'rgb(100, 100, 100) 10px 20px 30px 40px'},
{at: 0.5, expect: 'rgb(150, 150, 150) 15px 30px 45px 60px'},
{at: 1, expect: 'rgb(200, 200, 200) 20px 40px 60px 80px'},
{at: 1.5, expect: 'rgb(250, 250, 250) 25px 50px 75px 100px'},
]);
test_composition({
property: 'box-shadow',
underlying: 'rgb(10, 20, 30) 1px 2px 3px 4px',
addFrom: 'rgb(100, 100, 100) 10px 20px 30px 40px',
addTo: 'rgb(200, 200, 200) 20px 40px 60px 80px',
}, [
{at: -0.3, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(70, 70, 70) 7px 14px 21px 28px'},
{at: 0, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(100, 100, 100) 10px 20px 30px 40px'},
{at: 0.5, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(150, 150, 150) 15px 30px 45px 60px'},
{at: 1, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(200, 200, 200) 20px 40px 60px 80px'},
{at: 1.5, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(250, 250, 250) 25px 50px 75px 100px'},
]);
test_composition({
property: 'box-shadow',
underlying: 'rgb(10, 20, 30) 1px 2px 3px 4px',
addFrom: 'rgb(100, 100, 100) 10px 20px 30px 40px inset',
addTo: 'rgb(200, 200, 200) 20px 40px 60px 80px inset',
}, [
{at: -0.3, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(70, 70, 70) 7px 14px 21px 28px inset'},
{at: 0, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(100, 100, 100) 10px 20px 30px 40px inset'},
{at: 0.5, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(150, 150, 150) 15px 30px 45px 60px inset'},
{at: 1, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(200, 200, 200) 20px 40px 60px 80px inset'},
{at: 1.5, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(250, 250, 250) 25px 50px 75px 100px inset'},
]);
test_composition({
property: 'box-shadow',
underlying: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px',
addFrom: 'rgb(100, 100, 100) 10px 20px 30px 40px',
addTo: 'rgb(200, 200, 200) 20px 40px 60px 80px',
}, [
{at: -0.3, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px, rgb(70, 70, 70) 7px 14px 21px 28px'},
{at: 0, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px, rgb(100, 100, 100) 10px 20px 30px 40px'},
{at: 0.5, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px, rgb(150, 150, 150) 15px 30px 45px 60px'},
{at: 1, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px, rgb(200, 200, 200) 20px 40px 60px 80px'},
{at: 1.5, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px, rgb(250, 250, 250) 25px 50px 75px 100px'},
]);
test_composition({
property: 'box-shadow',
underlying: 'rgb(10, 20, 30) 1px 2px 3px 4px',
addFrom: 'rgb(100, 100, 100) 10px 20px 30px 40px, rgb(100, 100, 100) 10px 20px 30px 40px inset',
addTo: 'rgb(200, 200, 200) 20px 40px 60px 80px, rgb(200, 200, 200) 20px 40px 60px 80px inset',
}, [
{at: -0.3, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(70, 70, 70) 7px 14px 21px 28px, rgb(70, 70, 70) 7px 14px 21px 28px inset'},
{at: 0, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(100, 100, 100) 10px 20px 30px 40px, rgb(100, 100, 100) 10px 20px 30px 40px inset'},
{at: 0.5, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(150, 150, 150) 15px 30px 45px 60px, rgb(150, 150, 150) 15px 30px 45px 60px inset'},
{at: 1, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(200, 200, 200) 20px 40px 60px 80px, rgb(200, 200, 200) 20px 40px 60px 80px inset'},
{at: 1.5, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(250, 250, 250) 25px 50px 75px 100px, rgb(250, 250, 250) 25px 50px 75px 100px inset'},
]);
test_composition({
property: 'box-shadow',
underlying: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px',
addFrom: 'rgb(100, 100, 100) 10px 20px 30px 40px',
replaceTo: 'rgb(200, 200, 200) 20px 40px 60px 80px',
}, [
{at: -0.3, expect: 'rgb(0, 0, 0) -4.7px -9.4px 0px -18.8px, rgb(26, 52, 78) 2.6px 5.2px 7.8px 10.4px, rgb(130, 130, 130) 13px 26px 39px 52px'},
{at: 0, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px, rgb(100, 100, 100) 10px 20px 30px 40px'},
{at: 0.5, expect: 'rgb(105, 110, 115) 10.5px 21px 31.5px 42px, rgba(20, 40, 60, 0.5) 1px 2px 3px 4px, rgba(100, 100, 100, 0.5) 5px 10px 15px 20px'},
{at: 1, expect: 'rgb(200, 200, 200) 20px 40px 60px 80px'},
{at: 1.5, expect: 'rgb(255, 255, 255) 29.5px 59px 88.5px 118px, rgba(0, 0, 0, 0) -1px -2px 0px -4px, rgba(0, 0, 0, 0) -5px -10px 0px -20px'},
]);
test_composition({
property: 'box-shadow',
underlying: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px',
replaceFrom: 'rgb(100, 100, 100) 10px 20px 30px 40px',
addTo: 'rgb(200, 200, 200) 20px 40px 60px 80px',
}, [
{at: -0.3, expect: 'rgb(127, 124, 121) 12.7px 25.4px 38.1px 50.8px, rgba(0, 0, 0, 0) -0.6px -1.2px 0px -2.4px, rgba(0, 0, 0, 0) -6px -12px 0px -24px'},
{at: 0, expect: 'rgb(100, 100, 100) 10px 20px 30px 40px'},
{at: 0.5, expect: 'rgb(55, 60, 65) 5.5px 11px 16.5px 22px, rgba(20, 40, 60, 0.5) 1px 2px 3px 4px, rgba(200, 200, 200, 0.5) 10px 20px 30px 40px'},
{at: 1, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px, rgb(200, 200, 200) 20px 40px 60px 80px'},
{at: 1.5, expect: 'rgb(0, 0, 0) -3.5px -7px 0px -14px, rgb(30, 60, 90) 3px 6px 9px 12px, rgb(255, 255, 255) 30px 60px 90px 120px'},
]);
test_composition({
property: 'box-shadow',
underlying: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px, rgb(40, 80, 120) 4px 8px 12px 16px',
addFrom: 'rgb(100, 100, 100) 10px 20px 30px 40px, rgb(200, 200, 200) 20px 40px 60px 80px',
replaceTo: 'rgb(200, 200, 200) 20px 40px 60px 80px',
}, [
{at: -0.3, expect: 'rgb(0, 0, 0) -4.7px -9.4px 0px -18.8px, rgb(26, 52, 78) 2.6px 5.2px 7.8px 10.4px, rgb(52, 104, 156) 5.2px 10.4px 15.6px 20.8px, rgb(130, 130, 130) 13px 26px 39px 52px, rgb(255, 255, 255) 26px 52px 78px 104px'},
{at: 0, expect: 'rgb(10, 20, 30) 1px 2px 3px 4px, rgb(20, 40, 60) 2px 4px 6px 8px, rgb(40, 80, 120) 4px 8px 12px 16px, rgb(100, 100, 100) 10px 20px 30px 40px, rgb(200, 200, 200) 20px 40px 60px 80px'},
{at: 0.5, expect: 'rgb(105, 110, 115) 10.5px 21px 31.5px 42px, rgba(20, 40, 60, 0.5) 1px 2px 3px 4px, rgba(40, 80, 120, 0.5) 2px 4px 6px 8px, rgba(100, 100, 100, 0.5) 5px 10px 15px 20px, rgba(200, 200, 200, 0.5) 10px 20px 30px 40px'},
{at: 1, expect: 'rgb(200, 200, 200) 20px 40px 60px 80px'},
{at: 1.5, expect: 'rgb(255, 255, 255) 29.5px 59px 88.5px 118px, rgba(0, 0, 0, 0) -1px -2px 0px -4px, rgba(0, 0, 0, 0) -2px -4px 0px -8px, rgba(0, 0, 0, 0) -5px -10px 0px -20px, rgba(0, 0, 0, 0) -10px -20px 0px -40px'},
]);
</script>
</body>
third_party/blink/web_tests/external/wpt/css/css-transitions/animations/text-shadow-composition.html 0 → 100644
View file @ 4acf59b6
<!DOCTYPE html>
<meta charset="UTF-8">
<title>text-shadow composition</title>
<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-shadow-property">
<meta name="assert" content="text-shadow supports animation">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/interpolation-testcommon.js"></script>
<style>
.target {
width: 40px;
height: 40px;
background-color: black;
}
.expected {
background-color: green;
}
</style>
<body>
<script>
test_composition({
property: 'text-shadow',
replaceFrom: 'rgb(100, 100, 100) 10px 20px 30px',
addTo: 'rgb(200, 200, 200) 20px 40px 60px',
}, [
{at: -0.3, expect: 'rgb(70, 70, 70 ) 7px 14px 21px'},
{at: 0, expect: 'rgb(100, 100, 100) 10px 20px 30px'},
{at: 0.5, expect: 'rgb(150, 150, 150) 15px 30px 45px'},
{at: 1, expect: 'rgb(200, 200, 200) 20px 40px 60px'},
{at: 1.5, expect: 'rgb(250, 250, 250) 25px 50px 75px'},
]);
test_composition({
property: 'text-shadow',
underlying: 'rgb(10, 20, 30) 1px 2px 3px',
addFrom: 'rgb(100, 100, 100) 10px 20px 30px',
addTo: 'rgb(200, 200, 200) 20px 40px 60px',
}, [
{at: -0.3, expect: 'rgb(10, 20, 30) 1px 2px 3px, rgb(70, 70, 70) 7px 14px 21px'},
{at: 0, expect: 'rgb(10, 20, 30) 1px 2px 3px, rgb(100, 100, 100) 10px 20px 30px'},
{at: 0.5, expect: 'rgb(10, 20, 30) 1px 2px 3px, rgb(150, 150, 150) 15px 30px 45px'},
{at: 1, expect: 'rgb(10, 20, 30) 1px 2px 3px, rgb(200, 200, 200) 20px 40px 60px'},
{at: 1.5, expect: 'rgb(10, 20, 30) 1px 2px 3px, rgb(250, 250, 250) 25px 50px 75px'},
]);
test_composition({
property: 'text-shadow',
underlying: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px',
addFrom: 'rgb(100, 100, 100) 10px 20px 30px',
addTo: 'rgb(200, 200, 200) 20px 40px 60px',
}, [
{at: -0.3, expect: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(70, 70, 70) 7px 14px 21px'},
{at: 0, expect: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(100, 100, 100) 10px 20px 30px'},
{at: 0.5, expect: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(150, 150, 150) 15px 30px 45px'},
{at: 1, expect: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(200, 200, 200) 20px 40px 60px'},
{at: 1.5, expect: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(250, 250, 250) 25px 50px 75px'},
]);
test_composition({
property: 'text-shadow',
underlying: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px',
addFrom: 'rgb(100, 100, 100) 10px 20px 30px',
replaceTo: 'rgb(200, 200, 200) 20px 40px 60px',
}, [
{at: -0.3, expect: 'rgb(0, 0, 0) -4.7px -9.4px 0px, rgb(26, 52, 78) 2.6px 5.2px 7.8px, rgb(130, 130, 130) 13px 26px 39px'},
{at: 0, expect: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(100, 100, 100) 10px 20px 30px'},
{at: 0.5, expect: 'rgb(105, 110, 115) 10.5px 21px 31.5px, rgba(20, 40, 60, 0.5) 1px 2px 3px, rgba(100, 100, 100, 0.5) 5px 10px 15px'},
{at: 1, expect: 'rgb(200, 200, 200) 20px 40px 60px'},
{at: 1.5, expect: 'rgb(255, 255, 255) 29.5px 59px 88.5px, rgba(0, 0, 0, 0) -1px -2px 0px, rgba(0, 0, 0, 0) -5px -10px 0px'},
]);
test_composition({
property: 'text-shadow',
underlying: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px',
replaceFrom: 'rgb(100, 100, 100) 10px 20px 30px',
addTo: 'rgb(200, 200, 200) 20px 40px 60px',
}, [
{at: -0.3, expect: 'rgb(127, 124, 121) 12.7px 25.4px 38.1px, rgba(0, 0, 0, 0) -0.6px -1.2px 0px, rgba(0, 0, 0, 0) -6px -12px 0px'},
{at: 0, expect: 'rgb(100, 100, 100) 10px 20px 30px'},
{at: 0.5, expect: 'rgb(55, 60, 65) 5.5px 11px 16.5px, rgba(20, 40, 60, 0.5) 1px 2px 3px, rgba(200, 200, 200, 0.5) 10px 20px 30px'},
{at: 1, expect: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(200, 200, 200) 20px 40px 60px'},
{at: 1.5, expect: 'rgb(0, 0, 0) -3.5px -7px 0px, rgb(30, 60, 90) 3px 6px 9px, rgb(255, 255, 255) 30px 60px 90px'},
]);
test_composition({
property: 'text-shadow',
underlying: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(40, 80, 120) 4px 8px 12px',
addFrom: 'rgb(100, 100, 100) 10px 20px 30px, rgb(200, 200, 200) 20px 40px 60px',
replaceTo: 'rgb(200, 200, 200) 20px 40px 60px',
}, [
{at: -0.3, expect: 'rgb(0, 0, 0) -4.7px -9.4px 0px, rgb(26, 52, 78) 2.6px 5.2px 7.8px, rgb(52, 104, 156) 5.2px 10.4px 15.6px, rgb(130, 130, 130) 13px 26px 39px, rgb(255, 255, 255) 26px 52px 78px'},
{at: 0, expect: 'rgb(10, 20, 30) 1px 2px 3px, rgb(20, 40, 60) 2px 4px 6px, rgb(40, 80, 120) 4px 8px 12px, rgb(100, 100, 100) 10px 20px 30px, rgb(200, 200, 200) 20px 40px 60px'},
{at: 0.5, expect: 'rgb(105, 110, 115) 10.5px 21px 31.5px, rgba(20, 40, 60, 0.5) 1px 2px 3px, rgba(40, 80, 120, 0.5) 2px 4px 6px, rgba(100, 100, 100, 0.5) 5px 10px 15px, rgba(200, 200, 200, 0.5) 10px 20px 30px'},
{at: 1, expect: 'rgb(200, 200, 200) 20px 40px 60px'},
{at: 1.5, expect: 'rgb(255, 255, 255) 29.5px 59px 88.5px, rgba(0, 0, 0, 0) -1px -2px 0px, rgba(0, 0, 0, 0) -2px -4px 0px, rgba(0, 0, 0, 0) -5px -10px 0px, rgba(0, 0, 0, 0) -10px -20px 0px'},
]);
</script>
</body>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment