test_underlying_discrete_value.html (6290B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <script src="../testcommon.js"></script> 6 <body> 7 <div id="log"></div> 8 <script> 9 "use strict"; 10 11 // Tests that we correctly extract the underlying value when the animation 12 // type is 'discrete'. 13 const discreteTests = [ 14 { 15 stylesheet: { 16 "@keyframes keyframes": 17 "from { align-content: flex-start; } to { align-content: flex-end; } " 18 }, 19 expectedKeyframes: [ 20 { computedOffset: 0, alignContent: "flex-start" }, 21 { computedOffset: 1, alignContent: "flex-end" } 22 ], 23 explanation: "Test for fully-specified keyframes" 24 }, 25 { 26 stylesheet: { 27 "@keyframes keyframes": "from { align-content: flex-start; }" 28 }, 29 expectedKeyframes: [ 30 { computedOffset: 0, alignContent: "flex-start" }, 31 { computedOffset: 1, alignContent: "normal" } 32 ], 33 explanation: "Test for 0% keyframe only", 34 }, 35 { 36 stylesheet: { 37 "@keyframes keyframes": "to { align-content: flex-end; }" 38 }, 39 expectedKeyframes: [ 40 { computedOffset: 0, alignContent: "normal" }, 41 { computedOffset: 1, alignContent: "flex-end" } 42 ], 43 explanation: "Test for 100% keyframe only", 44 }, 45 { 46 stylesheet: { 47 "@keyframes keyframes": "50% { align-content: center; }", 48 "#target": "align-content: space-between;" 49 }, 50 expectedKeyframes: [ 51 { computedOffset: 0, alignContent: "space-between" }, 52 { computedOffset: 0.5, alignContent: "center" }, 53 { computedOffset: 1, alignContent: "space-between" } 54 ], 55 explanation: "Test for no 0%/100% keyframes " + 56 "and specified style on target element" 57 }, 58 { 59 stylesheet: { 60 "@keyframes keyframes": "50% { align-content: center; }" 61 }, 62 attributes: { 63 style: "align-content: space-between" 64 }, 65 expectedKeyframes: [ 66 { computedOffset: 0, alignContent: "space-between" }, 67 { computedOffset: 0.5, alignContent: "center" }, 68 { computedOffset: 1, alignContent: "space-between" } 69 ], 70 explanation: "Test for no 0%/100% keyframes " + 71 "and specified style on target element using style attribute" 72 }, 73 { 74 stylesheet: { 75 "@keyframes keyframes": "50% { align-content: center; }", 76 "#target": "align-content: inherit;" 77 }, 78 expectedKeyframes: [ 79 { computedOffset: 0, alignContent: "normal" }, 80 { computedOffset: 0.5, alignContent: "center" }, 81 { computedOffset: 1, alignContent: "normal" } 82 ], 83 explanation: "Test for no 0%/100% keyframes " + 84 "and 'inherit' specified on target element", 85 }, 86 { 87 stylesheet: { 88 "@keyframes keyframes": "50% { align-content: center; }", 89 ".target": "align-content: space-between;" 90 }, 91 attributes: { 92 class: "target" 93 }, 94 expectedKeyframes: [ 95 { computedOffset: 0, alignContent: "space-between" }, 96 { computedOffset: 0.5, alignContent: "center" }, 97 { computedOffset: 1, alignContent: "space-between" } 98 ], 99 explanation: "Test for no 0%/100% keyframes " + 100 "and specified style on target element using class selector" 101 }, 102 { 103 stylesheet: { 104 "@keyframes keyframes": "50% { align-content: center; }", 105 "div": "align-content: space-between;" 106 }, 107 expectedKeyframes: [ 108 { computedOffset: 0, alignContent: "space-between" }, 109 { computedOffset: 0.5, alignContent: "center" }, 110 { computedOffset: 1, alignContent: "space-between" } 111 ], 112 explanation: "Test for no 0%/100% keyframes " + 113 "and specified style on target element using type selector" 114 }, 115 { 116 stylesheet: { 117 "@keyframes keyframes": "50% { align-content: center; }", 118 "div": "align-content: space-between;", 119 ".target": "align-content: flex-start;", 120 "#target": "align-content: flex-end;" 121 }, 122 attributes: { 123 class: "target" 124 }, 125 expectedKeyframes: [ 126 { computedOffset: 0, alignContent: "flex-end" }, 127 { computedOffset: 0.5, alignContent: "center" }, 128 { computedOffset: 1, alignContent: "flex-end" } 129 ], 130 explanation: "Test for no 0%/100% keyframes " + 131 "and specified style on target element " + 132 "using ID selector that overrides class selector" 133 }, 134 { 135 stylesheet: { 136 "@keyframes keyframes": "50% { align-content: center; }", 137 "div": "align-content: space-between !important;", 138 ".target": "align-content: flex-start;", 139 "#target": "align-content: flex-end;" 140 }, 141 attributes: { 142 class: "target" 143 }, 144 expectedKeyframes: [ 145 { computedOffset: 0, alignContent: "space-between" }, 146 { computedOffset: 0.5, alignContent: "center" }, 147 { computedOffset: 1, alignContent: "space-between" } 148 ], 149 explanation: "Test for no 0%/100% keyframes " + 150 "and specified style on target element " + 151 "using important type selector that overrides other rules" 152 }, 153 ]; 154 155 discreteTests.forEach(testcase => { 156 test(t => { 157 if (testcase.skip) { 158 return; 159 } 160 addStyle(t, testcase.stylesheet); 161 162 const div = addDiv(t, { "id": "target" }); 163 if (testcase.attributes) { 164 for (let attributeName in testcase.attributes) { 165 div.setAttribute(attributeName, testcase.attributes[attributeName]); 166 } 167 } 168 div.style.animation = "keyframes 100s"; 169 170 const keyframes = div.getAnimations()[0].effect.getKeyframes(); 171 const expectedKeyframes = testcase.expectedKeyframes; 172 assert_equals(keyframes.length, expectedKeyframes.length, 173 `keyframes.length should be ${ expectedKeyframes.length }`); 174 175 keyframes.forEach((keyframe, index) => { 176 const expectedKeyframe = expectedKeyframes[index]; 177 assert_equals(keyframe.computedOffset, expectedKeyframe.computedOffset, 178 `computedOffset of keyframes[${ index }] should be ` + 179 `${ expectedKeyframe.computedOffset }`); 180 assert_equals(keyframe.alignContent, expectedKeyframe.alignContent, 181 `alignContent of keyframes[${ index }] should be ` + 182 `${ expectedKeyframe.alignContent }`); 183 }); 184 }, testcase.explanation); 185 }); 186 187 </script> 188 </body>