only-child-new.html (5963B)
1 <!DOCTYPE html> 2 <html class="reftest-wait foo"> 3 <title>View transitions: ensure :only-child is supported on view-transition-new</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-new(root) { 28 background-color: blue; 29 } 30 ::view-transition-new(target) { 31 background-color: blue; 32 } 33 ::view-transition-new(*) { 34 color: blue; 35 } 36 37 ::view-transition-new(root):only-child { 38 background-color: red; 39 } 40 ::view-transition-new(target):only-child { 41 background-color: red; 42 } 43 ::view-transition-new(*):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 = "none"; 58 target.style.viewTransitionName = "none"; 59 let transition = document.startViewTransition(() => { 60 document.documentElement.style.viewTransitionName = "root"; 61 }); 62 63 transition.ready.then(() => { 64 let style = getComputedStyle(document.documentElement, "::view-transition-new(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-old is not generated (none to root)"); 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-new(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-old 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 = "none"; 94 target.style.viewTransitionName = "root"; 95 let transition = document.startViewTransition(() => { 96 document.documentElement.style.viewTransitionName = "root"; 97 target.style.viewTransitionName = "none"; 98 }); 99 100 transition.ready.then(() => { 101 let style = getComputedStyle(document.documentElement, "::view-transition-new(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-old is generated (element to root)"); 109 110 promise_test(() => { 111 assert_implements(document.startViewTransition, "Missing document.startViewTransition"); 112 return new Promise(async (resolve, reject) => { 113 target.style.viewTransitionName = "none"; 114 document.documentElement.style.viewTransitionName = "none"; 115 let transition = document.startViewTransition(() => { 116 target.style.viewTransitionName = "target"; 117 }); 118 119 transition.ready.then(() => { 120 let style = getComputedStyle(document.documentElement, "::view-transition-new(target)"); 121 if (style.backgroundColor == matchedColor && style.color == matchedColor) 122 resolve(); 123 else 124 reject(style.backgroundColor + " and " + style.color); 125 }); 126 }); 127 }, ":only-child should match because ::view-transition-old is not generated (none to element)"); 128 129 promise_test(() => { 130 assert_implements(document.startViewTransition, "Missing document.startViewTransition"); 131 return new Promise(async (resolve, reject) => { 132 target.style.viewTransitionName = "none"; 133 document.documentElement.style.viewTransitionName = "root"; 134 let transition = document.startViewTransition(() => { 135 document.documentElement.style.viewTransitionName = "none"; 136 target.style.viewTransitionName = "element"; 137 }); 138 139 transition.ready.then(() => { 140 let style = getComputedStyle(document.documentElement, "::view-transition-new(root)"); 141 if (style.backgroundColor == notMatchedColor && style.color == notMatchedColor) 142 resolve(); 143 else 144 reject(style.backgroundColor + " and " + style.color); 145 }); 146 }); 147 }, ":only-child should not match because ::view-transition-old is generated (root to element)"); 148 149 promise_test(() => { 150 assert_implements(document.startViewTransition, "Missing document.startViewTransition"); 151 return new Promise(async (resolve, reject) => { 152 target.style.viewTransitionName = "target"; 153 document.documentElement.style.viewTransitionName = "none"; 154 let transition = document.startViewTransition(); 155 156 transition.ready.then(() => { 157 let style = getComputedStyle(document.documentElement, "::view-transition-new(target)"); 158 if (style.backgroundColor == notMatchedColor && style.color == notMatchedColor) 159 resolve(); 160 else 161 reject(style.backgroundColor + " and " + style.color); 162 }); 163 }); 164 }, ":only-child should not match because ::view-transition-old is generated (element to element)"); 165 </script>