style-inheritance.html (5360B)
1 <!DOCTYPE html> 2 <html class=paused> 3 <title>View transitions: ensure correct style inheritance for pseudo tree</title> 4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> 5 <link rel="author" href="mailto:khushalsagar@chromium.org"> 6 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 10 <style> 11 .paused::view-transition-group(*) { 12 animation-play-state: paused; 13 } 14 15 ::view-transition { 16 background-color: red; 17 } 18 19 ::view-transition-group(*) { 20 background-color: inherit; 21 color: blue; 22 animation-duration: 0.321s; 23 animation-delay: 0.05s; 24 animation-iteration-count: 2; 25 animation-direction: reverse; 26 animation-timing-function: linear; 27 } 28 29 ::view-transition-image-pair(*) { 30 color: inherit; 31 overflow-x: clip; 32 } 33 34 ::view-transition-old(*), ::view-transition-new(*) { 35 overflow-x: inherit; 36 } 37 </style> 38 39 <script> 40 promise_test(async () => { 41 assert_implements(document.startViewTransition, "Missing document.startViewTransition"); 42 let transition = document.startViewTransition(); 43 await transition.ready; 44 45 assert_equals(getComputedStyle(document.documentElement, "::view-transition").backgroundColor, "rgb(255, 0, 0)", "::view-transition"); 46 47 assert_equals(getComputedStyle(document.documentElement, "::view-transition-group(root)").backgroundColor, "rgb(255, 0, 0)", "group"); 48 assert_equals(getComputedStyle(document.documentElement, "::view-transition-group(root)").color, "rgb(0, 0, 255)", "group"); 49 assert_equals(getComputedStyle(document.documentElement, "::view-transition-group(root)").animationDuration, "0.321s", "group"); 50 assert_equals(getComputedStyle(document.documentElement, "::view-transition-group(root)").animationDelay, "0.05s", "group"); 51 assert_equals(getComputedStyle(document.documentElement, "::view-transition-group(root)").animationTimingFunction, "linear", "group"); 52 assert_equals(getComputedStyle(document.documentElement, "::view-transition-group(root)").animationIterationCount, "2", "group"); 53 assert_equals(getComputedStyle(document.documentElement, "::view-transition-group(root)").animationDirection, "reverse", "group"); 54 assert_equals(getComputedStyle(document.documentElement, "::view-transition-group(root)").animationPlayState, "paused", "group"); 55 56 assert_equals(getComputedStyle(document.documentElement, "::view-transition-image-pair(root)").color, "rgb(0, 0, 255)", "wrapper"); 57 assert_equals(getComputedStyle(document.documentElement, "::view-transition-image-pair(root)").overflowX, "clip", "wrapper"); 58 assert_equals(getComputedStyle(document.documentElement, "::view-transition-image-pair(root)").animationDuration, "0.321s", "wrapper"); 59 assert_equals(getComputedStyle(document.documentElement, "::view-transition-image-pair(root)").animationDelay, "0.05s", "wrapper"); 60 assert_equals(getComputedStyle(document.documentElement, "::view-transition-image-pair(root)").animationTimingFunction, "linear", "wrapper"); 61 assert_equals(getComputedStyle(document.documentElement, "::view-transition-image-pair(root)").animationIterationCount, "2", "wrapper"); 62 assert_equals(getComputedStyle(document.documentElement, "::view-transition-image-pair(root)").animationDirection, "reverse", "wrapper"); 63 assert_equals(getComputedStyle(document.documentElement, "::view-transition-image-pair(root)").animationPlayState, "paused", "wrapper"); 64 65 assert_equals(getComputedStyle(document.documentElement, "::view-transition-old(root)").overflowX, "clip", "outgoing"); 66 assert_equals(getComputedStyle(document.documentElement, "::view-transition-old(root)").animationDuration, "0.321s", "outgoing"); 67 assert_equals(getComputedStyle(document.documentElement, "::view-transition-old(root)").animationDelay, "0.05s", "outgoing"); 68 assert_equals(getComputedStyle(document.documentElement, "::view-transition-old(root)").animationTimingFunction, "linear", "outgoing"); 69 assert_equals(getComputedStyle(document.documentElement, "::view-transition-old(root)").animationIterationCount, "2", "outgoing"); 70 assert_equals(getComputedStyle(document.documentElement, "::view-transition-old(root)").animationDirection, "reverse", "outgoing"); 71 assert_equals(getComputedStyle(document.documentElement, "::view-transition-old(root)").animationPlayState, "paused", "outgoing"); 72 73 assert_equals(getComputedStyle(document.documentElement, "::view-transition-new(root)").overflowX, "clip", "incoming"); 74 assert_equals(getComputedStyle(document.documentElement, "::view-transition-new(root)").animationDuration, "0.321s", "incoming"); 75 assert_equals(getComputedStyle(document.documentElement, "::view-transition-new(root)").animationDelay, "0.05s", "incoming"); 76 assert_equals(getComputedStyle(document.documentElement, "::view-transition-new(root)").animationTimingFunction, "linear", "incoming"); 77 assert_equals(getComputedStyle(document.documentElement, "::view-transition-new(root)").animationIterationCount, "2", "incoming"); 78 assert_equals(getComputedStyle(document.documentElement, "::view-transition-new(root)").animationDirection, "reverse", "incoming"); 79 assert_equals(getComputedStyle(document.documentElement, "::view-transition-new(root)").animationPlayState, "paused", "incoming"); 80 81 document.documentElement.classList.remove("paused"); 82 await transition.finished; 83 }, "style inheritance of pseudo elements"); 84 </script>