Skip to content

Initial Model element tests #51667

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
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

Initial Model element tests #51667

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
44151c0
Initial suite of tests to validate the semantic properties of the HTM…
zachernuk Mar 27, 2025
12f93b7
Revert "Initial suite of tests to validate the semantic properties of…
zachernuk Mar 27, 2025
4b24b9b
Proposed initial semantic tests for HTMLModelElement
zachernuk Mar 27, 2025
6ca7d5d
Update html/semantics/embedded-content/the-model-element/attributes/g…
zachernuk Apr 4, 2025
50a4b38
Update html/semantics/embedded-content/the-model-element/attributes/g…
zachernuk Apr 4, 2025
4b584cc
Update html/semantics/embedded-content/the-model-element/attributes/g…
zachernuk Apr 4, 2025
c857024
Update html/semantics/embedded-content/the-model-element/attributes/g…
zachernuk Apr 4, 2025
3e57b2e
Renamed the tests to `tentative`
zachernuk Apr 4, 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
81 changes: 81 additions & 0 deletions html/semantics/embedded-content/the-model-element/attributes/global/draggable.tentative.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
<!DOCTYPE html>
<html>
<head>
<link
rel="help"
href="https://html.spec.whatwg.org/multipage/embedded-content-other.html#the-model-element"
/>
<title>Test for the functionality of the draggable attribute</title>

<style>
model,
img {
background-color: rgb(255, 0, 0);
}
</style>
</head>

<body>
<model draggable="true" width="200" height="200">
<source src="../../resources/chromeball.usdz" type="model/vnd.usdz+zip" />
<source src="../../resources/chromeball.glb" type="model/gltf-binary" />
</model>
</body>
<!-- Include the test harness -->

<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/resources/testdriver-vendor.js"></script>

<script>
const model = document.querySelector("model");

promise_test(async (t) => {
const modelRect = model.getBoundingClientRect();
const initialStyle = getComputedStyle(model);
const dragStartPromise = new Promise(resolve => {
model.addEventListener("dragstart", (dragEvent) => {
model.style.backgroundColor = "rgb(0, 255, 0)";
resolve();
});
});

const dragEndPromise = new Promise(resolve => {
model.addEventListener("dragend", () => {
model.style.backgroundColor = "rgb(0, 0, 255)";
resolve();
});
});
assert_equals(
initialStyle.getPropertyValue("background-color"),
"rgb(255, 0, 0)",
"model has valid initial bgcolor"
);

await new test_driver.Actions()
.pointerMove(modelRect.x + 10, modelRect.y + 10)
.pointerDown()
.addTick()
.pointerMove(modelRect.x + 100, modelRect.y + 10)
.send();
await dragStartPromise;
const nextStyle = getComputedStyle(model);
assert_equals(
nextStyle.getPropertyValue("background-color"),
"rgb(0, 255, 0)",
"model changes bgcolor on drag-move"
);

await new test_driver.Actions().pointerUp().addTick().send();
await dragEndPromise;
const finalStyle = getComputedStyle(model);
assert_equals(
finalStye.getPropertyValue("background-color"),
"rgb(0, 0, 255)",
"model changes bgcolor on drag-end"
);
}, "Model responds to draggable correctly");
</script>
</html>
12 changes: 12 additions & 0 deletions html/semantics/embedded-content/the-model-element/attributes/global/hidden-ref.htm
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<link
rel="help"
href="https://html.spec.whatwg.org/multipage/embedded-content-other.html#the-model-element"
/>

