Skip to content

test(e2e): measure a dropped node against the copy it is welded to (#566)#568

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
AndresL230 merged 2 commits into from
Aug 23, 2026
Merged

test(e2e): measure a dropped node against the copy it is welded to (#566) #568

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fb1c80b
test(e2e): measure a dropped node against the copy it is welded to (#…
AndresL230 Aug 22, 2026
9da3e4c
test(e2e): let the journey own its oracle, and put the 1:1 case back …
AndresL230 Aug 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
128 changes: 126 additions & 2 deletions frontend/e2e/landing-drag-field.spec.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -69,6 +69,32 @@ async function openLanding(page: Page): Promise<number> {
* nothing left to autoscroll into and a 300px scroll assertion cannot be met.
*/
const CLUSTER = "4";

/**
* The copy cluster 4 is welded to: the `faq` question column.
*
* Named here, NOT read out of the field's `data-drag-track`. Taking the
* reference from the product would make this journey follow the product:
* delete `faq` from `DragField.tsx`'s `TRACKS` and the clusters go back to
* sliding 374px out from under the words they annotate — the regression
* 8bb34869 fixed — but a test that re-derived its own expectation would
* re-frame itself along with it and stay green on exactly that. The oracle
* has to belong to the test.
*
* `faq` is the only section in `TRACKS`, and this column is `sticky; top:110`,
* so the section can scroll 300px while the copy moves ~202 — which is why
* measuring a cluster here against raw `scrollY` was wrong.
*/
const FAQ_SECTION = "faq";
const FAQ_COPY = '[data-drag-anchor="faq"]';

/**
* A cluster in a section with no weld and no pin, where moving 1:1 with the
* document IS the contract. `newsletter` holds clusters 6 and 7, is absent
* from `TRACKS`, and — unlike `cta`, which sits ~120px from the end of the
* document — has room below it for a 300px scroll assertion.
*/
const UNTRACKED_CLUSTER = "6";
/** A satellite, not the course puck: the link spring pulls hardest on these. */
const SATELLITE = 1;

Expand DownExpand Up@@ -120,6 +146,36 @@ async function probe(page: Page): Promise<Probe> {
});
}

/**
* The probe ring and the FAQ copy it is welded to, sampled in ONE frame.
*
* One `page.evaluate`, not two: the sim is still integrating when this runs
* (`SCROLL_QUIET_MS` expired long before), so sampling the node and its
* reference in separate round trips compares two different frames.
*
* The column is resolved the way `engine/sim.ts` resolves it — scoped to the
* field's own section, not `document`-wide — so this measures against the
* element the sim actually bound to. A global lookup would silently diverge
* from the product the moment a second match appeared earlier in the page.
*/
async function probeAgainstCopy(
page: Page,
): Promise<{ x: number; y: number; copyTop: number; scrollY: number }> {
return page.evaluate(({ section, copy }) => {
const field = document.querySelector(`#${section} .drag-field`);
if (!field) throw new Error(`no .drag-field in #${section}`);
const el = (field.closest("section") ?? document).querySelector(copy);
if (!el) throw new Error(`${copy} is not inside #${section}`);
const b = document.querySelector("[data-e2e-probe]")!.getBoundingClientRect();
return {
x: b.left + b.width / 2,
y: b.top + b.height / 2,
copyTop: el.getBoundingClientRect().top,
scrollY: window.scrollY,
};
}, { section: FAQ_SECTION, copy: FAQ_COPY });
}

test("nodes do not move of their own accord while the page scrolls", async ({ page }) => {
const height = await openLanding(page);

Expand DownExpand Up@@ -346,11 +402,79 @@ test("a dropped node stays where it was put, and scrolls with the page", async (
// there. SWAY_PX is the envelope that buys.
expect(Math.hypot(settled.x - dropped.x, settled.y - dropped.y)).toBeLessThan(SWAY_PX);

// Placed, not detached: it belongs to the page and moves with it.
// Placed, not detached: it belongs to the copy it was dropped over.
//
// Measured as an OFFSET that must not change, which is the idiom the
// act-tutor journey above already uses for the same invariant — no delta
// arithmetic whose sign only works out because the page happens to scroll
// down. The node's distance from the FAQ column is the thing being pinned.
const before = await probeAgainstCopy(page);
await page.evaluate(() => window.scrollBy(0, 300));
await page.waitForTimeout(600);
const after = await probeAgainstCopy(page);

// Preconditions first, most-basic first, so a failure names its own cause
// instead of sending the next reader to `TRACKS` and `syncClusters()`.
// `toBeCloseTo`, not `toBe`: `scrollY` is a browser-computed offset that is
// only integral because `deviceScaleFactor` happens to be 1.
expect(after.scrollY - before.scrollY, "the page should have scrolled")
.toBeCloseTo(300, 0);
// Signed, not `Math.abs`: scrolling DOWN must carry page content UP. A
// regression that translated the copy downward under a downward scroll
// would satisfy an absolute-value guard, and a node loyally following it
// would satisfy everything below.
//
// The journey can only tell "welded" from "pinned to the screen" while the
// copy still has travel left before its own pin — a node welded to an
// already-pinned column is stationary, and so is a detached overlay. That
// is a property of where `centreCluster` parks the cluster, not of the
// product, so assert it and say so rather than assume it.
expect(
after.copyTop - before.copyTop,
"the FAQ copy was already pinned at the drop position — this journey needs " +
"it mid-travel; check #faq's layout or centreCluster's offset",
).toBeLessThan(-100);

// ...and through all of that the node held its place against the copy.
expect(Math.hypot(
after.x - before.x,
(after.y - after.copyTop) - (before.y - before.copyTop),
)).toBeLessThan(SWAY_PX);
});

/**
* The other half of "belongs to the page", on a cluster where that means what
* it sounds like.
*
* The journey above deliberately measures against the FAQ copy, because that
* is what its cluster is welded to. Something still has to pin the plain
* case — a placed node in an untracked, unpinned section travelling exactly
* with the document — or the file loses the reference frame its own header
* (symptom 4) is about, and a cluster field that detached into a fixed
* overlay would have nothing left to catch it.
*/
test("a dropped node in an untracked section travels 1:1 with the document", async ({ page }) => {
await openLanding(page);
await centreCluster(page, UNTRACKED_CLUSTER);
const ring = await ringOf(page, SATELLITE, UNTRACKED_CLUSTER);

await page.mouse.move(ring.x, ring.y);
await page.mouse.down();
await page.mouse.move(ring.x - 120, ring.y - 60, { steps: 20 });
await page.mouse.up();
await page.waitForTimeout(4_000);
const settled = await probe(page);

await page.evaluate(() => window.scrollBy(0, 300));
await page.waitForTimeout(600);
const scrolled = await probe(page);
expect(Math.hypot(scrolled.x - settled.x, scrolled.y - (settled.y - 300)))

const moved = scrolled.scrollY - settled.scrollY;
expect(moved, "the page should have scrolled").toBeCloseTo(300, 0);
// No `TRACKS` entry and no sticky stage: this cluster owes the document the
// whole 300px. This is the assertion the faq journey used to carry, on the
// cluster where it is actually true.
expect(Math.hypot(scrolled.x - settled.x, scrolled.y - (settled.y - moved)))
.toBeLessThan(SWAY_PX);
});

Expand Down
Loading
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
test(e2e): measure a dropped node against the copy it is welded to (#566) by AndresL230 · Pull Request #568 · SaplingLearn/Sapling · GitHub
Skip to content
test(e2e): measure a dropped node against the copy it is welded to (#566)#568

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

AndresL230
merged 2 commits into

from

Aug 23, 2026
 Merged


test(e2e): measure a dropped node against the copy it is welded to (#566)
#568
 Changes from all commits
Commits

Show all changes


2 commits


Select commit
Hold shift + click to select a range
fb1c80b

test(e2e): measure a dropped node against the copy it is welded to (#…


AndresL230 Aug 22, 2026
9da3e4c

test(e2e): let the journey own its oracle, and put the 1:1 case back …


AndresL230 Aug 22, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


128 changes: 126 additions & 2 deletions
frontend/e2e/landing-drag-field.spec.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -69,6 +69,32 @@ async function openLanding(page: Page): Promise<number> {
 * nothing left to autoscroll into and a 300px scroll assertion cannot be met.
 */
const CLUSTER = "4";

/**
 * The copy cluster 4 is welded to: the `faq` question column.
 *
 * Named here, NOT read out of the field's `data-drag-track`. Taking the
 * reference from the product would make this journey follow the product:
 * delete `faq` from `DragField.tsx`'s `TRACKS` and the clusters go back to
 * sliding 374px out from under the words they annotate — the regression
 * 8bb34869 fixed — but a test that re-derived its own expectation would
 * re-frame itself along with it and stay green on exactly that. The oracle
 * has to belong to the test.
 *
 * `faq` is the only section in `TRACKS`, and this column is `sticky; top:110`,
 * so the section can scroll 300px while the copy moves ~202 — which is why
 * measuring a cluster here against raw `scrollY` was wrong.
 */
const FAQ_SECTION = "faq";
const FAQ_COPY = '[data-drag-anchor="faq"]';

/**
 * A cluster in a section with no weld and no pin, where moving 1:1 with the
 * document IS the contract. `newsletter` holds clusters 6 and 7, is absent
 * from `TRACKS`, and — unlike `cta`, which sits ~120px from the end of the
 * document — has room below it for a 300px scroll assertion.
 */
const UNTRACKED_CLUSTER = "6";
/** A satellite, not the course puck: the link spring pulls hardest on these. */
const SATELLITE = 1;

Expand DownExpand Up@@ -120,6 +146,36 @@ async function probe(page: Page): Promise<Probe> {
 });
}

/**
 * The probe ring and the FAQ copy it is welded to, sampled in ONE frame.
 *
 * One `page.evaluate`, not two: the sim is still integrating when this runs
 * (`SCROLL_QUIET_MS` expired long before), so sampling the node and its
 * reference in separate round trips compares two different frames.
 *
 * The column is resolved the way `engine/sim.ts` resolves it — scoped to the
 * field's own section, not `document`-wide — so this measures against the
 * element the sim actually bound to. A global lookup would silently diverge
 * from the product the moment a second match appeared earlier in the page.
 */
async function probeAgainstCopy(
 page: Page,
): Promise<{ x: number; y: number; copyTop: number; scrollY: number }> {
 return page.evaluate(({ section, copy }) => {
 const field = document.querySelector(`#${section} .drag-field`);
 if (!field) throw new Error(`no .drag-field in #${section}`);
 const el = (field.closest("section") ?? document).querySelector(copy);
 if (!el) throw new Error(`${copy} is not inside #${section}`);
 const b = document.querySelector("[data-e2e-probe]")!.getBoundingClientRect();
 return {
 x: b.left + b.width / 2,
 y: b.top + b.height / 2,
 copyTop: el.getBoundingClientRect().top,
 scrollY: window.scrollY,
 };
 }, { section: FAQ_SECTION, copy: FAQ_COPY });
}

test("nodes do not move of their own accord while the page scrolls", async ({ page }) => {
 const height = await openLanding(page);

Expand DownExpand Up@@ -346,11 +402,79 @@ test("a dropped node stays where it was put, and scrolls with the page", async (
 // there. SWAY_PX is the envelope that buys.
 expect(Math.hypot(settled.x - dropped.x, settled.y - dropped.y)).toBeLessThan(SWAY_PX);

 // Placed, not detached: it belongs to the page and moves with it.
 // Placed, not detached: it belongs to the copy it was dropped over.
 //
 // Measured as an OFFSET that must not change, which is the idiom the
 // act-tutor journey above already uses for the same invariant — no delta
 // arithmetic whose sign only works out because the page happens to scroll
 // down. The node's distance from the FAQ column is the thing being pinned.
 const before = await probeAgainstCopy(page);
 await page.evaluate(() => window.scrollBy(0, 300));
 await page.waitForTimeout(600);
 const after = await probeAgainstCopy(page);

 // Preconditions first, most-basic first, so a failure names its own cause
 // instead of sending the next reader to `TRACKS` and `syncClusters()`.
 // `toBeCloseTo`, not `toBe`: `scrollY` is a browser-computed offset that is
 // only integral because `deviceScaleFactor` happens to be 1.
 expect(after.scrollY - before.scrollY, "the page should have scrolled")
 .toBeCloseTo(300, 0);
 // Signed, not `Math.abs`: scrolling DOWN must carry page content UP. A
 // regression that translated the copy downward under a downward scroll
 // would satisfy an absolute-value guard, and a node loyally following it
 // would satisfy everything below.
 //
 // The journey can only tell "welded" from "pinned to the screen" while the
 // copy still has travel left before its own pin — a node welded to an
 // already-pinned column is stationary, and so is a detached overlay. That
 // is a property of where `centreCluster` parks the cluster, not of the
 // product, so assert it and say so rather than assume it.
 expect(
 after.copyTop - before.copyTop,
 "the FAQ copy was already pinned at the drop position — this journey needs " +
 "it mid-travel; check #faq's layout or centreCluster's offset",
 ).toBeLessThan(-100);

 // ...and through all of that the node held its place against the copy.
 expect(Math.hypot(
 after.x - before.x,
 (after.y - after.copyTop) - (before.y - before.copyTop),
 )).toBeLessThan(SWAY_PX);
});

/**
 * The other half of "belongs to the page", on a cluster where that means what
 * it sounds like.
 *
 * The journey above deliberately measures against the FAQ copy, because that
 * is what its cluster is welded to. Something still has to pin the plain
 * case — a placed node in an untracked, unpinned section travelling exactly
 * with the document — or the file loses the reference frame its own header
 * (symptom 4) is about, and a cluster field that detached into a fixed
 * overlay would have nothing left to catch it.
 */
test("a dropped node in an untracked section travels 1:1 with the document", async ({ page }) => {
 await openLanding(page);
 await centreCluster(page, UNTRACKED_CLUSTER);
 const ring = await ringOf(page, SATELLITE, UNTRACKED_CLUSTER);

 await page.mouse.move(ring.x, ring.y);
 await page.mouse.down();
 await page.mouse.move(ring.x - 120, ring.y - 60, { steps: 20 });
 await page.mouse.up();
 await page.waitForTimeout(4_000);
 const settled = await probe(page);

 await page.evaluate(() => window.scrollBy(0, 300));
 await page.waitForTimeout(600);
 const scrolled = await probe(page);
 expect(Math.hypot(scrolled.x - settled.x, scrolled.y - (settled.y - 300)))

 const moved = scrolled.scrollY - settled.scrollY;
 expect(moved, "the page should have scrolled").toBeCloseTo(300, 0);
 // No `TRACKS` entry and no sticky stage: this cluster owes the document the
 // whole 300px. This is the assertion the faq journey used to carry, on the
 // cluster where it is actually true.
 expect(Math.hypot(scrolled.x - settled.x, scrolled.y - (settled.y - moved)))
 .toBeLessThan(SWAY_PX);
});

Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
test(e2e): measure a dropped node against the copy it is welded to (#566) by AndresL230 · Pull Request #568 · SaplingLearn/Sapling · GitHub
Skip to content
test(e2e): measure a dropped node against the copy it is welded to (#566)#568

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

AndresL230
merged 2 commits into

from

Aug 23, 2026
 Merged


test(e2e): measure a dropped node against the copy it is welded to (#566)
#568
 Changes from all commits
Commits

Show all changes


2 commits


Select commit
Hold shift + click to select a range
fb1c80b

test(e2e): measure a dropped node against the copy it is welded to (#…


AndresL230 Aug 22, 2026
9da3e4c

test(e2e): let the journey own its oracle, and put the 1:1 case back …


AndresL230 Aug 22, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


128 changes: 126 additions & 2 deletions
frontend/e2e/landing-drag-field.spec.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -69,6 +69,32 @@ async function openLanding(page: Page): Promise<number> {
 * nothing left to autoscroll into and a 300px scroll assertion cannot be met.
 */
const CLUSTER = "4";

/**
 * The copy cluster 4 is welded to: the `faq` question column.
 *
 * Named here, NOT read out of the field's `data-drag-track`. Taking the
 * reference from the product would make this journey follow the product:
 * delete `faq` from `DragField.tsx`'s `TRACKS` and the clusters go back to
 * sliding 374px out from under the words they annotate — the regression
 * 8bb34869 fixed — but a test that re-derived its own expectation would
 * re-frame itself along with it and stay green on exactly that. The oracle
 * has to belong to the test.
 *
 * `faq` is the only section in `TRACKS`, and this column is `sticky; top:110`,
 * so the section can scroll 300px while the copy moves ~202 — which is why
 * measuring a cluster here against raw `scrollY` was wrong.
 */
const FAQ_SECTION = "faq";
const FAQ_COPY = '[data-drag-anchor="faq"]';

/**
 * A cluster in a section with no weld and no pin, where moving 1:1 with the
 * document IS the contract. `newsletter` holds clusters 6 and 7, is absent
 * from `TRACKS`, and — unlike `cta`, which sits ~120px from the end of the
 * document — has room below it for a 300px scroll assertion.
 */
const UNTRACKED_CLUSTER = "6";
/** A satellite, not the course puck: the link spring pulls hardest on these. */
const SATELLITE = 1;

Expand DownExpand Up@@ -120,6 +146,36 @@ async function probe(page: Page): Promise<Probe> {
 });
}

/**
 * The probe ring and the FAQ copy it is welded to, sampled in ONE frame.
 *
 * One `page.evaluate`, not two: the sim is still integrating when this runs
 * (`SCROLL_QUIET_MS` expired long before), so sampling the node and its
 * reference in separate round trips compares two different frames.
 *
 * The column is resolved the way `engine/sim.ts` resolves it — scoped to the
 * field's own section, not `document`-wide — so this measures against the
 * element the sim actually bound to. A global lookup would silently diverge
 * from the product the moment a second match appeared earlier in the page.
 */
async function probeAgainstCopy(
 page: Page,
): Promise<{ x: number; y: number; copyTop: number; scrollY: number }> {
 return page.evaluate(({ section, copy }) => {
 const field = document.querySelector(`#${section} .drag-field`);
 if (!field) throw new Error(`no .drag-field in #${section}`);
 const el = (field.closest("section") ?? document).querySelector(copy);
 if (!el) throw new Error(`${copy} is not inside #${section}`);
 const b = document.querySelector("[data-e2e-probe]")!.getBoundingClientRect();
 return {
 x: b.left + b.width / 2,
 y: b.top + b.height / 2,
 copyTop: el.getBoundingClientRect().top,
 scrollY: window.scrollY,
 };
 }, { section: FAQ_SECTION, copy: FAQ_COPY });
}

test("nodes do not move of their own accord while the page scrolls", async ({ page }) => {
 const height = await openLanding(page);

Expand DownExpand Up@@ -346,11 +402,79 @@ test("a dropped node stays where it was put, and scrolls with the page", async (
 // there. SWAY_PX is the envelope that buys.
 expect(Math.hypot(settled.x - dropped.x, settled.y - dropped.y)).toBeLessThan(SWAY_PX);

 // Placed, not detached: it belongs to the page and moves with it.
 // Placed, not detached: it belongs to the copy it was dropped over.
 //
 // Measured as an OFFSET that must not change, which is the idiom the
 // act-tutor journey above already uses for the same invariant — no delta
 // arithmetic whose sign only works out because the page happens to scroll
 // down. The node's distance from the FAQ column is the thing being pinned.
 const before = await probeAgainstCopy(page);
 await page.evaluate(() => window.scrollBy(0, 300));
 await page.waitForTimeout(600);
 const after = await probeAgainstCopy(page);

 // Preconditions first, most-basic first, so a failure names its own cause
 // instead of sending the next reader to `TRACKS` and `syncClusters()`.
 // `toBeCloseTo`, not `toBe`: `scrollY` is a browser-computed offset that is
 // only integral because `deviceScaleFactor` happens to be 1.
 expect(after.scrollY - before.scrollY, "the page should have scrolled")
 .toBeCloseTo(300, 0);
 // Signed, not `Math.abs`: scrolling DOWN must carry page content UP. A
 // regression that translated the copy downward under a downward scroll
 // would satisfy an absolute-value guard, and a node loyally following it
 // would satisfy everything below.
 //
 // The journey can only tell "welded" from "pinned to the screen" while the
 // copy still has travel left before its own pin — a node welded to an
 // already-pinned column is stationary, and so is a detached overlay. That
 // is a property of where `centreCluster` parks the cluster, not of the
 // product, so assert it and say so rather than assume it.
 expect(
 after.copyTop - before.copyTop,
 "the FAQ copy was already pinned at the drop position — this journey needs " +
 "it mid-travel; check #faq's layout or centreCluster's offset",
 ).toBeLessThan(-100);

 // ...and through all of that the node held its place against the copy.
 expect(Math.hypot(
 after.x - before.x,
 (after.y - after.copyTop) - (before.y - before.copyTop),
 )).toBeLessThan(SWAY_PX);
});

/**
 * The other half of "belongs to the page", on a cluster where that means what
 * it sounds like.
 *
 * The journey above deliberately measures against the FAQ copy, because that
 * is what its cluster is welded to. Something still has to pin the plain
 * case — a placed node in an untracked, unpinned section travelling exactly
 * with the document — or the file loses the reference frame its own header
 * (symptom 4) is about, and a cluster field that detached into a fixed
 * overlay would have nothing left to catch it.
 */
test("a dropped node in an untracked section travels 1:1 with the document", async ({ page }) => {
 await openLanding(page);
 await centreCluster(page, UNTRACKED_CLUSTER);
 const ring = await ringOf(page, SATELLITE, UNTRACKED_CLUSTER);

 await page.mouse.move(ring.x, ring.y);
 await page.mouse.down();
 await page.mouse.move(ring.x - 120, ring.y - 60, { steps: 20 });
 await page.mouse.up();
 await page.waitForTimeout(4_000);
 const settled = await probe(page);

 await page.evaluate(() => window.scrollBy(0, 300));
 await page.waitForTimeout(600);
 const scrolled = await probe(page);
 expect(Math.hypot(scrolled.x - settled.x, scrolled.y - (settled.y - 300)))

 const moved = scrolled.scrollY - settled.scrollY;
 expect(moved, "the page should have scrolled").toBeCloseTo(300, 0);
 // No `TRACKS` entry and no sticky stage: this cluster owes the document the
 // whole 300px. This is the assertion the faq journey used to carry, on the
 // cluster where it is actually true.
 expect(Math.hypot(scrolled.x - settled.x, scrolled.y - (settled.y - moved)))
 .toBeLessThan(SWAY_PX);
});

Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
test(e2e): measure a dropped node against the copy it is welded to (#566) by AndresL230 · Pull Request #568 · SaplingLearn/Sapling · GitHub
Skip to content
test(e2e): measure a dropped node against the copy it is welded to (#566)#568

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

AndresL230
merged 2 commits into

from

Aug 23, 2026
 Merged


test(e2e): measure a dropped node against the copy it is welded to (#566)
#568
 Changes from all commits
Commits

Show all changes


2 commits


Select commit
Hold shift + click to select a range
fb1c80b

test(e2e): measure a dropped node against the copy it is welded to (#…


AndresL230 Aug 22, 2026
9da3e4c

test(e2e): let the journey own its oracle, and put the 1:1 case back …


AndresL230 Aug 22, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


128 changes: 126 additions & 2 deletions
frontend/e2e/landing-drag-field.spec.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -69,6 +69,32 @@ async function openLanding(page: Page): Promise<number> {
 * nothing left to autoscroll into and a 300px scroll assertion cannot be met.
 */
const CLUSTER = "4";

/**
 * The copy cluster 4 is welded to: the `faq` question column.
 *
 * Named here, NOT read out of the field's `data-drag-track`. Taking the
 * reference from the product would make this journey follow the product:
 * delete `faq` from `DragField.tsx`'s `TRACKS` and the clusters go back to
 * sliding 374px out from under the words they annotate — the regression
 * 8bb34869 fixed — but a test that re-derived its own expectation would
 * re-frame itself along with it and stay green on exactly that. The oracle
 * has to belong to the test.
 *
 * `faq` is the only section in `TRACKS`, and this column is `sticky; top:110`,
 * so the section can scroll 300px while the copy moves ~202 — which is why
 * measuring a cluster here against raw `scrollY` was wrong.
 */
const FAQ_SECTION = "faq";
const FAQ_COPY = '[data-drag-anchor="faq"]';

/**
 * A cluster in a section with no weld and no pin, where moving 1:1 with the
 * document IS the contract. `newsletter` holds clusters 6 and 7, is absent
 * from `TRACKS`, and — unlike `cta`, which sits ~120px from the end of the
 * document — has room below it for a 300px scroll assertion.
 */
const UNTRACKED_CLUSTER = "6";
/** A satellite, not the course puck: the link spring pulls hardest on these. */
const SATELLITE = 1;

Expand DownExpand Up@@ -120,6 +146,36 @@ async function probe(page: Page): Promise<Probe> {
 });
}

/**
 * The probe ring and the FAQ copy it is welded to, sampled in ONE frame.
 *
 * One `page.evaluate`, not two: the sim is still integrating when this runs
 * (`SCROLL_QUIET_MS` expired long before), so sampling the node and its
 * reference in separate round trips compares two different frames.
 *
 * The column is resolved the way `engine/sim.ts` resolves it — scoped to the
 * field's own section, not `document`-wide — so this measures against the
 * element the sim actually bound to. A global lookup would silently diverge
 * from the product the moment a second match appeared earlier in the page.
 */
async function probeAgainstCopy(
 page: Page,
): Promise<{ x: number; y: number; copyTop: number; scrollY: number }> {
 return page.evaluate(({ section, copy }) => {
 const field = document.querySelector(`#${section} .drag-field`);
 if (!field) throw new Error(`no .drag-field in #${section}`);
 const el = (field.closest("section") ?? document).querySelector(copy);
 if (!el) throw new Error(`${copy} is not inside #${section}`);
 const b = document.querySelector("[data-e2e-probe]")!.getBoundingClientRect();
 return {
 x: b.left + b.width / 2,
 y: b.top + b.height / 2,
 copyTop: el.getBoundingClientRect().top,
 scrollY: window.scrollY,
 };
 }, { section: FAQ_SECTION, copy: FAQ_COPY });
}

test("nodes do not move of their own accord while the page scrolls", async ({ page }) => {
 const height = await openLanding(page);

Expand DownExpand Up@@ -346,11 +402,79 @@ test("a dropped node stays where it was put, and scrolls with the page", async (
 // there. SWAY_PX is the envelope that buys.
 expect(Math.hypot(settled.x - dropped.x, settled.y - dropped.y)).toBeLessThan(SWAY_PX);

 // Placed, not detached: it belongs to the page and moves with it.
 // Placed, not detached: it belongs to the copy it was dropped over.
 //
 // Measured as an OFFSET that must not change, which is the idiom the
 // act-tutor journey above already uses for the same invariant — no delta
 // arithmetic whose sign only works out because the page happens to scroll
 // down. The node's distance from the FAQ column is the thing being pinned.
 const before = await probeAgainstCopy(page);
 await page.evaluate(() => window.scrollBy(0, 300));
 await page.waitForTimeout(600);
 const after = await probeAgainstCopy(page);

 // Preconditions first, most-basic first, so a failure names its own cause
 // instead of sending the next reader to `TRACKS` and `syncClusters()`.
 // `toBeCloseTo`, not `toBe`: `scrollY` is a browser-computed offset that is
 // only integral because `deviceScaleFactor` happens to be 1.
 expect(after.scrollY - before.scrollY, "the page should have scrolled")
 .toBeCloseTo(300, 0);
 // Signed, not `Math.abs`: scrolling DOWN must carry page content UP. A
 // regression that translated the copy downward under a downward scroll
 // would satisfy an absolute-value guard, and a node loyally following it
 // would satisfy everything below.
 //
 // The journey can only tell "welded" from "pinned to the screen" while the
 // copy still has travel left before its own pin — a node welded to an
 // already-pinned column is stationary, and so is a detached overlay. That
 // is a property of where `centreCluster` parks the cluster, not of the
 // product, so assert it and say so rather than assume it.
 expect(
 after.copyTop - before.copyTop,
 "the FAQ copy was already pinned at the drop position — this journey needs " +
 "it mid-travel; check #faq's layout or centreCluster's offset",
 ).toBeLessThan(-100);

 // ...and through all of that the node held its place against the copy.
 expect(Math.hypot(
 after.x - before.x,
 (after.y - after.copyTop) - (before.y - before.copyTop),
 )).toBeLessThan(SWAY_PX);
});

/**
 * The other half of "belongs to the page", on a cluster where that means what
 * it sounds like.
 *
 * The journey above deliberately measures against the FAQ copy, because that
 * is what its cluster is welded to. Something still has to pin the plain
 * case — a placed node in an untracked, unpinned section travelling exactly
 * with the document — or the file loses the reference frame its own header
 * (symptom 4) is about, and a cluster field that detached into a fixed
 * overlay would have nothing left to catch it.
 */
test("a dropped node in an untracked section travels 1:1 with the document", async ({ page }) => {
 await openLanding(page);
 await centreCluster(page, UNTRACKED_CLUSTER);
 const ring = await ringOf(page, SATELLITE, UNTRACKED_CLUSTER);

 await page.mouse.move(ring.x, ring.y);
 await page.mouse.down();
 await page.mouse.move(ring.x - 120, ring.y - 60, { steps: 20 });
 await page.mouse.up();
 await page.waitForTimeout(4_000);
 const settled = await probe(page);

 await page.evaluate(() => window.scrollBy(0, 300));
 await page.waitForTimeout(600);
 const scrolled = await probe(page);
 expect(Math.hypot(scrolled.x - settled.x, scrolled.y - (settled.y - 300)))

 const moved = scrolled.scrollY - settled.scrollY;
 expect(moved, "the page should have scrolled").toBeCloseTo(300, 0);
 // No `TRACKS` entry and no sticky stage: this cluster owes the document the
 // whole 300px. This is the assertion the faq journey used to carry, on the
 // cluster where it is actually true.
 expect(Math.hypot(scrolled.x - settled.x, scrolled.y - (settled.y - moved)))
 .toBeLessThan(SWAY_PX);
});

Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
test(e2e): measure a dropped node against the copy it is welded to (#566) by AndresL230 · Pull Request #568 · SaplingLearn/Sapling · GitHub
Skip to content
test(e2e): measure a dropped node against the copy it is welded to (#566)#568

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

AndresL230
merged 2 commits into

from

Aug 23, 2026
 Merged


test(e2e): measure a dropped node against the copy it is welded to (#566)
#568
 Changes from all commits
Commits

Show all changes


2 commits


Select commit
Hold shift + click to select a range
fb1c80b

test(e2e): measure a dropped node against the copy it is welded to (#…


AndresL230 Aug 22, 2026
9da3e4c

test(e2e): let the journey own its oracle, and put the 1:1 case back …


AndresL230 Aug 22, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


128 changes: 126 additions & 2 deletions
frontend/e2e/landing-drag-field.spec.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -69,6 +69,32 @@ async function openLanding(page: Page): Promise<number> {
 * nothing left to autoscroll into and a 300px scroll assertion cannot be met.
 */
const CLUSTER = "4";

/**
 * The copy cluster 4 is welded to: the `faq` question column.
 *
 * Named here, NOT read out of the field's `data-drag-track`. Taking the
 * reference from the product would make this journey follow the product:
 * delete `faq` from `DragField.tsx`'s `TRACKS` and the clusters go back to
 * sliding 374px out from under the words they annotate — the regression
 * 8bb34869 fixed — but a test that re-derived its own expectation would
 * re-frame itself along with it and stay green on exactly that. The oracle
 * has to belong to the test.
 *
 * `faq` is the only section in `TRACKS`, and this column is `sticky; top:110`,
 * so the section can scroll 300px while the copy moves ~202 — which is why
 * measuring a cluster here against raw `scrollY` was wrong.
 */
const FAQ_SECTION = "faq";
const FAQ_COPY = '[data-drag-anchor="faq"]';

/**
 * A cluster in a section with no weld and no pin, where moving 1:1 with the
 * document IS the contract. `newsletter` holds clusters 6 and 7, is absent
 * from `TRACKS`, and — unlike `cta`, which sits ~120px from the end of the
 * document — has room below it for a 300px scroll assertion.
 */
const UNTRACKED_CLUSTER = "6";
/** A satellite, not the course puck: the link spring pulls hardest on these. */
const SATELLITE = 1;

Expand DownExpand Up@@ -120,6 +146,36 @@ async function probe(page: Page): Promise<Probe> {
 });
}

/**
 * The probe ring and the FAQ copy it is welded to, sampled in ONE frame.
 *
 * One `page.evaluate`, not two: the sim is still integrating when this runs
 * (`SCROLL_QUIET_MS` expired long before), so sampling the node and its
 * reference in separate round trips compares two different frames.
 *
 * The column is resolved the way `engine/sim.ts` resolves it — scoped to the
 * field's own section, not `document`-wide — so this measures against the
 * element the sim actually bound to. A global lookup would silently diverge
 * from the product the moment a second match appeared earlier in the page.
 */
async function probeAgainstCopy(
 page: Page,
): Promise<{ x: number; y: number; copyTop: number; scrollY: number }> {
 return page.evaluate(({ section, copy }) => {
 const field = document.querySelector(`#${section} .drag-field`);
 if (!field) throw new Error(`no .drag-field in #${section}`);
 const el = (field.closest("section") ?? document).querySelector(copy);
 if (!el) throw new Error(`${copy} is not inside #${section}`);
 const b = document.querySelector("[data-e2e-probe]")!.getBoundingClientRect();
 return {
 x: b.left + b.width / 2,
 y: b.top + b.height / 2,
 copyTop: el.getBoundingClientRect().top,
 scrollY: window.scrollY,
 };
 }, { section: FAQ_SECTION, copy: FAQ_COPY });
}

test("nodes do not move of their own accord while the page scrolls", async ({ page }) => {
 const height = await openLanding(page);

Expand DownExpand Up@@ -346,11 +402,79 @@ test("a dropped node stays where it was put, and scrolls with the page", async (
 // there. SWAY_PX is the envelope that buys.
 expect(Math.hypot(settled.x - dropped.x, settled.y - dropped.y)).toBeLessThan(SWAY_PX);

 // Placed, not detached: it belongs to the page and moves with it.
 // Placed, not detached: it belongs to the copy it was dropped over.
 //
 // Measured as an OFFSET that must not change, which is the idiom the
 // act-tutor journey above already uses for the same invariant — no delta
 // arithmetic whose sign only works out because the page happens to scroll
 // down. The node's distance from the FAQ column is the thing being pinned.
 const before = await probeAgainstCopy(page);
 await page.evaluate(() => window.scrollBy(0, 300));
 await page.waitForTimeout(600);
 const after = await probeAgainstCopy(page);

 // Preconditions first, most-basic first, so a failure names its own cause
 // instead of sending the next reader to `TRACKS` and `syncClusters()`.
 // `toBeCloseTo`, not `toBe`: `scrollY` is a browser-computed offset that is
 // only integral because `deviceScaleFactor` happens to be 1.
 expect(after.scrollY - before.scrollY, "the page should have scrolled")
 .toBeCloseTo(300, 0);
 // Signed, not `Math.abs`: scrolling DOWN must carry page content UP. A
 // regression that translated the copy downward under a downward scroll
 // would satisfy an absolute-value guard, and a node loyally following it
 // would satisfy everything below.
 //
 // The journey can only tell "welded" from "pinned to the screen" while the
 // copy still has travel left before its own pin — a node welded to an
 // already-pinned column is stationary, and so is a detached overlay. That
 // is a property of where `centreCluster` parks the cluster, not of the
 // product, so assert it and say so rather than assume it.
 expect(
 after.copyTop - before.copyTop,
 "the FAQ copy was already pinned at the drop position — this journey needs " +
 "it mid-travel; check #faq's layout or centreCluster's offset",
 ).toBeLessThan(-100);

 // ...and through all of that the node held its place against the copy.
 expect(Math.hypot(
 after.x - before.x,
 (after.y - after.copyTop) - (before.y - before.copyTop),
 )).toBeLessThan(SWAY_PX);
});

/**
 * The other half of "belongs to the page", on a cluster where that means what
 * it sounds like.
 *
 * The journey above deliberately measures against the FAQ copy, because that
 * is what its cluster is welded to. Something still has to pin the plain
 * case — a placed node in an untracked, unpinned section travelling exactly
 * with the document — or the file loses the reference frame its own header
 * (symptom 4) is about, and a cluster field that detached into a fixed
 * overlay would have nothing left to catch it.
 */
test("a dropped node in an untracked section travels 1:1 with the document", async ({ page }) => {
 await openLanding(page);
 await centreCluster(page, UNTRACKED_CLUSTER);
 const ring = await ringOf(page, SATELLITE, UNTRACKED_CLUSTER);

 await page.mouse.move(ring.x, ring.y);
 await page.mouse.down();
 await page.mouse.move(ring.x - 120, ring.y - 60, { steps: 20 });
 await page.mouse.up();
 await page.waitForTimeout(4_000);
 const settled = await probe(page);

 await page.evaluate(() => window.scrollBy(0, 300));
 await page.waitForTimeout(600);
 const scrolled = await probe(page);
 expect(Math.hypot(scrolled.x - settled.x, scrolled.y - (settled.y - 300)))

 const moved = scrolled.scrollY - settled.scrollY;
 expect(moved, "the page should have scrolled").toBeCloseTo(300, 0);
 // No `TRACKS` entry and no sticky stage: this cluster owes the document the
 // whole 300px. This is the assertion the faq journey used to carry, on the
 // cluster where it is actually true.
 expect(Math.hypot(scrolled.x - settled.x, scrolled.y - (settled.y - moved)))
 .toBeLessThan(SWAY_PX);
});

Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
test(e2e): measure a dropped node against the copy it is welded to (#566) by AndresL230 · Pull Request #568 · SaplingLearn/Sapling · GitHub
Skip to content
test(e2e): measure a dropped node against the copy it is welded to (#566)#568

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

AndresL230
merged 2 commits into

from

Aug 23, 2026
 Merged


test(e2e): measure a dropped node against the copy it is welded to (#566)
#568
 Changes from all commits
Commits

Show all changes


2 commits


Select commit
Hold shift + click to select a range
fb1c80b

test(e2e): measure a dropped node against the copy it is welded to (#…


AndresL230 Aug 22, 2026
9da3e4c

test(e2e): let the journey own its oracle, and put the 1:1 case back …


AndresL230 Aug 22, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


128 changes: 126 additions & 2 deletions
frontend/e2e/landing-drag-field.spec.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -69,6 +69,32 @@ async function openLanding(page: Page): Promise<number> {
 * nothing left to autoscroll into and a 300px scroll assertion cannot be met.
 */
const CLUSTER = "4";

/**
 * The copy cluster 4 is welded to: the `faq` question column.
 *
 * Named here, NOT read out of the field's `data-drag-track`. Taking the
 * reference from the product would make this journey follow the product:
 * delete `faq` from `DragField.tsx`'s `TRACKS` and the clusters go back to
 * sliding 374px out from under the words they annotate — the regression
 * 8bb34869 fixed — but a test that re-derived its own expectation would
 * re-frame itself along with it and stay green on exactly that. The oracle
 * has to belong to the test.
 *
 * `faq` is the only section in `TRACKS`, and this column is `sticky; top:110`,
 * so the section can scroll 300px while the copy moves ~202 — which is why
 * measuring a cluster here against raw `scrollY` was wrong.
 */
const FAQ_SECTION = "faq";
const FAQ_COPY = '[data-drag-anchor="faq"]';

/**
 * A cluster in a section with no weld and no pin, where moving 1:1 with the
 * document IS the contract. `newsletter` holds clusters 6 and 7, is absent
 * from `TRACKS`, and — unlike `cta`, which sits ~120px from the end of the
 * document — has room below it for a 300px scroll assertion.
 */
const UNTRACKED_CLUSTER = "6";
/** A satellite, not the course puck: the link spring pulls hardest on these. */
const SATELLITE = 1;

Expand DownExpand Up@@ -120,6 +146,36 @@ async function probe(page: Page): Promise<Probe> {
 });
}

/**
 * The probe ring and the FAQ copy it is welded to, sampled in ONE frame.
 *
 * One `page.evaluate`, not two: the sim is still integrating when this runs
 * (`SCROLL_QUIET_MS` expired long before), so sampling the node and its
 * reference in separate round trips compares two different frames.
 *
 * The column is resolved the way `engine/sim.ts` resolves it — scoped to the
 * field's own section, not `document`-wide — so this measures against the
 * element the sim actually bound to. A global lookup would silently diverge
 * from the product the moment a second match appeared earlier in the page.
 */
async function probeAgainstCopy(
 page: Page,
): Promise<{ x: number; y: number; copyTop: number; scrollY: number }> {
 return page.evaluate(({ section, copy }) => {
 const field = document.querySelector(`#${section} .drag-field`);
 if (!field) throw new Error(`no .drag-field in #${section}`);
 const el = (field.closest("section") ?? document).querySelector(copy);
 if (!el) throw new Error(`${copy} is not inside #${section}`);
 const b = document.querySelector("[data-e2e-probe]")!.getBoundingClientRect();
 return {
 x: b.left + b.width / 2,
 y: b.top + b.height / 2,
 copyTop: el.getBoundingClientRect().top,
 scrollY: window.scrollY,
 };
 }, { section: FAQ_SECTION, copy: FAQ_COPY });
}

test("nodes do not move of their own accord while the page scrolls", async ({ page }) => {
 const height = await openLanding(page);

Expand DownExpand Up@@ -346,11 +402,79 @@ test("a dropped node stays where it was put, and scrolls with the page", async (
 // there. SWAY_PX is the envelope that buys.
 expect(Math.hypot(settled.x - dropped.x, settled.y - dropped.y)).toBeLessThan(SWAY_PX);

 // Placed, not detached: it belongs to the page and moves with it.
 // Placed, not detached: it belongs to the copy it was dropped over.
 //
 // Measured as an OFFSET that must not change, which is the idiom the
 // act-tutor journey above already uses for the same invariant — no delta
 // arithmetic whose sign only works out because the page happens to scroll
 // down. The node's distance from the FAQ column is the thing being pinned.
 const before = await probeAgainstCopy(page);
 await page.evaluate(() => window.scrollBy(0, 300));
 await page.waitForTimeout(600);
 const after = await probeAgainstCopy(page);

 // Preconditions first, most-basic first, so a failure names its own cause
 // instead of sending the next reader to `TRACKS` and `syncClusters()`.
 // `toBeCloseTo`, not `toBe`: `scrollY` is a browser-computed offset that is
 // only integral because `deviceScaleFactor` happens to be 1.
 expect(after.scrollY - before.scrollY, "the page should have scrolled")
 .toBeCloseTo(300, 0);
 // Signed, not `Math.abs`: scrolling DOWN must carry page content UP. A
 // regression that translated the copy downward under a downward scroll
 // would satisfy an absolute-value guard, and a node loyally following it
 // would satisfy everything below.
 //
 // The journey can only tell "welded" from "pinned to the screen" while the
 // copy still has travel left before its own pin — a node welded to an
 // already-pinned column is stationary, and so is a detached overlay. That
 // is a property of where `centreCluster` parks the cluster, not of the
 // product, so assert it and say so rather than assume it.
 expect(
 after.copyTop - before.copyTop,
 "the FAQ copy was already pinned at the drop position — this journey needs " +
 "it mid-travel; check #faq's layout or centreCluster's offset",
 ).toBeLessThan(-100);

 // ...and through all of that the node held its place against the copy.
 expect(Math.hypot(
 after.x - before.x,
 (after.y - after.copyTop) - (before.y - before.copyTop),
 )).toBeLessThan(SWAY_PX);
});

/**
 * The other half of "belongs to the page", on a cluster where that means what
 * it sounds like.
 *
 * The journey above deliberately measures against the FAQ copy, because that
 * is what its cluster is welded to. Something still has to pin the plain
 * case — a placed node in an untracked, unpinned section travelling exactly
 * with the document — or the file loses the reference frame its own header
 * (symptom 4) is about, and a cluster field that detached into a fixed
 * overlay would have nothing left to catch it.
 */
test("a dropped node in an untracked section travels 1:1 with the document", async ({ page }) => {
 await openLanding(page);
 await centreCluster(page, UNTRACKED_CLUSTER);
 const ring = await ringOf(page, SATELLITE, UNTRACKED_CLUSTER);

 await page.mouse.move(ring.x, ring.y);
 await page.mouse.down();
 await page.mouse.move(ring.x - 120, ring.y - 60, { steps: 20 });
 await page.mouse.up();
 await page.waitForTimeout(4_000);
 const settled = await probe(page);

 await page.evaluate(() => window.scrollBy(0, 300));
 await page.waitForTimeout(600);
 const scrolled = await probe(page);
 expect(Math.hypot(scrolled.x - settled.x, scrolled.y - (settled.y - 300)))

 const moved = scrolled.scrollY - settled.scrollY;
 expect(moved, "the page should have scrolled").toBeCloseTo(300, 0);
 // No `TRACKS` entry and no sticky stage: this cluster owes the document the
 // whole 300px. This is the assertion the faq journey used to carry, on the
 // cluster where it is actually true.
 expect(Math.hypot(scrolled.x - settled.x, scrolled.y - (settled.y - moved)))
 .toBeLessThan(SWAY_PX);
});

Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
test(e2e): measure a dropped node against the copy it is welded to (#566) by AndresL230 · Pull Request #568 · SaplingLearn/Sapling · GitHub
Skip to content
test(e2e): measure a dropped node against the copy it is welded to (#566)#568

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

AndresL230
merged 2 commits into

from

Aug 23, 2026
 Merged


test(e2e): measure a dropped node against the copy it is welded to (#566)
#568
 Changes from all commits
Commits

Show all changes


2 commits


Select commit
Hold shift + click to select a range
fb1c80b

test(e2e): measure a dropped node against the copy it is welded to (#…


AndresL230 Aug 22, 2026
9da3e4c

test(e2e): let the journey own its oracle, and put the 1:1 case back …


AndresL230 Aug 22, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


128 changes: 126 additions & 2 deletions
frontend/e2e/landing-drag-field.spec.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -69,6 +69,32 @@ async function openLanding(page: Page): Promise<number> {
 * nothing left to autoscroll into and a 300px scroll assertion cannot be met.
 */
const CLUSTER = "4";

/**
 * The copy cluster 4 is welded to: the `faq` question column.
 *
 * Named here, NOT read out of the field's `data-drag-track`. Taking the
 * reference from the product would make this journey follow the product:
 * delete `faq` from `DragField.tsx`'s `TRACKS` and the clusters go back to
 * sliding 374px out from under the words they annotate — the regression
 * 8bb34869 fixed — but a test that re-derived its own expectation would
 * re-frame itself along with it and stay green on exactly that. The oracle
 * has to belong to the test.
 *
 * `faq` is the only section in `TRACKS`, and this column is `sticky; top:110`,
 * so the section can scroll 300px while the copy moves ~202 — which is why
 * measuring a cluster here against raw `scrollY` was wrong.
 */
const FAQ_SECTION = "faq";
const FAQ_COPY = '[data-drag-anchor="faq"]';

/**
 * A cluster in a section with no weld and no pin, where moving 1:1 with the
 * document IS the contract. `newsletter` holds clusters 6 and 7, is absent
 * from `TRACKS`, and — unlike `cta`, which sits ~120px from the end of the
 * document — has room below it for a 300px scroll assertion.
 */
const UNTRACKED_CLUSTER = "6";
/** A satellite, not the course puck: the link spring pulls hardest on these. */
const SATELLITE = 1;

Expand DownExpand Up@@ -120,6 +146,36 @@ async function probe(page: Page): Promise<Probe> {
 });
}

/**
 * The probe ring and the FAQ copy it is welded to, sampled in ONE frame.
 *
 * One `page.evaluate`, not two: the sim is still integrating when this runs
 * (`SCROLL_QUIET_MS` expired long before), so sampling the node and its
 * reference in separate round trips compares two different frames.
 *
 * The column is resolved the way `engine/sim.ts` resolves it — scoped to the
 * field's own section, not `document`-wide — so this measures against the
 * element the sim actually bound to. A global lookup would silently diverge
 * from the product the moment a second match appeared earlier in the page.
 */
async function probeAgainstCopy(
 page: Page,
): Promise<{ x: number; y: number; copyTop: number; scrollY: number }> {
 return page.evaluate(({ section, copy }) => {
 const field = document.querySelector(`#${section} .drag-field`);
 if (!field) throw new Error(`no .drag-field in #${section}`);
 const el = (field.closest("section") ?? document).querySelector(copy);
 if (!el) throw new Error(`${copy} is not inside #${section}`);
 const b = document.querySelector("[data-e2e-probe]")!.getBoundingClientRect();
 return {
 x: b.left + b.width / 2,
 y: b.top + b.height / 2,
 copyTop: el.getBoundingClientRect().top,
 scrollY: window.scrollY,
 };
 }, { section: FAQ_SECTION, copy: FAQ_COPY });
}

test("nodes do not move of their own accord while the page scrolls", async ({ page }) => {
 const height = await openLanding(page);

Expand DownExpand Up@@ -346,11 +402,79 @@ test("a dropped node stays where it was put, and scrolls with the page", async (
 // there. SWAY_PX is the envelope that buys.
 expect(Math.hypot(settled.x - dropped.x, settled.y - dropped.y)).toBeLessThan(SWAY_PX);

 // Placed, not detached: it belongs to the page and moves with it.
 // Placed, not detached: it belongs to the copy it was dropped over.
 //
 // Measured as an OFFSET that must not change, which is the idiom the
 // act-tutor journey above already uses for the same invariant — no delta
 // arithmetic whose sign only works out because the page happens to scroll
 // down. The node's distance from the FAQ column is the thing being pinned.
 const before = await probeAgainstCopy(page);
 await page.evaluate(() => window.scrollBy(0, 300));
 await page.waitForTimeout(600);
 const after = await probeAgainstCopy(page);

 // Preconditions first, most-basic first, so a failure names its own cause
 // instead of sending the next reader to `TRACKS` and `syncClusters()`.
 // `toBeCloseTo`, not `toBe`: `scrollY` is a browser-computed offset that is
 // only integral because `deviceScaleFactor` happens to be 1.
 expect(after.scrollY - before.scrollY, "the page should have scrolled")
 .toBeCloseTo(300, 0);
 // Signed, not `Math.abs`: scrolling DOWN must carry page content UP. A
 // regression that translated the copy downward under a downward scroll
 // would satisfy an absolute-value guard, and a node loyally following it
 // would satisfy everything below.
 //
 // The journey can only tell "welded" from "pinned to the screen" while the
 // copy still has travel left before its own pin — a node welded to an
 // already-pinned column is stationary, and so is a detached overlay. That
 // is a property of where `centreCluster` parks the cluster, not of the
 // product, so assert it and say so rather than assume it.
 expect(
 after.copyTop - before.copyTop,
 "the FAQ copy was already pinned at the drop position — this journey needs " +
 "it mid-travel; check #faq's layout or centreCluster's offset",
 ).toBeLessThan(-100);

 // ...and through all of that the node held its place against the copy.
 expect(Math.hypot(
 after.x - before.x,
 (after.y - after.copyTop) - (before.y - before.copyTop),
 )).toBeLessThan(SWAY_PX);
});

/**
 * The other half of "belongs to the page", on a cluster where that means what
 * it sounds like.
 *
 * The journey above deliberately measures against the FAQ copy, because that
 * is what its cluster is welded to. Something still has to pin the plain
 * case — a placed node in an untracked, unpinned section travelling exactly
 * with the document — or the file loses the reference frame its own header
 * (symptom 4) is about, and a cluster field that detached into a fixed
 * overlay would have nothing left to catch it.
 */
test("a dropped node in an untracked section travels 1:1 with the document", async ({ page }) => {
 await openLanding(page);
 await centreCluster(page, UNTRACKED_CLUSTER);
 const ring = await ringOf(page, SATELLITE, UNTRACKED_CLUSTER);

 await page.mouse.move(ring.x, ring.y);
 await page.mouse.down();
 await page.mouse.move(ring.x - 120, ring.y - 60, { steps: 20 });
 await page.mouse.up();
 await page.waitForTimeout(4_000);
 const settled = await probe(page);

 await page.evaluate(() => window.scrollBy(0, 300));
 await page.waitForTimeout(600);
 const scrolled = await probe(page);
 expect(Math.hypot(scrolled.x - settled.x, scrolled.y - (settled.y - 300)))

 const moved = scrolled.scrollY - settled.scrollY;
 expect(moved, "the page should have scrolled").toBeCloseTo(300, 0);
 // No `TRACKS` entry and no sticky stage: this cluster owes the document the
 // whole 300px. This is the assertion the faq journey used to carry, on the
 // cluster where it is actually true.
 expect(Math.hypot(scrolled.x - settled.x, scrolled.y - (settled.y - moved)))
 .toBeLessThan(SWAY_PX);
});

Expand Down
Loading

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
test(e2e): measure a dropped node against the copy it is welded to (#566) by AndresL230 · Pull Request #568 · SaplingLearn/Sapling · GitHub
Skip to content
test(e2e): measure a dropped node against the copy it is welded to (#566)#568

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

AndresL230
merged 2 commits into

from

Aug 23, 2026
 Merged


test(e2e): measure a dropped node against the copy it is welded to (#566)
#568
 Changes from all commits
Commits

Show all changes


2 commits


Select commit
Hold shift + click to select a range
fb1c80b

test(e2e): measure a dropped node against the copy it is welded to (#…


AndresL230 Aug 22, 2026
9da3e4c

test(e2e): let the journey own its oracle, and put the 1:1 case back …


AndresL230 Aug 22, 2026

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


128 changes: 126 additions & 2 deletions
frontend/e2e/landing-drag-field.spec.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -69,6 +69,32 @@ async function openLanding(page: Page): Promise<number> {
 * nothing left to autoscroll into and a 300px scroll assertion cannot be met.
 */
const CLUSTER = "4";

/**
 * The copy cluster 4 is welded to: the `faq` question column.
 *
 * Named here, NOT read out of the field's `data-drag-track`. Taking the
 * reference from the product would make this journey follow the product:
 * delete `faq` from `DragField.tsx`'s `TRACKS` and the clusters go back to
 * sliding 374px out from under the words they annotate — the regression
 * 8bb34869 fixed — but a test that re-derived its own expectation would
 * re-frame itself along with it and stay green on exactly that. The oracle
 * has to belong to the test.
 *
 * `faq` is the only section in `TRACKS`, and this column is `sticky; top:110`,
 * so the section can scroll 300px while the copy moves ~202 — which is why
 * measuring a cluster here against raw `scrollY` was wrong.
 */
const FAQ_SECTION = "faq";
const FAQ_COPY = '[data-drag-anchor="faq"]';

/**
 * A cluster in a section with no weld and no pin, where moving 1:1 with the
 * document IS the contract. `newsletter` holds clusters 6 and 7, is absent
 * from `TRACKS`, and — unlike `cta`, which sits ~120px from the end of the
 * document — has room below it for a 300px scroll assertion.
 */
const UNTRACKED_CLUSTER = "6";
/** A satellite, not the course puck: the link spring pulls hardest on these. */
const SATELLITE = 1;

Expand DownExpand Up@@ -120,6 +146,36 @@ async function probe(page: Page): Promise<Probe> {
 });
}

/**
 * The probe ring and the FAQ copy it is welded to, sampled in ONE frame.
 *
 * One `page.evaluate`, not two: the sim is still integrating when this runs
 * (`SCROLL_QUIET_MS` expired long before), so sampling the node and its
 * reference in separate round trips compares two different frames.
 *
 * The column is resolved the way `engine/sim.ts` resolves it — scoped to the
 * field's own section, not `document`-wide — so this measures against the
 * element the sim actually bound to. A global lookup would silently diverge
 * from the product the moment a second match appeared earlier in the page.
 */
async function probeAgainstCopy(
 page: Page,
): Promise<{ x: number; y: number; copyTop: number; scrollY: number }> {
 return page.evaluate(({ section, copy }) => {
 const field = document.querySelector(`#${section} .drag-field`);
 if (!field) throw new Error(`no .drag-field in #${section}`);
 const el = (field.closest("section") ?? document).querySelector(copy);
 if (!el) throw new Error(`${copy} is not inside #${section}`);
 const b = document.querySelector("[data-e2e-probe]")!.getBoundingClientRect();
 return {
 x: b.left + b.width / 2,
 y: b.top + b.height / 2,
 copyTop: el.getBoundingClientRect().top,
 scrollY: window.scrollY,
 };
 }, { section: FAQ_SECTION, copy: FAQ_COPY });
}

test("nodes do not move of their own accord while the page scrolls", async ({ page }) => {
 const height = await openLanding(page);

Expand DownExpand Up@@ -346,11 +402,79 @@ test("a dropped node stays where it was put, and scrolls with the page", async (
 // there. SWAY_PX is the envelope that buys.
 expect(Math.hypot(settled.x - dropped.x, settled.y - dropped.y)).toBeLessThan(SWAY_PX);

 // Placed, not detached: it belongs to the page and moves with it.
 // Placed, not detached: it belongs to the copy it was dropped over.
 //
 // Measured as an OFFSET that must not change, which is the idiom the
 // act-tutor journey above already uses for the same invariant — no delta
 // arithmetic whose sign only works out because the page happens to scroll
 // down. The node's distance from the FAQ column is the thing being pinned.
 const before = await probeAgainstCopy(page);
 await page.evaluate(() => window.scrollBy(0, 300));
 await page.waitForTimeout(600);
 const after = await probeAgainstCopy(page);

 // Preconditions first, most-basic first, so a failure names its own cause
 // instead of sending the next reader to `TRACKS` and `syncClusters()`.
 // `toBeCloseTo`, not `toBe`: `scrollY` is a browser-computed offset that is
 // only integral because `deviceScaleFactor` happens to be 1.
 expect(after.scrollY - before.scrollY, "the page should have scrolled")
 .toBeCloseTo(300, 0);
 // Signed, not `Math.abs`: scrolling DOWN must carry page content UP. A
 // regression that translated the copy downward under a downward scroll
 // would satisfy an absolute-value guard, and a node loyally following it
 // would satisfy everything below.
 //
 // The journey can only tell "welded" from "pinned to the screen" while the
 // copy still has travel left before its own pin — a node welded to an
 // already-pinned column is stationary, and so is a detached overlay. That
 // is a property of where `centreCluster` parks the cluster, not of the
 // product, so assert it and say so rather than assume it.
 expect(
 after.copyTop - before.copyTop,
 "the FAQ copy was already pinned at the drop position — this journey needs " +
 "it mid-travel; check #faq's layout or centreCluster's offset",
 ).toBeLessThan(-100);

 // ...and through all of that the node held its place against the copy.
 expect(Math.hypot(
 after.x - before.x,
 (after.y - after.copyTop) - (before.y - before.copyTop),
 )).toBeLessThan(SWAY_PX);
});

/**
 * The other half of "belongs to the page", on a cluster where that means what
 * it sounds like.
 *
 * The journey above deliberately measures against the FAQ copy, because that
 * is what its cluster is welded to. Something still has to pin the plain
 * case — a placed node in an untracked, unpinned section travelling exactly
 * with the document — or the file loses the reference frame its own header
 * (symptom 4) is about, and a cluster field that detached into a fixed
 * overlay would have nothing left to catch it.
 */
test("a dropped node in an untracked section travels 1:1 with the document", async ({ page }) => {
 await openLanding(page);
 await centreCluster(page, UNTRACKED_CLUSTER);
 const ring = await ringOf(page, SATELLITE, UNTRACKED_CLUSTER);

 await page.mouse.move(ring.x, ring.y);
 await page.mouse.down();
 await page.mouse.move(ring.x - 120, ring.y - 60, { steps: 20 });
 await page.mouse.up();
 await page.waitForTimeout(4_000);
 const settled = await probe(page);

 await page.evaluate(() => window.scrollBy(0, 300));
 await page.waitForTimeout(600);
 const scrolled = await probe(page);
 expect(Math.hypot(scrolled.x - settled.x, scrolled.y - (settled.y - 300)))

 const moved = scrolled.scrollY - settled.scrollY;
 expect(moved, "the page should have scrolled").toBeCloseTo(300, 0);
 // No `TRACKS` entry and no sticky stage: this cluster owes the document the
 // whole 300px. This is the assertion the faq journey used to carry, on the
 // cluster where it is actually true.
 expect(Math.hypot(scrolled.x - settled.x, scrolled.y - (settled.y - moved)))
 .toBeLessThan(SWAY_PX);
});

Expand Down
Loading