Index: LayoutTests/animations/interpolation/font-weight-interpolation.html |
diff --git a/LayoutTests/animations/interpolation/font-weight-interpolation.html b/LayoutTests/animations/interpolation/font-weight-interpolation.html |
index 3275c4a634773a0cd34fe206740f27c81c0297e4..540b1127ec62d0b92133c9d02e7c15a91d50de22 100644 |
--- a/LayoutTests/animations/interpolation/font-weight-interpolation.html |
+++ b/LayoutTests/animations/interpolation/font-weight-interpolation.html |
@@ -1,91 +1,150 @@ |
-<!doctype html> |
+<!DOCTYPE html> |
<style> |
- @font-face { |
- font-family: 'WebKit WeightWatcher'; |
- font-weight: 100; |
- src: url('../../resources/WebKitWeightWatcher100.ttf'); |
- } |
- @font-face { |
- font-family: 'WebKit WeightWatcher'; |
- font-weight: 200; |
- src: url('../../resources/WebKitWeightWatcher200.ttf'); |
- } |
- @font-face { |
- font-family: 'WebKit WeightWatcher'; |
- font-weight: 300; |
- src: url('../../resources/WebKitWeightWatcher300.ttf'); |
- } |
- @font-face { |
- font-family: 'WebKit WeightWatcher'; |
- font-weight: 400; |
- src: url('../../resources/WebKitWeightWatcher400.ttf'); |
- } |
- @font-face { |
- font-family: 'WebKit WeightWatcher'; |
- font-weight: 500; |
- src: url('../../resources/WebKitWeightWatcher500.ttf'); |
- } |
- @font-face { |
- font-family: 'WebKit WeightWatcher'; |
- font-weight: 600; |
- src: url('../../resources/WebKitWeightWatcher600.ttf'); |
- } |
- @font-face { |
- font-family: 'WebKit WeightWatcher'; |
- font-weight: 700; |
- src: url('../../resources/WebKitWeightWatcher700.ttf'); |
- } |
- @font-face { |
- font-family: 'WebKit WeightWatcher'; |
- font-weight: 800; |
- src: url('../../resources/WebKitWeightWatcher800.ttf'); |
- } |
- @font-face { |
- font-family: 'WebKit WeightWatcher'; |
- font-weight: 900; |
- src: url('../../resources/WebKitWeightWatcher900.ttf'); |
- } |
- |
- .target { |
- display: inline-block; |
- font-family: 'WebKit WeightWatcher'; |
- font-size: 20px; |
- } |
- .expected { |
- color: green; |
- margin-right: 30px; |
- } |
+@font-face { |
+ font-family: 'WebKit WeightWatcher'; |
+ font-weight: 100; |
+ src: url('../../resources/WebKitWeightWatcher100.ttf'); |
+} |
+@font-face { |
+ font-family: 'WebKit WeightWatcher'; |
+ font-weight: 200; |
+ src: url('../../resources/WebKitWeightWatcher200.ttf'); |
+} |
+@font-face { |
+ font-family: 'WebKit WeightWatcher'; |
+ font-weight: 300; |
+ src: url('../../resources/WebKitWeightWatcher300.ttf'); |
+} |
+@font-face { |
+ font-family: 'WebKit WeightWatcher'; |
+ font-weight: 400; |
+ src: url('../../resources/WebKitWeightWatcher400.ttf'); |
+} |
+@font-face { |
+ font-family: 'WebKit WeightWatcher'; |
+ font-weight: 500; |
+ src: url('../../resources/WebKitWeightWatcher500.ttf'); |
+} |
+@font-face { |
+ font-family: 'WebKit WeightWatcher'; |
+ font-weight: 600; |
+ src: url('../../resources/WebKitWeightWatcher600.ttf'); |
+} |
+@font-face { |
+ font-family: 'WebKit WeightWatcher'; |
+ font-weight: 700; |
+ src: url('../../resources/WebKitWeightWatcher700.ttf'); |
+} |
+@font-face { |
+ font-family: 'WebKit WeightWatcher'; |
+ font-weight: 800; |
+ src: url('../../resources/WebKitWeightWatcher800.ttf'); |
+} |
+@font-face { |
+ font-family: 'WebKit WeightWatcher'; |
+ font-weight: 900; |
+ src: url('../../resources/WebKitWeightWatcher900.ttf'); |
+} |
+.parent { |
+ font-weight: 500; |
+} |
+.target { |
+ display: inline-block; |
+ font-family: 'WebKit WeightWatcher'; |
+ font-size: 20px; |
+ font-weight: 700; |
+} |
+.expected { |
+ color: green; |
+ margin-right: 30px; |
+} |
</style> |
<template id="target-template">A</template> |
<script src="resources/interpolation-test.js"></script> |
<script> |
- assertInterpolation({ |
- property: 'font-weight', |
- from: '100', |
- to: '900' |
- }, [ |
- {at: 0/8, is: '100'}, |
- {at: 1/8, is: '200'}, |
- {at: 2/8, is: '300'}, |
- {at: 3/8, is: '400'}, |
- {at: 4/8, is: '500'}, |
- {at: 5/8, is: '600'}, |
- {at: 6/8, is: '700'}, |
- {at: 7/8, is: '800'}, |
- {at: 8/8, is: '900'}, |
+assertInterpolation({ |
+ property: 'font-weight', |
+ from: '', |
+ to: '900', |
+}, [ |
+ {at: -0.3, is: '600'}, |
+ {at: 0, is: 'bold'}, |
+ {at: 0.3, is: '800'}, |
+ {at: 0.5, is: '800'}, |
+ {at: 0.6, is: '800'}, |
+ {at: 1, is: '900'}, |
+ {at: 1.5, is: '900'}, |
+]); |
+ |
+assertInterpolation({ |
+ property: 'font-weight', |
+ from: 'initial', |
+ to: '900', |
+}, [ |
+ {at: -0.3, is: '300'}, |
+ {at: 0, is: 'normal'}, |
+ {at: 0.3, is: '600'}, |
+ {at: 0.5, is: 'bold'}, |
+ {at: 0.6, is: 'bold'}, |
+ {at: 1, is: '900'}, |
+ {at: 1.5, is: '900'}, |
+]); |
+ |
+assertInterpolation({ |
+ property: 'font-weight', |
+ from: 'inherit', |
+ to: '900', |
+}, [ |
+ {at: -0.3, is: 'normal'}, |
+ {at: 0, is: '500'}, |
+ {at: 0.3, is: '600'}, |
+ {at: 0.5, is: 'bold'}, |
+ {at: 0.6, is: 'bold'}, |
+ {at: 1, is: '900'}, |
+ {at: 1.5, is: '900'}, |
+]); |
+ |
+assertInterpolation({ |
+ property: 'font-weight', |
+ from: 'unset', |
+ to: '900', |
+}, [ |
+ {at: -0.3, is: 'normal'}, |
+ {at: 0, is: '500'}, |
+ {at: 0.3, is: '600'}, |
+ {at: 0.5, is: 'bold'}, |
+ {at: 0.6, is: 'bold'}, |
+ {at: 1, is: '900'}, |
+ {at: 1.5, is: '900'}, |
+]); |
+ |
+assertInterpolation({ |
+ property: 'font-weight', |
+ from: '100', |
+ to: '900' |
+ }, [ |
+ {at: 0/8, is: '100'}, |
+ {at: 1/8, is: '200'}, |
+ {at: 2/8, is: '300'}, |
+ {at: 3/8, is: '400'}, |
+ {at: 4/8, is: '500'}, |
+ {at: 5/8, is: '600'}, |
+ {at: 6/8, is: '700'}, |
+ {at: 7/8, is: '800'}, |
+ {at: 8/8, is: '900'}, |
- {at: 0.10/8, is: '100'}, |
- {at: 0.49/8, is: '100'}, |
- {at: 0.50/8, is: '200'}, |
- {at: 0.51/8, is: '200'}, |
- {at: 0.90/8, is: '200'}, |
- {at: 7.10/8, is: '800'}, |
- {at: 7.49/8, is: '800'}, |
- {at: 7.50/8, is: '900'}, |
- {at: 7.51/8, is: '900'}, |
+ {at: 0.10/8, is: '100'}, |
+ {at: 0.49/8, is: '100'}, |
+ {at: 0.50/8, is: '200'}, |
+ {at: 0.51/8, is: '200'}, |
+ {at: 0.90/8, is: '200'}, |
+ {at: 7.10/8, is: '800'}, |
+ {at: 7.49/8, is: '800'}, |
+ {at: 7.50/8, is: '900'}, |
+ {at: 7.51/8, is: '900'}, |
- {at: -0.1, is: '100'}, |
- {at: 1.1, is: '900'}, |
- ]); |
+ {at: -0.1, is: '100'}, |
+ {at: 1.1, is: '900'}, |
+]); |
</script> |