playwright/tests/assets/rotate-z.html

<html>
  <head>
    <style type="text/css">
      .square {
        position: absolute;
        top: 0;
        left: 0;
        width: 200px;
        height: 100px;
        background-color: red;
        animation-name: z-spin;
        animation-duration: 5s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
      }

      @keyframes z-spin {
        0%    { transform: rotateZ(0deg); }
        100%  { transform: rotateZ(360deg); }
      }
    </style>
  </head>
  <body >
      <div class="square"></div>
  </body>
</html>
test(screencast): test that css animations are recorded (#3427) 2020-08-13 19:12:13 +03:00			`<html>`
			`<head>`
			`<style type="text/css">`
			`.square {`
			`position: absolute;`
			`top: 0;`
			`left: 0;`
			`width: 200px;`
			`height: 100px;`
			`background-color: red;`
			`animation-name: z-spin;`
			`animation-duration: 5s;`
			`animation-iteration-count: infinite;`
			`animation-timing-function: linear;`
			`}`
feat: introduce `disableAnimations` option for screenshots (#11870) This option stops all kinds of CSS animations while doing screenshot: - CSS animations - CSS transitions - Web Animations Animations get different treatment depending on animation duration: - finite animations are fast-forwarded to its end, issuing the `transitionend` event. - Infinite animations are resetted to its beginning, and then resumed after the screenshot. References #9938, fixes #11912 2022-02-09 23:52:11 +03:00
test(screencast): test that css animations are recorded (#3427) 2020-08-13 19:12:13 +03:00			`@keyframes z-spin {`
			`0% { transform: rotateZ(0deg); }`
			`100% { transform: rotateZ(360deg); }`
			`}`
			`</style>`
			`</head>`
			`<body >`
			`<div class="square"></div>`
			`</body>`
			`</html>`