Skip to content

Commit 6d7115e

Browse files
bsmthpepelsbey
bsmth
and
pepelsbey
authored
fix(html): Make script elements children of head or body elements (mdn#268)
* fix(html): Make script elements children of head or body elements * Apply suggestions from code review Co-authored-by: Vadim Makeev <hi@pepelsbey.dev> * fix(html): Remove .htmlvalidate.json config --------- Co-authored-by: Vadim Makeev <hi@pepelsbey.dev>
1 parent 9098959 commit 6d7115e

File tree

33 files changed

+1498
-1319
lines changed

33 files changed

+1498
-1319
lines changed

‎abort-api/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ <h1>Simple offline video player</h1>
3636
<p>Sintel © copyright Blender Foundation | <a href="http://www.sintel.org/">www.sintel.org</a>.</p>
3737
</div>
3838
</div>
39-
</body>
39+
4040
<script>
4141
const url = 'sintel.mp4';
4242

@@ -104,5 +104,5 @@ <h1>Simple offline video player</h1>
104104
}
105105

106106
</script>
107-
107+
</body>
108108
</html>

‎audiocontext-setsinkid/index.html

Lines changed: 13 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
54
<meta charset="utf-8" />
65
<meta name="viewport" content="width=device-width, initial-scale=1" />
76

@@ -14,27 +13,22 @@
1413
<script src="app.js" defer></script>
1514
</head>
1615
<body>
17-
<h1>
18-
SetSinkId test example
19-
</h1>
20-
21-
<button class="media-devices">
22-
Get media devices
23-
</button>
24-
25-
<div class="select-container">
26-
27-
</div>
28-
29-
<button class="play">
30-
Play audio
31-
</button>
32-
16+
<h1>SetSinkId test example</h1>
17+
18+
<button class="media-devices">Get media devices</button>
19+
20+
<div class="select-container"></div>
21+
22+
<button class="play">Play audio</button>
23+
3324
<footer>
3425
<p>
35-
Check out the <a href="https://github.com/mdn/dom-examples/tree/main/audiocontext-setsinkid">source code</a>.
26+
Check out the
27+
<a
28+
href="https://github.com/mdn/dom-examples/tree/main/audiocontext-setsinkid"
29+
>source code</a
30+
>.
3631
</p>
3732
</footer>
38-
3933
</body>
4034
</html>

‎drag-and-drop/DnD-support.html

