Index: LayoutTests/animations/interpolation/webkit-column-gap-interpolation.html |
diff --git a/LayoutTests/animations/interpolation/webkit-column-gap-interpolation.html b/LayoutTests/animations/interpolation/webkit-column-gap-interpolation.html |
index 90e67a318d64c1274e6e63b3134dc19dcaa9c409..f95be916dbbfce05816feb987fea1a3d3b1b15eb 100644 |
--- a/LayoutTests/animations/interpolation/webkit-column-gap-interpolation.html |
+++ b/LayoutTests/animations/interpolation/webkit-column-gap-interpolation.html |
@@ -1,23 +1,23 @@ |
<!DOCTYPE html> |
<meta charset="UTF-8"> |
<style> |
+.parent { |
+ -webkit-column-gap: 90px; |
+} |
.target { |
-webkit-column-count: 2; |
- -webkit-column-gap: 20px; |
- column-count: 2; |
- column-gap: 20px; |
+ -webkit-column-gap: 10px; |
} |
.expected div { |
opacity: 0.7; |
} |
-.target div { |
+.target > div { |
height: 20px; |
- background-color: green; |
-} |
- |
-.target div ~ div { |
background-color: black; |
} |
+.target.expected > div { |
+ background-color: green; |
+} |
</style> |
<body> |
<template id='target-template'> |
@@ -27,6 +27,58 @@ |
<script> |
assertInterpolation({ |
property: '-webkit-column-gap', |
+ from: '', |
+ to: '40px', |
+}, [ |
+ {at: -0.3, is: '1px'}, |
+ {at: 0, is: '10px'}, |
+ {at: 0.3, is: '19px'}, |
+ {at: 0.6, is: '28px'}, |
+ {at: 1, is: '40px'}, |
+ {at: 1.5, is: '55px'}, |
+]); |
+ |
+assertInterpolation({ |
+ property: '-webkit-column-gap', |
+ from: 'initial', |
+ to: '20px', |
+}, [ |
+ {at: -0.3, is: '0px'}, |
+ {at: 0, is: '0px'}, |
+ {at: 0.3, is: '6px'}, |
+ {at: 0.6, is: '12px'}, |
+ {at: 1, is: '20px'}, |
+ {at: 1.5, is: '30px'}, |
+]); |
+ |
+assertInterpolation({ |
+ property: '-webkit-column-gap', |
+ from: 'inherit', |
+ to: '20px', |
+}, [ |
+ {at: -0.3, is: '111px'}, |
+ {at: 0, is: '90px'}, |
+ {at: 0.3, is: '69px'}, |
+ {at: 0.6, is: '48px'}, |
+ {at: 1, is: '20px'}, |
+ {at: 1.5, is: '0px'}, |
+]); |
+ |
+assertInterpolation({ |
+ property: '-webkit-column-gap', |
+ from: 'unset', |
+ to: '20px', |
+}, [ |
+ {at: -0.3, is: '0px'}, |
+ {at: 0, is: '0px'}, |
+ {at: 0.3, is: '6px'}, |
+ {at: 0.6, is: '12px'}, |
+ {at: 1, is: '20px'}, |
+ {at: 1.5, is: '30px'}, |
+]); |
+ |
+assertInterpolation({ |
+ property: '-webkit-column-gap', |
from: '0px', |
to: '100px' |
}, [ |