Attachment #440579 for bug #231392

View Details Raw Unified Return to Bug 231392

| Differences between



2021-10-08  Tim Nguyen  <ntim@apple.com>

        Re-sync the-dialog-element and inert WPT from upstream
        https://bugs.webkit.org/show_bug.cgi?id=231392

        Reviewed by NOBODY (OOPS!).

        Upstream commit: https://github.com/web-platform-tests/wpt/commit/a44515b7c7774abf1256f488bf0e9dc02459fced

        * TestExpectations:

2021-10-07  Antti Koivisto  <antti@apple.com>

        REGRESSION (IFC selections): Overlapping selection rectangles when selecting preformatted text



2021-10-08  Tim Nguyen  <ntim@apple.com>

        Re-sync the-dialog-element and inert WPT from upstream
        https://bugs.webkit.org/show_bug.cgi?id=231392

        Reviewed by NOBODY (OOPS!).

        Upstream commit: https://github.com/web-platform-tests/wpt/commit/a44515b7c7774abf1256f488bf0e9dc02459fced

        * resources/resource-files.json:
        * web-platform-tests/html/semantics/interactive-elements/the-dialog-element/dialog-inert.tentative-expected.txt: Added.
        * web-platform-tests/html/semantics/interactive-elements/the-dialog-element/dialog-inert.tentative.html: Added.
        * web-platform-tests/html/semantics/interactive-elements/the-dialog-element/w3c-import.log:
        * web-platform-tests/inert/frame/button.html: Removed.
        * web-platform-tests/inert/frame/w3c-import.log: Removed.
        * web-platform-tests/inert/inert-computed-style-expected.txt: Added.
        * web-platform-tests/inert/inert-computed-style.html: Added.
        * web-platform-tests/inert/inert-retargeting-iframe.tentative.html: Removed.
        * web-platform-tests/inert/inert-retargeting.tentative.html: Removed.
        * web-platform-tests/inert/w3c-import.log:

2021-10-07  Rob Buis  <rbuis@igalia.com>

        Resync the-img-element WPT tests from upstream



webkit.org/b/230004 imported/w3c/web-platform-tests/css/css-pseudo/selection-paint-image.html [ ImageOnlyFailure ]
webkit.org/b/230004 imported/w3c/web-platform-tests/css/css-pseudo/selection-textarea-011.html [ ImageOnlyFailure ]

# Awaiting official CSSWG resolution making these tests irrelevant: https://lists.w3.org/Archives/Public/www-style/2021Sep/0004.html
imported/w3c/web-platform-tests/inert/inert-retargeting.tentative.html [ Skip ]
imported/w3c/web-platform-tests/inert/inert-retargeting-iframe.tentative.html [ Skip ]

imported/w3c/web-platform-tests/content-security-policy/script-src/ [ DumpJSConsoleLogInStdErr ]

# import-w3c-tests copies -notref.html to -expected.html, so expected image failure here.

Lines 2856-2862 a/LayoutTests/imported/w3c/resources/resource-files.json_sec1
- a/LayoutTests/imported/w3c/resources/resource-files.json -1 lines
2856	"web-platform-tests/html/webappapis/scripting/events/onerroreventhandler-frame.html",	2856	"web-platform-tests/html/webappapis/scripting/events/onerroreventhandler-frame.html",
2857	"web-platform-tests/html/webappapis/user-prompts/cannot-show-simple-dialogs/support/confirm.html",	2857	"web-platform-tests/html/webappapis/user-prompts/cannot-show-simple-dialogs/support/confirm.html",
2858	"web-platform-tests/html/webappapis/user-prompts/cannot-show-simple-dialogs/support/prompt.html",	2858	"web-platform-tests/html/webappapis/user-prompts/cannot-show-simple-dialogs/support/prompt.html",
2859	"web-platform-tests/inert/frame/button.html",
2860	"web-platform-tests/infrastructure/assumptions/ahem-notref.html",	2859	"web-platform-tests/infrastructure/assumptions/ahem-notref.html",
2861	"web-platform-tests/infrastructure/reftest/red.html",	2860	"web-platform-tests/infrastructure/reftest/red.html",
2862	"web-platform-tests/intersection-observer/observer-in-iframe.html",	2861	"web-platform-tests/intersection-observer/observer-in-iframe.html",

Line 0 a/LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/dialog-inert.tentative-expected.txt_sec1
- a/LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/dialog-inert.tentative-expected.txt +4 lines
	1	Something
	2
	3	PASS dialog-inert
	4



<!doctype html>
<meta charset=utf-8>
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
<link rel="author" title="Mozilla" href="https://mozilla.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
  body { margin: 0 }
  dialog {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    box-sizing: border-box;
    padding: 0;
  }
  dialog::backdrop {
    display: none;
  }
