Bug 1523562 [wpt PR 14831] - Add WPT for ensuring flexbox child hit testing is done in flex order, a=testonly
authorAndrew Comminos <acomminos@fb.com>
Thu, 31 Jan 2019 18:54:55 +0000
changeset 457980 13b2b62f5941ddc5a0895ff3b9b6c33ad7e745e2
parent 457979 0e66e9c1e7a8e1a0fed48d976ceddd6083a80ff9
child 457981 65b52861c320340c3fe389ee9525d5f36a89bd2d
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, 14831, 844505, 1407926, 622504
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 14831] - Add WPT for ensuring flexbox child hit testing is done in flex order, a=testonly Automatic update from web-platform-tests Add WPT for ensuring flexbox child hit testing is done in flex order Currently fails both with and without LayoutNG. Non-LayoutNG case should depend on a reversed OrderIterator for performing hit testing. Bug: 844505 Change-Id: I93a96922cad57ace6990310e4855355d06c8cd66 Reviewed-on: https://chromium-review.googlesource.com/c/1407926 Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Commit-Queue: Andrew Comminos <acomminos@fb.com> Cr-Commit-Position: refs/heads/master@{#622504} -- wpt-commits: 50e34a867e3818f4795096cb0ed137705ba8d8d2 wpt-pr: 14831
testing/web-platform/tests/css/css-flexbox/hittest-overlapping-order.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-flexbox/hittest-overlapping-order.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<link rel="author" title="Andrew Comminos" href="mailto:acomminos@fb.com" />
+<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#painting" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+#container {
+  width: 600px;
+  display: flex;
+}
+
+#left {
+  width: 300px;
+  overflow: hidden;
+  white-space: nowrap;
+  background: rgba(200, 200, 200, 0.8);
+  order: 0;
+}
+
+#right {
+  width: 300px;
+  background-color: rgba(0, 128, 0, 0.8);
+  margin-left: -100px;
+  order: 1;
+}
+</style>
+<div id="container">
+  <div id="right"></div>
+  <a id="left" href="#">foofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoo</a>
+</div>
+<div id="log"></div>
+<script>
+  test(function(t)
+    {
+      const container = document.querySelector('#container');
+      // Target the intersection of the two child elements.
+      // The occluded link should not be clickable.
+      const x = container.offsetLeft + 250;
+      const y = container.offsetTop + 5;
+
+      var element = document.elementFromPoint(x, y);
+      assert_equals(element.nodeName, 'DIV');
+      assert_equals(element.id, 'right');
+    }, "Flexboxes should perform hit testing in reverse paint order for overlapping elements: flex order case (crbug.com/844505)");
+</script>