Bug 1689217 [wpt PR 27357] - [LayoutInstability] Add tests for invisible to visible, a=testonly

npm1 · moz-wptsync-bot · commit d404737b603d · 2021-02-02T17:08:15.000Z
Automatic update from web-platform-tests [LayoutInstability] Add tests for invisible to visible This CL tests that there are not shifts reported when an element: * Changes from visibility:visible to hidden * Changes from Opacity 1 to 0 Relevant issue: WICG/layout-instability#61 Change-Id: I0174d37673f34ca3adeeb66b238d4c79edf62e45 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2653974 Reviewed-by: Steve Kobes <skobes@chromium.org> Commit-Queue: Nicolás Peña Moreno <npm@chromium.org> Cr-Commit-Position: refs/heads/master@{#848520} -- wpt-commits: 2f23ceeb5c7b64abfce343e0f96c73c7c11e97ba wpt-pr: 27357
diff --git a/testing/web-platform/tests/layout-instability/opacity-nonzero-to-zero.html b/testing/web-platform/tests/layout-instability/opacity-nonzero-to-zero.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<title>Layout Instability: opacity:0</title>
+<link rel="help" href="https://wicg.github.io/layout-instability/" />
+<div id="target" style="position: absolute; top: 0; width: 400px; height: 400px;">
+</div>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/util.js"></script>
+<script>
+
+promise_test(async () => {
+  const watcher = new ScoreWatcher;
+
+  // Wait for the initial render to complete.
+  await waitForAnimationFrames(2);
+
+  // Shift target, for which no shift should be reported because it's not visible.
+  target.style.top = '200px';
+  target.style.opacity = 0;
+
+  await waitForAnimationFrames(2);
+  assert_equals(watcher.score, 0);
+}, 'opacity non-zero to zero');
+
+</script>
diff --git a/testing/web-platform/tests/layout-instability/visible-to-hidden.html b/testing/web-platform/tests/layout-instability/visible-to-hidden.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<title>Layout Instability: visibility:hidden</title>
+<link rel="help" href="https://wicg.github.io/layout-instability/" />
+<div id="target" style="position: absolute; top: 0; width: 400px; height: 400px;"></div>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/util.js"></script>
+<script>
+
+promise_test(async () => {
+  const watcher = new ScoreWatcher;
+
+  // Wait for the initial render to complete.
+  await waitForAnimationFrames(2);
+
+  // Shift target and make hidden at the same time. Should not be reported!
+  document.querySelector("#target").style.top = '200px';
+  document.querySelector("#target").style.visibility = 'hidden';
+
+  await waitForAnimationFrames(2);
+  // No shift should be reported.
+  assert_equals(watcher.score, 0);
+}, 'visible to hidden');
+
+</script>
