font-style-interpolation.html (3127B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>font-style interpolation</title> 4 <link rel="help" href="https://drafts.csswg.org/css-fonts-3/#propdef-font-style"> 5 <meta name="assert" content="Font-style should be animated smoothly."> 6 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/css/support/interpolation-testcommon.js"></script> 10 11 <style> 12 .container { 13 font-style: oblique 20deg; 14 } 15 .container2 { 16 font-style: oblique 5deg; 17 } 18 .target { 19 display: inline-block; 20 font: 100px sans-serif; 21 font-style: normal; 22 } 23 .expected { 24 color: green; 25 margin-right: 30px; 26 } 27 </style> 28 29 <body> 30 <template id="target-template"> 31 <span class="container"> 32 <div class="target">TT</div> 33 </span> 34 </template> 35 36 <span id="inv-container" class="container"> 37 <div id="inv-target" class="target">TT</div> 38 </span> 39 </body> 40 41 <script> 42 test_interpolation({ 43 property: 'font-style', 44 from: 'normal', 45 to: 'oblique 10deg' 46 }, [ 47 {at: -2, expect: 'oblique -20deg'}, 48 {at: -0.25, expect: 'oblique -2.5deg'}, 49 {at: 0, expect: 'normal'}, 50 {at: 0.3, expect: 'oblique 3deg'}, 51 {at: 0.6, expect: 'oblique 6deg'}, 52 {at: 1, expect: 'oblique 10deg'}, 53 {at: 1.5, expect: 'oblique 15deg'}, 54 ]); 55 56 test_interpolation({ 57 property: 'font-style', 58 from: 'oblique 5deg', 59 to: 'oblique 15deg' 60 }, [ 61 { at: -2, expect: 'oblique -15deg' }, 62 { at: -0.25, expect: 'oblique 2.5deg' }, 63 { at: 0, expect: 'oblique 5deg' }, 64 { at: 0.3, expect: 'oblique 8deg' }, 65 { at: 0.6, expect: 'oblique 11deg' }, 66 { at: 1, expect: 'oblique 15deg' }, 67 { at: 1.5, expect: 'oblique 20deg' }, 68 ]); 69 70 test_interpolation({ 71 property: 'font-style', 72 from: 'initial', 73 to: 'inherit' 74 }, [ 75 { at: -2, expect: 'oblique -40deg' }, 76 { at: -0.25, expect: 'oblique -5deg' }, 77 { at: 0, expect: 'normal' }, 78 { at: 0.3, expect: 'oblique 6deg' }, 79 { at: 0.6, expect: 'oblique 12deg' }, 80 { at: 1, expect: 'oblique 20deg' }, 81 { at: 1.5, expect: 'oblique 30deg' }, 82 ]); 83 84 test_interpolation({ 85 property: 'font-style', 86 from: 'oblique 20deg', 87 to: 'normal' 88 }, [ 89 { at: -1, expect: 'oblique 40deg' }, 90 { at: 0, expect: 'oblique 20deg' }, 91 { at: 0.5, expect: 'oblique 10deg' }, 92 { at: 1, expect: 'normal' }, 93 { at: 1.5, expect: 'oblique -10deg' }, 94 ]); 95 96 test_interpolation({ 97 property: 'font-style', 98 from: 'oblique -90deg', 99 to: 'oblique 90deg' 100 }, [ 101 { at: -2, expect: 'oblique -90deg' }, 102 { at: -1, expect: 'oblique -90deg' }, 103 { at: 0, expect: 'oblique -90deg' }, 104 { at: 0.5, expect: 'normal' }, 105 { at: 1, expect: 'oblique 90deg' }, 106 { at: 1.5, expect: 'oblique 90deg' }, 107 ]); 108 109 test(t => { 110 var container = document.getElementById('inv-container'); 111 var target = document.getElementById('inv-target'); 112 var anim = target.animate({ fontStyle: ['normal', 'inherit'] }, 1000); 113 anim.pause(); 114 anim.currentTime = 500; 115 assert_equals(getComputedStyle(target).fontStyle, 'oblique 10deg'); 116 117 container.setAttribute('class', 'container2'); 118 assert_equals(getComputedStyle(target).fontStyle, 'oblique 2.5deg'); 119 }, "An interpolation to inherit updates correctly on a parent style change."); 120 121 </script>