test_transitions_and_reframes.html (10068B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=625289 5 --> 6 <head> 7 <meta charset="utf-8"> 8 <title>Test for Bug 625289</title> 9 <script src="/tests/SimpleTest/SimpleTest.js"></script> 10 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 11 <style> 12 :root, 13 #e1, #e2 > div, 14 #b1::before, #b2 > div::before, 15 #a1::after, #a2 > div::after { 16 margin-left: 0; 17 } 18 :root.t, 19 #e1.t, #e2.t > div, 20 #b1.t::before, #b2.t > div::before, 21 #a1.t::after, #a2.t > div::after { 22 transition: margin-left linear 1s; 23 } 24 #b1::before, #b2 > div::before, 25 #a1::after, #a2 > div::after { 26 content: "x"; 27 display: block; 28 } 29 :root.m, 30 #e1.m, #e2.m > div, 31 #b1.m::before, #b2.m > div::before, 32 #a1.m::after, #a2.m > div::after { 33 margin-left: 100px; 34 } 35 .o { overflow: hidden } 36 .n { display: none } 37 38 #fline { color: blue; font-size: 20px; width: 800px; } 39 #fline::first-line { color: yellow } 40 #fline.narrow { width: 50px } 41 #fline i { transition: color linear 1s } 42 43 #flexboxtest #flex { display: flex; flex-direction: column } 44 #flexboxtest #flextransition { color: blue; transition: color 5s linear } 45 46 #flexboxtest #flexkid[newstyle] { resize: both } 47 #flexboxtest #flextransition[newstyle] { color: yellow } 48 </style> 49 </head> 50 <body> 51 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=625289">Mozilla Bug 625289</a> 52 <div id="container"></div> 53 <div id="fline"> 54 This text has an <i>i element</i> in it. 55 </div> 56 <div id="flexboxtest"> 57 <div id="flex"> 58 hello 59 <span id="flexkid">this appears</span> 60 hello 61 <div id="flextransition">color transition</div> 62 </div> 63 </div> 64 <pre id="test"> 65 <script> 66 "use strict"; 67 68 function advance_clock(milliseconds) { 69 SpecialPowers.DOMWindowUtils.advanceTimeAndRefresh(milliseconds); 70 } 71 72 var container = document.getElementById("container"); 73 74 function make_elements(idName, child) { 75 var e = document.createElement("div"); 76 e.setAttribute("id", idName); 77 if (child) { 78 e.appendChild(document.createElement("div")); 79 } 80 container.appendChild(e); 81 return e; 82 } 83 84 function assert_margin_at_quarter(element, pseudo, passes) 85 { 86 var desc; 87 var useParent = false; 88 if (element == document.documentElement) { 89 desc = "root element"; 90 } else if (element.id) { 91 desc = "element " + element.id; 92 } else { 93 desc = "child of element " + element.parentNode.id; 94 useParent = true; 95 } 96 var classes = (useParent ? element.parentNode : element).getAttribute("class"); 97 if (classes) { 98 desc += " (classes: " + classes + ")"; 99 } 100 if (pseudo) { 101 desc += " " + pseudo + " pseudo-element"; 102 } 103 (passes ? is : todo_is)(getComputedStyle(element, pseudo).marginLeft, "25px", 104 "margin of " + desc); 105 } 106 107 function do_test(test) 108 { 109 var expected_props = [ "element", "test_child", "pseudo", "passes", 110 "dynamic_change_transition", "start_from_none" ]; 111 for (var propidx in expected_props) { 112 if (! expected_props[propidx] in test) { 113 ok(false, "expected " + expected_props[propidx] + " on test object"); 114 } 115 } 116 117 var e; 118 if (typeof(test.element) == "string") { 119 e = make_elements(test.element, test.test_child); 120 } else { 121 if (test.test_child) { 122 ok(false, "test_child unexpected"); 123 } 124 e = test.element; 125 } 126 127 var target = test.test_child ? e.firstChild : e; 128 129 if (!test.dynamic_change_transition) { 130 e.classList.add("t"); 131 } 132 if (test.start_from_none) { 133 e.classList.add("n"); 134 } 135 136 advance_clock(100); 137 e.classList.add("m"); 138 e.classList.add("o"); 139 if (test.dynamic_change_transition) { 140 e.classList.add("t"); 141 } 142 if (test.start_from_none) { 143 e.classList.remove("n"); 144 } 145 advance_clock(0); 146 advance_clock(250); 147 assert_margin_at_quarter(target, test.pseudo, test.passes); 148 if (typeof(test.element) == "string") { 149 e.remove(); 150 } else { 151 target.style.transition = ""; 152 target.removeAttribute("class"); 153 } 154 } 155 156 advance_clock(0); 157 158 var tests = [ 159 { element:"e1", test_child:false, pseudo:"", passes:true, 160 dynamic_change_transition:false, start_from_none:false }, 161 { element:"e2", test_child:true, pseudo:"", passes:true, 162 dynamic_change_transition:false, start_from_none:false }, 163 { element:"b1", test_child:false, pseudo:"::before", passes:true, 164 dynamic_change_transition:false, start_from_none:false }, 165 { element:"b2", test_child:true, pseudo:"::before", passes:true, 166 dynamic_change_transition:false, start_from_none:false }, 167 { element:"a1", test_child:false, pseudo:"::after", passes:true, 168 dynamic_change_transition:false, start_from_none:false }, 169 { element:"a2", test_child:true, pseudo:"::after", passes:true, 170 dynamic_change_transition:false, start_from_none:false }, 171 { element:document.documentElement, test_child:false, pseudo:"", passes:true, 172 dynamic_change_transition:false, start_from_none:false }, 173 // Recheck with a dynamic change in transition 174 { element:"e1", test_child:false, pseudo:"", passes:true, 175 dynamic_change_transition:true, start_from_none:false }, 176 { element:"e2", test_child:true, pseudo:"", passes:true, 177 dynamic_change_transition:true, start_from_none:false }, 178 { element:"b1", test_child:false, pseudo:"::before", passes:true, 179 dynamic_change_transition:true, start_from_none:false }, 180 { element:"b2", test_child:true, pseudo:"::before", passes:true, 181 dynamic_change_transition:true, start_from_none:false }, 182 { element:"a1", test_child:false, pseudo:"::after", passes:true, 183 dynamic_change_transition:true, start_from_none:false }, 184 { element:"a2", test_child:true, pseudo:"::after", passes:true, 185 dynamic_change_transition:true, start_from_none:false }, 186 { element:document.documentElement, test_child:false, pseudo:"", passes:true, 187 dynamic_change_transition:true, start_from_none:false }, 188 // Recheck starting from display:none. Note that these tests all fail, 189 // although we could get *some* of them to pass by calling 190 // RestyleManager::TryInitiatingTransition from 191 // ElementRestyler::RestyleUndisplayedChildren. 192 { element:"e1", test_child:false, pseudo:"", passes:false, 193 dynamic_change_transition:false, start_from_none:true }, 194 { element:"e2", test_child:true, pseudo:"", passes:false, 195 dynamic_change_transition:false, start_from_none:true }, 196 { element:"b1", test_child:false, pseudo:"::before", passes:false, 197 dynamic_change_transition:false, start_from_none:true }, 198 { element:"b2", test_child:true, pseudo:"::before", passes:false, 199 dynamic_change_transition:false, start_from_none:true }, 200 { element:"a1", test_child:false, pseudo:"::after", passes:false, 201 dynamic_change_transition:false, start_from_none:true }, 202 { element:"a2", test_child:true, pseudo:"::after", passes:false, 203 dynamic_change_transition:false, start_from_none:true }, 204 { element:document.documentElement, test_child:false, pseudo:"", passes:false, 205 dynamic_change_transition:false, start_from_none:true }, 206 // Recheck with a dynamic change in transition and starting from display:none 207 { element:"e1", test_child:false, pseudo:"", passes:false, 208 dynamic_change_transition:true, start_from_none:true }, 209 { element:"e2", test_child:true, pseudo:"", passes:false, 210 dynamic_change_transition:true, start_from_none:true }, 211 { element:"b1", test_child:false, pseudo:"::before", passes:false, 212 dynamic_change_transition:true, start_from_none:true }, 213 { element:"b2", test_child:true, pseudo:"::before", passes:false, 214 dynamic_change_transition:true, start_from_none:true }, 215 { element:"a1", test_child:false, pseudo:"::after", passes:false, 216 dynamic_change_transition:true, start_from_none:true }, 217 { element:"a2", test_child:true, pseudo:"::after", passes:false, 218 dynamic_change_transition:true, start_from_none:true }, 219 { element:document.documentElement, test_child:false, pseudo:"", passes:false, 220 dynamic_change_transition:true, start_from_none:true }, 221 ]; 222 223 for (var testidx in tests) { 224 do_test(tests[testidx]); 225 } 226 227 var fline = document.getElementById("fline"); 228 var fline_i_cs = getComputedStyle(fline.firstElementChild, ""); 229 // Note that the color in the ::first-line is never used in the test 230 // since we avoid reporting ::first-line data in getComputedStyle. 231 // However, if we were to start a transition (incorrectly), that would 232 // show up in getComputedStyle. 233 var COLOR_IN_LATER_LINES = "rgb(0, 0, 255)"; 234 235 function do_firstline_test(test) { 236 if (test.widening) { 237 fline.classList.add("narrow"); 238 is (fline_i_cs.color, COLOR_IN_LATER_LINES, "initial color"); 239 } else { 240 is (fline_i_cs.color, COLOR_IN_LATER_LINES, "initial color"); 241 } 242 243 if (test.widening) { 244 fline.classList.remove("narrow"); 245 } else { 246 fline.classList.add("narrow"); 247 } 248 249 if (test.set_overflow) { 250 fline.classList.add("o"); 251 } 252 253 advance_clock(100); 254 255 if (test.widening) { 256 is (fline_i_cs.color, COLOR_IN_LATER_LINES, 257 "::first-line changes don't trigger transitions"); 258 } else { 259 is (fline_i_cs.color, COLOR_IN_LATER_LINES, 260 "::first-line changes don't trigger transitions"); 261 } 262 263 fline.removeAttribute("class"); 264 } 265 266 var firstline_tests = [ 267 { widening: true, set_overflow: false }, 268 { widening: false, set_overflow: false }, 269 { widening: true, set_overflow: true }, 270 { widening: false, set_overflow: true }, 271 ]; 272 273 for (var firstline_test_idx in firstline_tests) { 274 do_firstline_test(firstline_tests[firstline_test_idx]); 275 } 276 277 function do_flexbox_reframe_test() 278 { 279 var flextransition = document.getElementById("flextransition"); 280 var cs = getComputedStyle(flextransition, ""); 281 cs.backgroundColor; 282 flextransition.setAttribute("newstyle", ""); 283 document.getElementById("flexkid").setAttribute("newstyle", ""); 284 is(cs.color, "rgb(0, 0, 255)", 285 "color at start of wrapped flexbox transition"); 286 advance_clock(1000); 287 is(cs.color, "rgb(51, 51, 204)", 288 "color one second in to wrapped flexbox transition"); 289 } 290 291 do_flexbox_reframe_test(); 292 293 SpecialPowers.DOMWindowUtils.restoreNormalRefresh(); 294 295 </script> 296 </pre> 297 </body> 298 </html>