pseudo-with-classes-match-wildcard-no-star.html (1117B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <title>View transition classes: selector should match with wildcard</title> 4 <link rel="help" href="https://drafts.csswg.org/css-transitions-2/"> 5 <link rel="author" href="mailto:nrosenthal@chromium.org"> 6 <link rel="match" href="pseudo-with-classes-ref.html"> 7 <script src="/common/rendering-utils.js"></script> 8 <script src="/common/reftest-wait.js"></script> 9 10 <style> 11 div { 12 width: 100px; 13 height: 100px; 14 position: absolute; 15 } 16 17 #target { 18 background: green; 19 view-transition-name: target; 20 view-transition-class: cls; 21 } 22 23 ::view-transition-group(*) { 24 animation-play-state: paused; 25 } 26 27 ::view-transition-new(.cls), 28 ::view-transition-old(.cls) { 29 left: 100px; 30 } 31 32 ::view-transition-old(*) { 33 animation: unset; 34 opacity: 1; 35 } 36 37 ::view-transition-new(*) { 38 animation: unset; 39 opacity: 0; 40 } 41 42 </style> 43 <div id=target></div> 44 45 <script> 46 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 47 48 window.addEventListener("load", () => { 49 document.startViewTransition().ready.then(takeScreenshot); 50 }); 51 </script>