summaryrefslogtreecommitdiffstats
path: root/layout/style/test/test_transitions_and_reframes.html
diff options
context:
space:
mode:
authorMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
committerMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
commit5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree10027f336435511475e392454359edea8e25895d /layout/style/test/test_transitions_and_reframes.html
parent49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
downloadUXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip
Add m-esr52 at 52.6.0
Diffstat (limited to 'layout/style/test/test_transitions_and_reframes.html')
-rw-r--r--layout/style/test/test_transitions_and_reframes.html298
1 files changed, 298 insertions, 0 deletions
diff --git a/layout/style/test/test_transitions_and_reframes.html b/layout/style/test/test_transitions_and_reframes.html
new file mode 100644
index 000000000..b4213dbdd
--- /dev/null
+++ b/layout/style/test/test_transitions_and_reframes.html
@@ -0,0 +1,298 @@
+<!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 }
+
+ #fline { color: blue; font-size: 20px; width: 800px; }
+ #fline::first-line { color: yellow }
+ #fline.narrow { width: 50px }
+ #fline i { transition: color linear 1s }
+
+ #flexboxtest #flex { display: flex; flex-direction: column }
+ #flexboxtest #flextransition { color: blue; transition: color 5s linear }
+
+ #flexboxtest #flexkid[newstyle] { resize: both }
+ #flexboxtest #flextransition[newstyle] { color: yellow }
+ </style>
+</head>
+<body>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=625289">Mozilla Bug 625289</a>
+<div id="container"></div>
+<div id="fline">
+ This text has an <i>i element</i> in it.
+</div>
+<div id="flexboxtest">
+ <div id="flex">
+ hello
+ <span id="flexkid">this appears</span>
+ hello
+ <div id="flextransition">color transition</div>
+ </div>
+</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::TryInitiatingTransition 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]);
+}
+
+var fline = document.getElementById("fline");
+var fline_i_cs = getComputedStyle(fline.firstElementChild, "");
+// Note that the color in the ::first-line is never used in the test
+// since we avoid reporting ::first-line data in getComputedStyle.
+// However, if we were to start a transition (incorrectly), that would
+// show up in getComputedStyle.
+var COLOR_IN_LATER_LINES = "rgb(0, 0, 255)";
+
+function do_firstline_test(test) {
+ if (test.widening) {
+ fline.classList.add("narrow");
+ is (fline_i_cs.color, COLOR_IN_LATER_LINES, "initial color");
+ } else {
+ is (fline_i_cs.color, COLOR_IN_LATER_LINES, "initial color");
+ }
+
+ if (test.widening) {
+ fline.classList.remove("narrow");
+ } else {
+ fline.classList.add("narrow");
+ }
+
+ if (test.set_overflow) {
+ fline.classList.add("o");
+ }
+
+ advance_clock(100);
+
+ if (test.widening) {
+ is (fline_i_cs.color, COLOR_IN_LATER_LINES,
+ "::first-line changes don't trigger transitions");
+ } else {
+ is (fline_i_cs.color, COLOR_IN_LATER_LINES,
+ "::first-line changes don't trigger transitions");
+ }
+
+ fline.removeAttribute("class");
+}
+
+var firstline_tests = [
+ { widening: true, set_overflow: false },
+ { widening: false, set_overflow: false },
+ { widening: true, set_overflow: true },
+ { widening: false, set_overflow: true },
+];
+
+for (var firstline_test_idx in firstline_tests) {
+ do_firstline_test(firstline_tests[firstline_test_idx]);
+}
+
+function do_flexbox_reframe_test()
+{
+ var flextransition = document.getElementById("flextransition");
+ var cs = getComputedStyle(flextransition, "");
+ cs.backgroundColor;
+ flextransition.setAttribute("newstyle", "");
+ document.getElementById("flexkid").setAttribute("newstyle", "");
+ is(cs.color, "rgb(0, 0, 255)",
+ "color at start of wrapped flexbox transition");
+ advance_clock(1000);
+ is(cs.color, "rgb(51, 51, 204)",
+ "color one second in to wrapped flexbox transition");
+}
+
+do_flexbox_reframe_test();
+
+SpecialPowers.DOMWindowUtils.restoreNormalRefresh();
+
+</script>
+</pre>
+</body>
+</html>
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-26 15:29:41 +0000