[svg] Make use-element-web-animations.html actually animate (#62697)

The test never ran. Two separate problems, both silent.

font-size is not a legal identifier in a JavaScript object literal, so
the script was a SyntaxError and no animation was ever started. Quoting
the key is not enough: a dashed keyframe key is not a valid keyframe
property name either, and it is dropped in Chrome 155, Firefox 158 and
Safari 26.4 and 27.0, all measured. That is already pinned by
web-animations/interfaces/KeyframeEffect/processing-a-keyframes-argument-001.html,
where 'font-size' sits in gNonAnimatableProps commented "Supported
property that uses dashes", and that test is 73/73 in all four engines.
So the key has to be fontSize.

With that fixed the animation ran, but in Safari and Firefox it slid
linearly from 120px to 80px, because steps(2, start) was on the empty
first keyframe. Per the effect value algorithm, keyframes with no value
for the target property are removed before interval selection, an
implicit keyframe with no easing is synthesized at offset 0 in their
place, and the transformed distance uses the easing of the first
interval endpoint. So the author's easing could never reach font-size,
and the rendering depended on when the screenshot was taken: it matched
the reference only at exactly currentTime 50000.

Moving the easing into the effect options makes the value flat across
the whole first half in all three engines, so the timing dependence is
gone everywhere. It also matches the sibling use-element-animations.html,
where steps(2, start) is the animation-level timing function.

The empty first keyframe is kept on purpose. The point of the test is
that each element starts from its own computed font-size, 120px for the
original and 40px for the use copy, so the start value must not be
written down.

Measured after the change, against use-element-transitions-ref.html: the
original text animates to 100px in all three engines and its bounding
box matches the reference, while the use copy stays at its inherited
40px. So the test now fails because the shadow tree instance gets no
mirrored animation, which needs ShadowAnimation and is implemented
nowhere, rather than because the script did not parse. It is still
expected to fail in every engine, and no expectation metadata changes.
1 file changed
tree: 3d74cf92dfa0a1fb9785c47861d2be96eb1c4ffc
  1. .github/
  2. .well-known/
  3. accelerometer/
  4. accessibility/
  5. accname/
  6. acid/
  7. ai/
  8. ambient-light/
  9. animation-worklet/
  10. annotation-model/
  11. annotation-protocol/
  12. annotation-vocab/
  13. apng/
  14. appmanifest/
  15. audio-output/
  16. audio-session/
  17. autoplay-policy-detection/
  18. avif/
  19. background-fetch/
  20. background-sync/
  21. badging/
  22. battery-status/
  23. beacon/
  24. bluetooth/
  25. captured-mouse-events/
  26. clear-site-data/
  27. client-hints/
  28. clipboard-apis/
  29. close-watcher/
  30. common/
  31. compat/
  32. compression/
  33. compute-pressure/
  34. conformance-checkers/
  35. connection-allowlist/
  36. console/
  37. contacts/
  38. container-timing/
  39. content-dpr/
  40. content-index/
  41. content-security-policy/
  42. contenteditable/
  43. cookies/
  44. cookiestore/
  45. core-aam/
  46. cors/
  47. cpu-performance/
  48. credential-management/
  49. css/
  50. cssom/
  51. custom-elements/
  52. delegated-ink/
  53. density-size-correction/
  54. deprecation-reporting/
  55. device-bound-session-credentials/
  56. device-memory/
  57. device-posture/
  58. digital-credentials/
  59. direct-sockets/
  60. docs/
  61. document-picture-in-picture/
  62. document-policy/
  63. dom/
  64. domparsing/
  65. domxpath/
  66. dpub-aam/
  67. dpub-aria/
  68. ecmascript/
  69. editing/
  70. element-timing/
  71. encoding/
  72. encoding-detection/
  73. encrypted-media/
  74. entries-api/
  75. event-timing/
  76. eventsource/
  77. eyedropper/
  78. fedcm/
  79. fenced-frame/
  80. fetch/
  81. file-system-access/
  82. FileAPI/
  83. focus/
  84. font-access/
  85. fonts/
  86. forced-colors-mode/
  87. fs/
  88. fullscreen/
  89. gamepad/
  90. generic-sensor/
  91. geolocation/
  92. geolocation-sensor/
  93. gif/
  94. gpc/
  95. graphics-aam/
  96. graphics-aria/
  97. gyroscope/
  98. hr-time/
  99. hsts/
  100. html/
  101. html-aam/
  102. html-longdesc/
  103. html-media-capture/
  104. html-ruby-extensions/
  105. https-upgrades/
  106. idle-detection/
  107. imagebitmap-renderingcontext/
  108. images/
  109. import-maps/
  110. IndexedDB/
  111. inert/
  112. infrastructure/
  113. input-device-capabilities/
  114. input-events/
  115. installedapp/
  116. interfaces/
  117. intersection-observer/
  118. intervention-reporting/
  119. is-input-pending/
  120. jpegxl/
  121. js/
  122. js-self-profiling/
  123. keyboard-lock/
  124. keyboard-map/
  125. largest-contentful-paint/
  126. layout-instability/
  127. loading/
  128. long-animation-frame/
  129. longtask-timing/
  130. magnetometer/
  131. managed/
  132. mathml/
  133. measure-memory/
  134. media/
  135. media-capabilities/
  136. media-playback-quality/
  137. media-source/
  138. mediacapture-extensions/
  139. mediacapture-fromelement/
  140. mediacapture-handle/
  141. mediacapture-image/
  142. mediacapture-insertable-streams/
  143. mediacapture-record/
  144. mediacapture-region/
  145. mediacapture-streams/
  146. mediasession/
  147. merchant-validation/
  148. mimesniff/
  149. mixed-content/
  150. mst-content-hint/
  151. nav-tracking-mitigations/
  152. navigation-api/
  153. navigation-timing/
  154. netinfo/
  155. network-error-logging/
  156. notifications/
  157. old-tests/
  158. orientation-event/
  159. orientation-sensor/
  160. page-lifecycle/
  161. page-visibility/
  162. paint-timing/
  163. payment-method-basic-card/
  164. payment-method-id/
  165. payment-method-manifest/
  166. payment-request/
  167. performance-timeline/
  168. periodic-background-sync/
  169. permissions/
  170. permissions-policy/
  171. permissions-request/
  172. permissions-revoke/
  173. picture-in-picture/
  174. png/
  175. pointerevents/
  176. pointerlock/
  177. preload/
  178. presentation-api/
  179. print/
  180. private-click-measurement/
  181. proximity/
  182. push-api/
  183. quirks/
  184. referrer-policy/
  185. remote-playback/
  186. reporting/
  187. requestidlecallback/
  188. resize-observer/
  189. resource-timing/
  190. resources/
  191. sanitizer-api/
  192. savedata/
  193. scheduler/
  194. screen-capture/
  195. screen-details/
  196. screen-orientation/
  197. screen-wake-lock/
  198. scroll-animations/
  199. scroll-performance-timing/
  200. scroll-to-text-fragment/
  201. secure-contexts/
  202. secure-payment-confirmation/
  203. selection/
  204. serial/
  205. server-timing/
  206. service-workers/
  207. shadow-dom/
  208. shape-detection/
  209. signed-exchange/
  210. soft-navigation-heuristics/
  211. speculation-rules/
  212. speech-api/
  213. storage/
  214. storage-access-api/
  215. streams/
  216. subapps/
  217. subresource-integrity/
  218. svg/
  219. svg-aam/
  220. third_party/
  221. timing-entrytypes-registry/
  222. tools/
  223. touch-events/
  224. trust-tokens/
  225. trusted-types/
  226. ua-client-hints/
  227. uievents/
  228. upgrade-insecure-requests/
  229. url/
  230. urlpattern/
  231. user-timing/
  232. vibration/
  233. video-rvfc/
  234. viewport/
  235. viewport-segments/
  236. virtual-keyboard/
  237. visual-viewport/
  238. wai-aria/
  239. wasm/
  240. web-animations/
  241. web-based-payment-handler/
  242. web-bundle/
  243. web-extensions/
  244. web-install/
  245. web-locks/
  246. web-nfc/
  247. web-otp/
  248. web-share/
  249. webaudio/
  250. webauthn/
  251. webcodecs/
  252. WebCryptoAPI/
  253. webdriver/
  254. webgl/
  255. webgpu/
  256. webhid/
  257. webidl/
  258. webmcp/
  259. webmessaging/
  260. webmidi/
  261. webnn/
  262. webrtc/
  263. webrtc-encoded-transform/
  264. webrtc-extensions/
  265. webrtc-ice/
  266. webrtc-identity/
  267. webrtc-priority/
  268. webrtc-stats/
  269. webrtc-svc/
  270. websockets/
  271. webstorage/
  272. webtransport/
  273. webusb/
  274. webvtt/
  275. webxr/
  276. window-management/
  277. workers/
  278. worklets/
  279. x-frame-options/
  280. xhr/
  281. xml/
  282. .azure-pipelines.yml
  283. .gitattributes
  284. .gitignore
  285. .mailmap
  286. .python-version
  287. .taskcluster.yml
  288. CODE_OF_CONDUCT.md
  289. CODEOWNERS
  290. CONTRIBUTING.md
  291. LICENSE.md
  292. lint.ignore
  293. README.md
  294. wpt
  295. wpt.py
README.md

The web-platform-tests Project

Taskcluster CI Status documentation manifest Python 3

The web-platform-tests Project is a cross-browser test suite for the Web-platform stack. Writing tests in a way that allows them to be run in all browsers gives browser projects confidence that they are shipping software that is compatible with other implementations, and that later implementations will be compatible with their implementations. This in turn gives Web authors/developers confidence that they can actually rely on the Web platform to deliver on the promise of working across browsers and devices without needing extra layers of abstraction to paper over the gaps left by specification editors and implementors.

The most important sources of information and activity are:

  • github.com/web-platform-tests/wpt: the canonical location of the project's source code revision history and the discussion forum for changes to the code
  • web-platform-tests.org: the documentation website; details how to set up the project, how to write tests, how to give and receive peer review, how to serve as an administrator, and more
  • wpt.live: a public deployment of the test suite, allowing anyone to run the tests by visiting from an Internet-enabled browser of their choice
  • wpt.fyi: an archive of test results collected from an array of web browsers on a regular basis
  • Real-time chat room: the wpt:matrix.org matrix channel; includes participants located around the world, but busiest during the European working day.
  • Mailing list: a public and low-traffic discussion list
  • RFCs: a repo for requesting comments on substantial changes that would impact other stakeholders or users; people who work on WPT infra are encouraged to watch the repo.

If you'd like clarification about anything, don't hesitate to ask in the chat room or on the mailing list.

Setting Up the Repo

Clone or otherwise get https://github.com/web-platform-tests/wpt.

Note: because of the frequent creation and deletion of branches in this repo, it is recommended to “prune” stale branches when fetching updates, i.e. use git pull --prune (or git fetch -p && git merge).

Running the Tests

See the documentation website and in particular the system setup for running tests locally.

Command Line Tools

The wpt command provides a frontend to a variety of tools for working with and running web-platform-tests. Some of the most useful commands are:

  • wpt serve - For starting the wpt http server
  • wpt run - For running tests in a browser
  • wpt lint - For running the lint against all tests
  • wpt manifest - For updating or generating a MANIFEST.json test manifest
  • wpt install - For installing the latest release of a browser or webdriver server on the local machine.
  • wpt serve-wave - For starting the wpt http server and the WAVE test runner. For more details on how to use the WAVE test runner see the documentation.

Windows Notes

On Windows wpt commands must be prefixed with python or the path to the python binary (if python is not in your %PATH%).

python wpt [command]

Alternatively, you may also use Bash on Ubuntu on Windows in the Windows 10 Anniversary Update build, then access your windows partition from there to launch wpt commands.

Please make sure git and your text editor do not automatically convert line endings, as it will cause lint errors. For git, please set git config core.autocrlf false in your working tree.

Publication

The master branch is automatically synced to wpt.live and w3c-test.org.

Contributing

Save the Web, Write Some Tests!

Absolutely everyone is welcome to contribute to test development. No test is too small or too simple, especially if it corresponds to something for which you've noted an interoperability bug in a browser.

The way to contribute is just as usual:

  • Fork this repository (and make sure you're still relatively in sync with it if you forked a while ago).
  • Create a branch for your changes: git checkout -b topic.
  • Make your changes.
  • Run ./wpt lint as described above.
  • Commit locally and push that to your repo.
  • Create a pull request based on the above.

AI Policy

Use of LLMs to help author tests is generally acceptable, but every change must be attributable to a human who understands and can take responsibility for the proposed change.

Use of LLMs to participate in discussions is generally not acceptable; any LLM-generated content must either be from a bot account or contained inside a <blockquote> (for short contributions of at most one paragraph) or <details> element.

For full details see the Policy for LLM Use

Issues with web-platform-tests

If you spot an issue with a test and are not comfortable providing a pull request per above to fix it, please file a new issue. Thank you!