</style>
<dialog id=dialog>Something</dialog>
<script>
test(function() {
  let dialog = document.getElementById("dialog");
  dialog.showModal();
  assert_equals(
    document.elementFromPoint(10, 10),
    dialog,
    "Dialog is hittable by default",
  );
  dialog.inert = true;
  assert_not_equals(
    document.elementFromPoint(10, 10),
    dialog,
    "Dialog becomes inert dynamically",
  );
  dialog.close();
  dialog.showModal();
  assert_not_equals(
    document.elementFromPoint(10, 10),
    dialog,
    "Dialog remains inert after open",
  );
});
</script>



<!DOCTYPE html>
<html>
<head>
<style>
body {
  overflow: hidden;
}

button#background {
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  height: 40px;
  line-height: 53px;
}

button.clicked {
  background-color: red;
}

button.clicked::after {
  content: " (clicked)";
}

</style>
</head>
<body>
  <button id="background">background</button>
<script>
document.body.addEventListener('click', (e) => {
  e.target.classList.add('clicked');
});
</script>
</body>
</html>



The tests in this directory were imported from the W3C repository.
Do NOT modify these tests directly in WebKit.
Instead, create a pull request on the WPT github:
	https://github.com/web-platform-tests/wpt

Then run the Tools/Scripts/import-w3c-tests in WebKit to reimport

Do NOT modify or remove this file.

------------------------------------------------------------------------
Properties requiring vendor prefixes:
None
Property values requiring vendor prefixes:
None
------------------------------------------------------------------------
List of files:
/LayoutTests/imported/w3c/web-platform-tests/inert/frame/button.html

Line 0 a/LayoutTests/imported/w3c/web-platform-tests/inert/inert-computed-style-expected.txt_sec1
- a/LayoutTests/imported/w3c/web-platform-tests/inert/inert-computed-style-expected.txt +3 lines
	1
	2	FAIL inert isn't hit-testable, but that isn't expose in the computed style assert_equals: inert node doesn't change pointer-events computed value expected (string) "auto" but got (undefined) undefined
	3



<!DOCTYPE html>
<meta charset="utf-8">
<title>inert isn't hit-testable, but that isn't expose in the computed style</title>
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
<link rel="author" title="Mozilla" href="https://mozilla.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
  body { margin: 0 }
  div {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: blue;
  }
  #non-inert {
    background-color: red;
  }
</style>
<div id="non-inert"></div>
<div id="inert"></div>
<script>
  test(function() {
    let inert = document.getElementById("inert");
    assert_equals(
      document.elementFromPoint(50, 50),
      inert,
      "not-yet-inert node hit-test before non-inert node",
    );
    inert.inert = true;
    assert_equals(
      document.elementFromPoint(50, 50),
      document.getElementById("non-inert"),
      "inert node is transparent to events (as pointer-events: none)",
    );
    assert_equals(
      getComputedStyle(inert).pointerEvents,
      "auto",
      "inert node doesn't change pointer-events computed value",
    );
    assert_equals(
      getComputedStyle(inert).userSelect,
      "auto",
      "inert node doesn't change pointer-events computed value",
    );
  });
</script>



<!DOCTYPE html>
<html>
<head>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<style>
button#foreground,
button#background {
  position: absolute;
  top: 75px;
  left: 50px;
  width: 100px;
  height: 20px;
}

button#background {
  left: 75px;
  width: 150px;
  height: 40px;
  top: 125px;
  line-height: 53px;
}

.clicked {
  background-color: red;
}

#ancestorContainer.clicked {
  background-color: green;
}

#ancestorContainer {
  position: absolute;
  top: 200px;
  left: 10px;
  width: 300px;
  height: 300px;
  background-color: blue;
}

#displacedAncestor {
  position: absolute;
  top: 13px;
  left: 240px;
  width: 300px;
  height: 250px;
  background-color: #ff89;
}

#displacedAncestor.clicked {
  background-color: #f009;
}

#inertContainer {
  background-color: #fff9;
  position: absolute;
  top: 35px;
  left: -192px;
  width: 200px;
  height: 200px;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 1px solid black;
}

legend {
  background-color: white;
  border: 1px solid black;
  margin-left: 5px;
}
</style>
</head>
<body>
  <p>Click on "Inert button".</p>
  <ul>
    <li>The blue square ("Non-inert ancestor container") should turn green.</li>
    <li>The yellow, semi-transparent square ("Non-inert, displaced container") should not turn red.</li>
    <li>"Non-inert button" should not turn red.</li>
  </ul>
  <p style="margin-bottom:250px">(The full test suite checks a range of events.)</p>
  <fieldset id="ancestorContainer">
    <legend>Non-inert ancestor container</legend>
    <iframe id="background" src="frame/button.html"></iframe>
    <fieldset id="displacedAncestor">
      <legend>Non-inert, displaced ancestor</legend>
      <fieldset id="inertContainer" inert>
        <legend>Inert container</legend>
        <button id="foreground">foreground</button>
      </fieldset>
    </fieldset>
  </fieldset>

  <script>
