Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /html/semantics/grouping-content/the-li-element/grouping-li.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>li element</title>
<link rel="author" title="dzenana" href="mailto:dzenana.trenutak@gmail.com">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<h1>Description</h1>
<p>This test validates the li element.</p>
<div id="log"></div>
<span>
<menu id="listmenu">
<li>Command</li>
<li value="3">Command</li>
</menu>
<menu type="toolbar" id="toolbarmenu">
<li>
<menu label="File">
<button type="button">New...</button>
<button type="button">Open...</button>
</menu>
</li>
<li value="10">
<menu label="Help">
<li value = "2"><a href="help.html">Help Me</a></li>
<li><a href="about.html">About</a></li>
</menu>
</li>
</menu>
<p>Unordered List</p>
<ul id="unordered">
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
</span>
<p>Ordered List</p>
<ol id="basic">
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ol>
<p>Ordered List</p>
<ol id="start2">
<li value="2">list item</li>
<li>list item</li>
<li>list item</li>
</ol>
<p>Ordered List</p>
<ol id="negative">
<li value="-10">list item</li>
<li>list item</li>
<li>list item</li>
</ol>
<p>Ordered List</p>
<ol id="posFloatDown">
<li value="4.03">list item</li>
<li>list item</li>
<li>list item</li>
</ol>
<p>Ordered List</p>
<ol id="negFloatDown">
<li value="-4.03">list item</li>
<li>list item</li>
<li>list item</li>
</ol>
<p>Ordered List</p>
<ol id="posFloatUp">
<li value="4.9">list item</li>
<li>list item</li>
<li>list item</li>
</ol>
<p>Ordered List</p>
<ol id="negFloatUp">
<li value="-4.9">list item</li>
<li>list item</li>
<li>list item</li>
</ol>
<p>Ordered List</p>
<ol id="exponent">
<li value="7e2">list item</li>
<li>list item</li>
<li>list item</li>
</ol>
<p>Ordered List</p>
<ol id="decimal">
<li value=".5">list item</li>
<li>list item</li>
<li>list item</li>
</ol>
<p>Ordered List</p>
<ol id="letter">
<li value="A">list item</li>
<li>list item</li>
<li>list item</li>
</ol>
<script>
"use strict";
// "The [value] attribute has no default value" so, per https://html.spec.whatwg.org/multipage/#reflect,
// the default when unspecified is 0
test(function() {
var testList = document.querySelectorAll("#unordered li, #basic li");
for (var i = 0; i < testList.length; i++) {
assert_equals(testList[i].value, 0, "Default (unspecified) value of value is 0.");
}
}, "Default (unspecified) value of value is 0.");
// "If the value attribute is present, user agents must parse it as an integer, in order to determine the attribute's value.
// If the attribute's value cannot be converted to a number, the attribute must be treated as if it was absent."
// an integer is parsed by collecting as many digits as possible and then aborting at the first
// non-digit character after the first digit (otherwise, with no beginning digit, it's just an error)
// and: "The value IDL attribute must reflect the value of the value content attribute."
// start2's first element has value of 2
test(function() {
var testLI = document.getElementById("start2").children[0];
assert_equals(testLI.value, 2, "value of 2 -> value of 2");
}, ".value property reflects content attribute - and both parse value of '2' correctly.");
// negative's first element has value of -10
test(function() {
var testLI = document.getElementById("negative").children[0];
assert_equals(testLI.value, -10, "value of -10 -> value of -10");
}, "IDL and content attribute parse value of '-10' correctly.");
// posFloatDown's first element has value of 4.03 which should return 4
test(function() {
var testLI = document.getElementById("posFloatDown").children[0];
assert_equals(testLI.value, 4, "value of 4.03 -> 4");
}, "IDL and content attribute parse value of '4.03' correctly.");
// negFloatDown's first element has value of -4.03 which should return -4
test(function() {
var testLI = document.getElementById("negFloatDown").children[0];
assert_equals(testLI.value, -4, "value of -4.03 -> -4");
}, "IDL and content attribute parse value of '-4.03' correctly.");
// posFloatUp's first element has value of 4.9 which should return 4
test(function() {
var testLI = document.getElementById("posFloatUp").children[0];
assert_equals(testLI.value, 4, "value of 4.9 -> 4");
}, "IDL and content attribute parse value of '4.9' correctly.");
// negFloatUp's first element has value of -4.9 which should return -4
test(function() {
var testLI = document.getElementById("negFloatUp").children[0];
assert_equals(testLI.value, -4, "value of -4.9 -> -4");
}, "IDL and content attribute parse value of '-4.9' correctly.");
// exponent's first element has value of 7e2 which should return 7
test(function() {
var testLI = document.getElementById("exponent").children[0];
assert_equals(testLI.value, 7, "value of 7e2 -> 7");
}, "IDL and content attribute parse value of '7e2' correctly.");
// decimal's first element has value of .5 which should return 0
test(function() {
var testLI = document.getElementById("decimal").children[0];
assert_equals(testLI.value, 0, "value of .5 -> 0 (default)");
}, "IDL and content attribute parse value of '.5' correctly.");
// letter's first element has value of A which should return 0
test(function() {
var testLI = document.getElementById("letter").children[0];
assert_equals(testLI.value, 0, "value of A -> 0 (default)");
}, "IDL and content attribute parse value of 'A' correctly.");
// SHOULD I TEST MORE NON-ASCII-DIGIT ENTRIES?
</script>
</body>
</html>