after-change-style-inherited.html (6329B)
1 <!DOCTYPE html> 2 <title>CSS Transitions Test: trigger transitions on inherited after-change styles</title> 3 <link rel="help" href="https://drafts.csswg.org/css-transitions-1/#after-change-style"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 #t1 :is(.outer, .inner) { transition: color 1000s steps(2, start); } 8 #t1 .outer { color: red; } 9 #t1 .inner { color: black; } 10 #t1 .outer.green { color: lime; } 11 #t1 .outer.green .inner { color: unset; } 12 </style> 13 <div id="t1"> 14 <div class="outer"> 15 <div> 16 <div class="inner"></div> 17 </div> 18 </div> 19 </div> 20 <script> 21 test(() => { 22 const outer = document.querySelector("#t1 .outer"); 23 const inner = document.querySelector("#t1 .inner"); 24 outer.offsetTop; 25 assert_equals(getComputedStyle(outer).color, "rgb(255, 0, 0)", 26 ".outer initially red"); 27 assert_equals(getComputedStyle(inner).color, "rgb(0, 0, 0)", 28 ".inner initially black"); 29 outer.classList.add("green"); 30 assert_equals(getComputedStyle(outer).color, "rgb(128, 128, 0)", 31 ".outer halfway between red and lime"); 32 assert_equals(getComputedStyle(inner).color, "rgb(0, 128, 0)", 33 ".inner halfway between black and lime"); 34 }, "Start .inner transition based on inherited after-change color from .outer (lime)"); 35 </script> 36 37 <style> 38 #t2 :is(.outer, .inner) { transition: background-color 1000s steps(2, start); } 39 #t2 .outer { background-color: red; } 40 #t2 .inner { background-color: black; } 41 #t2 .outer.green { background-color: lime; } 42 #t2 .outer.green div { background-color: inherit; } 43 </style> 44 <div id="t2"> 45 <div class="outer"> 46 <div> 47 <div class="inner"></div> 48 </div> 49 </div> 50 </div> 51 <script> 52 test(() => { 53 const outer = document.querySelector("#t2 .outer"); 54 const inner = document.querySelector("#t2 .inner"); 55 outer.offsetTop; 56 assert_equals(getComputedStyle(outer).backgroundColor, "rgb(255, 0, 0)", 57 ".outer initially red"); 58 assert_equals(getComputedStyle(inner).backgroundColor, "rgb(0, 0, 0)", 59 ".inner initially black"); 60 outer.classList.add("green"); 61 assert_equals(getComputedStyle(outer).backgroundColor, "rgb(128, 128, 0)", 62 ".outer halfway between red and lime"); 63 assert_equals(getComputedStyle(inner).backgroundColor, "rgb(0, 128, 0)", 64 ".inner halfway between black and lime"); 65 }, "Start .inner transition based on inherited after-change background-color from .outer (lime)"); 66 </script> 67 68 <style> 69 #t3 .trans { 70 transition: 1000s steps(2, start); 71 transition-property: color, word-spacing; 72 } 73 74 #t3 .a2 { color: red; } 75 #t3 .a3 { color: black; } 76 #t3 .a2.green { color: lime; } 77 #t3 .a2.green .a3 { color: unset; } 78 79 #t3 .a1 { word-spacing: 17px; } 80 #t3 .a3 { word-spacing: 0px; } 81 #t3 .a1.wide { word-spacing: 100px; } 82 #t3 .a1.wide .a3 { word-spacing: unset; } 83 </style> 84 <div id="t3"> 85 <div class="trans a1"> 86 <div style="color:pink"> 87 <div class="trans a2"> 88 <div class="trans a3"></div> 89 </div> 90 </div> 91 </div> 92 </div> 93 </div> 94 <script> 95 const a1 = document.querySelector("#t3 .a1"); 96 const a2 = document.querySelector("#t3 .a2"); 97 const a3 = document.querySelector("#t3 .a3"); 98 99 test(() => { 100 assert_equals(getComputedStyle(a3).color, "rgb(0, 0, 0)", ".a3 color initially black"); 101 assert_equals(getComputedStyle(a3).wordSpacing, "0px", ".a3 word-spacing initially 0px"); 102 }, "Initial computed styles"); 103 104 test(() => { 105 a1.classList.add("wide"); 106 a2.classList.add("green"); 107 assert_equals(getComputedStyle(a3).color, "rgb(0, 128, 0)", ".a3 color transitioning between black and lime"); 108 assert_equals(getComputedStyle(a3).wordSpacing, "50px", ".a3 word-spacing transitioning between 0px and 100px"); 109 }, "Start inner transitions based on inherited after-change color and word-spacing from two different ancestors"); 110 </script> 111 112 <style> 113 #t4 :is(.outer, .inner) { transition: color 1000s steps(2, start); } 114 #t4 .outer { color: red; } 115 #t4 .inner { color: black; } 116 #t4 .outer.green { color: lime; } 117 #t4 .outer.green .inner { color: unset; } 118 @starting-style { 119 #t4 .outer.green { color: pink; } 120 } 121 </style> 122 <div id="t4"> 123 <div class="outer"> 124 <div> 125 <div class="inner"></div> 126 </div> 127 </div> 128 </div> 129 <script> 130 test(() => { 131 const outer = document.querySelector("#t4 .outer"); 132 const inner = document.querySelector("#t4 .inner"); 133 outer.offsetTop; 134 assert_equals(getComputedStyle(outer).color, "rgb(255, 0, 0)", 135 ".outer initially red"); 136 assert_equals(getComputedStyle(inner).color, "rgb(0, 0, 0)", 137 ".inner initially black"); 138 outer.classList.add("green"); 139 assert_equals(getComputedStyle(outer).color, "rgb(128, 128, 0)", 140 ".outer halfway between red and lime"); 141 assert_equals(getComputedStyle(inner).color, "rgb(0, 128, 0)", 142 ".inner halfway between black and lime"); 143 }, "@starting-style rules should not apply to after-change style"); 144 </script> 145 146 <style> 147 #t5 :is(.outer, .inner) { transition: color 1000s steps(2, start); } 148 #t5 .outer { color: red; } 149 #t5 .inner { color: black; } 150 #t5 .outer.green { color: lime; } 151 #t5 .container { container-type: inline-size; } 152 @container (width < 100000px) { 153 #t5 .outer.green .inner { color: unset; } 154 } 155 </style> 156 <div id="t5"> 157 <div class="outer"> 158 <div class="container"> 159 <div class="inner"></div> 160 </div> 161 </div> 162 </div> 163 <script> 164 test(() => { 165 const outer = document.querySelector("#t5 .outer"); 166 const inner = document.querySelector("#t5 .inner"); 167 outer.offsetTop; 168 assert_equals(getComputedStyle(outer).color, "rgb(255, 0, 0)", 169 ".outer initially red"); 170 assert_equals(getComputedStyle(inner).color, "rgb(0, 0, 0)", 171 ".inner initially black"); 172 outer.classList.add("green"); 173 assert_equals(getComputedStyle(outer).color, "rgb(128, 128, 0)", 174 ".outer halfway between red and lime"); 175 assert_equals(getComputedStyle(inner).color, "rgb(0, 128, 0)", 176 ".inner halfway between black and lime"); 177 }, "@container rules apply to after-change style"); 178 </script>