document.body.addEventListener('click', (e) => {
  e.target.classList.add('clicked');
});

function clickOn(element) {
  return new test_driver.Actions()
      .pointerMove(0, 0, {origin: element})
      .pointerDown({button: test_driver.Actions.prototype.ButtonType.LEFT})
      .pointerUp({button: test_driver.Actions.prototype.ButtonType.LEFT})
      .send();
}

function auxClickOn(element) {
  return new test_driver.Actions()
      .pointerMove(0, 0, {origin: element})
      .pointerDown({button: test_driver.Actions.prototype.ButtonType.RIGHT})
      .pointerUp({button: test_driver.Actions.prototype.ButtonType.RIGHT})
      .send();
}

function dblClickOn(element) {
  return new test_driver.Actions()
      .pointerMove(0, 0, {origin: element})
      .pointerDown({button: test_driver.Actions.prototype.ButtonType.LEFT})
      .pointerUp({button: test_driver.Actions.prototype.ButtonType.LEFT})
      .pointerDown({button: test_driver.Actions.prototype.ButtonType.LEFT})
      .pointerUp({button: test_driver.Actions.prototype.ButtonType.LEFT})
      .send();
}

function movePointerOver(element) {
  let rect = element.getBoundingClientRect();
  return new test_driver.Actions()
      .pointerMove(0, 0, { origin: element })
      .send();
}

function movePointerTo(x, y) {
  return new test_driver.Actions()
      .pointerMove(Math.ceil(x), Math.ceil(y), { origin: "viewport" })
      .send();
}

function expectEventsOn(events, element) {
  let promises = [];
  for (event of events) {
    ((event, element) => {
      var promise = new Promise((resolve, reject) => {
        let f = (e) => {
          assert_equals(e.type, event);
          assert_equals(e.target, element);
          resolve();
        }
        element.addEventListener(event, f, { capture: true, once: true });

        step_timeout(() => {
          element.removeEventListener(event, f, { capture: true });
          reject("did not get " + event + " on " + element.id);
        }, 5000);
      });
      promises.push(promise);
    })(event, element);
  }
  return promises;
}

function unexpectEventsOn(events, element) {
  let promises = [];
  for (event of events) {
    ((event, element) => {
      var promise = new Promise((resolve, reject) => {
        let f = (e) => {
          assert_equals(e.type, event);
          assert_equals(e.target, element);
          reject("got " + e.type + " on " + e.target.id);
        }
        element.addEventListener(event, f, { capture: true, once: true });

        step_timeout(() => {
          element.removeEventListener(event, f, { capture: true });
          resolve();
        }, 1000);
      });
      promises.push(promise);
    })(event, element);
  }
  return promises;
}

test(() => {
  let rect = foreground.getBoundingClientRect();
  let center_x = rect.left + (rect.width / 2);
  let center_y = rect.top + (rect.height / 2);
  assert_equals(document.elementsFromPoint(center_x, center_y)[0], foreground);
}, "elementsFromPoint returns inert element");

promise_test(async () => {
  // Test mouse events on non-inert element - events should go to "foreground"
  inertContainer.inert = false;
  await movePointerTo(0, 0);
  let promises = expectEventsOn(["mouseover", "mouseenter", "mousemove", "mousedown",
                                 "mouseup", "click", "auxclick", "mouseout",
                                 "mouseleave"],
                                foreground);
  await clickOn(foreground);
  await auxClickOn(foreground);
  await dblClickOn(foreground);
  let ancestorBox = ancestorContainer.getBoundingClientRect();
  let inertBox = inertContainer.getBoundingClientRect();
  let x = ancestorBox.left + (ancestorBox.width / 2);
  let y = inertBox.bottom + ((ancestorBox.bottom - inertBox.bottom) / 2);
  await movePointerTo(x, y);
  await Promise.all(promises);
}, "Tests that any mouse event on a non-inert element is correctly targeted to that element");

