mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-13 21:35:39 +00:00
Bug 625289 patch 12 - Tests for transitions on elements that are reframing. r=heycam
The second set of 14 tests all fail (both with and without the patch) because we don't start transitions when the before state is display:none (either for style contexts coming out of the undisplayed map or because we have no current style context because an ancestor is display:none). The patch makes all of the first set of 14 tests pass. Without the patch, most of these tests fail, except for the 4 testing e1 and the root. I presume the four tests that pass prior to the patch pass because the restyle actually occurs and starts the transition (which is stored on the element) before the style context is destroyed.
This commit is contained in:
L. David Baron
parent
70c4a5a6b9
commit
fd2736dc52
@ -190,6 +190,7 @@ skip-if = (toolkit == 'gonk' && debug) || toolkit == 'android' #bug 775227 #debu
|
||||
[test_style_struct_copy_constructors.html]
|
||||
[test_supports_rules.html]
|
||||
[test_system_font_serialization.html]
|
||||
[test_transitions_and_reframes.html]
|
||||
[test_transitions_and_zoom.html]
|
||||
[test_transitions_cancel_near_end.html]
|
||||
[test_transitions_computed_values.html]
|
||||
|
||||
210
layout/style/test/test_transitions_and_reframes.html
Normal file
210
layout/style/test/test_transitions_and_reframes.html
Normal file
@ -0,0 +1,210 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<!--
|
||||
https://bugzilla.mozilla.org/show_bug.cgi?id=625289
|
||||
-->
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Test for Bug 625289</title>
|
||||
<script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
|
||||
<style>
|
||||
:root,
|
||||
#e1, #e2 > div,
|
||||
#b1::before, #b2 > div::before,
|
||||
#a1::after, #a2 > div::after {
|
||||
margin-left: 0;
|
||||
}
|
||||
:root.t,
|
||||
#e1.t, #e2.t > div,
|
||||
#b1.t::before, #b2.t > div::before,
|
||||
#a1.t::after, #a2.t > div::after {
|
||||
transition: margin-left linear 1s;
|
||||
}
|
||||
#b1::before, #b2 > div::before,
|
||||
#a1::after, #a2 > div::after {
|
||||
content: "x";
|
||||
display: block;
|
||||
}
|
||||
:root.m,
|
||||
#e1.m, #e2.m > div,
|
||||
#b1.m::before, #b2.m > div::before,
|
||||
#a1.m::after, #a2.m > div::after {
|
||||
margin-left: 100px;
|
||||
}
|
||||
.o { overflow: hidden }
|
||||
.n { display: none }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=625289">Mozilla Bug 625289</a>
|
||||
<div id="container"></div>
|
||||
<pre id="test">
|
||||
<script>
|
||||
"use strict";
|
||||
|
||||
function advance_clock(milliseconds) {
|
||||
SpecialPowers.DOMWindowUtils.advanceTimeAndRefresh(milliseconds);
|
||||
}
|
||||
|
||||
var container = document.getElementById("container");
|
||||
|
||||
function make_elements(idName, child) {
|
||||
var e = document.createElement("div");
|
||||
e.setAttribute("id", idName);
|
||||
if (child) {
|
||||
e.appendChild(document.createElement("div"));
|
||||
}
|
||||
container.appendChild(e);
|
||||
return e;
|
||||
}
|
||||
|
||||
function assert_margin_at_quarter(element, pseudo, passes)
|
||||
{
|
||||
var desc;
|
||||
var useParent = false;
|
||||
if (element == document.documentElement) {
|
||||
desc = "root element";
|
||||
} else if (element.id) {
|
||||
desc = "element " + element.id;
|
||||
} else {
|
||||
desc = "child of element " + element.parentNode.id;
|
||||
useParent = true;
|
||||
}
|
||||
var classes = (useParent ? element.parentNode : element).getAttribute("class");
|
||||
if (classes) {
|
||||
desc += " (classes: " + classes + ")";
|
||||
}
|
||||
if (pseudo) {
|
||||
desc += " " + pseudo + " pseudo-element";
|
||||
}
|
||||
(passes ? is : todo_is)(getComputedStyle(element, pseudo).marginLeft, "25px",
|
||||
"margin of " + desc);
|
||||
}
|
||||
|
||||
function do_test(test)
|
||||
{
|
||||
var expected_props = [ "element", "test_child", "pseudo", "passes",
|
||||
"dynamic_change_transition", "start_from_none" ];
|
||||
for (var propidx in expected_props) {
|
||||
if (! expected_props[propidx] in test) {
|
||||
ok(false, "expected " + expected_props[propidx] + " on test object");
|
||||
}
|
||||
}
|
||||
|
||||
var e;
|
||||
if (typeof(test.element) == "string") {
|
||||
e = make_elements(test.element, test.test_child);
|
||||
} else {
|
||||
if (test.test_child) {
|
||||
ok(false, "test_child unexpected");
|
||||
}
|
||||
e = test.element;
|
||||
}
|
||||
|
||||
var target = test.test_child ? e.firstChild : e;
|
||||
|
||||
if (!test.dynamic_change_transition) {
|
||||
e.classList.add("t");
|
||||
}
|
||||
if (test.start_from_none) {
|
||||
e.classList.add("n");
|
||||
}
|
||||
|
||||
advance_clock(100);
|
||||
e.classList.add("m");
|
||||
e.classList.add("o");
|
||||
if (test.dynamic_change_transition) {
|
||||
e.classList.add("t");
|
||||
}
|
||||
if (test.start_from_none) {
|
||||
e.classList.remove("n");
|
||||
}
|
||||
advance_clock(0);
|
||||
advance_clock(250);
|
||||
assert_margin_at_quarter(target, test.pseudo, test.passes);
|
||||
if (typeof(test.element) == "string") {
|
||||
e.remove();
|
||||
} else {
|
||||
target.style.transition = "";
|
||||
target.removeAttribute("class");
|
||||
}
|
||||
}
|
||||
|
||||
advance_clock(0);
|
||||
|
||||
var tests = [
|
||||
{ element:"e1", test_child:false, pseudo:"", passes:true,
|
||||
dynamic_change_transition:false, start_from_none:false },
|
||||
{ element:"e2", test_child:true, pseudo:"", passes:true,
|
||||
dynamic_change_transition:false, start_from_none:false },
|
||||
{ element:"b1", test_child:false, pseudo:"::before", passes:true,
|
||||
dynamic_change_transition:false, start_from_none:false },
|
||||
{ element:"b2", test_child:true, pseudo:"::before", passes:true,
|
||||
dynamic_change_transition:false, start_from_none:false },
|
||||
{ element:"a1", test_child:false, pseudo:"::after", passes:true,
|
||||
dynamic_change_transition:false, start_from_none:false },
|
||||
{ element:"a2", test_child:true, pseudo:"::after", passes:true,
|
||||
dynamic_change_transition:false, start_from_none:false },
|
||||
{ element:document.documentElement, test_child:false, pseudo:"", passes:true,
|
||||
dynamic_change_transition:false, start_from_none:false },
|
||||
// Recheck with a dynamic change in transition
|
||||
{ element:"e1", test_child:false, pseudo:"", passes:true,
|
||||
dynamic_change_transition:true, start_from_none:false },
|
||||
{ element:"e2", test_child:true, pseudo:"", passes:true,
|
||||
dynamic_change_transition:true, start_from_none:false },
|
||||
{ element:"b1", test_child:false, pseudo:"::before", passes:true,
|
||||
dynamic_change_transition:true, start_from_none:false },
|
||||
{ element:"b2", test_child:true, pseudo:"::before", passes:true,
|
||||
dynamic_change_transition:true, start_from_none:false },
|
||||
{ element:"a1", test_child:false, pseudo:"::after", passes:true,
|
||||
dynamic_change_transition:true, start_from_none:false },
|
||||
{ element:"a2", test_child:true, pseudo:"::after", passes:true,
|
||||
dynamic_change_transition:true, start_from_none:false },
|
||||
{ element:document.documentElement, test_child:false, pseudo:"", passes:true,
|
||||
dynamic_change_transition:true, start_from_none:false },
|
||||
// Recheck starting from display:none. Note that these tests all fail,
|
||||
// although we could get *some* of them to pass by calling
|
||||
// RestyleManager::TryStartingTransition from
|
||||
// ElementRestyler::RestyleUndisplayedChildren.
|
||||
{ element:"e1", test_child:false, pseudo:"", passes:false,
|
||||
dynamic_change_transition:false, start_from_none:true },
|
||||
{ element:"e2", test_child:true, pseudo:"", passes:false,
|
||||
dynamic_change_transition:false, start_from_none:true },
|
||||
{ element:"b1", test_child:false, pseudo:"::before", passes:false,
|
||||
dynamic_change_transition:false, start_from_none:true },
|
||||
{ element:"b2", test_child:true, pseudo:"::before", passes:false,
|
||||
dynamic_change_transition:false, start_from_none:true },
|
||||
{ element:"a1", test_child:false, pseudo:"::after", passes:false,
|
||||
dynamic_change_transition:false, start_from_none:true },
|
||||
{ element:"a2", test_child:true, pseudo:"::after", passes:false,
|
||||
dynamic_change_transition:false, start_from_none:true },
|
||||
{ element:document.documentElement, test_child:false, pseudo:"", passes:false,
|
||||
dynamic_change_transition:false, start_from_none:true },
|
||||
// Recheck with a dynamic change in transition and starting from display:none
|
||||
{ element:"e1", test_child:false, pseudo:"", passes:false,
|
||||
dynamic_change_transition:true, start_from_none:true },
|
||||
{ element:"e2", test_child:true, pseudo:"", passes:false,
|
||||
dynamic_change_transition:true, start_from_none:true },
|
||||
{ element:"b1", test_child:false, pseudo:"::before", passes:false,
|
||||
dynamic_change_transition:true, start_from_none:true },
|
||||
{ element:"b2", test_child:true, pseudo:"::before", passes:false,
|
||||
dynamic_change_transition:true, start_from_none:true },
|
||||
{ element:"a1", test_child:false, pseudo:"::after", passes:false,
|
||||
dynamic_change_transition:true, start_from_none:true },
|
||||
{ element:"a2", test_child:true, pseudo:"::after", passes:false,
|
||||
dynamic_change_transition:true, start_from_none:true },
|
||||
{ element:document.documentElement, test_child:false, pseudo:"", passes:false,
|
||||
dynamic_change_transition:true, start_from_none:true },
|
||||
];
|
||||
|
||||
for (var testidx in tests) {
|
||||
do_test(tests[testidx]);
|
||||
}
|
||||
|
||||
SpecialPowers.DOMWindowUtils.restoreNormalRefresh();
|
||||
|
||||
</script>
|
||||
</pre>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user