Skip to content

GitLab

T
tangled
Commit 3fbf508e authored by Xida Chen's avatar Xida Chen Committed by Commit Bot
Browse files
Options

Port viewport-unit-interpolation.html to wpt 

The test is actually using width interpolation to test that the 'vh'
value is computed correctly.

Bug: 900581
Change-Id: Icfffb6bd06e1d89a25110727fab8b3107f2c5613
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1852580
Commit-Queue: Xida Chen <xidachen@chromium.org>
Reviewed-by: default avatarYi Gu <yigu@chromium.org>
Cr-Commit-Position: refs/heads/master@{#704718}
parent 0a1022f0
Hide whitespace changes
Inline Side-by-side
Showing with 28 additions and 43 deletions
third_party/blink/web_tests/animations/interpolation/viewport-unit-interpolation.html deleted 100644 → 0
View file @ 0a1022f0
<!doctype html>
<style>
.target {
font-size: 16px;
width: 60px;
height: 60px;
display: inline-block;
border: 2px solid black;
margin-right: 2px;
}
.expected {
background-color: green;
margin-right: 15px;
}
</style>
<body>
<script src="resources/interpolation-test.js"></script>
<script>
function vw(x) {
return (x * window.innerWidth / 100);
}
function calc(x) {
return Math.max(16 + (vw(10) - 16) * x, 0).toFixed(2) + "px";
}
assertInterpolation({
property: 'width',
from: '1em',
to: '10vw'
}, [
{at: -0.3, is: calc(-0.3)},
{at: 0, is: calc(0)},
{at: 0.3, is: calc(0.3)},
{at: 0.6, is: calc(0.6)},
{at: 1, is: calc(1)},
{at: 1.5, is: calc(1.5)}
]);
</script>
</body>
third_party/blink/web_tests/external/wpt/css/css-sizing/animation/width-interpolation.html
View file @ 3fbf508e
...@@ -14,6 +14,7 @@ ...@@ -14,6 +14,7 @@
overflow: visible; overflow: visible;
} }
.target { .target {
font-size: 16px;
background-color: black; background-color: black;
width: 10px; width: 10px;
height: 10px; height: 10px;
...@@ -95,5 +96,32 @@ test_interpolation({ ...@@ -95,5 +96,32 @@ test_interpolation({
{at: 1, expect: '100px'}, {at: 1, expect: '100px'},
{at: 1.5, expect: '145px'} {at: 1.5, expect: '145px'}
]); ]);
// The "vw" unit equals to 1% of the width of the viewport's initial containing
// block:
// https://developer.mozilla.org/en-US/docs/Web/CSS/length
function vw(x) {
return (x * window.innerWidth / 100);
}
// In here, 16 is the font-size which is the value of 1em, and vw(10) is the
// value of 10vw. The calc here takes the "at" in the next interpolation test
// and computes the expected value.
function calc(x) {
return Math.max(16 + (vw(10) - 16) * x, 0).toFixed(2) + "px";
}
test_interpolation({
property: 'width',
from: '1em',
to: '10vw'
}, [
{at: -0.3, expect: calc(-0.3)},
{at: 0, expect: calc(0)},
{at: 0.3, expect: calc(0.3)},
{at: 0.6, expect: calc(0.6)},
{at: 1, expect: calc(1)},
{at: 1.5, expect: calc(1.5)}
]);
</script> </script>
</body> </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