promise_test(async () => {
  // Make the containing element inert - now events should go to "container"
  // which is the non-inert ancestor at the same position
  inertContainer.inert = true;
  await movePointerTo(0, 0);

  let promises = expectEventsOn(["mouseover", "mouseenter", "mousemove", "mousedown",
                                 "mouseup", "click", "auxclick"],
                                ancestorContainer);

  promises = promises.concat(unexpectEventsOn(["mouseout", "mouseleave"],
                                              ancestorContainer));

  await clickOn(foreground);
  await auxClickOn(foreground);
  await dblClickOn(foreground);
  let ancestorBox = ancestorContainer.getBoundingClientRect();
  let inertBox = inertContainer.getBoundingClientRect();
  let x = ancestorBox.left + (ancestorBox.width / 2);
  let y = inertBox.bottom + ((ancestorBox.bottom - inertBox.bottom) / 2);
  await movePointerTo(x, y);
  await Promise.all(promises);
}, 'Tests that any mouse event on an inert element is targeted to the nearest non-inert ancestor at the same coordinates');

promise_test(async () => {
  // Test pointer events on non-inert element - events should go to "foreground"
  inertContainer.inert = false;
  await movePointerTo(0, 0);

  let promises = expectEventsOn(["pointerover", "pointerenter", "pointermove",
                                 "pointerdown", "pointerup", "pointerout",
                                 "pointerleave"],
                                foreground);
  await clickOn(foreground);
  let ancestorBox = ancestorContainer.getBoundingClientRect();
  let inertBox = inertContainer.getBoundingClientRect();
  let x = ancestorBox.left + (ancestorBox.width / 2);
  let y = inertBox.bottom + ((ancestorBox.bottom - inertBox.bottom) / 2);
  await movePointerTo(x, y);
  await Promise.all(promises);
}, "Tests that any pointer event on a non-inert element is correctly targeted to that element");

promise_test(async () => {
  // Make the containing element inert - now events should go to "container"
  // which is the non-inert ancestor at the same position
  inertContainer.inert = true;
  await movePointerTo(0, 0);

  let promises = expectEventsOn(["pointerover", "pointerenter", "pointermove",
                                 "pointerdown", "pointerup" ],
                                ancestorContainer);

  promises = promises.concat(unexpectEventsOn(["pointerout", "pointerleave"],
                                              ancestorContainer));
  await clickOn(foreground);
  let ancestorBox = ancestorContainer.getBoundingClientRect();
  let inertBox = inertContainer.getBoundingClientRect();
  let x = ancestorBox.left + (ancestorBox.width / 2);
  let y = inertBox.bottom + ((ancestorBox.bottom - inertBox.bottom) / 2);
  await movePointerTo(x, y);
  await Promise.all(promises);
}, 'Tests that any pointer event on an inert element is targeted to the nearest non-inert ancestor at the same coordinates');
  </script>
</body>
</html>



<!DOCTYPE html>
<html>
<head>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<style>
button#foreground,
button#background {
  position: absolute;
  top: 75px;
  left: 50px;
  width: 100px;
  height: 20px;
}

button#background {
  left: 75px;
  width: 150px;
  height: 40px;
  top: 125px;
  line-height: 53px;
}

.clicked {
  background-color: red;
}

#ancestorContainer.clicked {
  background-color: green;
}

#ancestorContainer {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: blue;
}

#displacedAncestor {
  position: absolute;
  top: 13px;
  left: 240px;
  width: 300px;
  height: 250px;
  background-color: #ff89;
}

#displacedAncestor.clicked {
  background-color: #f009;
}

#inertContainer {
  background-color: #fff9;
  position: absolute;
  top: 35px;
  left: -192px;
  width: 200px;
  height: 200px;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 1px solid black;
}

legend {
  background-color: white;
  border: 1px solid black;
  margin-left: 5px;
}

button.clicked::after {
  content: " (clicked)";
}

.clicked > legend::after {
  content: " (clicked)";
}

</style>
</head>
<body>
  <p>Click on "foreground".</p>
  <ul>
    <li>The blue square ("Non-inert ancestor container") should turn green.</li>
    <li>The yellow, semi-transparent square ("Non-inert, displaced container") should not turn red.</li>
    <li>"Non-inert button" should not turn red.</li>
  </ul>
  <p>(The full test suite checks a range of events.)</p>
  <fieldset id="ancestorContainer">
    <legend>Non-inert ancestor container</legend>
    <button id="background">background</button>
    <fieldset id="displacedAncestor">
      <legend>Non-inert, displaced ancestor</legend>
      <fieldset id="inertContainer" inert>
        <legend>Inert container</legend>
        <button id="foreground">foreground</button>
      </fieldset>
    </fieldset>
  </fieldset>

  <script>
document.body.addEventListener('click', (e) => {
  e.target.classList.add('clicked');
});

function clickOn(element) {
  return new test_driver.Actions()
      .pointerMove(0, 0, {origin: element})
      .pointerDown({button: test_driver.Actions.prototype.ButtonType.LEFT})
      .pointerUp({button: test_driver.Actions.prototype.ButtonType.LEFT})
      .send();
}

