Skip to content

Commit

Permalink
fix(html): Make script elements children of head or body elements
Browse files Browse the repository at this point in the history
  • Loading branch information
@bsmth
bsmth committed Mar 22, 2024
1 parent 9098959 commit 3f3b106
Show file tree
Hide file tree
Showing 34 changed files with 1,502 additions and 1,319 deletions.
4 changes: 4 additions & 0 deletions .htmlvalidate.json
View file
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
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
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
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>
Loading

0 comments on commit 3f3b106

Please sign in to comment.