Lines changed: 169 additions & 144 deletions
Original file line numberDiff line numberDiff line change
@@ -1,152 +1,177 @@
11
<!DOCTYPE html>
2-
<html lang=en>
3-
<title>Feature tests for DnD interfaces</title>
4-
<meta name="viewport" content="width=device-width">
5-
<style>
6-
div {
7-
margin: 0em;
8-
padding: 2em;
9-
}
10-
#source {
11-
color: blue;
12-
border: 1px solid black;
13-
}
14-
#target {
15-
border: 1px solid black;
16-
}
17-
</style>
18-
<script>
19-
function check_DragEvents() {
20-
// Check for support of the Drag event types
21-
var events = ["ondrag",
22-
"ondragstart",
23-
"ondragend",
24-
"ondragover",
25-
"ondragenter",
26-
"ondragleave",
27-
"ondragexit",
28-
"ondrop"];
2+
<html lang="en">
3+
<head>
4+
<title>Feature tests for DnD interfaces</title>
5+
<meta name="viewport" content="width=device-width" />
6+
<style>
7+
div {
8+
margin: 0em;
9+
padding: 2em;
10+
}
11+
#source {
12+
color: blue;
13+
border: 1px solid black;
14+
}
15+
#target {
16+
border: 1px solid black;
17+
}
18+
</style>
19+
<script>
20+
function check_DragEvents() {
21+
// Check for support of the Drag event types
22+
var events = [
23+
"ondrag",
24+
"ondragstart",
25+
"ondragend",
26+
"ondragover",
27+
"ondragenter",
28+
"ondragleave",
29+
"ondragexit",
30+
"ondrop",
31+
];
2932

30-
console.log("Drag Event Types...");
31-
32-
for (var i=0; i < events.length; i++) {
33-
var supported = events[i] in window;
34-
console.log("... " + events[i] + " = " + (supported ? "Yes" : "No"));
35-
}
36-
}
37-
function check_DataTransfer(dt) {
38-
// Check the DataTransfer object's methods and properties
39-
var properties = ["dropEffect",
40-
"effectAllowed",
41-
"types",
42-
"files",
43-
"items"];
44-
var methods = ["setDragImage",
45-
"getData",
46-
"setData",
47-
"clearData"];
33+
console.log("Drag Event Types...");
4834

49-
console.log("DataTransfer ... " + dt);
50-
51-
for (var i=0; i < properties.length; i++) {
52-
var supported = properties[i] in dt;
53-
console.log("... dataTransfer." + properties[i] + " = " + (supported ? "Yes" : "No"));
54-
}
55-
for (var i=0; i < methods.length; i++) {
56-
var supported = typeof dt[methods[i]] == "function";
57-
console.log("... dataTransfer." + methods[i] + "() = " + (supported ? "Yes" : "No"));
58-
}
59-
}
60-
function check_DataTransferItem(dti) {
61-
// Check the DataTransferItem object's methods and properties
62-
var properties = ["kind",
63-
"type"];
64-
var methods = ["getAsFile",
65-
"getAsString"];
35+
for (var i = 0; i < events.length; i++) {
36+
var supported = events[i] in window;
37+
console.log("... " + events[i] + " = " + (supported ? "Yes" : "No"));
38+
}
39+
}
40+
function check_DataTransfer(dt) {
41+
// Check the DataTransfer object's methods and properties
42+
var properties = [
43+
"dropEffect",
44+
"effectAllowed",
45+
"types",
46+
"files",
47+
"items",
48+
];
49+
var methods = ["setDragImage", "getData", "setData", "clearData"];
6650

67-
console.log("DataTransferItem ... " + dti);
51+
console.log("DataTransfer ... " + dt);
6852

69-
for (var i=0; i < properties.length; i++) {
70-
if (dti === undefined) {
71-
console.log("... items." + properties[i] + " = undefined");
72-
} else {
73-
var supported = properties[i] in dti;
74-
console.log("... items." + properties[i] + " = " + (supported ? "Yes" : "No"));
75-
}
76-
}
77-
for (var i=0; i < methods.length; i++) {
78-
if (dti === undefined) {
79-
console.log("... items." + methods[i] + "() = undefined");
80-
} else {
81-
var supported = typeof dti[methods[i]] == "function";
82-
console.log("... items." + methods[i] + "() = " + (supported ? "Yes" : "No"));
83-
}
84-
}
85-
}
86-
function check_DataTransferItemList(dtil) {
87-
// Check the DataTransferItemList object's methods and properties
88-
var properties = ["length"];
89-
var methods = ["add",
90-
"remove",
91-
"clear"];
53+
for (var i = 0; i < properties.length; i++) {
54+
var supported = properties[i] in dt;
55+
console.log(
56+
"... dataTransfer." +
57+
properties[i] +
58+
" = " +
59+
(supported ? "Yes" : "No")
60+
);
61+
}
62+
for (var i = 0; i < methods.length; i++) {
63+
var supported = typeof dt[methods[i]] == "function";
64+
console.log(
65+
"... dataTransfer." +
66+
methods[i] +
67+
"() = " +
68+
(supported ? "Yes" : "No")
69+
);
70+
}
71+
}
72+
function check_DataTransferItem(dti) {
73+
// Check the DataTransferItem object's methods and properties
74+
var properties = ["kind", "type"];
75+
var methods = ["getAsFile", "getAsString"];
9276

93-
console.log("DataTransferItemList ... " + dtil);
77+
console.log("DataTransferItem ... " + dti);
9478

95-
for (var i=0; i < properties.length; i++) {
96-
if (dtil === undefined) {
97-
console.log("... items." + properties[i] + " = undefined");
98-
} else {
99-
var supported = properties[i] in dtil;
100-
console.log("... items." + properties[i] + " = " + (supported ? "Yes" : "No"));
101-
}
102-
}
103-
for (var i=0; i < methods.length; i++) {
104-
if (dtil === undefined) {
105-
console.log("... items." + methods[i] + "() = undefined");
106-
} else {
107-
var supported = typeof dtil[methods[i]] == "function";
108-
console.log("... items." + methods[i] + "() = " + (supported ? "Yes" : "No"));
109-
}
110-
}
111-
}
112-
function dragstart_handler(ev) {
113-
ev.dataTransfer.dropEffect = "move";
114-
check_DragEvents();
115-
var dt = ev.dataTransfer;
116-
if (dt === undefined) {
117-
console.log("DataTransfer is NOT supported.");
118-
} else {
119-
// Make sure there is at least one item
120-
dt.setData("text/plain", "Move this.");
121-
check_DataTransfer(dt);
122-
}
123-
}
124-
function dragover_handler(ev) {
125-
ev.dataTransfer.dropEffect = "move";
126-
ev.preventDefault();
127-
}
128-
function drop_handler(ev) {
129-
if (ev.dataTransfer === undefined) {
130-
console.log("DataTransferItem NOT supported.");
131-
console.log("DataTransferItemList NOT supported.");
132-
} else {
133-
var dti = ev.dataTransfer.items;
134-
if (dti === undefined) {
135-
console.log("DataTransferItem NOT supported.");
136-
console.log("DataTransferItemList NOT supported.");
137-
} else {
138-
check_DataTransferItem(dti[0]);
139-
check_DataTransferItemList(dti);
140-
}
141-
}
142-
}
143-
</script>
144-
<body>
145-
<h1>Log support of DnD objects' methods and properties</h1>
146-
<div>
147-
<p id="source" ondragstart="dragstart_handler(event);" draggable="true">
148-
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>
149-
</div>
150-
<div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>
151-
</body>
79+
for (var i = 0; i < properties.length; i++) {
80+
if (dti === undefined) {
81+
console.log("... items." + properties[i] + " = undefined");
82+
} else {
83+
var supported = properties[i] in dti;
84+
console.log(
85+
"... items." + properties[i] + " = " + (supported ? "Yes" : "No")
86+
);
87+
}
88+
}
89+
for (var i = 0; i < methods.length; i++) {
90+
if (dti === undefined) {
91+
console.log("... items." + methods[i] + "() = undefined");
92+
} else {
93+
var supported = typeof dti[methods[i]] == "function";
94+
console.log(
95+
"... items." + methods[i] + "() = " + (supported ? "Yes" : "No")
96+
);
97+
}
98+
}
99+
}
100+
function check_DataTransferItemList(dtil) {
101+
// Check the DataTransferItemList object's methods and properties
102+
var properties = ["length"];
103+
var methods = ["add", "remove", "clear"];
104+
105+
console.log("DataTransferItemList ... " + dtil);
106+
107+
for (var i = 0; i < properties.length; i++) {
108+
if (dtil === undefined) {
109+
console.log("... items." + properties[i] + " = undefined");
110+
} else {
111+
var supported = properties[i] in dtil;
112+
console.log(
113+
"... items." + properties[i] + " = " + (supported ? "Yes" : "No")
114+
);
115+
}
116+
}
117+
for (var i = 0; i < methods.length; i++) {
118+
if (dtil === undefined) {
119+
console.log("... items." + methods[i] + "() = undefined");
120+
} else {
121+
var supported = typeof dtil[methods[i]] == "function";
122+
console.log(
123+
"... items." + methods[i] + "() = " + (supported ? "Yes" : "No")
124+
);
125+
}
126+
}
127+
}
128+
function dragstart_handler(ev) {
129+
ev.dataTransfer.dropEffect = "move";
130+
check_DragEvents();
131+
var dt = ev.dataTransfer;
132+
if (dt === undefined) {
133+
console.log("DataTransfer is NOT supported.");
134+
} else {
135+
// Make sure there is at least one item
136+
dt.setData("text/plain", "Move this.");
137+
check_DataTransfer(dt);
138+
}
139+
}
140+
function dragover_handler(ev) {
141+
ev.dataTransfer.dropEffect = "move";
142+
ev.preventDefault();
143+
}
144+
function drop_handler(ev) {
145+
if (ev.dataTransfer === undefined) {
146+
console.log("DataTransferItem NOT supported.");
147+
console.log("DataTransferItemList NOT supported.");
148+
} else {
149+
var dti = ev.dataTransfer.items;
150+
if (dti === undefined) {
151+
console.log("DataTransferItem NOT supported.");
152+
console.log("DataTransferItemList NOT supported.");
153+
} else {
154+
check_DataTransferItem(dti[0]);
155+
check_DataTransferItemList(dti);
156+
}
157+
}
158+
}
159+
</script>
160+
</head>
161+
<body>
162+
<h1>Log support of DnD objects' methods and properties</h1>
163+
<div>
164+
<p id="source" ondragstart="dragstart_handler(event);" draggable="true">
165+
Select this element, drag it to the Drop Zone and then release the
166+
mouse. The console log will contain data about the DnD interfaces
167+
supported.
168+
</p>
169+
</div>
170+
<div
171+
id="target"
172+
ondrop="drop_handler(event);"
173+
ondragover="dragover_handler(event);">
174+
Drop Zone
175+
</div>
176+
</body>
152177
</html>

0 commit comments

Comments
 (0)