function auxClickOn(element) {
  return new test_driver.Actions()
      .pointerMove(0, 0, {origin: element})
      .pointerDown({button: test_driver.Actions.prototype.ButtonType.RIGHT})
      .pointerUp({button: test_driver.Actions.prototype.ButtonType.RIGHT})
      .send();
}

function dblClickOn(element) {
  return new test_driver.Actions()
      .pointerMove(0, 0, {origin: element})
      .pointerDown({button: test_driver.Actions.prototype.ButtonType.LEFT})
      .pointerUp({button: test_driver.Actions.prototype.ButtonType.LEFT})
      .pointerDown({button: test_driver.Actions.prototype.ButtonType.LEFT})
      .pointerUp({button: test_driver.Actions.prototype.ButtonType.LEFT})
      .send();
}

function movePointerOver(element) {
  let rect = element.getBoundingClientRect();
  return new test_driver.Actions()
      .pointerMove(0, 0, { origin: element })
      .send();
}

function movePointerTo(x, y) {
  return new test_driver.Actions()
      .pointerMove(x, y, { origin: "viewport" })
      .send();
}

function expectEventsOn(events, element) {
  let promises = [];
  for (event of events) {
    ((event, element) => {
      var promise = new Promise((resolve, reject) => {
        let f = (e) => {
          assert_equals(e.type, event);
          assert_equals(e.target, element);
          resolve();
        }
        element.addEventListener(event, f, { capture: true, once: true });

        step_timeout(() => {
          element.removeEventListener(event, f, { capture: true });
          reject("did not get " + event + " on " + element.id);
        }, 1000);
      });
      promises.push(promise);
    })(event, element);
  }
  return promises;
}

function unexpectEventsOn(events, element) {
  let promises = [];
  for (event of events) {
    ((event, element) => {
      var promise = new Promise((resolve, reject) => {
        let f = (e) => {
          assert_equals(e.type, event);
          assert_equals(e.target, element);
          reject("got " + e.type + " on " + e.target.id);
        }
        element.addEventListener(event, f, { capture: true, once: true });

        step_timeout(() => {
          element.removeEventListener(event, f, { capture: true });
          resolve();
        }, 1000);
      });
      promises.push(promise);
    })(event, element);
  }
  return promises;
}

test(() => {
  let rect = foreground.getBoundingClientRect();
  let center_x = rect.left + (rect.width / 2);
  let center_y = rect.top + (rect.height / 2);
  assert_equals(document.elementsFromPoint(center_x, center_y)[0], foreground);
}, "elementsFromPoint returns inert element");

promise_test(async () => {
  // Test mouse events on non-inert element - events should go to "foreground"
  inertContainer.inert = false;
  await movePointerTo(0, 0);
  let promises = expectEventsOn(["mouseover", "mouseenter", "mousemove", "mousedown",
                                 "mouseup", "click", "auxclick", "mouseout",
                                 "mouseleave"],
                                foreground);
  await clickOn(foreground);
  await auxClickOn(foreground);
  await dblClickOn(foreground);
  let ancestorBox = ancestorContainer.getBoundingClientRect();
  let inertBox = inertContainer.getBoundingClientRect();
  let x = ancestorBox.left + (ancestorBox.width / 2);
  let y = inertBox.bottom + ((ancestorBox.bottom - inertBox.bottom) / 2);
  await movePointerTo(x, y);
  await Promise.all(promises);
}, "Tests that any mouse event on a non-inert element is correctly targeted to that element");

promise_test(async () => {
  // Make the containing element inert - now events should go to "container"
  // which is the non-inert ancestor at the same position
  inertContainer.inert = true;
  await movePointerTo(0, 0);

  let promises = expectEventsOn(["mouseover", "mouseenter", "mousemove", "mousedown",
                                 "mouseup", "click", "auxclick"],
                                ancestorContainer);

  // TODO(aboxhall): We are getting these unexpected events. Why?
  promises = promises.concat(unexpectEventsOn(["mouseout", "mouseleave"],
                                              ancestorContainer));

  await clickOn(foreground);
  await auxClickOn(foreground);
  await dblClickOn(foreground);
  let ancestorBox = ancestorContainer.getBoundingClientRect();
  let inertBox = inertContainer.getBoundingClientRect();
  let x = ancestorBox.left + (ancestorBox.width / 2);
  let y = inertBox.bottom + ((ancestorBox.bottom - inertBox.bottom) / 2);
  await movePointerTo(x, y);
  await Promise.all(promises);
}, 'Tests that any mouse event on an inert element is targeted to the nearest non-inert ancestor at the same coordinates');

