Bug 1529061 [wpt PR 15425] - Reland new wpt tests, a=testonly
authorAleks Totic <atotic@chromium.org>
Tue, 05 Mar 2019 12:18:04 +0000
changeset 525192 05a81cf22d1e5aadde40d3e7e096e135e71c8fed
parent 525191 07c3ea987b01d534e80f9c207be69d2f5c386827
child 525193 106ac73457aa2db68d9bc122b278e05991c432cd
push id2032
push userffxbld-merge
push dateMon, 13 May 2019 09:36:57 +0000
treeherdermozilla-release@455c1065dcbe [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1529061, 15425, 1471384, 907911, 1474709, 632768
milestone67.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1529061 [wpt PR 15425] - Reland new wpt tests, a=testonly Automatic update from web-platform-tests Reland new wpt tests Reland of https://chromium-review.googlesource.com/c/chromium/src/+/1471384 Originals failed wpt import Bug: 907911 Change-Id: Ie97da9f68cf972d31303c7e3ee547e8a184bd52d Reviewed-on: https://chromium-review.googlesource.com/c/1474709 Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Commit-Queue: Aleks Totic <atotic@chromium.org> Cr-Commit-Position: refs/heads/master@{#632768} -- wpt-commits: 432f9f3f64bc6180e272a5877cb0cdf8aae6b191 wpt-pr: 15425
testing/web-platform/tests/css/css-position/position-absolute-container-dynamic.html
testing/web-platform/tests/css/css-position/position-absolute-percentage-height.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/position-absolute-container-dynamic.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<title>CSS Position Absolute: dynamic changes to containing block width</title>
+<link rel="author" href="mailto:atotic@google.com">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="help" href="https://www.w3.org/TR/css-position-3/#abs-non-replaced-width">
+<meta name="assert" content="abspos descendant responds to containing block size change">
+<style>
+
+#container {
+  position: relative;
+  width: 50px;
+  height: 100px;
+  background: red;
+}
+#target {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: green;
+}
+</style>
+<div id="container">
+  <div style="display:flex;">
+    <div id="target"></div>
+  </div>
+</div>
+<script>
+document.body.offsetTop;
+test(() => {
+  document.getElementById("container").style.width = "100px";
+  assert_equals(document.querySelector("#target").offsetWidth, 100);
+}, '#target used container width when computing size');
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-position/position-absolute-percentage-height.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<title>CSS Position Absolute: css-position-3</title>
+<link rel="author" href="mailto:atotic@google.com">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="help" href="https://www.w3.org/TR/css-position-3/">
+<meta name="assert" content="abspos resolves %-ge sizes correctly.">
+<style>
+
+#container {
+  position: relative;
+}
+
+#image-wrapper {
+  display: flex;
+  position: absolute;
+  height: 100%;
+  background: green;
+}
+
+#content-wrapper {
+  margin-left: 30%;
+}
+
+#target {
+  display: block;
+  min-height: 100%;
+  opacity: 0.5;
+}
+</style>
+<!-- IMG height is 100% of image wrapper height.
+  IMG width is 100% of image wrapper width.
+  IMG width equals IMG height -->
+<div id="container">
+  <div id="image-wrapper">
+    <!-- 1x1 green pixel -->
+    <img id="target" src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M/wHwAEBgIApD5fRAAAAABJRU5ErkJggg==">
+  </div>
+  <div id="content-wrapper">
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+  </div>
+</div>
+<script>
+document.body.offsetTop;
+test(() => {
+  let target = document.querySelector("#target");
+  assert_equals(target.offsetWidth, target.offsetHeight);
+  assert_equals(target.offsetWidth, document.querySelector("#image-wrapper").offsetWidth);
+  assert_equals(target.offsetHeight, document.querySelector("#content-wrapper").offsetHeight);
+}, '#target height matches containing block height, and target parent width matches #target width' );
+
+test(() => {
+  document.body.style.marginLeft = "300px";
+  let target = document.querySelector("#target");
+  assert_equals(target.offsetWidth, target.offsetHeight);
+  assert_equals(target.offsetWidth, document.querySelector("#image-wrapper").offsetWidth);
+  assert_equals(target.offsetHeight, document.querySelector("#content-wrapper").offsetHeight);
+}, '#target height matches containing block height, and target parent width matches #target width after resize');
+</script>