<title>Reference for the functionality of the hidden attribute</title>
</head>
<body></body>
</html>
22 changes: 22 additions & 0 deletions html/semantics/embedded-content/the-model-element/attributes/global/hidden.tentative.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<link
rel="help"
href="https://html.spec.whatwg.org/multipage/embedded-content-other.html#the-model-element"
/>
<link rel="match" href="hidden-ref.htm" />
<title>Test for the functionality of the hidden attribute</title>
</head>
<body>
<model
hidden
width="200"
height="200"
style="background-color: red; border: 2px solid black"
>
<source src="../../resources/chromeball.usdz" type="model/vnd.usdz+zip" />
<source src="../../resources/chromeball.glb" type="model/gltf-binary" />
</model>
</body>
</html>
42 changes: 42 additions & 0 deletions ...semantics/embedded-content/the-model-element/attributes/global/inert-crash.tentative.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html>
<head>
<link
rel="help"
href="https://html.spec.whatwg.org/multipage/embedded-content-other.html#the-model-element"
/>
<title>Test for the functionality of the inert attribute</title>
</head>

<body>
<model id="inert-model" inert width="200" height="200">
<source src="../../resources/chromeball.usdz" type="model/vnd.usdz+zip" />
<source src="../../resources/chromeball.glb" type="model/gltf-binary" />
</model>

<model id="active-model" width="200" height="200">
<source src="chromeball.usdz" type="model/vnd.usdz+zip" />
<source src="chromeball.glb" type="model/gltf-binary" />
</model>
</body>

<!-- Include the test harness -->
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script>
promise_test(async (t) => {
const inertModel = document.getElementById("inert-model");
const activeModel = document.getElementById("active-model");

const result = await Promise.race([
test_driver.click(inertModel),
test_driver.click(activeModel),
]);
assert_true(
result == activeModel,
"only the active model receives a click"
);
}, "model responds correctly to the inert attribute");
</script>
</html>
45 changes: 45 additions & 0 deletions html/semantics/embedded-content/the-model-element/attributes/global/popover.tentative.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html>
<head>
<link
rel="help"
href="https://html.spec.whatwg.org/multipage/embedded-content-other.html#the-model-element"
/>
<title>Test for the functionality of the inert attribute</title>
</head>
<body>
<model id="popover-model" popover width="200" height="200">
<source src="../../resources/chromeball.usdz" type="model/vnd.usdz+zip" />
<source src="../../resources/chromeball.glb" type="model/gltf-binary" />
</model>
<button id="popover-button" popovertarget="popover-model">
Open Popover Model
</button>
</body>
<!-- Include the test harness -->
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script>
promise_test(async () => {
const popoverModel = document.getElementById("popover-model");
const initialModelStyle = window.getComputedStyle(popoverModel);
const popoverButton = document.getElementById("popover-button");
const initialDisplay = initialModelStyle.getPropertyValue("display");
assert_equals(
initialDisplay,
"none",
"Model element with popover attribute is initially not displayed."
);
await test_driver.click(popoverButton);
const subsequentModelStyle = window.getComputedStyle(popoverModel);
const subsequentModelDisplay =
subsequentModelStyle.getPropertyValue("display");
assert_equals(
subsequentModelDisplay,
"block",
"Model element with popover attribute is displayed after an invoking popover action."
);
}, "model obeys popover attribute behavior");
</script>
</html>
24 changes: 24 additions & 0 deletions html/semantics/embedded-content/the-model-element/attributes/global/style-ref.htm
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<link
rel="help"
href="https://html.spec.whatwg.org/multipage/embedded-content-other.html#the-model-element"
/>
<link rel="match" href="style-ref.htm" />
<title>Ref test for model's support of the style attribute</title>

<style>
model {
background-color: red;
}
</style>
</head>

<body>
<model width="200" height="200">
<source src="../../resources/chromeball.usdz" type="model/vnd.usdz+zip" />
<source src="../../resources/chromeball.glb" type="model/gltf-binary" />
</model>
</body>
</html>
24 changes: 24 additions & 0 deletions html/semantics/embedded-content/the-model-element/attributes/global/style.tentative.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<link
rel="help"
href="https://html.spec.whatwg.org/multipage/embedded-content-other.html#the-model-element"
/>
<link rel="match" href="style-ref.htm" />
<title>Test for the functionality of the style attribute</title>

