Skip to content
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

Jump to bottom

fix(html): Make script elements children of head or body elements #268

Merged
merged 3 commits into from
Mar 22, 2024
Merged

fix(html): Make script elements children of head or body elements #268

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3f3b106
fix(html): Make script elements children of head or body elements
bsmth Mar 22, 2024
5543339
Apply suggestions from code review
bsmth Mar 22, 2024
378f31b
fix(html): Remove .htmlvalidate.json config
bsmth Mar 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 4 additions & 0 deletions .htmlvalidate.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"$schema": "https://html-validate.org/schemas/config.json",
"extends": ["html-validate:recommended", "html-validate:prettier"]
}
4 changes: 2 additions & 2 deletions abort-api/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ <h1>Simple offline video player</h1>
<p>Sintel © copyright Blender Foundation | <a href="http://www.sintel.org/">www.sintel.org</a>.</p>
</div>
</div>
</body>

<script>
const url = 'sintel.mp4';

Expand Down Expand Up @@ -104,5 +104,5 @@ <h1>Simple offline video player</h1>
}

</script>

</body>
</html>
32 changes: 13 additions & 19 deletions audiocontext-setsinkid/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

Expand All @@ -14,27 +13,22 @@
<script src="app.js" defer></script>
</head>
<body>
<h1>
SetSinkId test example
</h1>

<button class="media-devices">
Get media devices
</button>

<div class="select-container">

</div>

<button class="play">
Play audio
</button>

<h1>SetSinkId test example</h1>

<button class="media-devices">Get media devices</button>

<div class="select-container"></div>

<button class="play">Play audio</button>

<footer>
<p>
Check out the <a href="https://github.com/mdn/dom-examples/tree/main/audiocontext-setsinkid">source code</a>.
Check out the
<a
href="https://github.com/mdn/dom-examples/tree/main/audiocontext-setsinkid"
>source code</a
>.
</p>
</footer>

