Update web-platform-tests to revision d9591651df411fe105c176a498ab0cb0c58819fa

author: WPT Sync Bot <josh+wptsync@joshmatthews.net> 2020-12-15 08:21:13 +0000
committer: WPT Sync Bot <josh+wptsync@joshmatthews.net> 2020-12-15 11:02:46 +0000
commit: 11a9f36057d4ac23165ab92a03ed619f57feb999 (patch)
tree: 07351274d850b88a5221894a8f84c7460a093734 /tests/wpt/web-platform-tests/css/css-transforms
parent: ff304bdb39aa6e96b43e1eae3ca61096398d2e38 (diff)
download: servo-11a9f36057d4ac23165ab92a03ed619f57feb999.tar.gz
servo-11a9f36057d4ac23165ab92a03ed619f57feb999.zip
11 files changed, 358 insertions, 0 deletions
diff --git a/tests/wpt/web-platform-tests/css/css-transforms/containing-block-dynamic-1-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/containing-block-dynamic-1-ref.html
new file mode 100644
index 00000000000..34b66abdb14
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-transforms/containing-block-dynamic-1-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS transforms: Creating containing block for fixed positioned elements</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<style>
+  html, body { margin: 0; padding: 0 }
+  #fixedmoves {
+    position: absolute;
+    top: 150px;
+    left: 150px;
+    background: green;
+    height: 100px;
+    width: 100px;
+  }
+</style>
+<body>
+  <div id="fixedmoves"></div>
+</body>
diff --git a/tests/wpt/web-platform-tests/css/css-transforms/perspective-containing-block-dynamic-1a.html b/tests/wpt/web-platform-tests/css/css-transforms/perspective-containing-block-dynamic-1a.html
new file mode 100644
index 00000000000..51e76745b5a
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-transforms/perspective-containing-block-dynamic-1a.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS transforms: Creating containing block for fixed positioned elements</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#perspective-property">
+<link rel="match" href="containing-block-dynamic-1-ref.html">
+<meta name="assert" content="It also establishes a containing block (somewhat similar to position: relative), just like the transform property does.">
+<meta name="flags" content="dom">
+<style>
+  html, body { margin: 0; padding: 0 }
+  #changeperspective {
+    position: absolute;
+    top: 100px;
+    left: 100px;
+  }
+
+  #abscovered {
+    position: absolute;
+    top: 50px;
+    left: 50px;
+    background: red;
+    height: 100px;
+    width: 100px;
+  }
+
+  #fixedmoves {
+    position: fixed;
+    top: 150px;
+    left: 150px;
+    background: green;
+    height: 100px;
+    width: 100px;
+  }
+</style>
+<body>
+  <div id="changeperspective" style="perspective: 1000px">
+    <div id="abscovered"></div>
+    <div id="fixedmoves"></div>
+  </div>
+  <script>
+    var changeperspective = document.getElementById("changeperspective");
+    var fixedmoves = document.getElementById("fixedmoves");
+    var causeFlush = fixedmoves.offsetTop;
+    changeperspective.style.perspective = "";
+  </script>
+</body>
diff --git a/tests/wpt/web-platform-tests/css/css-transforms/perspective-containing-block-dynamic-1b.html b/tests/wpt/web-platform-tests/css/css-transforms/perspective-containing-block-dynamic-1b.html
new file mode 100644
index 00000000000..a417bd482eb
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-transforms/perspective-containing-block-dynamic-1b.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS transforms: Creating containing block for fixed positioned elements</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#perspective-property">
+<link rel="match" href="containing-block-dynamic-1-ref.html">
+<meta name="assert" content="It also establishes a containing block (somewhat similar to position: relative), just like the transform property does.">
+<meta name="flags" content="dom">
+<style>
+  html, body { margin: 0; padding: 0 }
+  #changeperspective {
+    position: absolute;
+    top: 100px;
+    left: 100px;
+  }
+
+  #abscovered {
+    position: absolute;
+    top: 50px;
+    left: 50px;
+    background: red;
+    height: 100px;
+    width: 100px;
+  }
+
+  #fixedmoves {
+    position: fixed;
+    top: 50px;
+    left: 50px;
+    background: green;
+    height: 100px;
+    width: 100px;
+  }
+</style>
+<body>
+  <div id="changeperspective">
+    <div id="abscovered"></div>
+    <div id="fixedmoves"></div>
+  </div>
+  <script>
+    var changeperspective = document.getElementById("changeperspective");
+    var fixedmoves = document.getElementById("fixedmoves");
+    var causeFlush = fixedmoves.offsetTop;
+    changeperspective.style.perspective = "1000px";
+  </script>
+</body>
diff --git a/tests/wpt/web-platform-tests/css/css-transforms/perspective-untransformable-no-stacking-context-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/perspective-untransformable-no-stacking-context-ref.html
new file mode 100644
index 00000000000..31be3d081e8
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-transforms/perspective-untransformable-no-stacking-context-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS transforms: 'perspective' on a non-transformable element doesn't create a stacking context</title>
+<link rel="author" title="Matt Woodrow" href="mailto:mwoodrow@mozilla.com">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<style>
+  html, body { margin: 0; padding: 0 }
+  #fixedmoves {
+    position: absolute;
+    background: green;
+    height: 100px;
+    width: 100px;
+  }
+</style>
+<body>
+  <div id="fixedmoves"></div>
+</body>
diff --git a/tests/wpt/web-platform-tests/css/css-transforms/perspective-untransformable-no-stacking-context.html b/tests/wpt/web-platform-tests/css/css-transforms/perspective-untransformable-no-stacking-context.html
new file mode 100644
index 00000000000..8916a39bbb5
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-transforms/perspective-untransformable-no-stacking-context.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS transforms: 'perspective' on a non-transformable element doesn't create a stacking context</title>
+<link rel="author" title="Matt Woodrow" href="mailto:mwoodrow@mozilla.com">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#perspective-property">
+<link rel="match" href="perspective-untransformable-no-stacking-context-ref.html">
+<meta name="assert" content="Perspective on a non-transformable element shouldn't create a stacking context.">
+<style>
+* { margin: 0; padding: 0; }
+div, span { width: 100px; height: 100px }
+#perspective { background: green; padding-top: 100px; perspective: 100px; }
+#child { display:inline-block; z-index: -1; position:absolute; background: red; }
+#spacer { display:inline-block; }
+#wrapper { overflow:hidden }
+</style>
+<body>
+  <div id="wrapper">
+    <span id="perspective">
+      <div id="child">
+      </div>
+      <span id="spacer"></span>
+    </span>
+  </div>
+</body>
diff --git a/tests/wpt/web-platform-tests/css/css-transforms/perspective-zero-2-ref.html b/tests/wpt/web-platform-tests/css/css-transforms/perspective-zero-2-ref.html
new file mode 100644
index 00000000000..64969c4b7a1
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-transforms/perspective-zero-2-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>CSS transforms: perspective: 0px reference</title>
+<link rel="author" title="Miko Mynttinen" href="mailto:mmynttinen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<style type="text/css">
+.parent {
+  transform: perspective(0px);
+}
+.parent > div {
+  width: 200px;
+  height: 200px;
+  position: absolute;
+}
+.child-3d {
+  background: green;
+  transform: translateZ(1px);
+}
+</style>
+</head>
+<body>
+<p>Test passes if there is only green below.</p>
+<div class="parent">
+  <div class="child-3d"></div>
+</div>
+</body>
+</html>
diff --git a/tests/wpt/web-platform-tests/css/css-transforms/perspective-zero-2.html b/tests/wpt/web-platform-tests/css/css-transforms/perspective-zero-2.html
new file mode 100644
index 00000000000..59565ff3cd2
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-transforms/perspective-zero-2.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>CSS transforms: perspective: 0px</title>
+<link rel="author" title="Miko Mynttinen" href="mailto:mmynttinen@mozilla.com">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#propdef-perspective">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/413">
+<meta name="assert" content="Test checks that perspective: 0px behaves like transform: perspective(0) on parent container">
+<link rel="match" href="perspective-zero-2-ref.html">
+<style type="text/css">
+.parent {
+  perspective: 0px;
+}
+.parent > div {
+  width: 200px;
+  height: 200px;
+  position: absolute;
+}
+.child-2d {
+  background: red;
+}
+.child-3d {
+  background: green;
+  transform: translateZ(1px);
+}
+</style>
+</head>
+<body>
+<p>Test passes if there is only green below.</p>
+<div class="parent">
+  <div class="child-2d"></div>
+  <div class="child-3d"></div>
+</div>
+</body>
+</html>
diff --git a/tests/wpt/web-platform-tests/css/css-transforms/perspective-zero.html b/tests/wpt/web-platform-tests/css/css-transforms/perspective-zero.html
new file mode 100644
index 00000000000..f0044ad0010
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-transforms/perspective-zero.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: transform: perspective(0)</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<link rel="help" href="https://drafts.csswg.org/css-transforms-2/#funcdef-perspective">
+<meta name="assert" content="perspective(0) should behave like identity transform function.">
+<link rel="match" href="reference/green.html">
+<style>
+#cover-me, #test {
+  width: 100px;
+  height: 100px;
+}
+#cover-me {
+  background: red;
+  position: relative;
+  margin-bottom: -100px;
+}
+#test {
+  background: green;
+  /* This should be an identity transform, since perspective(0) must be
+   * treated as perspective(infinity), and consequently translateZ()
+   * doesn't have any effect, so that it covers up #cover-me.
+   * If perspective(0) is invalid, #test would not create a stacking
+   * context, and #cover-me would be placed on top of #test showing red.
+   * If perspective(0) is handled as perspective(epsilon), #test would
+   * be invisible. */
+  transform: perspective(0) translateZ(50px);
+}
+</style>
+<p>Pass if there is NO red below:</p>
+<div id="cover-me"></div><div id="test"></div>
diff --git a/tests/wpt/web-platform-tests/css/css-transforms/reference/green.html b/tests/wpt/web-platform-tests/css/css-transforms/reference/green.html
new file mode 100644
index 00000000000..f7714d2b8bd
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-transforms/reference/green.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Reference: A green box</title>
+<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
+<link rel="author" title="Mozilla" href="https://www.mozilla.org">
+<p>Pass if there is NO red below:</p>
+<div id="ref" style="width: 100px; height: 100px; background: green"></div>
diff --git a/tests/wpt/web-platform-tests/css/css-transforms/transform-containing-block-dynamic-1a.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-containing-block-dynamic-1a.html
new file mode 100644
index 00000000000..7e6a10dda1c
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-transforms/transform-containing-block-dynamic-1a.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS transforms: Creating containing block for fixed positioned elements</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-rendering">
+<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-property">
+<link rel="match" href="containing-block-dynamic-1-ref.html">
+<meta name="assert" content="For elements whose layout is governed by the CSS box model, any value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants.">
+<meta name="assert" content="The object acts as a containing block for fixed positioned descendants."
+<meta name="flags" content="dom">
+<style>
+  html, body { margin: 0; padding: 0 }
+  #changetransform {
+    position: absolute;
+    top: 100px;
+    left: 100px;
+  }
+
+  #abscovered {
+    position: absolute;
+    top: 50px;
+    left: 50px;
+    background: red;
+    height: 100px;
+    width: 100px;
+  }
+
+  #fixedmoves {
+    position: fixed;
+    top: 150px;
+    left: 150px;
+    background: green;
+    height: 100px;
+    width: 100px;
+  }
+</style>
+<body>
+  <div id="changetransform" style="transform: translateX(4px)">
+    <div id="abscovered"></div>
+    <div id="fixedmoves"></div>
+  </div>
+  <script>
+    var changetransform = document.getElementById("changetransform");
+    var fixedmoves = document.getElementById("fixedmoves");
+    var causeFlush = fixedmoves.offsetTop;
+    changetransform.style.transform = "";
+  </script>
+</body>
diff --git a/tests/wpt/web-platform-tests/css/css-transforms/transform-containing-block-dynamic-1b.html b/tests/wpt/web-platform-tests/css/css-transforms/transform-containing-block-dynamic-1b.html
new file mode 100644
index 00000000000..61266f02e26
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-transforms/transform-containing-block-dynamic-1b.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS transforms: Creating containing block for fixed positioned elements</title>
+<link rel="author" title="L. David Baron" href="https://dbaron.org/">
+<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
+<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-rendering">
+<link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-property">
+<link rel="match" href="containing-block-dynamic-1-ref.html">
+<meta name="assert" content="For elements whose layout is governed by the CSS box model, any value other than none for the transform results in the creation of both a stacking context and a containing block. The object acts as a containing block for fixed positioned descendants.">
+<meta name="assert" content="The object acts as a containing block for fixed positioned descendants."
+<meta name="flags" content="dom">
+<style>
+  html, body { margin: 0; padding: 0 }
+  #changetransform {
+    position: absolute;
+    top: 100px;
+    left: 100px;
+  }
+
+  #abscovered {
+    position: absolute;
+    top: 50px;
+    left: 50px;
+    background: red;
+    height: 100px;
+    width: 100px;
+  }
+
+  #fixedmoves {
+    position: fixed;
+    top: 50px;
+    left: 50px;
+    background: green;
+    height: 100px;
+    width: 100px;
+  }
+</style>
+<body>
+  <div id="changetransform">
+    <div id="abscovered"></div>
+    <div id="fixedmoves"></div>
+  </div>
+  <script>
+    var changetransform = document.getElementById("changetransform");
+    var fixedmoves = document.getElementById("fixedmoves");
+    var causeFlush = fixedmoves.offsetTop;
+    changetransform.style.transform = "translateX(0px)";
+  </script>
+</body>
author	WPT Sync Bot <josh+wptsync@joshmatthews.net>	2020-12-15 08:21:13 +0000
committer	WPT Sync Bot <josh+wptsync@joshmatthews.net>	2020-12-15 11:02:46 +0000
commit	11a9f36057d4ac23165ab92a03ed619f57feb999 (patch)
tree	07351274d850b88a5221894a8f84c7460a093734 /tests/wpt/web-platform-tests/css/css-transforms
parent	ff304bdb39aa6e96b43e1eae3ca61096398d2e38 (diff)
download	servo-11a9f36057d4ac23165ab92a03ed619f57feb999.tar.gz servo-11a9f36057d4ac23165ab92a03ed619f57feb999.zip