Skip to content

web: Polyfill document.embeds to return ruffle-embeds too #22449

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

Open
danielhjacobs wants to merge 4 commits into
base: master
Choose a base branch
from
+186 −0
Open

web: Polyfill document.embeds to return ruffle-embeds too #22449

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e407d3e
web: Polyfill document.embeds to return ruffle-embeds too
danielhjacobs Dec 8, 2025
776d404
web: Add test for document.embeds
danielhjacobs Dec 9, 2025
598d8f0
web: For document embeds test, use asserts instead of DOM appending
danielhjacobs Dec 10, 2025
59263f6
web: Use Proxy instead of fake HTMLCollection for document.embeds
danielhjacobs Dec 10, 2025
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
34 changes: 34 additions & 0 deletions web/packages/core/src/internal/register-element.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,40 @@ export function registerElement(
continue;
} else {
window.customElements.define(externalName, elementClass);

if (elementName === "ruffle-embed") {
const orig = Object.getOwnPropertyDescriptor(
Document.prototype,
"embeds",
);

if (orig && orig.get) {
Object.defineProperty(Document.prototype, "embeds", {
get() {
const nodes = this.querySelectorAll(
"embed, ruffle-embed",
);

const list = Array.from(nodes) as Element[];
(list as unknown as HTMLCollection).item = (
i: number,
): Element | null => list[i] ?? null;

(list as unknown as HTMLCollection).namedItem =
(name: string): Element | null =>
list.find((el) => {
const htmlEl = el as HTMLElement;
return (
htmlEl.getAttribute("name") ===
name || htmlEl.id === name
);
}) ?? null;

return list;
},
});
}
}
}

privateRegistry[elementName] = {
Expand Down
2 changes: 2 additions & 0 deletions web/packages/selfhosted/test/polyfill/document_embeds/expected.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
<li>There are 3 embeds for document.embeds</li>
<li>There are 2 embeds for document.embeds</li>
16 changes: 16 additions & 0 deletions web/packages/selfhosted/test/polyfill/document_embeds/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>DOCUMENT EMBEDS</title>
</head>

<body>
<div id="test-container">
<embed id="emb1" name="fl" src="/test_assets/example.swf" width="200" height="200"></embed>
<embed id="emb2" name="fl" src="/test_assets/example.swf" width="200" height="200"></embed>
<embed id="emb3" name="fl" src="/test_assets/example.swf" width="200" height="200"></embed>
</div>
<ul id="output"></ul>
</body>
</html>
55 changes: 55 additions & 0 deletions web/packages/selfhosted/test/polyfill/document_embeds/test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import { injectRuffleAndWait, openTest, playAndMonitor } from "../../utils.js";
import { use, expect } from "chai";
import chaiHtml from "chai-html";
import fs from "fs";

use(chaiHtml);

describe("Document embeds", () => {
it("loads the test", async () => {
await openTest(browser, `polyfill/document_embeds`);
});

it("Accesses the right number of elements with ruffle", async () => {
Copy link
Member

@kjarosh kjarosh Dec 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: other cases start with a lowercase letter

await injectRuffleAndWait(browser);
await playAndMonitor(
browser,
await browser.$("#test-container").$("ruffle-embed#emb1"),
);
await playAndMonitor(
browser,
await browser.$("#test-container").$("ruffle-embed#emb2"),
);
await playAndMonitor(
browser,
await browser.$("#test-container").$("ruffle-embed#emb3"),
);
Comment on lines +30 to +41
Copy link
Member

@kjarosh kjarosh Dec 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are those needed? Even with autoplay disabled embeds should work, right?

await browser.execute(() => {
function countDocumentEmbeds() {
const output = document.getElementById("output");
const els = document.embeds;
const len = document.createElement("li");
if (els && "length" in els && els.length) {
len.textContent = `There are ${els.length} embeds for document.embeds`;
}

output?.appendChild(len);
}

countDocumentEmbeds();
const emb1 = document.getElementById("emb1");
if (emb1) {
emb1.remove();
}
countDocumentEmbeds();
});
const actual = await browser
.$("#output")
.getHTML({ includeSelectorTag: false, pierceShadowRoot: false });
const expected = fs.readFileSync(
`${import.meta.dirname}/expected.html`,
"utf8",
);
expect(actual).html.to.equal(expected);
});
});