forked from mirrors/gecko-dev
3c0eb90aaf
Automatic update from web-platform-tests Restore behavior (hit testing, layout shifts) from before splitting of nodes for individual transform properties. This restores FragmentData::PreTransform and related code to its behavior prior to the splitting of transform nodes for individual transform properties. (For the parts involving layout shift calculations, some of the "related code" is rather distant.) All of the added tests in css/css-transforms/transform-hit-testing.html fail without the change (though I'm actually not sure why the one testing 'transform' does). This adds four tests to layout-instability/, all slight modifications of existing tests: * local-shift-without-viewport-shift-2.html based on local-shift-without-viewport-shift.html * shift-with-counter-scroll-and-translate.html based on shift-with-counter-scroll-and-transform.html * translate-change.html based on transform-change.html * translate-counter-layout-shift.html based on transform-counter-layout-shift.html Of those four added tests, two of them are not affected by this change, and two of them (shift-with-counter-scroll-and-translate.html and translate-counter-layout-shift.html) fail prior to this change and pass with it. This also adds a pair of tests in wpt_internal that attempt to exercise the unspecified "layout shift root" concept. (These tests have a bit of error tolerance which is well within the difference between using Math.round() on the pixel values and using Math.floor() on the pixel values.) Fixed: 1349111 Bug: 696374, 1278452 Change-Id: Ic5a3328571d8d53d372dd4649d42e176d0cc7e9a Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3810679 Commit-Queue: David Baron <dbaron@chromium.org> Reviewed-by: Xianzhu Wang <wangxianzhu@chromium.org> Cr-Commit-Position: refs/heads/main@{#1034551} -- wpt-commits: 631ec10babdcb49798c9efc09078dbd13caf1bb2 wpt-pr: 35439
153 lines
3.8 KiB
HTML
153 lines
3.8 KiB
HTML
<!DOCTYPE HTML>
|
|
<title>CSS Test (Transforms): Hit Testing</title>
|
|
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
|
|
<link rel="author" title="Google" href="http://www.google.com/">
|
|
<link rel="help" href="https://www.w3.org/TR/css-transforms-1/#transform-property">
|
|
<link rel="help" href="https://www.w3.org/TR/css-transforms-2/#individual-transforms">
|
|
<meta name="flags" content="dom">
|
|
<style>
|
|
|
|
html, body {
|
|
height: 100%;
|
|
width: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: none;
|
|
}
|
|
|
|
body { margin: 50px; }
|
|
|
|
</style>
|
|
<script>
|
|
|
|
let body_x_margin = 50;
|
|
let body_y_margin = 50;
|
|
|
|
</script>
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
|
|
<body>
|
|
<script>
|
|
|
|
class Point {
|
|
constructor(x, y) {
|
|
this.x = x;
|
|
this.y = y;
|
|
}
|
|
}
|
|
|
|
let simple_tests = [
|
|
// In this list of tests, test_points_inside and test_points_outside
|
|
// are relative to the element's untransformed origin (top, left).
|
|
{
|
|
description: "rectangle with 'translate' and 'rotate'",
|
|
styles: "width: 100px; height: 50px; translate: 30px; rotate: 20deg;",
|
|
test_points_inside: [
|
|
new Point(28, 32),
|
|
new Point(44, -10),
|
|
new Point(133, 22),
|
|
new Point(117, 64),
|
|
new Point(65, 27),
|
|
],
|
|
test_points_outside: [
|
|
new Point(30, 5),
|
|
new Point(28, 37),
|
|
new Point(100, 2),
|
|
new Point(124, 58),
|
|
],
|
|
},
|
|
{
|
|
description: "rectangle with 'transform'",
|
|
styles: "width: 100px; height: 50px; transform: translate(30px) rotate(20deg);",
|
|
test_points_inside: [
|
|
new Point(28, 32),
|
|
new Point(44, -10),
|
|
new Point(133, 22),
|
|
new Point(117, 64),
|
|
new Point(65, 27),
|
|
],
|
|
test_points_outside: [
|
|
new Point(30, 5),
|
|
new Point(28, 37),
|
|
new Point(100, 2),
|
|
new Point(124, 58),
|
|
],
|
|
},
|
|
{
|
|
description: "rectangle with 'translate' and 'rotate' and 'scale' and 'transform'",
|
|
styles: "width: 100px; height: 50px; translate: 30px; rotate: 40deg; scale: 2; transform: rotate(-20deg) scale(0.5)",
|
|
test_points_inside: [
|
|
new Point(28, 32),
|
|
new Point(44, -10),
|
|
new Point(133, 22),
|
|
new Point(117, 64),
|
|
new Point(65, 27),
|
|
],
|
|
test_points_outside: [
|
|
new Point(30, 5),
|
|
new Point(28, 37),
|
|
new Point(100, 2),
|
|
new Point(124, 58),
|
|
],
|
|
},
|
|
{
|
|
description: "square with 'rotate'",
|
|
styles: "width: 10px; height: 10px; rotate: 90deg; transform-origin: 0 10px",
|
|
test_points_inside: [
|
|
new Point(1, 11),
|
|
new Point(9, 11),
|
|
new Point(1, 19),
|
|
new Point(9, 19),
|
|
],
|
|
test_points_outside: [
|
|
new Point(1, 9),
|
|
new Point(9, 9),
|
|
],
|
|
},
|
|
{
|
|
description: "square with 'scale'",
|
|
styles: "width: 10px; height: 10px; scale: 0.2;",
|
|
test_points_inside: [
|
|
new Point(4, 4),
|
|
new Point(5, 4),
|
|
new Point(4, 5),
|
|
new Point(5, 5),
|
|
],
|
|
test_points_outside: [
|
|
new Point(3, 3),
|
|
new Point(3, 5),
|
|
new Point(3, 6),
|
|
new Point(5, 3),
|
|
new Point(5, 6),
|
|
new Point(6, 3),
|
|
new Point(6, 5),
|
|
new Point(6, 6),
|
|
],
|
|
},
|
|
];
|
|
|
|
for (let t of simple_tests) {
|
|
test(function() {
|
|
let e = document.createElement("div");
|
|
e.setAttribute("style", t.styles);
|
|
document.body.appendChild(e);
|
|
|
|
for (let p of t.test_points_inside) {
|
|
let res = document.elementFromPoint(p.x + body_x_margin,
|
|
p.y + body_y_margin);
|
|
assert_equals(res, e,
|
|
`point (${p.x}, ${p.y}) is inside element`);
|
|
}
|
|
|
|
for (let p of t.test_points_outside) {
|
|
let res = document.elementFromPoint(p.x + body_x_margin,
|
|
p.y + body_y_margin);
|
|
assert_equals(res, document.body,
|
|
`point (${p.x}, ${p.y}) is outside element`);
|
|
}
|
|
|
|
e.remove();
|
|
}, `hit testing of ${t.description}`);
|
|
}
|
|
</script>
|