<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<body>
<script>
function testDataset(getTestElement) {
function testGet(attr, expected)
{
var e = getTestElement();
e.setAttribute(attr, "value");
return e.dataset[expected] == "value";
}
test (function() {
assert_true(testGet('data-foo', 'foo'));
assert_true(testGet('data-foo-bar', 'fooBar'));
assert_true(testGet('data--', '-'));
assert_true(testGet('data--foo', 'Foo'));
assert_true(testGet('data---foo', '-Foo'));
assert_true(testGet('data---foo--bar', '-Foo-Bar'));
assert_true(testGet('data---foo---bar', '-Foo--Bar'));
assert_true(testGet('data-foo-', 'foo-'));
assert_true(testGet('data-foo--', 'foo--'));
assert_true(testGet('data-', ''));
assert_true(testGet('data-\xE0', '\xE0'));
assert_true(testGet('data-1', '1'));
assert_true(testGet('data-01', '01'));
assert_true(testGet('data-zx81', 'zx81'));
assert_true(testGet('data-i4770k', 'i4770k'));
assert_true(testGet('data-r-7', 'r-7'));
assert_true(testGet('data-r-7-k', 'r-7K'));
assert_equals(document.body.dataset.nonExisting, undefined);
},'This tests Get function');
test (function() {
var e = getTestElement();
e.setAttribute('data-Foo', 'value');
// HTML lowercases all attributes whereas SVG does not.
if (e instanceof HTMLElement)
assert_true(e.dataset['foo'] == "value");
else
assert_true(e.dataset['Foo'] == "value");
}, 'This tests case sensitive scenario');
function testIsUndefined(attr, prop)
{
var e = getTestElement();
e.setAttribute(attr, "value");
return e.dataset[prop] === undefined;
}
test (function() {
assert_true(testIsUndefined('data-022', '22'));
assert_true(testIsUndefined('data-22', '022'));
},'Tests Undefined');
function matchesNothingInDataset(attr)
{
var e = getTestElement();
e.setAttribute(attr, "value");
var count = 0;
for (var item in e.dataset)
count++;
return count == 0;
}
test (function() {
assert_true(matchesNothingInDataset('dataFoo'));
},'Tests matchesNothingInDataset');
function testSet(prop, expected)
{
var e = getTestElement();
e.dataset[prop] = "value";
return e.getAttribute(expected) == "value";
}
test (function() {
assert_true(testSet('foo', 'data-foo'));
assert_true(testSet('fooBar', 'data-foo-bar'));
assert_true(testSet('-', 'data--'));
assert_true(testSet('Foo', 'data--foo'));
assert_true(testSet('-Foo', 'data---foo'));
assert_true(testSet('', 'data-'));
assert_true(testSet('\xE0', 'data-\xE0'));
assert_true(testSet('32', 'data-32'));
assert_true(testSet('0032', 'data-0032'));
assert_true(testSet('i18n', 'data-i18n'));
assert_true(testSet('d2', 'data-d2'));
assert_true(testSet('2d', 'data-2d'));
assert_true(testSet('d-2', 'data-d-2'));
assert_true(testSet('A--S', 'data--a---s'));
assert_throws_dom("SyntaxError", function() { testSet('-foo', 'dummy'); }, '"SyntaxError: Failed to set the \'-foo\' property on \'DOMStringMap\': \'-foo\' is not a valid property name."');
assert_throws_dom("InvalidCharacterError", function() { testSet('foo\x20', 'dummy'); }, '"InvalidCharacterError: Failed to set the \'foo\x20\' property on \'DOMStringMap\': \'data-foo\x20\' is not a valid attribute name."');
assert_throws_dom("InvalidCharacterError", function() { testSet('foo\uF900', 'dummy'); }, '"InvalidCharacterError: Failed to set the \'foo\uF900\' property on \'DOMStringMap\': \'data-foo\uF900\' is not a valid attribute name."');
},'Tests Set');
function testIsNull(prop, attr)
{
var e = getTestElement();
e.dataset[prop] = "value";
return e.getAttribute(attr) === null;
}
test (function() {
assert_true(testIsNull('0123', 'data-123'));
assert_true(testIsNull('123', 'data-0123'));
},'Tests Is Null');
function testDelete(attr, prop)
{
var e = getTestElement();
e.setAttribute(attr, "value");
delete e.dataset[prop];
return e.getAttribute(attr) != "value";
}
test (function() {
assert_true(testDelete('data-foo', 'foo'));
assert_true(testDelete('data-foo-bar', 'fooBar'));
assert_true(testDelete('data--', '-'));
assert_true(testDelete('data--foo', 'Foo'));
assert_true(testDelete('data---foo', '-Foo'));
assert_true(testDelete('data-', ''));
assert_true(testDelete('data-\xE0', '\xE0'));
assert_true(testDelete('data-33', '33'));
assert_true(testDelete('data-00033', '00033'));
assert_true(testDelete('data-r2', 'r2'));
assert_true(testDelete('data-2r', '2r'));
assert_true(testDelete('data-r-2', 'r-2'));
assert_true(testDelete('data--r-2-', 'R-2-'));
assert_true(testDelete('data--r-2r', 'R-2r'));
assert_true(testDelete('data--r-2-----r', 'R-2----R'));
assert_false(testDelete('dummy', '-foo'));
},'Tests Delete');
// The (HTML/SVG)Element.dataset deleter is only applied to properties
// that are present; check that any underlying native property
// is deleted instead.
function testNativeDelete(prop, isConfigurable)
{
var e = getTestElement();
Object.defineProperty(e.dataset, prop, {configurable: isConfigurable, value: "native_value"});
delete e.dataset[prop];
return isConfigurable ? !(prop in e.dataset) : (e.dataset[prop] === "native_value");
}
test (function() {
assert_throws_dom("SyntaxError", function() { testNativeDelete('-r-2-', false); }, '"SyntaxError: Failed to set a named property on \'DOMStringMap\': \'-r-2-\' is not a valid property name."');
assert_true(testNativeDelete('foo', true));
},'Tests Native Delete');
function testForIn(array)
{
var e = getTestElement();
for (var i = 0; i < array.length; ++i) {
e.setAttribute(array[i], "value");
}
var count = 0;
for (var item in e.dataset)
count++;
return count;
}
test (function() {
assert_equals(testForIn(['data-foo', 'data-bar', 'data-baz']), 3);
assert_equals(testForIn(['data-foo', 'data-bar', 'dataFoo']), 2);
assert_equals(testForIn(['data-foo', 'data-bar', 'style']), 2);
assert_equals(testForIn(['data-foo', 'data-bar', 'data-']), 3);
assert_equals(testForIn(['data-foo', 'data-bar', 'data-43']), 3);
assert_equals(testForIn(['data-foo', 'data-oric1', 'data-bar']), 3);
assert_equals(testForIn(['data-foo', 'data-oric-1', 'data-bar']), 3);
assert_equals(testForIn(['data-foo', 'data-oric-1x', 'data-bar']), 3);
},'Tests For In');
test (function() {
var e = getTestElement();
e.dataset.foo = null;
assert_equals(e.dataset.foo, 'null');
},'Set null');
}
function testDatasetPropertyOverride(getTestElement) {
var e = getTestElement();
// If the Object prototype already has "foo", dataset doesnot create the corresponding attribute for foo
Object.prototype.foo = 'on Object';
assert_equals(e.dataset.foo, 'on Object');
e.dataset['foo'] = 'on dataset';
assert_equals(e.dataset.foo, 'on dataset');
assert_true(e.hasAttribute('data-foo'));
e.setAttribute('data-foo', 'attr');
assert_equals(e.dataset.foo, 'attr');
// Update the JavaScript property
e.dataset.foo = 'updated';
assert_equals(e.dataset.foo, 'updated');
assert_equals(e.getAttribute('data-foo'), 'updated');
// "Bar" can't be represented as a data- attribute.
e.dataset.Bar = 'on dataset';
assert_equals(e.dataset.Bar, 'on dataset');
assert_false(e.hasAttribute('data-Bar'));
// Make the JavaScript property empty
e.dataset.foo = '';
assert_equals(e.dataset.foo, '');
assert_equals(e.getAttribute('data-foo'), '');
// Remove the attribute
e.removeAttribute('data-foo');
assert_equals(e.dataset.foo, 'on Object');
// Remove the JavaScript property
e.setAttribute('data-foo', 'attr');
delete e.dataset.foo;
assert_equals(e.dataset.foo, 'on Object');
assert_false(e.hasAttribute('foo'));
delete e.dataset.Bar;
assert_equals(e.dataset.Bar, undefined);
Object.prototype[11] = 'on Object';
assert_equals(e.dataset[11], 'on Object');
e.dataset['11'] = 'on dataset';
assert_equals(e.dataset[11], 'on dataset');
assert_true(e.hasAttribute('data-11'));
e.setAttribute('data-11', 'attr');
assert_equals(e.dataset[11], 'attr');
// Update the JavaScript property
e.dataset[11] = 'updated';
assert_equals(e.dataset[11], 'updated');
assert_equals(e.getAttribute('data-11'), 'updated');
Object.prototype['a500'] = 'on Object';
assert_equals(e.dataset['a500'], 'on Object');
e.dataset['a500'] = 'on dataset';
assert_equals(e.dataset['a500'], 'on dataset');
assert_true(e.hasAttribute('data-a500'));
e.setAttribute('data-a500', 'attr');
assert_equals(e.dataset['a500'], 'attr');
// Update the JavaScript property
e.dataset['a500'] = 'updated';
assert_equals(e.dataset['a500'], 'updated');
assert_equals(e.getAttribute('data-a500'), 'updated');
Object.prototype['a-500k'] = 'on Object';
assert_equals(e.dataset['a-500k'], 'on Object');
e.dataset['a-500k'] = 'on dataset';
assert_equals(e.dataset['a-500k'], 'on dataset');
assert_true(e.hasAttribute('data-a-500k'));
e.setAttribute('data-a-500k', 'attr');
assert_equals(e.dataset['a-500k'], 'attr');
// Update the JavaScript property
e.dataset['a-500k'] = 'updated';
assert_equals(e.dataset['a-500k'], 'updated');
assert_equals(e.getAttribute('data-a-500k'), 'updated');
}
var svgNS = "http://www.w3.org/2000/svg";
testDataset(function() { return document.createElement("div"); });
testDataset(function() { return document.createElementNS(svgNS, "circle"); });
testDatasetPropertyOverride(function() { return document.createElement("div"); });
testDatasetPropertyOverride(function() { return document.createElementNS(svgNS, "circle"); });
</script>
</body>
Codebase Browser
chromium