<style>
model {
background-color: blue;
}
</style>
</head>

<body>
<model width="200" height="200" style="background-color: red">
<source src="../../resources/chromeball.usdz" type="model/vnd.usdz+zip" />
<source src="../../resources/chromeball.glb" type="model/gltf-binary" />
</model>
</body>
</html>
30 changes: 30 additions & 0 deletions html/semantics/embedded-content/the-model-element/attributes/global/title.tentative.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<link
rel="help"
href="https://html.spec.whatwg.org/multipage/embedded-content-other.html#the-model-element"
/>
<title>Test for the functionality of the title attribute</title>
</head>
<body>
<model width="200" height="200" id="subject" title="A Chrome ball">
<source src="../../resources/chromeball.usdz" type="model/vnd.usdz+zip" />
<source src="../../resources/chromeball.glb" type="model/gltf-binary" />
</model>
<p></p>
</body>

<!-- Include the test harness -->
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
test(() => {
assert_equals(
subject.title,
"A Chrome ball",
"Model's Title attribute is accessible by script"
);
}, "model honors title attribute");
</script>
</html>
92 changes: 92 additions & 0 deletions html/semantics/embedded-content/the-model-element/content-model-categories.tentative.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
<!DOCTYPE html>
<html>
<head>
<link
rel="help"
href="https://html.spec.whatwg.org/multipage/embedded-content-other.html#the-model-element"
/>
<title>Parser tests for the <model> element</title>
</head>
<body></body>
<!-- Include the test harness -->
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
test(() => {
const modelElem = document.createElement("model");
assert_true(
modelElem instanceof HTMLModelElement,
"<model> element should be an instance of HTMLModelElement"
);
assert_equals(
modelElem.tagName,
"MODEL",
"Tag name of <model> element should be 'MODEL'"
);
assert_equals(
modelElem.localName,
"model",
"Local name of <model> element should be 'model'"
);
}, "Interface test: <model> element is an instance of HTMLModelElement");

test(() => {
const container = document.createElement("div");
container.innerHTML = "<model></model>";
assert_equals(
container.childNodes.length,
1,
"Flow: <div> should have exactly one child node"
);
assert_true(
container.firstChild instanceof HTMLModelElement,
"Flow: The child node should be a <model> element"
);
}, "Flow content test: <model> parses as flow content");

test(() => {
const p = document.createElement("p");
p.innerHTML = "Start <model></model> End";
// Expecting three nodes: text, <model>, and text.
assert_equals(
p.childNodes.length,
3,
"Phrasing: <p> should have three child nodes (text, model, text)"
);
assert_equals(
p.childNodes[1].tagName,
"MODEL",
"Phrasing: The second child of <p> should be a <model> element"
);
}, "Phrasing content test: <model> parses as phrasing content");

test(() => {
const objectElem = document.createElement("object");
objectElem.innerHTML = "<model></model>";
assert_equals(
objectElem.childNodes.length,
1,
"Embedded: <object> should have exactly one fallback child"
);
assert_equals(
objectElem.firstChild.tagName,
"MODEL",
"Embedded: The fallback child should be a <model> element"
);
}, "Embedded content test: <model> parses as embedded content");

test(() => {
const container = document.createElement("div");
container.style.fontSize = "16px"; // Ensure base styling for consistent layout.
container.innerHTML = "<model>Content</model>";
document.body.appendChild(container);
const modelElem = container.querySelector("model");
const rect = modelElem.getBoundingClientRect();
assert_true(
rect.width > 0 || rect.height > 0,
"<model> element should have a non‑empty bounding box, proving that it renders"
);
document.body.removeChild(container);
}, "Palpable content test: <model> renders as palpable content");
</script>
</html>
Binary file added html/semantics/embedded-content/the-model-element/resources/chromeball.glb
View file
Open in desktop
Binary file not shown.
Binary file added html/semantics/embedded-content/the-model-element/resources/chromeball.usdz
View file
Open in desktop
Binary file not shown.