promise_test(async () => {
  // Test pointer events on non-inert element - events should go to "foreground"
  inertContainer.inert = false;
  await movePointerTo(0, 0);

  let promises = expectEventsOn(["pointerover", "pointerenter", "pointermove",
                                 "pointerdown", "pointerup", "pointerout",
                                 "pointerleave"],
                                foreground);
  await clickOn(foreground);
  let ancestorBox = ancestorContainer.getBoundingClientRect();
  let inertBox = inertContainer.getBoundingClientRect();
  let x = ancestorBox.left + (ancestorBox.width / 2);
  let y = inertBox.bottom + ((ancestorBox.bottom - inertBox.bottom) / 2);
  await movePointerTo(x, y);
  await Promise.all(promises);
}, "Tests that any pointer event on a non-inert element is correctly targeted to that element");

promise_test(async () => {
  // Make the containing element inert - now events should go to "container"
  // which is the non-inert ancestor at the same position
  inertContainer.inert = true;
  await movePointerTo(0, 0);

  let promises = expectEventsOn(["pointerover", "pointerenter", "pointermove",
                                 "pointerdown", "pointerup" ],
                                ancestorContainer);

  // TODO(aboxhall): We are getting these unexpected events. Why?
  promises = promises.concat(unexpectEventsOn(["pointerout", "pointerleave"],
                                              ancestorContainer));

  await clickOn(foreground);
  let ancestorBox = ancestorContainer.getBoundingClientRect();
  let inertBox = inertContainer.getBoundingClientRect();
  let x = ancestorBox.left + (ancestorBox.width / 2);
  let y = inertBox.bottom + ((ancestorBox.bottom - inertBox.bottom) / 2);
  await movePointerTo(x, y);
  await Promise.all(promises);
}, 'Tests that any pointer event on an inert element is targeted to the nearest non-inert ancestor at the same coordinates');

</script>
</body>
</html>



None
------------------------------------------------------------------------
List of files:
/LayoutTests/imported/w3c/web-platform-tests/inert/inert-computed-style.html
/LayoutTests/imported/w3c/web-platform-tests/inert/inert-does-not-match-disabled-selector.tentative.html
/LayoutTests/imported/w3c/web-platform-tests/inert/inert-in-shadow-dom.tentative.html
/LayoutTests/imported/w3c/web-platform-tests/inert/inert-inlines.tentative.html

/LayoutTests/imported/w3c/web-platform-tests/inert/inert-node-is-unselectable.tentative.html
/LayoutTests/imported/w3c/web-platform-tests/inert/inert-on-non-html.tentative.html
/LayoutTests/imported/w3c/web-platform-tests/inert/inert-on-slots.tentative.html
/LayoutTests/imported/w3c/web-platform-tests/inert/inert-retargeting-iframe.tentative.html
/LayoutTests/imported/w3c/web-platform-tests/inert/inert-retargeting.tentative.html

Return to Bug 231392

Lines 5189-5198 webkit.org/b/230004 imported/w3c/web-platform-tests/css/css-pseudo/selection-ove a/LayoutTests/TestExpectations_sec1
- a/LayoutTests/TestExpectations -4 lines
5189	webkit.org/b/230004 imported/w3c/web-platform-tests/css/css-pseudo/selection-paint-image.html [ ImageOnlyFailure ]	5189	webkit.org/b/230004 imported/w3c/web-platform-tests/css/css-pseudo/selection-paint-image.html [ ImageOnlyFailure ]
5190	webkit.org/b/230004 imported/w3c/web-platform-tests/css/css-pseudo/selection-textarea-011.html [ ImageOnlyFailure ]	5190	webkit.org/b/230004 imported/w3c/web-platform-tests/css/css-pseudo/selection-textarea-011.html [ ImageOnlyFailure ]
5191		5191
5192	# Awaiting official CSSWG resolution making these tests irrelevant: https://lists.w3.org/Archives/Public/www-style/2021Sep/0004.html
5193	imported/w3c/web-platform-tests/inert/inert-retargeting.tentative.html [ Skip ]
5194	imported/w3c/web-platform-tests/inert/inert-retargeting-iframe.tentative.html [ Skip ]
5195
5196	imported/w3c/web-platform-tests/content-security-policy/script-src/ [ DumpJSConsoleLogInStdErr ]	5192	imported/w3c/web-platform-tests/content-security-policy/script-src/ [ DumpJSConsoleLogInStdErr ]
5197		5193
5198	# import-w3c-tests copies -notref.html to -expected.html, so expected image failure here.	5194	# import-w3c-tests copies -notref.html to -expected.html, so expected image failure here.

