| <!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(null, function() { testSet('-foo', 'dummy'); }, '"SyntaxError: Failed to set the \'-foo\' property on \'DOMStringMap\': \'-foo\' is not a valid property name."'); |
| assert_throws(null, 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(null, 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() { |
| // TODO(jochen): Reenable this once it behaves correctly |
| //assert_true(testNativeDelete('-r-2-', false)); |
| 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> |
