Add m-esr52 at 52.6.0

author: Matt A. Tobin <mattatobin@localhost.localdomain> 2018-02-02 04:16:08 -0500
committer: Matt A. Tobin <mattatobin@localhost.localdomain> 2018-02-02 04:16:08 -0500
commit: 5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree: 10027f336435511475e392454359edea8e25895d /layout/reftests/css-transitions
parent: 49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
download: uxp-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz
15 files changed, 381 insertions, 0 deletions
diff --git a/layout/reftests/css-transitions/no-stacking-context-transition-ref.html b/layout/reftests/css-transitions/no-stacking-context-transition-ref.html
new file mode 100644
index 0000000000..efc029d03e
--- /dev/null
+++ b/layout/reftests/css-transitions/no-stacking-context-transition-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<title>
+Reference of testcases which don't create a stacking context for bug 1278136
+</title>
+<style>
+span {
+  height: 100px;
+  width: 100px;
+  background: green;
+  position: fixed;
+  top: 50px;
+}
+#test {
+  height: 100px;
+  width: 100px;
+  background: blue;
+}
+</style>
+<span></span>
+<div id="test"></div>
diff --git a/layout/reftests/css-transitions/reftest-stylo.list b/layout/reftests/css-transitions/reftest-stylo.list
new file mode 100644
index 0000000000..fe4eff44b8
--- /dev/null
+++ b/layout/reftests/css-transitions/reftest-stylo.list
@@ -0,0 +1,5 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+skip == transitions-inline-already-wrapped-1.html transitions-inline-already-wrapped-1.html
+skip == transitions-inline-already-wrapped-2.html transitions-inline-already-wrapped-2.html
+== transitions-inline-rewrap-1.html transitions-inline-rewrap-1.html
+== transitions-inline-rewrap-2.html transitions-inline-rewrap-2.html
diff --git a/layout/reftests/css-transitions/reftest.list b/layout/reftests/css-transitions/reftest.list
new file mode 100644
index 0000000000..f8385e2e63
--- /dev/null
+++ b/layout/reftests/css-transitions/reftest.list
@@ -0,0 +1,9 @@
+== transitions-inline-already-wrapped-1.html transitions-inline-ref.html
+== transitions-inline-already-wrapped-2.html transitions-inline-ref.html
+== transitions-inline-rewrap-1.html transitions-inline-ref.html
+== transitions-inline-rewrap-2.html transitions-inline-ref.html
+== stacking-context-opacity-lose-to-animation.html stacking-context-transition-ref.html
+== stacking-context-transform-lose-to-animation.html stacking-context-transition-ref.html
+== stacking-context-opacity-wins-over-important-style.html stacking-context-transition-ref.html
+== stacking-context-transform-wins-over-important-style.html stacking-context-transition-ref.html
+== transition-and-animation-with-different-durations.html transition-and-animation-with-different-durations-ref.html
diff --git a/layout/reftests/css-transitions/stacking-context-opacity-lose-to-animation.html b/layout/reftests/css-transitions/stacking-context-opacity-lose-to-animation.html
new file mode 100644
index 0000000000..e14481afc0
--- /dev/null
+++ b/layout/reftests/css-transitions/stacking-context-opacity-lose-to-animation.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>
+Opacity transition and animation overridden by !important rule creates a
+stacking context
+</title>
+<style>
+span {
+  height: 100px;
+  width: 100px;
+  position: fixed;
+  background: green;
+  top: 50px;
+}
+@keyframes Opacity0 {
+  from, to { opacity: 0; }
+}
+#test {
+  width: 100px; height: 100px;
+  background: blue;
+  opacity: 0 ! important;
+  transition: opacity 100s steps(1, start);
+  animation: Opacity0 100s;
+}
+</style>
+<span></span>
+<div id="test"></div>
+<script>
+window.addEventListener("load", () => {
+  var target = document.getElementById("test");
+  getComputedStyle(target).opacity;
+
+  // Change the opacity style to 100%.
+  target.style.setProperty("opacity", "1", "important");
+  // Important style is changed but there is a CSS animation,
+  // so transition won't be visible and the CSS animation is overridden by
+  // the !important rule. As a result opacity style here should be 100%
+  // specified by the important rule, but we should create a stacking
+  // context for it because there are animations.
+
+  requestAnimationFrame(() => {
+    document.documentElement.classList.remove("reftest-wait");
+  });
+});
+</script>
diff --git a/layout/reftests/css-transitions/stacking-context-opacity-wins-over-important-style.html b/layout/reftests/css-transitions/stacking-context-opacity-wins-over-important-style.html
new file mode 100644
index 0000000000..c167df077d
--- /dev/null
+++ b/layout/reftests/css-transitions/stacking-context-opacity-wins-over-important-style.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>
+Opacity transition winning over !important rule creates a stacking context
+</title>
+<style>
+span {
+  height: 100px;
+  width: 100px;
+  position: fixed;
+  background: green;
+  top: 50px;
+}
+#test {
+  width: 100px; height: 100px;
+  background: blue;
+  /*
+   * On the compositor we use a previous vsync time stamp rather than the
+   * current time stamp, as a result sometimes transition may be still in
+   * before phase after waiting a frame. To compose the same opacity value
+   * regardless of whether the transition is in before or active phase, we use
+   * steps(1, end) here.
+   */
+  transition: opacity 100s steps(1, end);
+  opacity: 1 ! important;
+}
+</style>
+<span></span>
+<div id="test"></div>
+<script>
+window.addEventListener("load", () => {
+  var target = document.getElementById("test");
+  getComputedStyle(target).opacity;
+
+  target.style.setProperty("opacity", "0", "important");
+  getComputedStyle(target).opacity;
+
+  requestAnimationFrame(() => {
+    document.documentElement.classList.remove("reftest-wait");
+  });
+});
+</script>
diff --git a/layout/reftests/css-transitions/stacking-context-transform-lose-to-animation.html b/layout/reftests/css-transitions/stacking-context-transform-lose-to-animation.html
new file mode 100644
index 0000000000..7d7069affd
--- /dev/null
+++ b/layout/reftests/css-transitions/stacking-context-transform-lose-to-animation.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>
+Transform transition and animation overridden by !important rule create
+a stacking context
+</title>
+<style>
+span {
+  height: 100px;
+  width: 100px;
+  position: fixed;
+  background: green;
+  top: 50px;
+}
+@keyframes Transform100px {
+  from, to { transform: translateX(100px); }
+}
+#test {
+  width: 100px; height: 100px;
+  background: blue;
+  transform: translateX(200px) ! important;
+  transition: transform 100s steps(1, start);
+  animation: Transform100px 100s;
+}
+</style>
+<span></span>
+<div id="test"></div>
+<script>
+window.addEventListener("load", () => {
+  var target = document.getElementById("test");
+  getComputedStyle(target).transform;
+
+  // Change the transform style to 'none'.
+  target.style.setProperty("transform", "none", "important");
+  // Important style is changed but there is a CSS animation,
+  // so transition won't be visible and the CSS animation is overridden by
+  // the !important rule. As a result transform style here should be 'none'
+  // specified by the important rule, but we should create a stacking
+  // context for it because there are animations.
+
+  requestAnimationFrame(() => {
+    document.documentElement.classList.remove("reftest-wait");
+  });
+});
+</script>
diff --git a/layout/reftests/css-transitions/stacking-context-transform-wins-over-important-style.html b/layout/reftests/css-transitions/stacking-context-transform-wins-over-important-style.html
new file mode 100644
index 0000000000..5175e96939
--- /dev/null
+++ b/layout/reftests/css-transitions/stacking-context-transform-wins-over-important-style.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>
+Transform transition winning over !important rule creates a stacking context
+</title>
+<style>
+span {
+  height: 100px;
+  width: 100px;
+  position: fixed;
+  background: green;
+  top: 50px;
+}
+#test {
+  width: 100px; height: 100px;
+  background: blue;
+  /*
+   * On the compositor we use a previous vsync time stamp rather than the
+   * current time stamp, as a result sometimes transition may be still in
+   * before phase after waiting a frame. To compose the same transform value
+   * regardless of whether the transition is in before or active phase, we use
+   * steps(1, end) here.
+   */
+  transition: transform 100s steps(1, end);
+  transform: none ! important;
+}
+</style>
+<span></span>
+<div id="test"></div>
+<script>
+window.addEventListener("load", () => {
+  var target = document.getElementById("test");
+  getComputedStyle(target).transform;
+
+  target.style.setProperty("transform", "translateX(200px)", "important");
+  getComputedStyle(target).transform;
+
+  requestAnimationFrame(() => {
+    document.documentElement.classList.remove("reftest-wait");
+  });
+});
+</script>
diff --git a/layout/reftests/css-transitions/stacking-context-transition-ref.html b/layout/reftests/css-transitions/stacking-context-transition-ref.html
new file mode 100644
index 0000000000..817056c1ce
--- /dev/null
+++ b/layout/reftests/css-transitions/stacking-context-transition-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<title>Reference of testcases for bug 1273042</title>
+<style>
+span {
+  height: 100px;
+  width: 100px;
+  background: green;
+  position: fixed;
+  top: 50px;
+  z-index: -1;
+}
+#test {
+  height: 100px;
+  width: 100px;
+  background: blue;
+}
+</style>
+<span></span>
+<div id="test"></div>
diff --git a/layout/reftests/css-transitions/transition-and-animation-with-different-durations-ref.html b/layout/reftests/css-transitions/transition-and-animation-with-different-durations-ref.html
new file mode 100644
index 0000000000..e6850238af
--- /dev/null
+++ b/layout/reftests/css-transitions/transition-and-animation-with-different-durations-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<title>A reference of 100x100 blue box</title>
+<style>
+div {
+  width: 100px; height: 100px;
+  background: blue;
+}
+</style>
+<div></div>
diff --git a/layout/reftests/css-transitions/transition-and-animation-with-different-durations.html b/layout/reftests/css-transitions/transition-and-animation-with-different-durations.html
new file mode 100644
index 0000000000..24e3177a31
--- /dev/null
+++ b/layout/reftests/css-transitions/transition-and-animation-with-different-durations.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>
+Transform animation and opacity transition with different durations
+</title>
+<style>
+div {
+  width: 100px; height: 100px;
+  background: blue;
+}
+@keyframes translate {
+  from { transform: translateY(0px); }
+  to { transform: translateY(0px); }
+}
+</style>
+<div id="target"></div>
+<script>
+window.addEventListener("load", () => {
+  var target = document.getElementById("target");
+  target.style = "opacity: 0;";
+
+  getComputedStyle(target).transform;
+
+  target.style = "transition: opacity 0.2s; opacity: 1; " +
+                 "animation: translate 0.1s;";
+
+  target.addEventListener("transitionend", () => {
+    document.documentElement.classList.remove("reftest-wait");
+  }, false);
+});
+</script>
diff --git a/layout/reftests/css-transitions/transitions-inline-already-wrapped-1.html b/layout/reftests/css-transitions/transitions-inline-already-wrapped-1.html
new file mode 100644
index 0000000000..f7533f6506
--- /dev/null
+++ b/layout/reftests/css-transitions/transitions-inline-already-wrapped-1.html
@@ -0,0 +1,23 @@
+<html class="reftest-wait">
+<title>Test for CSS transitions and re-wrapping of inlines</title>
+<style type="text/css">
+#test { transition: 5s color linear 200s; }
+</style>
+<script type="text/javascript">
+
+window.onload = run;
+
+function run() {
+  var test = document.getElementById("test");
+  var unused = test.offsetWidth;
+  test.style.color = "red";
+  unused = test.offsetWidth;
+  document.documentElement.removeAttribute("class");
+}
+
+</script>
+<div style="width: 3em">
+<span id="test" style="color: green">
+This is some text with a transition.
+</span>
+</div>
diff --git a/layout/reftests/css-transitions/transitions-inline-already-wrapped-2.html b/layout/reftests/css-transitions/transitions-inline-already-wrapped-2.html
new file mode 100644
index 0000000000..9adf491922
--- /dev/null
+++ b/layout/reftests/css-transitions/transitions-inline-already-wrapped-2.html
@@ -0,0 +1,28 @@
+<html class="reftest-wait">
+<title>Test for CSS transitions and re-wrapping of inlines</title>
+<style type="text/css">
+#test { transition: 20ms color linear 0; }
+</style>
+<script type="text/javascript">
+
+window.onload = run;
+
+function run() {
+  var test = document.getElementById("test");
+  var unused = test.offsetWidth;
+  unused = getComputedStyle(test, "").color;
+  test.style.color = "green";
+  unused = test.offsetWidth;
+  unused = getComputedStyle(test, "").color;
+  setTimeout(step2, 100); // give transition time to run
+}
+function step2() {
+  document.documentElement.removeAttribute("class");
+}
+
+</script>
+<div style="width: 3em">
+<span id="test" style="color: red">
+This is some text with a transition.
+</span>
+</div>
diff --git a/layout/reftests/css-transitions/transitions-inline-ref.html b/layout/reftests/css-transitions/transitions-inline-ref.html
new file mode 100644
index 0000000000..16ade1cfe7
--- /dev/null
+++ b/layout/reftests/css-transitions/transitions-inline-ref.html
@@ -0,0 +1,7 @@
+<html>
+<title>Test for CSS transitions and re-wrapping of inlines</title>
+<div style="width: 3em">
+<span id="test" style="color: green">
+This is some text with a transition.
+</span>
+</div>
diff --git a/layout/reftests/css-transitions/transitions-inline-rewrap-1.html b/layout/reftests/css-transitions/transitions-inline-rewrap-1.html
new file mode 100644
index 0000000000..b5ce43cd37
--- /dev/null
+++ b/layout/reftests/css-transitions/transitions-inline-rewrap-1.html
@@ -0,0 +1,25 @@
+<html class="reftest-wait">
+<title>Test for CSS transitions and re-wrapping of inlines</title>
+<style type="text/css">
+#test { transition: 5s color linear 200s; }
+</style>
+<script type="text/javascript">
+
+window.onload = run;
+
+function run() {
+  var test = document.getElementById("test");
+  var unused = test.offsetWidth;
+  test.style.color = "red";
+  unused = test.offsetWidth;
+  test.parentNode.style.width = "3em";
+  unused = test.offsetWidth;
+  document.documentElement.removeAttribute("class");
+}
+
+</script>
+<div style="width: 50em">
+<span id="test" style="color: green">
+This is some text with a transition.
+</span>
+</div>
diff --git a/layout/reftests/css-transitions/transitions-inline-rewrap-2.html b/layout/reftests/css-transitions/transitions-inline-rewrap-2.html
new file mode 100644
index 0000000000..728a018747
--- /dev/null
+++ b/layout/reftests/css-transitions/transitions-inline-rewrap-2.html
@@ -0,0 +1,31 @@
+<html class="reftest-wait">
+<title>Test for CSS transitions and re-wrapping of inlines</title>
+<style type="text/css">
+#test { transition: 20ms color linear 0; }
+</style>
+<script type="text/javascript">
+
+window.onload = run;
+
+function run() {
+  var test = document.getElementById("test");
+  var unused = test.offsetWidth;
+  unused = getComputedStyle(test, "").color;
+  test.style.color = "green";
+  unused = test.offsetWidth;
+  unused = getComputedStyle(test, "").color;
+  test.parentNode.style.width = "3em";
+  unused = test.offsetWidth;
+  unused = getComputedStyle(test, "").color;
+  setTimeout(step2, 100); // give transition time to run
+}
+function step2() {
+  document.documentElement.removeAttribute("class");
+}
+
+</script>
+<div style="width: 50em">
+<span id="test" style="color: red">
+This is some text with a transition.
+</span>
+</div>
author	Matt A. Tobin <mattatobin@localhost.localdomain>	2018-02-02 04:16:08 -0500
committer	Matt A. Tobin <mattatobin@localhost.localdomain>	2018-02-02 04:16:08 -0500
commit	5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree	10027f336435511475e392454359edea8e25895d /layout/reftests/css-transitions
parent	49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
download	uxp-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz