only-child-old.html (5967B)
1 <!DOCTYPE html> 2 <html class="reftest-wait foo"> 3 <title>View transitions: ensure :only-child is supported on view-transition-old</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 ::view-transition { 12 background-color: black; 13 } 14 html:only-child { 15 background-color: black; 16 } 17 :root:only-child { 18 background-color: black; 19 } 20 :only-child { 21 background-color: black; 22 } 23 .foo:only-child { 24 background-color: black; 25 } 26 27 ::view-transition-old(root) { 28 background-color: blue; 29 } 30 ::view-transition-old(target) { 31 background-color: blue; 32 } 33 ::view-transition-old(*) { 34 color: blue; 35 } 36 37 ::view-transition-old(root):only-child { 38 background-color: red; 39 } 40 ::view-transition-old(target):only-child { 41 background-color: red; 42 } 43 ::view-transition-old(*):only-child { 44 color: red; 45 } 46 47 </style> 48 <div id="target"></div> 49 50 <script> 51 let matchedColor = "rgb(255, 0, 0)"; 52 let notMatchedColor = "rgb(0, 0, 255)"; 53 54 promise_test(() => { 55 assert_implements(document.startViewTransition, "Missing document.startViewTransition"); 56 return new Promise(async (resolve, reject) => { 57 document.documentElement.style.viewTransitionName = "root"; 58 target.style.viewTransitionName = "none"; 59 let transition = document.startViewTransition(() => { 60 document.documentElement.style.viewTransitionName = "none"; 61 }); 62 63 transition.ready.then(() => { 64 let style = getComputedStyle(document.documentElement, "::view-transition-old(root)"); 65 if (style.backgroundColor == matchedColor && style.color == matchedColor) 66 resolve(); 67 else 68 reject(style.backgroundColor + " and " + style.color); 69 }); 70 }); 71 }, ":only-child should match because ::view-transition-new is not generated (root to none)"); 72 73 promise_test(() => { 74 assert_implements(document.startViewTransition, "Missing document.startViewTransition"); 75 return new Promise(async (resolve, reject) => { 76 document.documentElement.style.viewTransitionName = "root"; 77 target.style.viewTransitionName = "none"; 78 let transition = document.startViewTransition(); 79 80 transition.ready.then(() => { 81 let style = getComputedStyle(document.documentElement, "::view-transition-old(root)"); 82 if (style.backgroundColor == notMatchedColor && style.color == notMatchedColor) 83 resolve(); 84 else 85 reject(style.backgroundColor + " and " + style.color); 86 }); 87 }); 88 }, ":only-child should not match because ::view-transition-new is generated (root to root)"); 89 90 promise_test(() => { 91 assert_implements(document.startViewTransition, "Missing document.startViewTransition"); 92 return new Promise(async (resolve, reject) => { 93 document.documentElement.style.viewTransitionName = "root"; 94 target.style.viewTransitionName = "none"; 95 let transition = document.startViewTransition(() => { 96 document.documentElement.style.viewTransitionName = "none"; 97 target.style.viewTransitionName = "root"; 98 }); 99 100 transition.ready.then(() => { 101 let style = getComputedStyle(document.documentElement, "::view-transition-old(root)"); 102 if (style.backgroundColor == notMatchedColor && style.color == notMatchedColor) 103 resolve(); 104 else 105 reject(style.backgroundColor + " and " + style.color); 106 }); 107 }); 108 }, ":only-child should not match because ::view-transition-new is generated (root to element)"); 109 110 promise_test(() => { 111 assert_implements(document.startViewTransition, "Missing document.startViewTransition"); 112 return new Promise(async (resolve, reject) => { 113 target.style.viewTransitionName = "target"; 114 document.documentElement.style.viewTransitionName = "none"; 115 let transition = document.startViewTransition(() => { 116 target.style.viewTransitionName = "none"; 117 }); 118 119 transition.ready.then(() => { 120 let style = getComputedStyle( 121 document.documentElement, "::view-transition-old(target)"); 122 if (style.backgroundColor == matchedColor && style.color == matchedColor) 123 resolve(); 124 else 125 reject(style.backgroundColor + " and " + style.color); 126 }); 127 }); 128 }, ":only-child should match because ::view-transition-new is not generated (element to none)"); 129 130 promise_test(() => { 131 assert_implements(document.startViewTransition, "Missing document.startViewTransition"); 132 return new Promise(async (resolve, reject) => { 133 target.style.viewTransitionName = "root"; 134 document.documentElement.style.viewTransitionName = "none"; 135 let transition = document.startViewTransition(() => { 136 document.documentElement.style.viewTransitionName = "root"; 137 target.style.viewTransitionName = "none"; 138 }); 139 140 transition.ready.then(() => { 141 let style = getComputedStyle(document.documentElement, "::view-transition-old(root)"); 142 if (style.backgroundColor == notMatchedColor && style.color == notMatchedColor) 143 resolve(); 144 else 145 reject(style.backgroundColor + " and " + style.color); 146 }); 147 }); 148 }, ":only-child should not match because ::view-transition-new is generated (element to root)"); 149 150 promise_test(() => { 151 assert_implements(document.startViewTransition, "Missing document.startViewTransition"); 152 return new Promise(async (resolve, reject) => { 153 target.style.viewTransitionName = "target"; 154 document.documentElement.style.viewTransitionName = "none"; 155 let transition = document.startViewTransition(); 156 157 transition.ready.then(() => { 158 let style = getComputedStyle(document.documentElement, "::view-transition-old(target)"); 159 if (style.backgroundColor == notMatchedColor && style.color == notMatchedColor) 160 resolve(); 161 else 162 reject(style.backgroundColor + " and " + style.color); 163 }); 164 }); 165 }, ":only-child should not match because ::view-transition-new is generated (element to element)"); 166 </script>