Bug 1523562 [wpt PR 15082] - Test: Add a display:none inline toggle test, a=testonly
authorvmpstr <vmpstr@chromium.org>
Fri, 01 Feb 2019 13:40:52 +0000
changeset 458183 aa47b599a24f4919ab4b31066f30fda92adfa0a7
parent 458182 ba6ff113326042a904414e3803d54348b9866df9
child 458184 34865e88897289c24a6cfd1a04fc3373d7bbebcb
push id35518
push useropoprus@mozilla.com
push dateFri, 08 Feb 2019 09:55:14 +0000
treeherdermozilla-central@3a3e393396f4 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1523562, 15082, 919954, 1435684, 626574
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 1523562 [wpt PR 15082] - Test: Add a display:none inline toggle test, a=testonly Automatic update from web-platform-tests Test: Add a display:none inline toggle test This patch adds a test that exercises an invalidation path which was recently fixed. The test is to ensure the behavior does not regress. R=chrishtr@chromium.org Bug: 919954 Change-Id: I1e5d037462501b8bf81c0bcf8c909713ed6508ee Reviewed-on: https://chromium-review.googlesource.com/c/1435684 Reviewed-by: Chris Harrelson <chrishtr@chromium.org> Commit-Queue: vmpstr <vmpstr@chromium.org> Cr-Commit-Position: refs/heads/master@{#626574} -- wpt-commits: cfa9ac2a264f58358af6aad8067d40714afe12e4 wpt-pr: 15082
testing/web-platform/tests/css/css-display/display-none-inline-img-ref.html
testing/web-platform/tests/css/css-display/display-none-inline-img.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-display/display-none-inline-img-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test Reference</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<style>
+.carousel {
+  position: relative;
+  overflow: hidden;
+  height: 300px;
+}
+
+.scroller {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: auto;
+}
+
+.slides {
+  width: 200%;
+  display: flex;
+}
+
+.slide {
+  flex: 0 0 50%;
+  contain:  paint;
+}
+
+img {
+  width: 300px;
+  height: 250px;
+}
+</style>
+
+<div class="carousel">
+  <div class="scroller">
+    <div class="slides">
+      <div class="slide">
+        <img id="image" src="/images/green-256x256.png">
+      </div>
+    </div>
+  </div>
+</div>
+
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-display/display-none-inline-img.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: display: none then inline on img</title>
+<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-inline">
+<link rel="match" href="display-none-inline-img-ref.html">
+<html class="reftest-wait">
+<style>
+.carousel {
+  position: relative;
+  overflow: hidden;
+  height: 300px;
+}
+
+.scroller {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: auto;
+}
+
+.slides {
+  width: 200%;
+  display: flex;
+}
+
+.slide {
+  flex: 0 0 50%;
+  contain:  paint;
+}
+
+img {
+  width: 300px;
+  height: 250px;
+}
+</style>
+
+<div class="carousel">
+  <div class="scroller">
+    <div class="slides">
+      <div class="slide">
+        <img id="image" src="/images/green-256x256.png">
+      </div>
+      <div class="slide">
+        <img>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+
+function toggleDisplay() {
+  var img = document.getElementById("image");
+  img.style.display = img.style.display == 'none' ? 'inline' : 'none';
+}
+
+window.onload = () => {
+  requestAnimationFrame(() => {
+    toggleDisplay();
+    requestAnimationFrame(() => {
+      toggleDisplay();
+      document.documentElement.classList.remove("reftest-wait");
+    });
+  });
+};
+</script>
+</html>