Skip to content

<template for> with empty "for" attribute patches "in place" #61429

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
chromium-wpt-export-bot merged 1 commit into from
Jul 21, 2026
Merged

<template for> with empty "for" attribute patches "in place" #61429

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
64 changes: 64 additions & 0 deletions html/dom/partial-updates/tentative/fragment/empty-for-streaming.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>Declarative Fragment: empty for attribute (in-place streaming)</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
function getText(containerId) {
const container = document.getElementById(containerId).cloneNode(true);
for (const script of container.querySelectorAll("script")) {
script.remove();
}
return container.textContent.trim().replace(/\s+/g, ' ');
}
</script>
<body>
<div id="container1">
<span>Before</span>
<template for>
<span id="target1">Inside 1</span>
<span id="target2">Inside 2</span>
</template>
<span>After</span>
</div>

<div id="container2">
<span id="before-span">Before</span>
<template for id="tpl-test">
<span>A</span><script>
window.step1 = getText("container2");
const tpl = document.getElementById("tpl-test");
const beforeSpan = document.getElementById("before-span");
document.getElementById("container2").insertBefore(tpl, beforeSpan);
</script><span>B</span><script>
window.step2 = getText("container2");
const tpl2 = document.getElementById("tpl-test");
if (tpl2) {
tpl2.remove();
}
</script><span>C</span><script>
window.step3 = getText("container2");
</script></template>
<span>After</span>
</div>

<script>
test(() => {
const container = document.getElementById('container1');
// Verify children insertion and order
assert_equals(container.innerHTML.trim().replace(/\s+/g, ' '), '<span>Before</span> <span id="target1">Inside 1</span> <span id="target2">Inside 2</span> <span>After</span>');
// Verify that the template is not in the DOM
assert_equals(container.querySelector('template'), null);
}, "In-place template with empty for attribute is removed and its children are inserted before it");

test(() => {
assert_equals(window.step1, "Before A");
assert_equals(window.step2, "BBefore A");
assert_equals(window.step3, "BBefore AC");

const container = document.getElementById("container2");
assert_equals(getText("container2"), "BBefore AC After");
assert_equals(container.querySelector('template'), null);
}, "In-place template moving and removal during streaming");
</script>
</body>
30 changes: 30 additions & 0 deletions html/dom/partial-updates/tentative/template-for-empty.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>HTML partial updates: template for with empty for attribute (in-place patching)</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<body>
<div id="container">
<span>Before</span>
<template id="empty-for-template" for="">
<span id="ok-empty">Allowed</span>
</template>
<span>After</span>
</div>

<script>
test(() => {
const container = document.getElementById('container');

// Verify that empty-for-template behaves as a regular template:
// - It remains in the DOM.
// - Its children are inside the template's content fragment.
const emptyForTemplate = document.getElementById('empty-for-template');
assert_not_equals(emptyForTemplate, null);
assert_equals(emptyForTemplate.tagName, "TEMPLATE");
assert_not_equals(emptyForTemplate.content.querySelector('#ok-empty'), null);

assert_equals(container.innerHTML.trim().replace(/\s+/g, ' '), '<span>Before</span> <template id="empty-for-template" for=""> <span id="ok-empty">Allowed</span> </template> <span>After</span>');
}, "A template with an empty for attribute is ignored and attached to the DOM");
</script>
</body>
14 changes: 0 additions & 14 deletions html/dom/partial-updates/tentative/template-for-multiple-cases.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,20 +177,6 @@
`<?start name="a#b">New <?start> content <?end> after<?end>`,
`<template for="a#b">X</template>`,
`X`,
);
add_test_scenario(
"Empty marker name with <?start> and <?end>",
`<?start name="">Old<?end>`,
`<template for="">New</template>`,
`<?start name=""?>Old<?end ?>`,
{tail: true}
);
add_test_scenario(
"Empty marker name with <?marker>",
`<?marker name="">Old`,
`<template for="">New</template>`,
`<?marker name=""?>Old`,
{tail: true}
);
</script>
</body>
Loading