gecko/layout/reftests/css-animations/mask-position-in-delay-1b.html at central · aosmond/gecko

History

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<!DOCTYPE html>

<title>mask-position animation in delay phase</title>

<style>

@keyframes holdMaskPosition {

from,to { mask-position: left top; }

}

#test {

height: 100px;

width: 100px;

mask-repeat: no-repeat;

mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"><rect x="0" y="0" width="25" height="25" fill="blue"/></svg>');

animation: holdMaskPosition 100s 100s infinite;

mask-position: center center;

}

#inner {

height: 100px;

width: 100px;

background-color: blue;

box-sizing: border-box;

/* Apply will-change property to force paint mask on mask layer */

border: 1px solid transparent;

will-change: transform;

}

</style>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

mask-position-in-delay-1b.html

mask-position-in-delay-1b.html

Files

mask-position-in-delay-1b.html

Latest commit

History

mask-position-in-delay-1b.html

File metadata and controls