</body>
</html>
313 changes: 169 additions & 144 deletions drag-and-drop/DnD-support.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,152 +1,177 @@
<!DOCTYPE html>
<html lang=en>
<title>Feature tests for DnD interfaces</title>
<meta name="viewport" content="width=device-width">
<style>
div {
margin: 0em;
padding: 2em;
}
#source {
color: blue;
border: 1px solid black;
}
#target {
border: 1px solid black;
}
</style>
<script>
function check_DragEvents() {
// Check for support of the Drag event types
var events = ["ondrag",
"ondragstart",
"ondragend",
"ondragover",
"ondragenter",
"ondragleave",
"ondragexit",
"ondrop"];
<html lang="en">
<head>
<title>Feature tests for DnD interfaces</title>
<meta name="viewport" content="width=device-width" />
<style>
div {
margin: 0em;
padding: 2em;
}
#source {
color: blue;
border: 1px solid black;
}
#target {
border: 1px solid black;
}
</style>
<script>
function check_DragEvents() {
// Check for support of the Drag event types
var events = [
"ondrag",
"ondragstart",
"ondragend",
"ondragover",
"ondragenter",
"ondragleave",
"ondragexit",
"ondrop",
];

console.log("Drag Event Types...");

for (var i=0; i < events.length; i++) {
var supported = events[i] in window;
console.log("... " + events[i] + " = " + (supported ? "Yes" : "No"));
}
}
function check_DataTransfer(dt) {
// Check the DataTransfer object's methods and properties
var properties = ["dropEffect",
"effectAllowed",
"types",
"files",
"items"];
var methods = ["setDragImage",
"getData",
"setData",
"clearData"];
console.log("Drag Event Types...");

console.log("DataTransfer ... " + dt);

for (var i=0; i < properties.length; i++) {
var supported = properties[i] in dt;
console.log("... dataTransfer." + properties[i] + " = " + (supported ? "Yes" : "No"));
}
for (var i=0; i < methods.length; i++) {
var supported = typeof dt[methods[i]] == "function";
console.log("... dataTransfer." + methods[i] + "() = " + (supported ? "Yes" : "No"));
}
}
function check_DataTransferItem(dti) {
// Check the DataTransferItem object's methods and properties
var properties = ["kind",
"type"];
var methods = ["getAsFile",
"getAsString"];
for (var i = 0; i < events.length; i++) {
var supported = events[i] in window;
console.log("... " + events[i] + " = " + (supported ? "Yes" : "No"));
}
}
function check_DataTransfer(dt) {
// Check the DataTransfer object's methods and properties
var properties = [
"dropEffect",
"effectAllowed",
"types",
"files",
"items",
];
var methods = ["setDragImage", "getData", "setData", "clearData"];

console.log("DataTransferItem ... " + dti);
console.log("DataTransfer ... " + dt);

for (var i=0; i < properties.length; i++) {
if (dti === undefined) {
console.log("... items." + properties[i] + " = undefined");
} else {
var supported = properties[i] in dti;
console.log("... items." + properties[i] + " = " + (supported ? "Yes" : "No"));
}
}
for (var i=0; i < methods.length; i++) {
if (dti === undefined) {
console.log("... items." + methods[i] + "() = undefined");
} else {
var supported = typeof dti[methods[i]] == "function";
console.log("... items." + methods[i] + "() = " + (supported ? "Yes" : "No"));
}
}
}
function check_DataTransferItemList(dtil) {
// Check the DataTransferItemList object's methods and properties
var properties = ["length"];
var methods = ["add",
"remove",
"clear"];
for (var i = 0; i < properties.length; i++) {
var supported = properties[i] in dt;
console.log(
"... dataTransfer." +
properties[i] +
" = " +
(supported ? "Yes" : "No")
);
}
for (var i = 0; i < methods.length; i++) {
var supported = typeof dt[methods[i]] == "function";
console.log(
"... dataTransfer." +
methods[i] +
"() = " +
(supported ? "Yes" : "No")
);
}
}
function check_DataTransferItem(dti) {
// Check the DataTransferItem object's methods and properties
var properties = ["kind", "type"];
var methods = ["getAsFile", "getAsString"];

console.log("DataTransferItemList ... " + dtil);
console.log("DataTransferItem ... " + dti);

for (var i=0; i < properties.length; i++) {
if (dtil === undefined) {
console.log("... items." + properties[i] + " = undefined");
} else {
var supported = properties[i] in dtil;
console.log("... items." + properties[i] + " = " + (supported ? "Yes" : "No"));
}
}
for (var i=0; i < methods.length; i++) {
if (dtil === undefined) {
console.log("... items." + methods[i] + "() = undefined");
} else {
var supported = typeof dtil[methods[i]] == "function";
console.log("... items." + methods[i] + "() = " + (supported ? "Yes" : "No"));
}
}
}
function dragstart_handler(ev) {
ev.dataTransfer.dropEffect = "move";
check_DragEvents();
var dt = ev.dataTransfer;
if (dt === undefined) {
console.log("DataTransfer is NOT supported.");
} else {
// Make sure there is at least one item
dt.setData("text/plain", "Move this.");
check_DataTransfer(dt);
}
}
function dragover_handler(ev) {
ev.dataTransfer.dropEffect = "move";
ev.preventDefault();
}
function drop_handler(ev) {
if (ev.dataTransfer === undefined) {
console.log("DataTransferItem NOT supported.");
console.log("DataTransferItemList NOT supported.");
} else {
var dti = ev.dataTransfer.items;
if (dti === undefined) {
console.log("DataTransferItem NOT supported.");
console.log("DataTransferItemList NOT supported.");
} else {
check_DataTransferItem(dti[0]);
check_DataTransferItemList(dti);
}
}
}
</script>
<body>
<h1>Log support of DnD objects' methods and properties</h1>
<div>
<p id="source" ondragstart="dragstart_handler(event);" draggable="true">
Select this element, drag it to the Drop Zone and then release the mouse. The console log will contain data about the DnD interfaces supported.</p>
</div>
<div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>
</body>
for (var i = 0; i < properties.length; i++) {
if (dti === undefined) {
console.log("... items." + properties[i] + " = undefined");
} else {
var supported = properties[i] in dti;
console.log(
"... items." + properties[i] + " = " + (supported ? "Yes" : "No")
);
}
}
for (var i = 0; i < methods.length; i++) {
if (dti === undefined) {
console.log("... items." + methods[i] + "() = undefined");
} else {
var supported = typeof dti[methods[i]] == "function";
console.log(
"... items." + methods[i] + "() = " + (supported ? "Yes" : "No")
);
}
}
}
function check_DataTransferItemList(dtil) {
// Check the DataTransferItemList object's methods and properties
var properties = ["length"];
var methods = ["add", "remove", "clear"];

console.log("DataTransferItemList ... " + dtil);

for (var i = 0; i < properties.length; i++) {
if (dtil === undefined) {
console.log("... items." + properties[i] + " = undefined");
} else {
var supported = properties[i] in dtil;
console.log(
"... items." + properties[i] + " = " + (supported ? "Yes" : "No")
);
}
}
for (var i = 0; i < methods.length; i++) {
if (dtil === undefined) {
console.log("... items." + methods[i] + "() = undefined");
} else {
var supported = typeof dtil[methods[i]] == "function";
console.log(
"... items." + methods[i] + "() = " + (supported ? "Yes" : "No")
);
}
}
}
function dragstart_handler(ev) {
ev.dataTransfer.dropEffect = "move";
check_DragEvents();
var dt = ev.dataTransfer;
if (dt === undefined) {
console.log("DataTransfer is NOT supported.");
} else {
// Make sure there is at least one item
dt.setData("text/plain", "Move this.");
check_DataTransfer(dt);
}
}
function dragover_handler(ev) {
ev.dataTransfer.dropEffect = "move";
ev.preventDefault();
}
function drop_handler(ev) {
if (ev.dataTransfer === undefined) {
console.log("DataTransferItem NOT supported.");
console.log("DataTransferItemList NOT supported.");
} else {
var dti = ev.dataTransfer.items;
if (dti === undefined) {
console.log("DataTransferItem NOT supported.");
console.log("DataTransferItemList NOT supported.");
} else {
check_DataTransferItem(dti[0]);
check_DataTransferItemList(dti);
}
}
}
</script>
</head>
<body>
<h1>Log support of DnD objects' methods and properties</h1>
<div>
<p id="source" ondragstart="dragstart_handler(event);" draggable="true">
Select this element, drag it to the Drop Zone and then release the
mouse. The console log will contain data about the DnD interfaces
supported.
</p>
</div>
<div
id="target"
ondrop="drop_handler(event);"
ondragover="dragover_handler(event);">
Drop Zone
</div>
</body>
</html>