Lines 1-3 a/LayoutTests/ChangeLog_sec1
- a/LayoutTests/ChangeLog +11 lines
		1	2021-10-08 Tim Nguyen <ntim@apple.com>
		2
		3	Re-sync the-dialog-element and inert WPT from upstream
		4	https://bugs.webkit.org/show_bug.cgi?id=231392
		5
		6	Reviewed by NOBODY (OOPS!).
		7
		8	Upstream commit: https://github.com/web-platform-tests/wpt/commit/a44515b7c7774abf1256f488bf0e9dc02459fced
		9
		10	* TestExpectations:
		11
1	2021-10-07 Antti Koivisto <antti@apple.com>	12	2021-10-07 Antti Koivisto <antti@apple.com>
2		13
3	REGRESSION (IFC selections): Overlapping selection rectangles when selecting preformatted text	14	REGRESSION (IFC selections): Overlapping selection rectangles when selecting preformatted text

Lines 1-3 a/LayoutTests/imported/w3c/ChangeLog_sec1
- a/LayoutTests/imported/w3c/ChangeLog +21 lines
		1	2021-10-08 Tim Nguyen <ntim@apple.com>
		2
		3	Re-sync the-dialog-element and inert WPT from upstream
		4	https://bugs.webkit.org/show_bug.cgi?id=231392
		5
		6	Reviewed by NOBODY (OOPS!).
		7
		8	Upstream commit: https://github.com/web-platform-tests/wpt/commit/a44515b7c7774abf1256f488bf0e9dc02459fced
		9
		10	* resources/resource-files.json:
		11	* web-platform-tests/html/semantics/interactive-elements/the-dialog-element/dialog-inert.tentative-expected.txt: Added.
		12	* web-platform-tests/html/semantics/interactive-elements/the-dialog-element/dialog-inert.tentative.html: Added.
		13	* web-platform-tests/html/semantics/interactive-elements/the-dialog-element/w3c-import.log:
		14	* web-platform-tests/inert/frame/button.html: Removed.
		15	* web-platform-tests/inert/frame/w3c-import.log: Removed.
		16	* web-platform-tests/inert/inert-computed-style-expected.txt: Added.
		17	* web-platform-tests/inert/inert-computed-style.html: Added.
		18	* web-platform-tests/inert/inert-retargeting-iframe.tentative.html: Removed.
		19	* web-platform-tests/inert/inert-retargeting.tentative.html: Removed.
		20	* web-platform-tests/inert/w3c-import.log:
		21
1	2021-10-07 Rob Buis <rbuis@igalia.com>	22	2021-10-07 Rob Buis <rbuis@igalia.com>
2		23
3	Resync the-img-element WPT tests from upstream	24	Resync the-img-element WPT tests from upstream

Line 0 a/LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/dialog-inert.tentative.html_sec1
- a/LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/dialog-inert.tentative.html +45 lines
	1	<!doctype html>
	2	<meta charset=utf-8>
	3	<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
	4	<link rel="author" title="Mozilla" href="https://mozilla.org">
	5	<script src="/resources/testharness.js"></script>
	6	<script src="/resources/testharnessreport.js"></script>
	7	<style>
	8	body { margin: 0 }
	9	dialog {
	10	width: 100%;
	11	height: 100%;
	12	max-width: 100%;
	13	max-height: 100%;
	14	box-sizing: border-box;
	15	padding: 0;
	16	}
	17	dialog::backdrop {
	18	display: none;
	19	}
	20	</style>
	21	<dialog id=dialog>Something</dialog>
	22	<script>
	23	test(function() {
	24	let dialog = document.getElementById("dialog");
	25	dialog.showModal();
	26	assert_equals(
	27	document.elementFromPoint(10, 10),
	28	dialog,
	29	"Dialog is hittable by default",
	30	);
	31	dialog.inert = true;
	32	assert_not_equals(
	33	document.elementFromPoint(10, 10),
	34	dialog,
	35	"Dialog becomes inert dynamically",
	36	);
	37	dialog.close();
	38	dialog.showModal();
	39	assert_not_equals(
	40	document.elementFromPoint(10, 10),
	41	dialog,
	42	"Dialog remains inert after open",
	43	);
	44	});
	45	</script>

Lines 41-46 List of files: a/LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/w3c-import.log_sec1
- a/LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/w3c-import.log +3 lines
41	/LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/dialog-enabled.html	41	/LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/dialog-enabled.html
42	/LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/dialog-focusing-steps-prevent-autofocus.html	42	/LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/dialog-focusing-steps-prevent-autofocus.html
43	/LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/dialog-form-submission.html	43	/LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/dialog-form-submission.html
		44	/LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/dialog-inert.tentative.html
