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 464576 cd3e4c3851b1e1f584da100b2881adef92b0daa2
parent 464575 4325ba7b38576495a78289c2a8f4dff391922e66
child 464577 8faf22fa39070daca35848529c41451cc1126a33
push id35717
push useraciure@mozilla.com
push dateSun, 17 Mar 2019 09:45:26 +0000
treeherdermozilla-central@e0861be8d6c0 [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>