44	/LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/dialog-keydown-preventDefault.html	45	/LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/dialog-keydown-preventDefault.html
45	/LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/dialog-not-in-tree-crash.html	46	/LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/dialog-not-in-tree-crash.html
46	/LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/dialog-open.html	47	/LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/dialog-open.html
Lines 80-85 List of files: a/LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/w3c-import.log_sec2
80	/LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/top-layer-display-none.html	81	/LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/top-layer-display-none.html
81	/LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/top-layer-nesting-expected.html	82	/LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/top-layer-nesting-expected.html
82	/LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/top-layer-nesting.html	83	/LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/top-layer-nesting.html
		84	/LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-opacity-expected.html
		85	/LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/top-layer-parent-opacity.html
83	/LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/top-layer-stacking-correct-order-remove-readd-expected.html	86	/LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/top-layer-stacking-correct-order-remove-readd-expected.html
84	/LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/top-layer-stacking-correct-order-remove-readd.html	87	/LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/top-layer-stacking-correct-order-remove-readd.html
85	/LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/top-layer-stacking-dynamic-expected.html	88	/LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/top-layer-stacking-dynamic-expected.html

Lines 1-36 a/LayoutTests/imported/w3c/web-platform-tests/inert/frame/button.html_sec1
- a/LayoutTests/imported/w3c/web-platform-tests/inert/frame/button.html -36 lines
1	<!DOCTYPE html>
2	<html>
3	<head>
4	<style>
5	body {
6	overflow: hidden;
7	}
8
9	button#background {
10	position: absolute;
11	top: 0;
12	left: 0;
13	width: 150px;
14	height: 40px;
15	line-height: 53px;
16	}
17
18	button.clicked {
19	background-color: red;
20	}
21
22	button.clicked::after {
23	content: " (clicked)";
24	}
25
26	</style>
27	</head>
28	<body>
29	<button id="background">background</button>
30	<script>
31	document.body.addEventListener('click', (e) => {
32	e.target.classList.add('clicked');
33	});
34	</script>
35	</body>
36	</html>

Lines 1-17 a/LayoutTests/imported/w3c/web-platform-tests/inert/frame/w3c-import.log_sec1
- a/LayoutTests/imported/w3c/web-platform-tests/inert/frame/w3c-import.log -17 lines
1	The tests in this directory were imported from the W3C repository.
2	Do NOT modify these tests directly in WebKit.
3	Instead, create a pull request on the WPT github:
4	https://github.com/web-platform-tests/wpt
5
6	Then run the Tools/Scripts/import-w3c-tests in WebKit to reimport
7
8	Do NOT modify or remove this file.
9
10	------------------------------------------------------------------------
11	Properties requiring vendor prefixes:
12	None
13	Property values requiring vendor prefixes:
14	None
15	------------------------------------------------------------------------
16	List of files:
17	/LayoutTests/imported/w3c/web-platform-tests/inert/frame/button.html

Line 0 a/LayoutTests/imported/w3c/web-platform-tests/inert/inert-computed-style.html_sec1
- a/LayoutTests/imported/w3c/web-platform-tests/inert/inert-computed-style.html +49 lines
	1	<!DOCTYPE html>
	2	<meta charset="utf-8">
	3	<title>inert isn't hit-testable, but that isn't expose in the computed style</title>
	4	<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
	5	<link rel="author" title="Mozilla" href="https://mozilla.org">
	6	<script src="/resources/testharness.js"></script>
	7	<script src="/resources/testharnessreport.js"></script>
	8	<style>
	9	body { margin: 0 }
	10	div {
	11	width: 100px;
	12	height: 100px;
	13	position: absolute;
	14	top: 0;
	15	left: 0;
	16	background-color: blue;
	17	}
	18	#non-inert {
	19	background-color: red;
	20	}
	21	</style>
	22	<div id="non-inert"></div>
	23	<div id="inert"></div>
	24	<script>
	25	test(function() {
	26	let inert = document.getElementById("inert");
	27	assert_equals(
	28	document.elementFromPoint(50, 50),
	29	inert,
	30	"not-yet-inert node hit-test before non-inert node",
	31	);
	32	inert.inert = true;
	33	assert_equals(
	34	document.elementFromPoint(50, 50),
	35	document.getElementById("non-inert"),
	36	"inert node is transparent to events (as pointer-events: none)",
	37	);
	38	assert_equals(
	39	getComputedStyle(inert).pointerEvents,
	40	"auto",
	41	"inert node doesn't change pointer-events computed value",
	42	);
	43	assert_equals(
	44	getComputedStyle(inert).userSelect,
	45	"auto",
	46	"inert node doesn't change pointer-events computed value",
	47	);
	48	});
	49	</script>