diff options
Diffstat (limited to 'testing/web-platform/tests/html/dom/elements')
205 files changed, 9924 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/dom/elements/elements-in-the-dom/historical.html b/testing/web-platform/tests/html/dom/elements/elements-in-the-dom/historical.html new file mode 100644 index 0000000000..078ce29cc0 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/elements-in-the-dom/historical.html @@ -0,0 +1,24 @@ +<!doctype html> +<title>Historical HTMLElement features</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<body> +<script> +[ + // https://github.com/whatwg/html/commit/389ec2620d89e9480ef8847bf016abdfa92427bc + "commandType", + "commandLabel", + "commandIcon", + "commandHidden", + "commandDisabled", + "commandChecked", + "commandTriggers", + // https://github.com/whatwg/html/pull/2402 + "dropzone", +].forEach(function(member) { + test(function() { + assert_false(member in document.body); + assert_false(member in document.createElement('div')); + }, 'HTMLElement member must be nuked: ' + member); +}); +</script> diff --git a/testing/web-platform/tests/html/dom/elements/elements-in-the-dom/unknown-element.html b/testing/web-platform/tests/html/dom/elements/elements-in-the-dom/unknown-element.html new file mode 100644 index 0000000000..907b14837a --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/elements-in-the-dom/unknown-element.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>HTMLUnknownElement</title> +<link rel="author" title="Ms2ger" href="mailto:ms2ger@gmail.com"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/#htmlunknownelement"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id="log"></div> +<script> +test(function() { + var elt = document.createElement("xxx"); + assert_true(window.HTMLUnknownElement && elt instanceof HTMLUnknownElement, + "not an instance of HTMLUnknownElement"); + assert_true(window.HTMLSpanElement && !(elt instanceof HTMLSpanElement), + "an instance of HTMLSpanElement"); +}); +</script> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/.htaccess b/testing/web-platform/tests/html/dom/elements/global-attributes/.htaccess new file mode 100644 index 0000000000..94e9a4f190 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/.htaccess @@ -0,0 +1,16 @@ +AddType 'text/html; charset=UTF-8' html +<Files 'the-lang-attribute-003.html'> +AddLanguage 'ko' .html +</Files> +<Files 'the-lang-attribute-005.html'> +AddLanguage 'zh' .html +</Files> +<Files 'the-lang-attribute-006.html'> +AddLanguage 'zh' .html +</Files> +<Files 'the-lang-attribute-009.html'> +AddLanguage 'ko' .html +</Files> +<Files 'the-lang-attribute-011.html'> +AddLanguage 'ko,zh,ja' .html +</Files> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/classlist-nonstring.html b/testing/web-platform/tests/html/dom/elements/global-attributes/classlist-nonstring.html new file mode 100644 index 0000000000..044f5e8b1b --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/classlist-nonstring.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<title>classList: non-string contains</title> +<link rel="author" title="Ms2ger" href="mailto:ms2ger@gmail.com"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/#classes"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/#domtokenlist"> +<link rel="help" href="https://webidl.spec.whatwg.org/#es-DOMString"> +<link rel="help" href="http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-262.pdf#page=57"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id="log"></div> +<div id="test"> +<ul> +<li class=undefined> +<li class=null> +<li class=0> +<li class=NaN> +<li class=Infinity> +<li class=-Infinity> +</ul> +<script> +var items = document.getElementById("test") + .getElementsByTagName("li"); +var tests = [undefined, null, -0, +0, NaN, +Infinity, -Infinity]; +var results = [ + [true, false, false, false, false, false, false], // "undefined" + [false, true, false, false, false, false, false], // "null" + [false, false, true, true, false, false, false], // "0" + [false, false, false, false, true, false, false], // "NaN" + [false, false, false, false, false, true, false], // "Infinity" + [false, false, false, false, false, false, true ] // "-Infinity" +]; +</script> +</div> +<script> +test(function() { + for (var i = 0, il = items.length; i < il; ++i) { + test(function() { + for (var j = 0, jl = tests.length; j < jl; ++j) { + assert_equals(items[i].classList.contains(tests[j]), results[i][j]); + } + }) + } +}) +</script> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/custom-attrs.html b/testing/web-platform/tests/html/dom/elements/global-attributes/custom-attrs.html new file mode 100644 index 0000000000..a1e41dac25 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/custom-attrs.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> + <head> + <title>Element Custom Attributes</title> + <link rel="author" title="Bruno de Oliveira Abinader" href="mailto:bruno.d@partner.samsung.com"> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#dom-dataset"> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#xml"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/dom/nodes/attributes.js"></script> + </head> + <body> + <h1>Element Custom Attributes</h1> + <div id="log"></div> + <script> + test(function() { + var div = document.createElement("div"); + div.setAttributeNS("foo", "data-my-custom-attr", "first"); + div.setAttributeNS("bar", "data-my-custom-attr", "second"); + div.dataset.myCustomAttr = "third"; + + assert_equals(div.attributes.length, 3); + attributes_are(div, [["data-my-custom-attr", "first", "foo"], + ["data-my-custom-attr", "second", "bar"], + ["data-my-custom-attr", "third", null]]); + }, "Setting an Element's dataset property should not interfere with namespaced attributes with same name"); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/data_unicode_attr.html b/testing/web-platform/tests/html/dom/elements/global-attributes/data_unicode_attr.html new file mode 100644 index 0000000000..17077dafd1 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/data_unicode_attr.html @@ -0,0 +1,22 @@ +<!DOCTYPE HTML> +<meta charset="utf-8"> +<title>HTML Test: dataset attribute</title> +<link rel="author" title="ElegantPig" href="mailto:neil.ep@hotmail.com"> +<link rel="author" title="Xiaojun Wu" href="mailto:xiaojunx.a.wu@intel.com"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id='log'></div> +<div id="d1" data-weapons="laser 2" data-中文属性="中文"></div> +<script> + +test(function() { + var d1 = document.getElementById("d1"); + assert_equals(d1.dataset.weapons, "laser 2"); +}, "dataset - SBCS"); + +test(function() { + var d1 = document.getElementById("d1"); + assert_equals(d1.dataset.中文属性, "中文"); +}, "dataset - UNICODE"); + +</script> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dataset-binding.window.js b/testing/web-platform/tests/html/dom/elements/global-attributes/dataset-binding.window.js new file mode 100644 index 0000000000..e0e85677d1 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dataset-binding.window.js @@ -0,0 +1,45 @@ +[9, "x"].forEach(function(key) { + test(function() { + var element = document.createElement("div"); + var dataset = element.dataset; + + var value = "value for " + this.name; + + assert_equals(dataset[key], undefined); + + element.setAttribute("data-" + key, value); + assert_equals(element.getAttribute("data-" + key), value); + assert_equals(dataset[key], value); + + var propdesc = Object.getOwnPropertyDescriptor(dataset, key); + assert_not_equals(propdesc, undefined); + assert_equals(propdesc.value, value); + assert_true(propdesc.writable); + assert_true(propdesc.enumerable); + assert_true(propdesc.configurable); + }, "Getting property descriptor for key " + key); + + test(function() { + var element = document.createElement("div"); + var dataset = element.dataset; + + var proto = "proto getter for " + this.name; + var calledSetter = []; + Object.defineProperty(DOMStringMap.prototype, key, { + "get": function() { return proto; }, + "set": this.unreached_func("Should not call [[Set]] on prototype"), + "configurable": true, + }); + this.add_cleanup(function() { + delete DOMStringMap.prototype[key]; + }); + + var value = "value for " + this.name; + + assert_equals(dataset[key], proto); + assert_equals(element.getAttribute("data-" + key), null); + assert_equals(dataset[key] = value, value); + assert_equals(dataset[key], value); + assert_equals(element.getAttribute("data-" + key), value); + }, "Setting property for key " + key + " with accessor property on prototype"); +}); diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dataset-delete.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dataset-delete.html new file mode 100644 index 0000000000..1440118f6d --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dataset-delete.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> + <head> + <title>Dataset - Delete</title> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + </head> + <body> + <h1>Dataset - Delete</h1> + <div id="log"></div> + <script> + function testDelete(attr, prop) + { + var d = document.createElement("div"); + d.setAttribute(attr, "value"); + delete d.dataset[prop]; + return d.hasAttribute(attr) === false && d.getAttribute(attr) != "value"; + } + + function testDeleteNoAdd(prop) + { + var d = document.createElement("div"); + delete d.dataset[prop]; + return true; + } + + test(function() { assert_true(testDelete('data-foo', 'foo')); }, + "Deleting element.dataset['foo'] should also remove an attribute with name 'data-foo' should it exist."); + test(function() { assert_true(testDelete('data-foo-bar', 'fooBar')); }, + "Deleting element.dataset['fooBar'] should also remove an attribute with name 'data-foo-bar' should it exist."); + test(function() { assert_true(testDelete('data--', '-')); }, + "Deleting element.dataset['-'] should also remove an attribute with name 'data--' should it exist."); + test(function() { assert_true(testDelete('data--foo', 'Foo')); }, + "Deleting element.dataset['Foo'] should also remove an attribute with name 'data--foo' should it exist."); + test(function() { + var d = document.createElement("div"); + d.setAttribute('data--foo', "value"); + assert_equals(d.dataset['-foo'], undefined); + assert_false('-foo' in d.dataset); + delete d.dataset['-foo']; + assert_true(d.hasAttribute('data--foo')); + assert_equals(d.getAttribute('data--foo'), "value"); + }, "Deleting element.dataset['-foo'] should not remove an attribute with name 'data--foo' should it exist."); + test(function() { assert_true(testDelete('data---foo', '-Foo')); }, + "Deleting element.dataset['-Foo'] should also remove an attribute with name 'data---foo' should it exist."); + test(function() { assert_true(testDelete('data-', '')); }, + "Deleting element.dataset[''] should also remove an attribute with name 'data-' should it exist."); + test(function() { assert_true(testDelete('data-\xE0', '\xE0')); }, + "Deleting element.dataset['\xE0'] should also remove an attribute with name 'data-\xE0' should it exist."); + test(function() { assert_true(testDeleteNoAdd('foo')); }, + "Deleting element.dataset['foo'] should not throw if even if the element does now have an attribute with the name data-foo."); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dataset-enumeration.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dataset-enumeration.html new file mode 100644 index 0000000000..4b1063379c --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dataset-enumeration.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> + <head> + <title>Dataset - Enumeration</title> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + </head> + <body> + <h1>Dataset - Enumeration</h1> + <div id="log"></div> + <script> + function testEnumeration(array) + { + var d = document.createElement("div"); + for (var i = 0; i < array.length; ++i) + d.setAttribute(array[i], "value"); + + var count = 0; + for (var item in d.dataset) + count++; + + return count; + } + + test(function() { assert_equals(testEnumeration(['data-foo', 'data-bar', 'data-baz']), 3); }, + "A dataset should be enumeratable."); + test(function() { assert_equals(testEnumeration(['data-foo', 'data-bar', 'dataFoo']), 2); }, + "Only attributes who qualify as dataset properties should be enumeratable in the dataset."); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dataset-get.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dataset-get.html new file mode 100644 index 0000000000..ab4078c4fb --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dataset-get.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html> + <head> + <title>Dataset - Get</title> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + </head> + <body> + <h1>Dataset - Get</h1> + <div id="log"></div> + <script> + function testGet(attr, expected) + { + var d = document.createElement("div"); + d.setAttribute(attr, "value"); + return d.dataset[expected] == "value"; + } + + test(function() { assert_true(testGet('data-foo', 'foo')); }, + "Getting element.dataset['foo'] should return the value of element.getAttribute('data-foo')'"); + test(function() { assert_true(testGet('data-foo-bar', 'fooBar')); }, + "Getting element.dataset['fooBar'] should return the value of element.getAttribute('data-foo-bar')'"); + test(function() { assert_true(testGet('data--', '-')); }, + "Getting element.dataset['-'] should return the value of element.getAttribute('data--')'"); + test(function() { assert_true(testGet('data--foo', 'Foo')); }, + "Getting element.dataset['Foo'] should return the value of element.getAttribute('data--foo')'"); + test(function() { assert_true(testGet('data---foo', '-Foo')); }, + "Getting element.dataset['-Foo'] should return the value of element.getAttribute('data---foo')'"); + test(function() { assert_true(testGet('data-Foo', 'foo')); }, + "Getting element.dataset['foo'] should return the value of element.getAttribute('data-Foo')'"); + test(function() { assert_true(testGet('data-', '')); }, + "Getting element.dataset[''] should return the value of element.getAttribute('data-')'"); + test(function() { assert_true(testGet('data-\xE0', '\xE0')); }, + "Getting element.dataset['\xE0'] should return the value of element.getAttribute('data-\xE0')'"); + test(function() { assert_true(testGet('data-to-string', 'toString')); }, + "Getting element.dataset['toString'] should return the value of element.getAttribute('data-to-string')'"); + + function matchesNothingInDataset(attr) + { + var d = document.createElement("div"); + d.setAttribute(attr, "value"); + + if (!d.dataset) + return false; + + var count = 0; + for (var item in d.dataset) + count++; + return count == 0; + } + + test(function() { assert_true(matchesNothingInDataset('dataFoo')); }, + "Tests that an attribute named dataFoo does not make an entry in the dataset DOMStringMap."); + + </script> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dataset-prototype.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dataset-prototype.html new file mode 100644 index 0000000000..6b16618461 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dataset-prototype.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <head> + <title>Dataset - element.dataset is an instance of DOMStringMap</title> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + </head> + <body> + <h1>Dataset - element.dataset is an instance of DOMStringMap</h1> + <div id="log"></div> + <script> + test(function() { assert_true(document.createElement("div").dataset instanceof window.DOMStringMap); }, + "An elements dataset property is an instance of a DOMStringMap"); + test(function() { + var dataset = document.createElement("div").dataset; + assert_true("toString" in dataset, '"toString" in dataset'); + assert_equals(dataset.toString, Object.prototype.toString); + assert_false("expando" in dataset, '"expando" in dataset'); + assert_equals(dataset.expando, undefined); + Object.prototype.expando = 42; + assert_true("expando" in dataset, '"expando" in dataset'); + assert_equals(dataset.expando, 42); + }, "Properties on Object.prototype should shine through."); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dataset-set.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dataset-set.html new file mode 100644 index 0000000000..a5bc177f50 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dataset-set.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> + <head> + <title>Dataset - Set</title> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + </head> + <body> + <h1>Dataset - Set</h1> + <div id="log"></div> + <script> + function testSet(prop, expected) + { + var d = document.createElement("div"); + d.dataset[prop] = "value"; + return d.getAttribute(expected) == "value"; + } + + test(function() { assert_true(testSet('foo', 'data-foo')); }, + "Setting element.dataset['foo'] should also change the value of element.getAttribute('data-foo')"); + test(function() { assert_true(testSet('fooBar', 'data-foo-bar')); }, + "Setting element.dataset['fooBar'] should also change the value of element.getAttribute('data-foo-bar')"); + test(function() { assert_true(testSet('-', 'data--')); }, + "Setting element.dataset['-'] should also change the value of element.getAttribute('data--')"); + test(function() { assert_true(testSet('Foo', 'data--foo')); }, + "Setting element.dataset['Foo'] should also change the value of element.getAttribute('data--foo')"); + test(function() { assert_true(testSet('-Foo', 'data---foo')); }, + "Setting element.dataset['-Foo'] should also change the value of element.getAttribute('data---foo')"); + test(function() { assert_true(testSet('', 'data-')); }, + "Setting element.dataset[''] should also change the value of element.getAttribute('data-')"); + test(function() { assert_true(testSet('\xE0', 'data-\xE0')); }, + "Setting element.dataset['\xE0'] should also change the value of element.getAttribute('data-\xE0')"); + test(function() { assert_throws_dom('SYNTAX_ERR', function() { testSet('-foo', 'dummy') }); }, + "Setting element.dataset['-foo'] should throw a SYNTAX_ERR"); + test(function() { assert_throws_dom('INVALID_CHARACTER_ERR', function() { testSet('foo\x20', 'dummy') }); }, + "Setting element.dataset['foo\x20'] should throw an INVALID_CHARACTER_ERR"); + test(function() { assert_throws_dom('INVALID_CHARACTER_ERR', function() { testSet('\u037Efoo', 'dummy') }); }, + "Setting element.dataset['\u037Efoo'] should throw an INVALID_CHARACTER_ERR"); + test(function() { assert_true(testSet('\u0BC6foo', 'data-\u0BC6foo')); }, + "Setting element.dataset['\u0BC6foo'] should also change the value of element.getAttribute('\u0BC6foo')"); + + </script> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dataset.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dataset.html new file mode 100644 index 0000000000..a4a16d014d --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dataset.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<title>dataset: should exist and work on HTML and SVG elements, but not random elements</title> +<link rel="author" title="Ms2ger" href="mailto:ms2ger@gmail.com"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id="log"></div> +<script> +var div = document.createElement("div"); +test(function() { + assert_true(div.dataset instanceof DOMStringMap); +}, "HTML elements should have a .dataset"); +test(function() { + assert_false("foo" in div.dataset); + assert_equals(div.dataset.foo, undefined); +}, "Should return 'undefined' before setting an attribute") +test(function() { + div.setAttribute("data-foo", "value"); + assert_true("foo" in div.dataset); + assert_equals(div.dataset.foo, "value"); +}, "Should return 'value' if that's the value") +test(function() { + div.setAttribute("data-foo", ""); + assert_true("foo" in div.dataset); + assert_equals(div.dataset.foo, ""); +}, "Should return the empty string if that's the value") +test(function() { + div.removeAttribute("data-foo"); + assert_false("foo" in div.dataset); + assert_equals(div.dataset.foo, undefined); +}, "Should return 'undefined' after removing an attribute") +test(function() { + assert_equals(document.createElementNS("test", "test").dataset, undefined); +}, "Should not have a .dataset on random elements"); +test(function() { + var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg") + assert_true(svg.dataset instanceof DOMStringMap); +}, "SVG elements should have a .dataset"); +</script> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir-auto-div-append-child.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir-auto-div-append-child.html new file mode 100644 index 0000000000..e69f64b3a9 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir-auto-div-append-child.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>HTML Test: input with dir=auto, then append a child</title> +<meta charset="utf-8"> +<meta name="assert" content="The dir global attribute set to auto applies when a child is appended" /> +<link rel="author" title="HTML5 bidi test WG" href="mailto:japhet@chromium.org" /> +<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<body> +<div id="div" dir="auto"></div> +<script> +test(() => { + assert_equals(getComputedStyle(div).direction, "ltr"); + div.appendChild(document.createTextNode('اختبر SomeText')); + assert_equals(getComputedStyle(div).direction, "rtl"); +}, 'dir auto: updates on appendChild'); +</script> +</body> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir-bdi-script.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir-bdi-script.html new file mode 100644 index 0000000000..3008043093 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir-bdi-script.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<title>HTML Test: BDI: script adds a bdi element with R text and the direction should be RTL</title> +<meta charset="utf-8"> +<meta name="assert" content="The dir global attribute defaults to auto on the bdi element" /> +<link rel="author" title="HTML5 bidi test WG" href="mailto:myid.shin@igalia.com" /> +<link rel="help" href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-bdi-element" /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<body> +<div id="test1"><bdi>اختبر SomeText</bdi><br></div> +<div id="test2"></div> +<script> +test(() => { + assert_equals(getComputedStyle(test1.firstChild).direction, "rtl"); + + const bdi = document.createElement("bdi"); + var text = document.createTextNode('اختبر SomeText'); + bdi.append(text); + test2.append(bdi); + + assert_equals(getComputedStyle(test2.firstChild).direction, "rtl"); +}, 'BDI test: Directionality'); +</script> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir-slots-directionality.tentative.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir-slots-directionality.tentative.html new file mode 100644 index 0000000000..1f0dc07f8e --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir-slots-directionality.tentative.html @@ -0,0 +1,38 @@ +<!doctype html> +<title>HTML Test: dir=auto|rtl with slots, and direction should be RTL</title> +<meta charset="UTF-8"> +<meta name="author" title="Miyoung Shin" href="mailto:myid.shin@igalia.com"> +<meta name="assert" content="When dir='auto', the direction is set according to + slot's assigned node. And the direction should be propagated to shadow" /> +<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute"/> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id="host1"><span></span></div> +<div id="host2" dir="rtl"></div> +<span id="host3" dir="auto"></span> +<div id="host4">اختبر</div> +<div id="host5"></div> +<script> +let root1 = host1.attachShadow({mode:"open"}); +root1.innerHTML = '<slot dir="rtl"></slot>'; + +let root2 = host2.attachShadow({mode:"open"}); +root2.innerHTML = '<span></span>'; + +let root3 = host3.attachShadow({mode:"open"}); +root3.innerHTML = `اختبر`; + +let root4 = host4.attachShadow({mode:"open"}); +root4.innerHTML = '<span dir="auto"><slot></slot></span>'; + +let root5 = host5.attachShadow({mode:"open"}); + root5.innerHTML = '<span dir="auto"><slot>اختبر</slot></span>'; + +test(() => { + assert_equals(getComputedStyle(host1.firstChild).direction, "rtl"); + assert_equals(getComputedStyle(root2.querySelector("span")).direction, "rtl"); + assert_equals(getComputedStyle(host3).direction, "ltr"); + assert_equals(getComputedStyle(root4.querySelector("span")).direction, "rtl"); + assert_equals(getComputedStyle(root5.querySelector("span")).direction, "rtl"); +}, 'Slots: Directionality'); +</script> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-EN-L-ref.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-EN-L-ref.html new file mode 100644 index 0000000000..de6e13b3a3 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-EN-L-ref.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: dir=auto, start with EN, then L</title> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of the text. + In this test, it is the Latin letter A since digits are not strongly + directional, thus the direction must be resolved as LTR." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <p dir="ltr">123ABCאבג.</p> + </div> + <div dir="rtl"> + <p dir="ltr">123ABCאבג.</p> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <p dir="ltr">123ABCאבג.</p> + </div> + <div dir="rtl"> + <p dir="ltr">123ABCאבג.</p> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-EN-L.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-EN-L.html new file mode 100644 index 0000000000..fa8d793bd0 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-EN-L.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: dir=auto, start with EN, then L</title> + <link rel="match" href="dir_auto-EN-L-ref.html" /> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of the text. + In this test, it is the Latin letter A since digits are not strongly + directional, thus the direction must be resolved as LTR." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <p dir="auto">123ABCאבג.</p> + </div> + <div dir="rtl"> + <p dir="auto">123ABCאבג.</p> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <p dir="ltr">123ABCאבג.</p> + </div> + <div dir="rtl"> + <p dir="ltr">123ABCאבג.</p> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-EN-R-ref.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-EN-R-ref.html new file mode 100644 index 0000000000..15bd618dc1 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-EN-R-ref.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: dir=auto, start with EN, then R</title> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of the text. + In this test, it is the Hebrew letter Alef since digits are not strongly + directional, thus the direction must be resolved as RTL." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <p dir="rtl">123אבגABC.</p> + </div> + <div dir="rtl"> + <p dir="rtl">123אבגABC.</p> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <p dir="rtl">123אבגABC.</p> + </div> + <div dir="rtl"> + <p dir="rtl">123אבגABC.</p> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-EN-R.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-EN-R.html new file mode 100644 index 0000000000..7165de583d --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-EN-R.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: dir=auto, start with EN, then R</title> + <link rel="match" href="dir_auto-EN-R-ref.html" /> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of the text. + In this test, it is the Hebrew letter Alef since digits are not strongly + directional, thus the direction must be resolved as RTL." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <p dir="auto">123אבגABC.</p> + </div> + <div dir="rtl"> + <p dir="auto">123אבגABC.</p> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <p dir="rtl">123אבגABC.</p> + </div> + <div dir="rtl"> + <p dir="rtl">123אבגABC.</p> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-L-ref.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-L-ref.html new file mode 100644 index 0000000000..23da64ed9b --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-L-ref.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: dir=auto, start with L</title> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of the text. + In this test, it is the Latin letter A, thus the direction must be + resolved as LTR." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <p dir="ltr">ABCאבג.</p> + </div> + <div dir="rtl"> + <p dir="ltr">ABCאבג.</p> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <p dir="ltr">ABCאבג.</p> + </div> + <div dir="rtl"> + <p dir="ltr">ABCאבג.</p> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-L.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-L.html new file mode 100644 index 0000000000..3896bcb76b --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-L.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: dir=auto, start with L</title> + <link rel="match" href="dir_auto-L-ref.html" /> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of the text. + In this test, it is the Latin letter A, thus the direction must be + resolved as LTR." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <p dir="auto">ABCאבג.</p> + </div> + <div dir="rtl"> + <p dir="auto">ABCאבג.</p> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <p dir="ltr">ABCאבג.</p> + </div> + <div dir="rtl"> + <p dir="ltr">ABCאבג.</p> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-N-EN-L-ref.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-N-EN-L-ref.html new file mode 100644 index 0000000000..c7977d189f --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-N-EN-L-ref.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: dir=auto, start with N, then EN, then L</title> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of the text. + In this test, it is the Latin letter A since neutrals and digits are not + strongly directional, thus the direction must be resolved as LTR." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <p dir="ltr">.-=123ABCאבג.</p> + </div> + <div dir="rtl"> + <p dir="ltr">.-=123ABCאבג.</p> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <p dir="ltr">.-=123ABCאבג.</p> + </div> + <div dir="rtl"> + <p dir="ltr">.-=123ABCאבג.</p> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-N-EN-L.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-N-EN-L.html new file mode 100644 index 0000000000..21ca0338dc --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-N-EN-L.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: dir=auto, start with N, then EN, then L</title> + <link rel="match" href="dir_auto-N-EN-L-ref.html" /> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of the text. + In this test, it is the Latin letter A since neutrals and digits are not + strongly directional, thus the direction must be resolved as LTR." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <p dir="auto">.-=123ABCאבג.</p> + </div> + <div dir="rtl"> + <p dir="auto">.-=123ABCאבג.</p> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <p dir="ltr">.-=123ABCאבג.</p> + </div> + <div dir="rtl"> + <p dir="ltr">.-=123ABCאבג.</p> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-N-EN-R-ref.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-N-EN-R-ref.html new file mode 100644 index 0000000000..aae50bc721 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-N-EN-R-ref.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: dir=auto, start with N, then EN, then R</title> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of the text. + In this test, it is the Hebrew letter Alef since neutrals and digits are not + strongly directional, thus the direction must be resolved as RTL." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <p dir="rtl">.-=123אבגABC.</p> + </div> + <div dir="rtl"> + <p dir="rtl">.-=123אבגABC.</p> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <p dir="rtl">.-=123אבגABC.</p> + </div> + <div dir="rtl"> + <p dir="rtl">.-=123אבגABC.</p> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-N-EN-R.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-N-EN-R.html new file mode 100644 index 0000000000..b10a52b1a8 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-N-EN-R.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: dir=auto, start with N, then EN, then R</title> + <link rel="match" href="dir_auto-N-EN-R-ref.html" /> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of the text. + In this test, it is the Hebrew letter Alef since neutrals and digits are not + strongly directional, thus the direction must be resolved as RTL." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <p dir="auto">.-=123אבגABC.</p> + </div> + <div dir="rtl"> + <p dir="auto">.-=123אבגABC.</p> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <p dir="rtl">.-=123אבגABC.</p> + </div> + <div dir="rtl"> + <p dir="rtl">.-=123אבגABC.</p> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-N-EN-ref.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-N-EN-ref.html new file mode 100644 index 0000000000..154d56aaf9 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-N-EN-ref.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: dir=auto, start with N, then EN, then L</title> + <link rel="match" href="dir_auto-N-EN-L-ref.html" /> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of the text, ignoring neutrals and numbers. + If there is no strong character, as in this test, the direction defaults to LTR." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="test"> + <div dir="ltr"> + <p dir="ltr">@123!</p> + </div> + <div dir="rtl"> + <p dir="ltr">@123!</p> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <p dir="ltr">@123!</p> + </div> + <div dir="rtl"> + <p dir="ltr">@123!</p> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-N-EN.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-N-EN.html new file mode 100644 index 0000000000..5d948d3456 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-N-EN.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: dir=auto, start with N, then EN, then L</title> + <link rel="match" href="dir_auto-N-EN-ref.html" /> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of the text, ignoring neutrals and numbers. + If there is no strong character, as in this test, the direction defaults to LTR." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="test"> + <div dir="ltr"> + <p dir="auto">@123!</p> + </div> + <div dir="rtl"> + <p dir="auto">@123!</p> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <p dir="ltr">@123!</p> + </div> + <div dir="rtl"> + <p dir="ltr">@123!</p> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-N-L-ref.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-N-L-ref.html new file mode 100644 index 0000000000..4bbaca1e31 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-N-L-ref.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: dir=auto, start with N, then L</title> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of the text. + In this test, it is the Latin letter A since neutrals are not + strongly directional, thus the direction must be resolved as LTR." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <p dir="ltr">.-=ABCאבג.</p> + </div> + <div dir="rtl"> + <p dir="ltr">.-=ABCאבג.</p> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <p dir="ltr">.-=ABCאבג.</p> + </div> + <div dir="rtl"> + <p dir="ltr">.-=ABCאבג.</p> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-N-L.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-N-L.html new file mode 100644 index 0000000000..945fa06779 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-N-L.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: dir=auto, start with N, then L</title> + <link rel="match" href="dir_auto-N-L-ref.html" /> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of the text. + In this test, it is the Latin letter A since neutrals are not + strongly directional, thus the direction must be resolved as LTR." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <p dir="auto">.-=ABCאבג.</p> + </div> + <div dir="rtl"> + <p dir="auto">.-=ABCאבג.</p> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <p dir="ltr">.-=ABCאבג.</p> + </div> + <div dir="rtl"> + <p dir="ltr">.-=ABCאבג.</p> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-N-R-ref.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-N-R-ref.html new file mode 100644 index 0000000000..7a1daeddde --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-N-R-ref.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: dir=auto, start with N, then R</title> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of the text. + In this test, it is the Hebrew letter Alef since neutrals are not + strongly directional, thus the direction must be resolved as RTL." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <p dir="rtl">.-=אבגABC.</p> + </div> + <div dir="rtl"> + <p dir="rtl">.-=אבגABC.</p> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <p dir="rtl">.-=אבגABC.</p> + </div> + <div dir="rtl"> + <p dir="rtl">.-=אבגABC.</p> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-N-R.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-N-R.html new file mode 100644 index 0000000000..bf27a16a22 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-N-R.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: dir=auto, start with N, then R</title> + <link rel="match" href="dir_auto-N-R-ref.html" /> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of the text. + In this test, it is the Hebrew letter Alef since neutrals are not + strongly directional, thus the direction must be resolved as RTL." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <p dir="auto">.-=אבגABC.</p> + </div> + <div dir="rtl"> + <p dir="auto">.-=אבגABC.</p> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <p dir="rtl">.-=אבגABC.</p> + </div> + <div dir="rtl"> + <p dir="rtl">.-=אבגABC.</p> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-R-ref.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-R-ref.html new file mode 100644 index 0000000000..c9dc5301b4 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-R-ref.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: dir=auto, start with R</title> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of the text. + In this test, it is the Hebrew letter Alef, thus the direction must be + resolved as RTL." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + </div> + <div class="test"> + <div dir="ltr"> + <p dir="rtl">אבגABC.</p> + </div> + <div dir="rtl"> + <p dir="rtl">אבגABC.</p> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <p dir="rtl">אבגABC.</p> + </div> + <div dir="rtl"> + <p dir="rtl">אבגABC.</p> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-R.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-R.html new file mode 100644 index 0000000000..69a62fc637 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-R.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: dir=auto, start with R</title> + <link rel="match" href="dir_auto-R-ref.html" /> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of the text. + In this test, it is the Hebrew letter Alef, thus the direction must be + resolved as RTL." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <p dir="auto">אבגABC.</p> + </div> + <div dir="rtl"> + <p dir="auto">אבגABC.</p> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <p dir="rtl">אבגABC.</p> + </div> + <div dir="rtl"> + <p dir="rtl">אבגABC.</p> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-L-ref.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-L-ref.html new file mode 100644 index 0000000000..4e42a11a91 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-L-ref.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: dir=auto, start with L within contained element</title> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of the text, including text within contained elements. + In this test, it is the Latin letter A, thus the direction must be + resolved as LTR." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + ד - The Hebrew letter Dalet (strongly RTL). + ה - The Hebrew letter He (strongly RTL). + ו - The Hebrew letter Vav (strongly RTL). + ז - The Hebrew letter Zayin (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <div dir="ltr"><div><div>ABCאבג.</div>דה</div>ו</div> + </div> + <div dir="rtl"> + <div dir="ltr"><div><div>ABCאבג.</div>דה</div>ו</div> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <div dir="ltr"><div><div>ABCאבג.</div>דה</div>ו</div> + </div> + <div dir="rtl"> + <div dir="ltr"><div><div>ABCאבג.</div>דה</div>ו</div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-L.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-L.html new file mode 100644 index 0000000000..f71f318bfd --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-L.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: dir=auto, start with L within contained element</title> + <link rel="match" href="dir_auto-contained-L-ref.html" /> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of the text, including text within contained elements. + In this test, it is the Latin letter A, thus the direction must be + resolved as LTR." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + ד - The Hebrew letter Dalet (strongly RTL). + ה - The Hebrew letter He (strongly RTL). + ו - The Hebrew letter Vav (strongly RTL). + ז - The Hebrew letter Zayin (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <div dir="auto"><div><div>ABCאבג.</div>דה</div>ו</div> + </div> + <div dir="rtl"> + <div dir="auto"><div><div>ABCאבג.</div>דה</div>ו</div> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <div dir="ltr"><div><div>ABCאבג.</div>דה</div>ו</div> + </div> + <div dir="rtl"> + <div dir="ltr"><div><div>ABCאבג.</div>דה</div>ו</div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-R-ref.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-R-ref.html new file mode 100644 index 0000000000..a3938bdf85 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-R-ref.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: dir=auto, start with R within contained element</title> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of the text, including text within contained elements. + In this test, it is the Hebrew letter Alef, thus the direction must be + resolved as RTL." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <div dir="rtl"><div><div>אבגABC.</div>XY</div>Z</div> + </div> + <div dir="rtl"> + <div dir="rtl"><div><div>אבגABC.</div>XY</div>Z</div> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <div dir="rtl"><div><div>אבגABC.</div>XY</div>Z</div> + </div> + <div dir="rtl"> + <div dir="rtl"><div><div>אבגABC.</div>XY</div>Z</div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-R.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-R.html new file mode 100644 index 0000000000..2ba63426e3 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-R.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: dir=auto, start with R within contained element</title> + <link rel="match" href="dir_auto-contained-R-ref.html" /> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of the text, including text within contained elements. + In this test, it is the Hebrew letter Alef, thus the direction must be + resolved as RTL." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <div dir="auto"><div><div>אבגABC.</div>XY</div>Z</div> + </div> + <div dir="rtl"> + <div dir="auto"><div><div>אבגABC.</div>XY</div>Z</div> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <div dir="rtl"><div><div>אבגABC.</div>XY</div>Z</div> + </div> + <div dir="rtl"> + <div dir="rtl"><div><div>אבגABC.</div>XY</div>Z</div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-bdi-L-ref.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-bdi-L-ref.html new file mode 100644 index 0000000000..470220c80d --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-bdi-L-ref.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: dir=auto, start with bdi, then L</title> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of the text while ignoring bdi elements. + In this test, it is the Latin letter A, thus the direction must be + resolved as LTR." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + ד - The Hebrew letter Dalet (strongly RTL). + ה - The Hebrew letter He (strongly RTL). + ו - The Hebrew letter Vav (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <div dir="ltr"><bdi>דהו</bdi>ABCאבג.</div> + </div> + <div dir="rtl"> + <div dir="ltr"><bdi>דהו</bdi>ABCאבג.</div> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <div dir="ltr"><bdi>דהו</bdi>ABCאבג.</div> + </div> + <div dir="rtl"> + <div dir="ltr"><bdi>דהו</bdi>ABCאבג.</div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-bdi-L.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-bdi-L.html new file mode 100644 index 0000000000..f35abfe3fd --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-bdi-L.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: dir=auto, start with bdi, then L</title> + <link rel="match" href="dir_auto-contained-bdi-L-ref.html" /> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of the text while ignoring bdi elements. + In this test, it is the Latin letter A, thus the direction must be + resolved as LTR." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + ד - The Hebrew letter Dalet (strongly RTL). + ה - The Hebrew letter He (strongly RTL). + ו - The Hebrew letter Vav (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <div dir="auto"><bdi>דהו</bdi>ABCאבג.</div> + </div> + <div dir="rtl"> + <div dir="auto"><bdi>דהו</bdi>ABCאבג.</div> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <div dir="ltr"><bdi>דהו</bdi>ABCאבג.</div> + </div> + <div dir="rtl"> + <div dir="ltr"><bdi>דהו</bdi>ABCאבג.</div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-bdi-R-ref.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-bdi-R-ref.html new file mode 100644 index 0000000000..94475aaa92 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-bdi-R-ref.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: dir=auto, start with bdi, then R</title> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of the text while ignoring bdi elements. + In this test, it is the Hebrew letter Alef, thus the direction must be + resolved as RTL." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <div dir="rtl"><bdi>DEF</bdi>אבגABC.</div> + </div> + <div dir="rtl"> + <div dir="rtl"><bdi>DEF</bdi>אבגABC.</div> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <div dir="rtl"><bdi>DEF</bdi>אבגABC.</div> + </div> + <div dir="rtl"> + <div dir="rtl"><bdi>DEF</bdi>אבגABC.</div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-bdi-R.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-bdi-R.html new file mode 100644 index 0000000000..8ac3244618 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-bdi-R.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: dir=auto, start with bdi, then R</title> + <link rel="match" href="dir_auto-contained-bdi-R-ref.html" /> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of the text while ignoring bdi elements. + In this test, it is the Hebrew letter Alef, thus the direction must be + resolved as RTL." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <div dir="auto"><bdi>DEF</bdi>אבגABC.</div> + </div> + <div dir="rtl"> + <div dir="auto"><bdi>DEF</bdi>אבגABC.</div> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <div dir="rtl"><bdi>DEF</bdi>אבגABC.</div> + </div> + <div dir="rtl"> + <div dir="rtl"><bdi>DEF</bdi>אבגABC.</div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-dir-L-ref.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-dir-L-ref.html new file mode 100644 index 0000000000..7c9f931d3d --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-dir-L-ref.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: dir=auto, start with dir, then L</title> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of the text while ignoring contained elements with an explicit dir of their own. + In this test, it is the Latin letter A, thus the direction must be + resolved as LTR." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + ד - The Hebrew letter Dalet (strongly RTL). + ה - The Hebrew letter He (strongly RTL). + ו - The Hebrew letter Vav (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <div dir="ltr"><p dir="rtl">דהו</p>ABCאבג.</div> + </div> + <div dir="rtl"> + <div dir="ltr"><p dir="rtl">דהו</p>ABCאבג.</div> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <div dir="ltr"><p dir="rtl">דהו</p>ABCאבג.</div> + </div> + <div dir="rtl"> + <div dir="ltr"><p dir="rtl">דהו</p>ABCאבג.</div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-dir-L.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-dir-L.html new file mode 100644 index 0000000000..1f424682fa --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-dir-L.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: dir=auto, start with dir, then L</title> + <link rel="match" href="dir_auto-contained-dir-L-ref.html" /> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of the text while ignoring contained elements with an explicit dir of their own. + In this test, it is the Latin letter A, thus the direction must be + resolved as LTR." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + ד - The Hebrew letter Dalet (strongly RTL). + ה - The Hebrew letter He (strongly RTL). + ו - The Hebrew letter Vav (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <div dir="auto"><p dir="rtl">דהו</p>ABCאבג.</div> + </div> + <div dir="rtl"> + <div dir="auto"><p dir="rtl">דהו</p>ABCאבג.</div> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <div dir="ltr"><p dir="rtl">דהו</p>ABCאבג.</div> + </div> + <div dir="rtl"> + <div dir="ltr"><p dir="rtl">דהו</p>ABCאבג.</div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-dir-R-ref.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-dir-R-ref.html new file mode 100644 index 0000000000..c6748dc85f --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-dir-R-ref.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: dir=auto, start with dir, then R</title> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of the text while ignoring contained elements with an explicit dir of their own. + In this test, it is the Hebrew letter Alef, thus the direction must be + resolved as RTL." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <div dir="rtl"><p dir="ltr">DEF</p>אבגABC.</div> + </div> + <div dir="rtl"> + <div dir="rtl"><p dir="ltr">DEF</p>אבגABC.</div> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <div dir="rtl"><p dir="ltr">DEF</p>אבגABC.</div> + </div> + <div dir="rtl"> + <div dir="rtl"><p dir="ltr">DEF</p>אבגABC.</div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-dir-R.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-dir-R.html new file mode 100644 index 0000000000..daab191498 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-dir-R.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: dir=auto, start with dir, then R</title> + <link rel="match" href="dir_auto-contained-dir-R-ref.html" /> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of the text while ignoring contained elements with an explicit dir of their own. + In this test, it is the Hebrew letter Alef, thus the direction must be + resolved as RTL." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <div dir="auto"><p dir="ltr">DEF</p>אבגABC.</div> + </div> + <div dir="rtl"> + <div dir="auto"><p dir="ltr">DEF</p>אבגABC.</div> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <div dir="rtl"><p dir="ltr">DEF</p>אבגABC.</div> + </div> + <div dir="rtl"> + <div dir="rtl"><p dir="ltr">DEF</p>אבגABC.</div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-dir_auto-L-ref.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-dir_auto-L-ref.html new file mode 100644 index 0000000000..53c60421f8 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-dir_auto-L-ref.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: dir=auto, start with dir=auto, then L</title> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of the text while ignoring contained elements with an explicit dir of their own. + In this test, it is the Latin letter A, thus the direction must be + resolved as LTR." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + ד - The Hebrew letter Dalet (strongly RTL). + ה - The Hebrew letter He (strongly RTL). + ו - The Hebrew letter Vav (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <div dir="ltr"><p dir="rtl">דהו</p>ABCאבג.</div> + </div> + <div dir="rtl"> + <div dir="ltr"><p dir="rtl">דהו</p>ABCאבג.</div> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <div dir="ltr"><p dir="rtl">דהו</p>ABCאבג.</div> + </div> + <div dir="rtl"> + <div dir="ltr"><p dir="rtl">דהו</p>ABCאבג.</div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-dir_auto-L.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-dir_auto-L.html new file mode 100644 index 0000000000..f491f61658 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-dir_auto-L.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: dir=auto, start with dir=auto, then L</title> + <link rel="match" href="dir_auto-contained-dir_auto-L-ref.html" /> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of the text while ignoring contained elements with an explicit dir of their own. + In this test, it is the Latin letter A, thus the direction must be + resolved as LTR." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + ד - The Hebrew letter Dalet (strongly RTL). + ה - The Hebrew letter He (strongly RTL). + ו - The Hebrew letter Vav (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <div dir="auto"><p dir="auto">דהו</p>ABCאבג.</div> + </div> + <div dir="rtl"> + <div dir="auto"><p dir="auto">דהו</p>ABCאבג.</div> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <div dir="ltr"><p dir="rtl">דהו</p>ABCאבג.</div> + </div> + <div dir="rtl"> + <div dir="ltr"><p dir="rtl">דהו</p>ABCאבג.</div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-dir_auto-R-ref.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-dir_auto-R-ref.html new file mode 100644 index 0000000000..41871f04a1 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-dir_auto-R-ref.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: dir=auto, start with dir=auto, then R</title> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of the text while ignoring contained elements with an explicit dir of their own. + In this test, it is the Hebrew letter Alef, thus the direction must be + resolved as RTL." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <div dir="rtl"><p dir="ltr">DEF</p>.-=123אבגABC.</div> + </div> + <div dir="rtl"> + <div dir="rtl"><p dir="ltr">DEF</p>.-=123אבגABC.</div> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <div dir="rtl"><p dir="ltr">DEF</p>.-=123אבגABC.</div> + </div> + <div dir="rtl"> + <div dir="rtl"><p dir="ltr">DEF</p>.-=123אבגABC.</div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-dir_auto-R.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-dir_auto-R.html new file mode 100644 index 0000000000..e3131c89b3 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-dir_auto-R.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: dir=auto, start with dir=auto, then R</title> + <link rel="match" href="dir_auto-contained-dir_auto-R-ref.html" /> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of the text while ignoring contained elements with an explicit dir of their own. + In this test, it is the Hebrew letter Alef, thus the direction must be + resolved as RTL." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <div dir="auto"><p dir="auto">DEF</p>.-=123אבגABC.</div> + </div> + <div dir="rtl"> + <div dir="auto"><p dir="auto">DEF</p>.-=123אבגABC.</div> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <div dir="rtl"><p dir="ltr">DEF</p>.-=123אבגABC.</div> + </div> + <div dir="rtl"> + <div dir="rtl"><p dir="ltr">DEF</p>.-=123אבגABC.</div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-script-L-ref.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-script-L-ref.html new file mode 100644 index 0000000000..aca07de7ef --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-script-L-ref.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: dir=auto, start with script, then L</title> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of descendant text while ignoring descendant script elements. + In this test, it is the Latin letter A, thus the direction must be + resolved as LTR." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <div dir="ltr"><script>א = 3;</script>ABCאבג.</div> + </div> + <div dir="rtl"> + <div dir="ltr"><script>א = 3;</script>ABCאבג.</div> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <div dir="ltr"><script>א = 3;</script>ABCאבג.</div> + </div> + <div dir="rtl"> + <div dir="ltr"><script>א = 3;</script>ABCאבג.</div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-script-L.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-script-L.html new file mode 100644 index 0000000000..59a2e77751 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-script-L.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: dir=auto, start with script, then L</title> + <link rel="match" href="dir_auto-contained-script-L-ref.html" /> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of descendant text while ignoring descendant script elements. + In this test, it is the Latin letter A, thus the direction must be + resolved as LTR." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <div dir="auto"><script>א = 3;</script>ABCאבג.</div> + </div> + <div dir="rtl"> + <div dir="auto"><script>א = 3;</script>ABCאבג.</div> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <div dir="ltr"><script>א = 3;</script>ABCאבג.</div> + </div> + <div dir="rtl"> + <div dir="ltr"><script>א = 3;</script>ABCאבג.</div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-script-R-ref.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-script-R-ref.html new file mode 100644 index 0000000000..aa27d2f45b --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-script-R-ref.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: dir=auto, start with script, then R</title> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of descendant text while ignoring descendant script elements. + In this test, it is the Hebrew letter Alef, thus the direction must be + resolved as RTL." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + <script>var x;</script> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <div dir="rtl"><script>x = 3;</script>אבגABC.</div> + </div> + <div dir="rtl"> + <div dir="rtl"><script>x = 3;</script>אבגABC.</div> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <div dir="rtl"><script>x = 3;</script>אבגABC.</div> + </div> + <div dir="rtl"> + <div dir="rtl"><script>x = 3;</script>אבגABC.</div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-script-R.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-script-R.html new file mode 100644 index 0000000000..ee002766a0 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-script-R.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: dir=auto, start with script, then R</title> + <link rel="match" href="dir_auto-contained-script-R-ref.html" /> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of descendant text while ignoring descendant script elements. + In this test, it is the Hebrew letter Alef, thus the direction must be + resolved as RTL." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + <script>var x;</script> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <div dir="auto"><script>x = 3;</script>אבגABC.</div> + </div> + <div dir="rtl"> + <div dir="auto"><script>x = 3;</script>אבגABC.</div> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <div dir="rtl"><script>x = 3;</script>אבגABC.</div> + </div> + <div dir="rtl"> + <div dir="rtl"><script>x = 3;</script>אבגABC.</div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-style-L-ref.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-style-L-ref.html new file mode 100644 index 0000000000..2ec4f02ec2 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-style-L-ref.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: dir=auto, start with style, then L</title> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of descendant text while ignoring descendant style elements. + In this test, it is the Latin letter A, thus the direction must be + resolved as LTR." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <div dir="ltr"><style>body {color:black;}</style>ABCאבג.</div> + </div> + <div dir="rtl"> + <div dir="ltr"><style>body {color:black;}</style>ABCאבג.</div> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <div dir="ltr"><style>body {color:black;}</style>ABCאבג.</div> + </div> + <div dir="rtl"> + <div dir="ltr"><style>body {color:black;}</style>ABCאבג.</div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-style-L.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-style-L.html new file mode 100644 index 0000000000..cc74d4c939 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-style-L.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: dir=auto, start with style, then L</title> + <link rel="match" href="dir_auto-contained-style-L-ref.html" /> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of descendant text while ignoring descendant style elements. + In this test, it is the Latin letter A, thus the direction must be + resolved as LTR." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <div dir="auto"><style>body {color:black;}</style>ABCאבג.</div> + </div> + <div dir="rtl"> + <div dir="auto"><style>body {color:black;}</style>ABCאבג.</div> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <div dir="ltr"><style>body {color:black;}</style>ABCאבג.</div> + </div> + <div dir="rtl"> + <div dir="ltr"><style>body {color:black;}</style>ABCאבג.</div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-style-R-ref.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-style-R-ref.html new file mode 100644 index 0000000000..9ad9d7109a --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-style-R-ref.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: dir=auto, start with style, then R</title> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of descendant text while ignoring descendant style elements. + In this test, it is the Hebrew letter Alef, thus the direction must be + resolved as RTL." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <div dir="rtl"><style>body {color:black;}</style>אבגABC.</div> + </div> + <div dir="rtl"> + <div dir="rtl"><style>body {color:black;}</style>אבגABC.</div> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <div dir="rtl"><style>body {color:black;}</style>אבגABC.</div> + </div> + <div dir="rtl"> + <div dir="rtl"><style>body {color:black;}</style>אבגABC.</div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-style-R.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-style-R.html new file mode 100644 index 0000000000..4aa70cdb2e --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-style-R.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: dir=auto, start with style, then R</title> + <link rel="match" href="dir_auto-contained-style-R-ref.html" /> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of descendant text while ignoring descendant style elements. + In this test, it is the Hebrew letter Alef, thus the direction must be + resolved as RTL." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <div dir="auto"><style>body {color:black;}</style>אבגABC.</div> + </div> + <div dir="rtl"> + <div dir="auto"><style>body {color:black;}</style>אבגABC.</div> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <div dir="rtl"><style>body {color:black;}</style>אבגABC.</div> + </div> + <div dir="rtl"> + <div dir="rtl"><style>body {color:black;}</style>אבגABC.</div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-textarea-L-ref.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-textarea-L-ref.html new file mode 100644 index 0000000000..411099f7b4 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-textarea-L-ref.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: dir=auto, start with textarea, then L</title> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of descendant text while ignoring descendant textarea elements. + In this test, it is the Latin letter A, thus the direction must be + resolved as LTR." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + ד - The Hebrew letter Dalet (strongly RTL). + ה - The Hebrew letter He (strongly RTL). + ו - The Hebrew letter Vav (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <div dir="ltr"><textarea>דהו</textarea>ABCאבג.</div> + </div> + <div dir="rtl"> + <div dir="ltr"><textarea>דהו</textarea>ABCאבג.</div> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <div dir="ltr"><textarea>דהו</textarea>ABCאבג.</div> + </div> + <div dir="rtl"> + <div dir="ltr"><textarea>דהו</textarea>ABCאבג.</div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-textarea-L.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-textarea-L.html new file mode 100644 index 0000000000..0de041fe01 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-textarea-L.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: dir=auto, start with textarea, then L</title> + <link rel="match" href="dir_auto-contained-textarea-L-ref.html" /> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of descendant text while ignoring descendant textarea elements. + In this test, it is the Latin letter A, thus the direction must be + resolved as LTR." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + ד - The Hebrew letter Dalet (strongly RTL). + ה - The Hebrew letter He (strongly RTL). + ו - The Hebrew letter Vav (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <div dir="auto"><textarea>דהו</textarea>ABCאבג.</div> + </div> + <div dir="rtl"> + <div dir="auto"><textarea>דהו</textarea>ABCאבג.</div> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <div dir="ltr"><textarea>דהו</textarea>ABCאבג.</div> + </div> + <div dir="rtl"> + <div dir="ltr"><textarea>דהו</textarea>ABCאבג.</div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-textarea-R-ref.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-textarea-R-ref.html new file mode 100644 index 0000000000..351431fb2b --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-textarea-R-ref.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: dir=auto, start with textarea, then R</title> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of descendant text while ignoring descendant textarea elements. + In this test, it is the Hebrew letter Alef, thus the direction must be + resolved as RTL." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <div dir="rtl"><textarea>DEF</textarea>אבגABC.</div> + </div> + <div dir="rtl"> + <div dir="rtl"><textarea>DEF</textarea>אבגABC.</div> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <div dir="rtl"><textarea>DEF</textarea>אבגABC.</div> + </div> + <div dir="rtl"> + <div dir="rtl"><textarea>DEF</textarea>אבגABC.</div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-textarea-R.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-textarea-R.html new file mode 100644 index 0000000000..852de6073c --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-contained-textarea-R.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: dir=auto, start with textarea, then R</title> + <link rel="match" href="dir_auto-contained-textarea-R-ref.html" /> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of descendant text while ignoring descendant textarea elements. + In this test, it is the Hebrew letter Alef, thus the direction must be + resolved as RTL." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <div dir="auto"><textarea>DEF</textarea>אבגABC.</div> + </div> + <div dir="rtl"> + <div dir="auto"><textarea>DEF</textarea>אבגABC.</div> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <div dir="rtl"><textarea>DEF</textarea>אבגABC.</div> + </div> + <div dir="rtl"> + <div dir="rtl"><textarea>DEF</textarea>אבגABC.</div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-EN-L-ref.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-EN-L-ref.html new file mode 100644 index 0000000000..198d081c26 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-EN-L-ref.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: input with dir=auto, start with EN+L</title> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="Shai Berger" href="mailto:shai@platonix.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction of an input element is set according to + the first strong character of its value. + In this test, it is the Latin letter A since digits are not strongly + directional, thus the direction must be resolved as LTR." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <input type="text" dir="ltr" value="123ABCאבג." /> + </div> + <div dir="rtl"> + <input type="text" dir="ltr" value="123ABCאבג." /> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <input type="text" dir="ltr" value="123ABCאבג." /> + </div> + <div dir="rtl"> + <input type="text" dir="ltr" value="123ABCאבג." /> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-EN-L.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-EN-L.html new file mode 100644 index 0000000000..d5ade6c096 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-EN-L.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: input with dir=auto, start with EN+L</title> + <link rel="match" href="dir_auto-input-EN-L-ref.html" /> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="Shai Berger" href="mailto:shai@platonix.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction of an input element is set according to + the first strong character of its value. + In this test, it is the Latin letter A since digits are not strongly + directional, thus the direction must be resolved as LTR." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <input type="text" dir="auto" value="123ABCאבג." /> + </div> + <div dir="rtl"> + <input type="text" dir="auto" value="123ABCאבג." /> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <input type="text" dir="ltr" value="123ABCאבג." /> + </div> + <div dir="rtl"> + <input type="text" dir="ltr" value="123ABCאבג." /> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-EN-R-ref.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-EN-R-ref.html new file mode 100644 index 0000000000..303afc3c6b --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-EN-R-ref.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: input with dir=auto, start with EN+R</title> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="Shai Berger" href="mailto:shai@platonix.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction of an input element is set according to + the first strong character of its value. + In this test, it is the Hebrew letter Alef since digits are not strongly + directional, thus the direction must be resolved as RTL." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <input type="text" dir="rtl" value="123אבגABC." /> + </div> + <div dir="rtl"> + <input type="text" dir="rtl" value="123אבגABC." /> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <input type="text" dir="rtl" value="123אבגABC." /> + </div> + <div dir="rtl"> + <input type="text" dir="rtl" value="123אבגABC." /> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-EN-R.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-EN-R.html new file mode 100644 index 0000000000..08ef3ecd70 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-EN-R.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: input with dir=auto, start with EN+R</title> + <link rel="match" href="dir_auto-input-EN-R-ref.html" /> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="Shai Berger" href="mailto:shai@platonix.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction of an input element is set according to + the first strong character of its value. + In this test, it is the Hebrew letter Alef since digits are not strongly + directional, thus the direction must be resolved as RTL." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <input type="text" dir="auto" value="123אבגABC." /> + </div> + <div dir="rtl"> + <input type="text" dir="auto" value="123אבגABC." /> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <input type="text" dir="rtl" value="123אבגABC." /> + </div> + <div dir="rtl"> + <input type="text" dir="rtl" value="123אבגABC." /> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-L-ref.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-L-ref.html new file mode 100644 index 0000000000..cb3621aa61 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-L-ref.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: input with dir=auto, start with L</title> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="Shai Berger" href="mailto:shai@platonix.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction of an input element is set according to + the first strong character of its value. + In this test, it is the Latin letter A, thus the direction must be + resolved as LTR." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <input type="text" dir="ltr" value="ABCאבג." /> + </div> + <div dir="rtl"> + <input type="text" dir="ltr" value="ABCאבג." /> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <input type="text" dir="ltr" value="ABCאבג." /> + </div> + <div dir="rtl"> + <input type="text" dir="ltr" value="ABCאבג." /> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-L.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-L.html new file mode 100644 index 0000000000..0a23f2b86d --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-L.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: input with dir=auto, start with L</title> + <link rel="match" href="dir_auto-input-L-ref.html" /> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="Shai Berger" href="mailto:shai@platonix.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction of an input element is set according to + the first strong character of its value. + In this test, it is the Latin letter A, thus the direction must be + resolved as LTR." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <input type="text" dir="auto" value="ABCאבג." /> + </div> + <div dir="rtl"> + <input type="text" dir="auto" value="ABCאבג." /> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <input type="text" dir="ltr" value="ABCאבג." /> + </div> + <div dir="rtl"> + <input type="text" dir="ltr" value="ABCאבג." /> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-N-EN-L-ref.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-N-EN-L-ref.html new file mode 100644 index 0000000000..3d0f2cf3cc --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-N-EN-L-ref.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: input with dir=auto, start with N+EN+L</title> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="Shai Berger" href="mailto:shai@platonix.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction of an input element is set according to + the first strong character of its value. + In this test, it is the Latin letter A since neutrals and digits are not + strongly directional, thus the direction must be resolved as LTR." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <input type="text" dir="ltr" value=".-=123ABCאבג." /> + </div> + <div dir="rtl"> + <input type="text" dir="ltr" value=".-=123ABCאבג." /> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <input type="text" dir="ltr" value=".-=123ABCאבג." /> + </div> + <div dir="rtl"> + <input type="text" dir="ltr" value=".-=123ABCאבג." /> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-N-EN-L.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-N-EN-L.html new file mode 100644 index 0000000000..03f85526da --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-N-EN-L.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: input with dir=auto, start with N+EN+L</title> + <link rel="match" href="dir_auto-input-N-EN-L-ref.html" /> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="Shai Berger" href="mailto:shai@platonix.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction of an input element is set according to + the first strong character of its value. + In this test, it is the Latin letter A since neutrals and digits are not + strongly directional, thus the direction must be resolved as LTR." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <input type="text" dir="auto" value=".-=123ABCאבג." /> + </div> + <div dir="rtl"> + <input type="text" dir="auto" value=".-=123ABCאבג." /> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <input type="text" dir="ltr" value=".-=123ABCאבג." /> + </div> + <div dir="rtl"> + <input type="text" dir="ltr" value=".-=123ABCאבג." /> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-N-EN-R-ref.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-N-EN-R-ref.html new file mode 100644 index 0000000000..26bf27d619 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-N-EN-R-ref.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: input with dir=auto, start with N+EN+R</title> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="Shai Berger" href="mailto:shai@platonix.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction of an input element is set according to + the first strong character of its value. + In this test, it is the Hebrew letter Alef since neutrals and digits are not + strongly directional, thus the direction must be resolved as RTL." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <input type="text" dir="rtl" value=".-=123אבגABC." /> + </div> + <div dir="rtl"> + <input type="text" dir="rtl" value=".-=123אבגABC." /> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <input type="text" dir="rtl" value=".-=123אבגABC." /> + </div> + <div dir="rtl"> + <input type="text" dir="rtl" value=".-=123אבגABC." /> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-N-EN-R.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-N-EN-R.html new file mode 100644 index 0000000000..13193d3d72 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-N-EN-R.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: input with dir=auto, start with N+EN+R</title> + <link rel="match" href="dir_auto-input-N-EN-R-ref.html" /> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="Shai Berger" href="mailto:shai@platonix.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction of an input element is set according to + the first strong character of its value. + In this test, it is the Hebrew letter Alef since neutrals and digits are not + strongly directional, thus the direction must be resolved as RTL." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <input type="text" dir="auto" value=".-=123אבגABC." /> + </div> + <div dir="rtl"> + <input type="text" dir="auto" value=".-=123אבגABC." /> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <input type="text" dir="rtl" value=".-=123אבגABC." /> + </div> + <div dir="rtl"> + <input type="text" dir="rtl" value=".-=123אבגABC." /> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-N-EN-ref.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-N-EN-ref.html new file mode 100644 index 0000000000..33f75b730b --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-N-EN-ref.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: input with dir=auto, all N+EN</title> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="Shai Berger" href="mailto:shai@platonix.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction of an input element is set according to + the first strong character of its value, or to LTR if there is no such + character. + In this test, there is no strongly directional character in the value, + thus the direction must be resolved as LTR." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="test"> + <div dir="ltr"> + <input type="text" dir="ltr" value="@123!" /> + </div> + <div dir="rtl"> + <input type="text" dir="ltr" value="@123!" /> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <input type="text" dir="ltr" value="@123!" /> + </div> + <div dir="rtl"> + <input type="text" dir="ltr" value="@123!" /> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-N-EN.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-N-EN.html new file mode 100644 index 0000000000..03df3c6dcc --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-N-EN.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: input with dir=auto, all N+EN</title> + <link rel="match" href="dir_auto-input-N-EN-ref.html" /> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="Shai Berger" href="mailto:shai@platonix.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction of an input element is set according to + the first strong character of its value, or to LTR if there is no such + character. + In this test, there is no strongly directional character in the value, + thus the direction must be resolved as LTR." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="test"> + <div dir="ltr"> + <input type="text" dir="auto" value="@123!" /> + </div> + <div dir="rtl"> + <input type="text" dir="auto" value="@123!" /> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <input type="text" dir="ltr" value="@123!" /> + </div> + <div dir="rtl"> + <input type="text" dir="ltr" value="@123!" /> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-N-L-ref.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-N-L-ref.html new file mode 100644 index 0000000000..b6a89a1d72 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-N-L-ref.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: input with dir=auto, start with N+L</title> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="Shai Berger" href="mailto:shai@platonix.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction of an input element is set according to + the first strong character of its value. + In this test, it is the Latin letter A since neutrals are not + strongly directional, thus the direction must be resolved as LTR." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <input type="text" dir="ltr" value=".-=ABCאבג." /> + </div> + <div dir="rtl"> + <input type="text" dir="ltr" value=".-=ABCאבג." /> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <input type="text" dir="ltr" value=".-=ABCאבג." /> + </div> + <div dir="rtl"> + <input type="text" dir="ltr" value=".-=ABCאבג." /> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-N-L.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-N-L.html new file mode 100644 index 0000000000..9c1d3bceec --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-N-L.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: input with dir=auto, start with N+L</title> + <link rel="match" href="dir_auto-input-N-L-ref.html" /> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="Shai Berger" href="mailto:shai@platonix.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction of an input element is set according to + the first strong character of its value. + In this test, it is the Latin letter A since neutrals are not + strongly directional, thus the direction must be resolved as LTR." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <input type="text" dir="auto" value=".-=ABCאבג." /> + </div> + <div dir="rtl"> + <input type="text" dir="auto" value=".-=ABCאבג." /> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <input type="text" dir="ltr" value=".-=ABCאבג." /> + </div> + <div dir="rtl"> + <input type="text" dir="ltr" value=".-=ABCאבג." /> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-N-R-ref.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-N-R-ref.html new file mode 100644 index 0000000000..bcd5430441 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-N-R-ref.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: input with dir=auto, start with N+R</title> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="Shai Berger" href="mailto:shai@platonix.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction of an input element is set according to + the first strong character of its value. + In this test, it is the Hebrew letter Alef since neutrals are not + strongly directional, thus the direction must be resolved as RTL." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <input type="text" dir="rtl" value=".-=אבגABC." /> + </div> + <div dir="rtl"> + <input type="text" dir="rtl" value=".-=אבגABC." /> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <input type="text" dir="rtl" value=".-=אבגABC." /> + </div> + <div dir="rtl"> + <input type="text" dir="rtl" value=".-=אבגABC." /> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-N-R.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-N-R.html new file mode 100644 index 0000000000..dbf54f7344 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-N-R.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: input with dir=auto, start with N+R</title> + <link rel="match" href="dir_auto-input-N-R-ref.html" /> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="Shai Berger" href="mailto:shai@platonix.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction of an input element is set according to + the first strong character of its value. + In this test, it is the Hebrew letter Alef since neutrals are not + strongly directional, thus the direction must be resolved as RTL." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <input type="text" dir="auto" value=".-=אבגABC." /> + </div> + <div dir="rtl"> + <input type="text" dir="auto" value=".-=אבגABC." /> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <input type="text" dir="rtl" value=".-=אבגABC." /> + </div> + <div dir="rtl"> + <input type="text" dir="rtl" value=".-=אבגABC." /> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-R-ref.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-R-ref.html new file mode 100644 index 0000000000..217972e82d --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-R-ref.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: input with dir=auto, start with R</title> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="Shai Berger" href="mailto:shai@platonix.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction of an input element is set according to + the first strong character of its value. + In this test, it is the Hebrew letter Alef, thus the direction must be + resolved as RTL." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <input type="text" dir="rtl" value="אבגABC." /> + </div> + <div dir="rtl"> + <input type="text" dir="rtl" value="אבגABC." /> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <input type="text" dir="rtl" value="אבגABC." /> + </div> + <div dir="rtl"> + <input type="text" dir="rtl" value="אבגABC." /> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-R.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-R.html new file mode 100644 index 0000000000..6d2612b316 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-R.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: input with dir=auto, start with R</title> + <link rel="match" href="dir_auto-input-R-ref.html" /> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="Shai Berger" href="mailto:shai@platonix.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction of an input element is set according to + the first strong character of its value. + In this test, it is the Hebrew letter Alef, thus the direction must be + resolved as RTL." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <input type="text" dir="auto" value="אבגABC." /> + </div> + <div dir="rtl"> + <input type="text" dir="auto" value="אבגABC." /> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <input type="text" dir="rtl" value="אבגABC." /> + </div> + <div dir="rtl"> + <input type="text" dir="rtl" value="אבגABC." /> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-script-EN-L-ref.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-script-EN-L-ref.html new file mode 100644 index 0000000000..879e20d6cf --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-script-EN-L-ref.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: input with dir=auto, script assigns to start with EN+L</title> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="Shai Berger" href="mailto:shai@platonix.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction of an input element is set according to + the first strong character of its value. + In this test, it is the Latin letter A since digits are not strongly + directional, thus the direction must be resolved as LTR." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <input type="text" dir="ltr" value="123ABCאבג." /> + </div> + <div dir="rtl"> + <input type="text" dir="ltr" value="123ABCאבג." /> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <input type="text" dir="ltr" value="123ABCאבג." /> + </div> + <div dir="rtl"> + <input type="text" dir="ltr" value="123ABCאבג." /> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-script-EN-L.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-script-EN-L.html new file mode 100644 index 0000000000..d0a9e2bb9b --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-script-EN-L.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: input with dir=auto, script assigns to start with EN+L</title> + <link rel="match" href="dir_auto-input-script-EN-L-ref.html" /> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="Shai Berger" href="mailto:shai@platonix.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction of an input element is set according to + the first strong character of its value. + In this test, it is the Latin letter A since digits are not strongly + directional, thus the direction must be resolved as LTR." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + This test makes sure that the direction is set correctly for an input whose value is set + dynamically by script. + </div> + <div id="test" class="test"> + <script> + window.onload = function() { + var test = document.getElementById('test'); + var inputs = test.getElementsByTagName('input'); + for (var i = 0; i != inputs.length; i++) { + inputs[i].value = '123ABC\u05D0\u05D1\u05D2.'; + } + } + </script> + <div dir="ltr"> + <input type="text" dir="auto" value="א" /> + </div> + <div dir="rtl"> + <input type="text" dir="auto" value="א" /> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <input type="text" dir="ltr" value="123ABCאבג." /> + </div> + <div dir="rtl"> + <input type="text" dir="ltr" value="123ABCאבג." /> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-script-EN-R-ref.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-script-EN-R-ref.html new file mode 100644 index 0000000000..15781e2524 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-script-EN-R-ref.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: input with dir=auto, script assigns to start with EN+R</title> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="Shai Berger" href="mailto:shai@platonix.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction of an input element is set according to + the first strong character of its value. + In this test, it is the Hebrew letter Alef since digits are not strongly + directional, thus the direction must be resolved as RTL." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <input type="text" dir="rtl" value="123אבגABC." /> + </div> + <div dir="rtl"> + <input type="text" dir="rtl" value="123אבגABC." /> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <input type="text" dir="rtl" value="123אבגABC." /> + </div> + <div dir="rtl"> + <input type="text" dir="rtl" value="123אבגABC." /> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-script-EN-R.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-script-EN-R.html new file mode 100644 index 0000000000..e444b90dc2 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-script-EN-R.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: input with dir=auto, script assigns to start with EN+R</title> + <link rel="match" href="dir_auto-input-script-EN-R-ref.html" /> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="Shai Berger" href="mailto:shai@platonix.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction of an input element is set according to + the first strong character of its value. + In this test, it is the Hebrew letter Alef since digits are not strongly + directional, thus the direction must be resolved as RTL." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + This test makes sure that the direction is set correctly for an input whose value is set + dynamically by script. + </div> + <div id="test" class="test"> + <script> + window.onload = function() { + var test = document.getElementById('test'); + var inputs = test.getElementsByTagName('input'); + for (var i = 0; i != inputs.length; i++) { + inputs[i].value = '123\u05D0\u05D1\u05D2ABC.'; + } + } + </script> + <div dir="ltr"> + <input type="text" dir="auto" value="a" /> + </div> + <div dir="rtl"> + <input type="text" dir="auto" value="a" /> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <input type="text" dir="rtl" value="123אבגABC." /> + </div> + <div dir="rtl"> + <input type="text" dir="rtl" value="123אבגABC." /> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-script-L-ref.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-script-L-ref.html new file mode 100644 index 0000000000..0feef25047 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-script-L-ref.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: input with dir=auto, script assigns to start with L</title> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="Shai Berger" href="mailto:shai@platonix.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction of an input element is set according to + the first strong character of its value. + In this test, it is the Latin letter A, thus the direction must be + resolved as LTR." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <input type="text" dir="ltr" value="ABCאבג." /> + </div> + <div dir="rtl"> + <input type="text" dir="ltr" value="ABCאבג." /> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <input type="text" dir="ltr" value="ABCאבג." /> + </div> + <div dir="rtl"> + <input type="text" dir="ltr" value="ABCאבג." /> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-script-L.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-script-L.html new file mode 100644 index 0000000000..e6aa700ad0 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-script-L.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: input with dir=auto, script assigns to start with L</title> + <link rel="match" href="dir_auto-input-script-L-ref.html" /> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="Shai Berger" href="mailto:shai@platonix.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction of an input element is set according to + the first strong character of its value. + In this test, it is the Latin letter A, thus the direction must be + resolved as LTR." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + This test makes sure that the direction is set correctly for an input whose value is set + dynamically by script. + </div> + <div id="test" class="test"> + <script> + window.onload = function() { + var test = document.getElementById('test'); + var inputs = test.getElementsByTagName('input'); + for (var i = 0; i != inputs.length; i++) { + inputs[i].value = 'ABC\u05D0\u05D1\u05D2.'; + } + } + </script> + <div dir="ltr"> + <input type="text" dir="auto" value="א" /> + </div> + <div dir="rtl"> + <input type="text" dir="auto" value="א" /> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <input type="text" dir="ltr" value="ABCאבג." /> + </div> + <div dir="rtl"> + <input type="text" dir="ltr" value="ABCאבג." /> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-script-N-EN-L-ref.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-script-N-EN-L-ref.html new file mode 100644 index 0000000000..6d6902f314 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-script-N-EN-L-ref.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: input with dir=auto, script assigns to start with N+EN+L</title> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="Shai Berger" href="mailto:shai@platonix.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction of an input element is set according to + the first strong character of its value. + In this test, it is the Latin letter A since neutrals and digits are not + strongly directional, thus the direction must be resolved as LTR." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <input type="text" dir="ltr" value=".-=123ABCאבג." /> + </div> + <div dir="rtl"> + <input type="text" dir="ltr" value=".-=123ABCאבג." /> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <input type="text" dir="ltr" value=".-=123ABCאבג." /> + </div> + <div dir="rtl"> + <input type="text" dir="ltr" value=".-=123ABCאבג." /> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-script-N-EN-L.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-script-N-EN-L.html new file mode 100644 index 0000000000..7905cee946 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-script-N-EN-L.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: input with dir=auto, script assigns to start with N+EN+L</title> + <link rel="match" href="dir_auto-input-script-N-EN-L-ref.html" /> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="Shai Berger" href="mailto:shai@platonix.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction of an input element is set according to + the first strong character of its value. + In this test, it is the Latin letter A since neutrals and digits are not + strongly directional, thus the direction must be resolved as LTR." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + This test makes sure that the direction is set correctly for an input whose value is set + dynamically by script. + </div> + <div id="test" class="test"> + <script> + window.onload = function() { + var test = document.getElementById('test'); + var inputs = test.getElementsByTagName('input'); + for (var i = 0; i != inputs.length; i++) { + inputs[i].value = '.-=123ABC\u05D0\u05D1\u05D2.'; + } + } + </script> + <div dir="ltr"> + <input type="text" dir="auto" value="א" /> + </div> + <div dir="rtl"> + <input type="text" dir="auto" value="א" /> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <input type="text" dir="ltr" value=".-=123ABCאבג." /> + </div> + <div dir="rtl"> + <input type="text" dir="ltr" value=".-=123ABCאבג." /> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-script-N-EN-R-ref.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-script-N-EN-R-ref.html new file mode 100644 index 0000000000..53dd892096 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-script-N-EN-R-ref.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: input with dir=auto, script assigns to start with N+EN+R</title> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="Shai Berger" href="mailto:shai@platonix.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction of an input element is set according to + the first strong character of its value. + In this test, it is the Hebrew letter Alef since neutrals and digits are not + strongly directional, thus the direction must be resolved as RTL." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <input type="text" dir="rtl" value=".-=123אבגABC." /> + </div> + <div dir="rtl"> + <input type="text" dir="rtl" value=".-=123אבגABC." /> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <input type="text" dir="rtl" value=".-=123אבגABC." /> + </div> + <div dir="rtl"> + <input type="text" dir="rtl" value=".-=123אבגABC." /> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-script-N-EN-R.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-script-N-EN-R.html new file mode 100644 index 0000000000..95faa72ea7 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-script-N-EN-R.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: input with dir=auto, script assigns to start with N+EN+R</title> + <link rel="match" href="dir_auto-input-script-N-EN-R-ref.html" /> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="Shai Berger" href="mailto:shai@platonix.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction of an input element is set according to + the first strong character of its value. + In this test, it is the Hebrew letter Alef since neutrals and digits are not + strongly directional, thus the direction must be resolved as RTL." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + This test makes sure that the direction is set correctly for an input whose value is set + dynamically by script. + </div> + <div id="test" class="test"> + <script> + window.onload = function() { + var test = document.getElementById('test'); + var inputs = test.getElementsByTagName('input'); + for (var i = 0; i != inputs.length; i++) { + inputs[i].value = '.-=123\u05D0\u05D1\u05D2ABC.'; + } + } + </script> + <div dir="ltr"> + <input type="text" dir="auto" value="a" /> + </div> + <div dir="rtl"> + <input type="text" dir="auto" value="a" /> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <input type="text" dir="rtl" value=".-=123אבגABC." /> + </div> + <div dir="rtl"> + <input type="text" dir="rtl" value=".-=123אבגABC." /> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-script-N-EN-ref.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-script-N-EN-ref.html new file mode 100644 index 0000000000..11697e53eb --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-script-N-EN-ref.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: input with dir=auto, script assigns to all N+EN</title> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="Shai Berger" href="mailto:shai@platonix.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction of an input element is set according to + the first strong character of its value, or to LTR if there is no such + character. + In this test, there is no strongly directional character in the value, + thus the direction must be resolved as LTR." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="test"> + <div dir="ltr"> + <input type="text" dir="ltr" value="@123!" /> + </div> + <div dir="rtl"> + <input type="text" dir="ltr" value="@123!" /> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <input type="text" dir="ltr" value="@123!" /> + </div> + <div dir="rtl"> + <input type="text" dir="ltr" value="@123!" /> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-script-N-EN.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-script-N-EN.html new file mode 100644 index 0000000000..2721affaef --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-script-N-EN.html @@ -0,0 +1,69 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: input with dir=auto, script assigns to all N+EN</title> + <link rel="match" href="dir_auto-input-script-N-EN-ref.html" /> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="Shai Berger" href="mailto:shai@platonix.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction of an input element is set according to + the first strong character of its value, or to LTR if there is no such + character. + In this test, there is no strongly directional character in the value, + thus the direction must be resolved as LTR." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + This test makes sure that the direction is set correctly for an input whose value is set + dynamically by script. + </div> + <div id="test" class="test"> + <script> + window.onload = function() { + var test = document.getElementById('test'); + var inputs = test.getElementsByTagName('input'); + for (var i = 0; i != inputs.length; i++) { + inputs[i].value = '@123!'; + } + }; + </script> + <div dir="ltr"> + <input type="text" dir="auto" value="א" /> + </div> + <div dir="rtl"> + <input type="text" dir="auto" value="א" /> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <input type="text" dir="ltr" value="@123!" /> + </div> + <div dir="rtl"> + <input type="text" dir="ltr" value="@123!" /> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-script-N-L-ref.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-script-N-L-ref.html new file mode 100644 index 0000000000..fd7cb10fbd --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-script-N-L-ref.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: input with dir=auto, script assigns to start with N+L</title> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="Shai Berger" href="mailto:shai@platonix.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction of an input element is set according to + the first strong character of its value. + In this test, it is the Latin letter A since neutrals are not + strongly directional, thus the direction must be resolved as LTR." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <input type="text" dir="ltr" value=".-=ABCאבג." /> + </div> + <div dir="rtl"> + <input type="text" dir="ltr" value=".-=ABCאבג." /> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <input type="text" dir="ltr" value=".-=ABCאבג." /> + </div> + <div dir="rtl"> + <input type="text" dir="ltr" value=".-=ABCאבג." /> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-script-N-L.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-script-N-L.html new file mode 100644 index 0000000000..2ff24db28c --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-script-N-L.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: input with dir=auto, script assigns to start with N+L</title> + <link rel="match" href="dir_auto-input-script-N-L-ref.html" /> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="Shai Berger" href="mailto:shai@platonix.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction of an input element is set according to + the first strong character of its value. + In this test, it is the Latin letter A since neutrals are not + strongly directional, thus the direction must be resolved as LTR." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + This test makes sure that the direction is set correctly for an input whose value is set + dynamically by script. + </div> + <div id="test" class="test"> + <script> + window.onload = function() { + var test = document.getElementById('test'); + var inputs = test.getElementsByTagName('input'); + for (var i = 0; i != inputs.length; i++) { + inputs[i].value = '.-=ABC\u05D0\u05D1\u05D2.'; + } + } + </script> + <div dir="ltr"> + <input type="text" dir="auto" value="א" /> + </div> + <div dir="rtl"> + <input type="text" dir="auto" value="א" /> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <input type="text" dir="ltr" value=".-=ABCאבג." /> + </div> + <div dir="rtl"> + <input type="text" dir="ltr" value=".-=ABCאבג." /> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-script-N-R-ref.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-script-N-R-ref.html new file mode 100644 index 0000000000..0fa6da249a --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-script-N-R-ref.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: input with dir=auto, script assigns to start with N+R</title> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="Shai Berger" href="mailto:shai@platonix.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction of an input element is set according to + the first strong character of its value. + In this test, it is the Hebrew letter Alef since neutrals are not + strongly directional, thus the direction must be resolved as RTL." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <input type="text" dir="rtl" value=".-=אבגABC." /> + </div> + <div dir="rtl"> + <input type="text" dir="rtl" value=".-=אבגABC." /> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <input type="text" dir="rtl" value=".-=אבגABC." /> + </div> + <div dir="rtl"> + <input type="text" dir="rtl" value=".-=אבגABC." /> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-script-N-R.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-script-N-R.html new file mode 100644 index 0000000000..0663b28ad2 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-script-N-R.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: input with dir=auto, script assigns to start with N+R</title> + <link rel="match" href="dir_auto-input-script-N-R-ref.html" /> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="Shai Berger" href="mailto:shai@platonix.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction of an input element is set according to + the first strong character of its value. + In this test, it is the Hebrew letter Alef since neutrals are not + strongly directional, thus the direction must be resolved as RTL." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + This test makes sure that the direction is set correctly for an input whose value is set + dynamically by script. + </div> + <div id="test" class="test"> + <script> + window.onload = function() { + var test = document.getElementById('test'); + var inputs = test.getElementsByTagName('input'); + for (var i = 0; i != inputs.length; i++) { + inputs[i].value = '.-=\u05D0\u05D1\u05D2ABC.'; + } + } + </script> + <div dir="ltr"> + <input type="text" dir="auto" value="a" /> + </div> + <div dir="rtl"> + <input type="text" dir="auto" value="a" /> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <input type="text" dir="rtl" value=".-=אבגABC." /> + </div> + <div dir="rtl"> + <input type="text" dir="rtl" value=".-=אבגABC." /> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-script-R-ref.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-script-R-ref.html new file mode 100644 index 0000000000..12b2d1925f --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-script-R-ref.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: input with dir=auto, script assigns to start with R</title> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="Shai Berger" href="mailto:shai@platonix.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction of an input element is set according to + the first strong character of its value. + In this test, it is the Hebrew letter Alef, thus the direction must be + resolved as RTL." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <input type="text" dir="rtl" value="אבגABC." /> + </div> + <div dir="rtl"> + <input type="text" dir="rtl" value="אבגABC." /> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <input type="text" dir="rtl" value="אבגABC." /> + </div> + <div dir="rtl"> + <input type="text" dir="rtl" value="אבגABC." /> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-script-R.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-script-R.html new file mode 100644 index 0000000000..07becaaccd --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-input-script-R.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: input with dir=auto, script assigns to start with R</title> + <link rel="match" href="dir_auto-input-script-R-ref.html" /> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="Shai Berger" href="mailto:shai@platonix.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction of an input element is set according to + the first strong character of its value. + In this test, it is the Hebrew letter Alef, thus the direction must be + resolved as RTL." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ב - The Hebrew letter Bet (strongly RTL). + ג - The Hebrew letter Gimel (strongly RTL). + This test makes sure that the direction is set correctly for an input whose value is set + dynamically by script. + </div> + <div id="test" class="test"> + <script> + window.onload = function() { + var test = document.getElementById('test'); + var inputs = test.getElementsByTagName('input'); + for (var i = 0; i != inputs.length; i++) { + inputs[i].value = '\u05D0\u05D1\u05D2ABC.'; + } + } + </script> + <div dir="ltr"> + <input type="text" dir="auto" value="a" /> + </div> + <div dir="rtl"> + <input type="text" dir="auto" value="a" /> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <input type="text" dir="rtl" value="אבגABC." /> + </div> + <div dir="rtl"> + <input type="text" dir="rtl" value="אבגABC." /> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-isolate-ref.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-isolate-ref.html new file mode 100644 index 0000000000..858a7db233 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-isolate-ref.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: dir=auto, isolated in LTR text</title> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of the text, but the element behaves externally as a neutral character. + In this test, it allows a preceding R to form a single directional run + with a succeeding number." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ‭ - The LRO (left-to-right override) formatting character. + ‬ - The PDF (pop directional formatting) formatting character; closes LRO. + </div> + <div class="test"> + <div dir="ltr"> + ‭1 a! א‬ + </div> + <div dir="rtl"> + ‭a !א 1‬ + </div> + </div> + <div class="ref"> + <div dir="ltr"> + ‭1 a! א‬ + </div> + <div dir="rtl"> + ‭a !א 1‬ + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-isolate.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-isolate.html new file mode 100644 index 0000000000..14272c0531 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-isolate.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: dir=auto, isolated in LTR text</title> + <link rel="match" href="dir_auto-isolate-ref.html" /> + <link rel="author" title="Matitiahu Allouche" href="mailto:matitiahu.allouche@google.com" /> + <link rel="author" title="Oren Roth" href="mailto:oren.roth@gmail.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of the text, but the element behaves externally as a neutral character. + In this test, it allows a preceding R to form a single directional run + with a succeeding number." /> + <style> + input, textarea { + font-size:1em; + } + body { + font-size:2em; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + ‭ - The LRO (left-to-right override) formatting character. + ‬ - The PDF (pop directional formatting) formatting character; closes LRO. + </div> + <div class="test"> + <div dir="ltr"> + א <span dir="auto">a!</span> 1 + </div> + <div dir="rtl"> + a <span dir="auto">א!</span> 1 + </div> + </div> + <div class="ref"> + <div dir="ltr"> + ‭1 a! א‬ + </div> + <div dir="rtl"> + ‭a !א 1‬ + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-pre-N-EN-ref.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-pre-N-EN-ref.html new file mode 100644 index 0000000000..c951c30b20 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-pre-N-EN-ref.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <link rel="author" title="Aharon Lanin" href="mailto:aharon@google.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <style> + body { + font-size:18px; + text-align:left; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="test"> + <div dir="ltr"> + <pre dir="ltr"> +@123! + </pre> + </div> + <div dir="rtl"> + <pre dir="ltr"> +@123! + </pre> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <pre dir="ltr"> +@123! + </pre> + </div> + <div dir="rtl"> + <pre dir="ltr"> +@123! + </pre> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-pre-N-EN.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-pre-N-EN.html new file mode 100644 index 0000000000..cd721d725e --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-pre-N-EN.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: pre with dir=auto, all N+EN</title> + <link rel="match" href="dir_auto-pre-N-EN-ref.html" /> + <link rel="author" title="Aharon Lanin" href="mailto:aharon@google.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <link rel="help" href="http://dev.w3.org/csswg/css3-writing-modes/#unicode-bidi0" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of the text. + For textarea and pre elements, the heuristic is applied on a per-paragraph level. + If there is no strong character, as in this test, the direction defaults to LTR." /> + <style> + body { + font-size:18px; + text-align:left; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + ‎ - LRM, the invisible left-to-right mark (strongly LTR). + ‏ - RLM, the invisible right-to-left mark (strongly RTL). + We use text-align:left because neither the dir="auto" nor the unicode-bidi:plaintext + specification states whether text-align:start and text-align:end should obey the paragraph + direction or the direction property in a unicode-bidi:plaintext element. + </div> + <div class="test"> + <div dir="ltr"> + <pre dir="auto"> +@123! + </pre> + </div> + <div dir="rtl"> + <pre dir="auto"> +@123! + </pre> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <pre dir="ltr"> +@123! + </pre> + </div> + <div dir="rtl"> + <pre dir="ltr"> +@123! + </pre> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-pre-N-between-Rs-ref.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-pre-N-between-Rs-ref.html new file mode 100644 index 0000000000..2d9caf062d --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-pre-N-between-Rs-ref.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <link rel="author" title="Aharon Lanin" href="mailto:aharon@google.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <style> + body { + font-size:18px; + text-align:left; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <pre dir="rtl"> +א +!... +א + </pre> + </div> + <div dir="rtl"> + <pre dir="rtl"> +א +!... +א + </pre> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <pre dir="rtl"> +א +!... +א + </pre> + </div> + <div dir="rtl"> + <pre dir="rtl"> +א +!... +א + </pre> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-pre-N-between-Rs.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-pre-N-between-Rs.html new file mode 100644 index 0000000000..adca24d88f --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-pre-N-between-Rs.html @@ -0,0 +1,76 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: pre with dir=auto, all-N between all-Rs</title> + <link rel="match" href="dir_auto-pre-N-between-Rs-ref.html" /> + <link rel="author" title="Aharon Lanin" href="mailto:aharon@google.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <link rel="help" href="http://dev.w3.org/csswg/css3-writing-modes/#unicode-bidi0" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of the text. + For textarea and pre elements, the heuristic is applied on a per-paragraph level. + If there is no strong character, as in this test, the direction defaults to LTR." /> + <style> + body { + font-size:18px; + text-align:left; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + We use text-align:left because neither the dir="auto" nor the unicode-bidi:plaintext + specification states whether text-align:start and text-align:end should obey the paragraph + direction or the direction property in a unicode-bidi:plaintext element. + The ...! paragraph, being neutral, is supposed to be displayed LTR (i.e. as ...!, not as !...) + despite both the paragraph before it and the paragraph after it being all-RTL, which makes the + element as a whole RTL. + </div> + <div class="test"> + <div dir="ltr"> + <pre dir="auto"> +א +...! +א + </pre> + </div> + <div dir="rtl"> + <pre dir="auto"> +א +...! +א + </pre> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <pre dir="rtl"> +א +!... +א + </pre> + </div> + <div dir="rtl"> + <pre dir="rtl"> +א +!... +א + </pre> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-pre-mixed-ref.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-pre-mixed-ref.html new file mode 100644 index 0000000000..10bd02433b --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-pre-mixed-ref.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <link rel="author" title="Aharon Lanin" href="mailto:aharon@google.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <style> + body { + font-size:18px; + text-align:left; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="test"> + <div dir="ltr"> + <pre dir="ltr"> +@123! +@123! +@123! +@123! + </pre> + </div> + <div dir="rtl"> + <pre dir="ltr"> +@123! +@123! +@123! +@123! + </pre> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <pre dir="ltr"> +@123! +@123! +@123! +@123! + </pre> + </div> + <div dir="rtl"> + <pre dir="ltr"> +@123! +@123! +@123! +@123! + </pre> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-pre-mixed.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-pre-mixed.html new file mode 100644 index 0000000000..906365621d --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-pre-mixed.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: pre with dir=auto, mixed L and R paragraphs</title> + <link rel="match" href="dir_auto-pre-mixed-ref.html" /> + <link rel="author" title="Aharon Lanin" href="mailto:aharon@google.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <link rel="help" href="http://dev.w3.org/csswg/css3-writing-modes/#unicode-bidi0" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of the text. + For textarea and pre elements, the heuristic is applied on a per-paragraph level." /> + <style> + body { + font-size:18px; + text-align:left; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + ‎ - LRM, the invisible left-to-right mark (strongly LTR). + ‏ - RLM, the invisible right-to-left mark (strongly RTL). + We use text-align:left because neither the dir="auto" nor the unicode-bidi:plaintext + specification states whether text-align:start and text-align:end should obey the paragraph + direction or the direction property in a unicode-bidi:plaintext element. + </div> + <div class="test"> + <div dir="ltr"> + <pre dir="auto"> +@‎123‏! +!‏123‎@ +@123‎‏! +!123‏‎@ + </pre> + </div> + <div dir="rtl"> + <pre dir="auto"> +@‎123‏! +!‏123‎@ +@123‎‏! +!123‏‎@ + </pre> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <pre dir="ltr"> +@123! +@123! +@123! +@123! + </pre> + </div> + <div dir="rtl"> + <pre dir="ltr"> +@123! +@123! +@123! +@123! + </pre> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-textarea-N-EN-ref.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-textarea-N-EN-ref.html new file mode 100644 index 0000000000..253b84459e --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-textarea-N-EN-ref.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <link rel="author" title="Aharon Lanin" href="mailto:aharon@google.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <style> + body, textarea { + font-size:18px; + text-align:left; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="test"> + <div dir="ltr"> + <textarea rows="2" dir="ltr"> +@123! + </textarea> + </div> + <div dir="rtl"> + <textarea rows="2" dir="ltr"> +@123! + </textarea> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <textarea rows="2" dir="ltr"> +@123! + </textarea> + </div> + <div dir="rtl"> + <textarea rows="2" dir="ltr"> +@123! + </textarea> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-textarea-N-EN.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-textarea-N-EN.html new file mode 100644 index 0000000000..f0fa2161a1 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-textarea-N-EN.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: textarea with dir=auto, all N+EN</title> + <link rel="match" href="dir_auto-textarea-N-EN-ref.html" /> + <link rel="author" title="Aharon Lanin" href="mailto:aharon@google.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <link rel="help" href="http://dev.w3.org/csswg/css3-writing-modes/#unicode-bidi0" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of the text. + For textarea and pre elements, the heuristic is applied on a per-paragraph level. + If there is no strong character, as in this test, the direction defaults to LTR." /> + <style> + body, textarea { + font-size:18px; + text-align:left; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + ‎ - LRM, the invisible left-to-right mark (strongly LTR). + ‏ - RLM, the invisible right-to-left mark (strongly RTL). + We use text-align:left because neither the dir="auto" nor the unicode-bidi:plaintext + specification states whether text-align:start and text-align:end should obey the paragraph + direction or the direction property in a unicode-bidi:plaintext element. + </div> + <div class="test"> + <div dir="ltr"> + <textarea rows="2" dir="auto"> +@123! + </textarea> + </div> + <div dir="rtl"> + <textarea rows="2" dir="auto"> +@123! + </textarea> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <textarea rows="2" dir="ltr"> +@123! + </textarea> + </div> + <div dir="rtl"> + <textarea rows="2" dir="ltr"> +@123! + </textarea> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-textarea-N-between-Rs-ref.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-textarea-N-between-Rs-ref.html new file mode 100644 index 0000000000..afeef08cbf --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-textarea-N-between-Rs-ref.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <link rel="author" title="Aharon Lanin" href="mailto:aharon@google.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <style> + body, textarea { + font-size:18px; + text-align:left; + } + textarea { + resize: none; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <textarea rows="4" dir="rtl"> +א +!... +א + </textarea> + </div> + <div dir="rtl"> + <textarea rows="4" dir="rtl"> +א +!... +א + </textarea> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <textarea rows="4" dir="rtl"> +א +!... +א + </textarea> + </div> + <div dir="rtl"> + <textarea rows="4" dir="rtl"> +א +!... +א + </textarea> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-textarea-N-between-Rs.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-textarea-N-between-Rs.html new file mode 100644 index 0000000000..ddae91054a --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-textarea-N-between-Rs.html @@ -0,0 +1,79 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: textarea with dir=auto, all-N between all-Rs</title> + <link rel="match" href="dir_auto-textarea-N-between-Rs-ref.html" /> + <link rel="author" title="Aharon Lanin" href="mailto:aharon@google.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <link rel="help" href="http://dev.w3.org/csswg/css3-writing-modes/#unicode-bidi0" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of the text. + For textarea and pre elements, the heuristic is applied on a per-paragraph level. + If there is no strong character, as in this test, the direction defaults to LTR." /> + <style> + body, textarea { + font-size:18px; + text-align:left; + } + textarea { + resize: none; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + We use text-align:left because neither the dir="auto" nor the unicode-bidi:plaintext + specification states whether text-align:start and text-align:end should obey the paragraph + direction or the direction property in a unicode-bidi:plaintext element. + The ...! paragraph, being neutral, is supposed to be displayed LTR (i.e. as ...!, not as !...) + despite both the paragraph before it and the paragraph after it being all-RTL, which makes the + element as a whole RTL. + </div> + <div class="test"> + <div dir="ltr"> + <textarea rows="4" dir="auto"> +א +...! +א + </textarea> + </div> + <div dir="rtl"> + <textarea rows="4" dir="auto"> +א +...! +א + </textarea> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <textarea rows="4" dir="rtl"> +א +!... +א + </textarea> + </div> + <div dir="rtl"> + <textarea rows="4" dir="rtl"> +א +!... +א + </textarea> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-textarea-mixed-ref.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-textarea-mixed-ref.html new file mode 100644 index 0000000000..a5a84480f6 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-textarea-mixed-ref.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <link rel="author" title="Aharon Lanin" href="mailto:aharon@google.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <style> + body, textarea { + font-size:18px; + text-align:left; + } + textarea { + resize: none; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="test"> + <div dir="ltr"> + <textarea rows="5" dir="rtl"> +!123@ +!123@ +!123@ +!123@ + </textarea> + </div> + <div dir="rtl"> + <textarea rows="5" dir="ltr"> +@123! +@123! +@123! +@123! + </textarea> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <textarea rows="5" dir="rtl"> +!123@ +!123@ +!123@ +!123@ + </textarea> + </div> + <div dir="rtl"> + <textarea rows="5" dir="ltr"> +@123! +@123! +@123! +@123! + </textarea> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-textarea-mixed.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-textarea-mixed.html new file mode 100644 index 0000000000..4947124c99 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-textarea-mixed.html @@ -0,0 +1,80 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: textarea with dir=auto, mixed L and R paragraphs</title> + <link rel="match" href="dir_auto-textarea-mixed-ref.html" /> + <link rel="author" title="Aharon Lanin" href="mailto:aharon@google.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <link rel="help" href="http://dev.w3.org/csswg/css3-writing-modes/#unicode-bidi0" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of the text. + For textarea and pre elements, the heuristic is applied on a per-paragraph level." /> + <style> + body, textarea { + font-size:18px; + text-align:left; + } + textarea { + resize: none; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + ‎ - LRM, the invisible left-to-right mark (strongly LTR). + ‏ - RLM, the invisible right-to-left mark (strongly RTL). + We use text-align:left because neither the dir="auto" nor the unicode-bidi:plaintext + specification states whether text-align:start and text-align:end should obey the paragraph + direction or the direction property in a unicode-bidi:plaintext element. + </div> + <div class="test"> + <div dir="ltr"> + <textarea rows="5" dir="auto"> +!‏123‎@ +@‎123‏! +!123‏‎@ +@123‎‏! + </textarea> + </div> + <div dir="rtl"> + <textarea rows="5" dir="auto"> +@‎123‏! +!‏123‎@ +@123‎‏! +!123‏‎@ + </textarea> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <textarea rows="5" dir="rtl"> +!123@ +!123@ +!123@ +!123@ + </textarea> + </div> + <div dir="rtl"> + <textarea rows="5" dir="ltr"> +@123! +@123! +@123! +@123! + </textarea> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-textarea-script-N-EN-ref.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-textarea-script-N-EN-ref.html new file mode 100644 index 0000000000..253b84459e --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-textarea-script-N-EN-ref.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <link rel="author" title="Aharon Lanin" href="mailto:aharon@google.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <style> + body, textarea { + font-size:18px; + text-align:left; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="test"> + <div dir="ltr"> + <textarea rows="2" dir="ltr"> +@123! + </textarea> + </div> + <div dir="rtl"> + <textarea rows="2" dir="ltr"> +@123! + </textarea> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <textarea rows="2" dir="ltr"> +@123! + </textarea> + </div> + <div dir="rtl"> + <textarea rows="2" dir="ltr"> +@123! + </textarea> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-textarea-script-N-EN.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-textarea-script-N-EN.html new file mode 100644 index 0000000000..3c674e2f82 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-textarea-script-N-EN.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: textarea with dir=auto, script assigns to all N+EN</title> + <link rel="match" href="dir_auto-textarea-script-N-EN-ref.html" /> + <link rel="author" title="Aharon Lanin" href="mailto:aharon@google.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <link rel="help" href="http://dev.w3.org/csswg/css3-writing-modes/#unicode-bidi0" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of the text. + For textarea and pre elements, the heuristic is applied on a per-paragraph level. + If there is no strong character, as in this test, the direction defaults to LTR." /> + <style> + body, textarea { + font-size:18px; + text-align:left; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + ‎ - LRM, the invisible left-to-right mark (strongly LTR). + ‏ - RLM, the invisible right-to-left mark (strongly RTL). + This test makes sure that the direction is set correctly for a textarea whose value is set + dynamically by script. + We use text-align:left because neither the dir="auto" nor the unicode-bidi:plaintext + specification states whether text-align:start and text-align:end should obey the paragraph + direction or the direction property in a unicode-bidi:plaintext element. + </div> + <div id="test" class="test"> + <script> + window.onload = function() { + var test = document.getElementById('test'); + var textareas = test.getElementsByTagName('textarea'); + for (var i = 0; i != textareas.length; i++) { + textareas[i].value = '@123!\n'; + } + } + </script> + <div dir="ltr"> + <textarea rows="2" dir="auto"> +‏ + </textarea> + </div> + <div dir="rtl"> + <textarea rows="2" dir="auto"> +‏ + </textarea> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <textarea rows="2" dir="ltr"> +@123! + </textarea> + </div> + <div dir="rtl"> + <textarea rows="2" dir="ltr"> +@123! + </textarea> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-textarea-script-N-between-Rs-ref.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-textarea-script-N-between-Rs-ref.html new file mode 100644 index 0000000000..e523313252 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-textarea-script-N-between-Rs-ref.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <link rel="author" title="Aharon Lanin" href="mailto:aharon@google.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <style> + body, textarea { + font-size:18px; + text-align:left; + } + textarea { + resize: none; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + </div> + <div class="test"> + <div dir="ltr"> + <textarea rows="4" dir="rtl"> +א +!... +א</textarea> + </div> + <div dir="rtl"> + <textarea rows="4" dir="rtl"> +א +!... +א</textarea> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <textarea rows="4" dir="rtl"> +א +!... +א</textarea> + </div> + <div dir="rtl"> + <textarea rows="4" dir="rtl"> +א +!... +א</textarea> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-textarea-script-N-between-Rs.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-textarea-script-N-between-Rs.html new file mode 100644 index 0000000000..f5e53667e5 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-textarea-script-N-between-Rs.html @@ -0,0 +1,84 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: textarea with dir=auto, script assigns to all-N between all-Rs</title> + <link rel="match" href="dir_auto-textarea-script-N-between-Rs-ref.html" /> + <link rel="author" title="Aharon Lanin" href="mailto:aharon@google.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <link rel="help" href="http://dev.w3.org/csswg/css3-writing-modes/#unicode-bidi0" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of the text. + For textarea and pre elements, the heuristic is applied on a per-paragraph level. + If there is no strong character, as in this test, the direction defaults to LTR." /> + <style> + body, textarea { + font-size:18px; + text-align:left; + } + textarea { + resize: none; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + א - The Hebrew letter Alef (strongly RTL). + This test makes sure that the direction is set correctly for a textarea whose value is set + dynamically by script. + We use text-align:left because neither the dir="auto" nor the unicode-bidi:plaintext + specification states whether text-align:start and text-align:end should obey the paragraph + direction or the direction property in a unicode-bidi:plaintext element. + The ...! paragraph, being neutral, is supposed to be displayed LTR (i.e. as ...!, not as !...) + despite both the paragraph before it and the paragraph after it being all-RTL, which makes the + element as a whole RTL. + </div> + <div id="test" class="test"> + <script> + window.onload = function() { + var test = document.getElementById('test'); + var textareas = test.getElementsByTagName('textarea'); + for (var i = 0; i != textareas.length; i++) { + textareas[i].value = '\u05D0\n...!\n\u05D0'; + } + } + </script> + <div dir="ltr"> + <textarea rows="4" dir="auto"> +LTR text + </textarea> + </div> + <div dir="rtl"> + <textarea rows="4" dir="auto"> +LTR text + </textarea> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <textarea rows="4" dir="rtl"> +א +!... +א</textarea> + </div> + <div dir="rtl"> + <textarea rows="4" dir="rtl"> +א +!... +א</textarea> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-textarea-script-mixed-ref.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-textarea-script-mixed-ref.html new file mode 100644 index 0000000000..a5a84480f6 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-textarea-script-mixed-ref.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <link rel="author" title="Aharon Lanin" href="mailto:aharon@google.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <style> + body, textarea { + font-size:18px; + text-align:left; + } + textarea { + resize: none; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="test"> + <div dir="ltr"> + <textarea rows="5" dir="rtl"> +!123@ +!123@ +!123@ +!123@ + </textarea> + </div> + <div dir="rtl"> + <textarea rows="5" dir="ltr"> +@123! +@123! +@123! +@123! + </textarea> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <textarea rows="5" dir="rtl"> +!123@ +!123@ +!123@ +!123@ + </textarea> + </div> + <div dir="rtl"> + <textarea rows="5" dir="ltr"> +@123! +@123! +@123! +@123! + </textarea> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-textarea-script-mixed.html b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-textarea-script-mixed.html new file mode 100644 index 0000000000..f0c6d4fe44 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/dir_auto-textarea-script-mixed.html @@ -0,0 +1,100 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>HTML Test: textarea with dir=auto, script assigns to mixed L and R paragraphs</title> + <link rel="match" href="dir_auto-textarea-script-mixed-ref.html" /> + <link rel="author" title="Aharon Lanin" href="mailto:aharon@google.com" /> + <link rel="author" title="HTML5 bidi test WG" href="mailto:html5bidi@googlegroups.com" /> + <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dir-attribute" /> + <link rel="help" href="http://dev.w3.org/csswg/css3-writing-modes/#unicode-bidi0" /> + <meta name="assert" content=" + When dir='auto', the direction is set according to the first strong character + of the text. + For textarea and pre elements, the heuristic is applied on a per-paragraph level." /> + <style> + body, textarea { + font-size:18px; + text-align:left; + } + textarea { + resize: none; + } + .test, .ref { + border: medium solid gray; + width: 400px; + margin: 20px; + } + .comments { + display: none; + } + </style> + </head> + <body> + <div class="instructions"><p>Test passes if the two boxes below look exactly the same.</p></div> + <div class="comments"> + Key to entities used below: + ‎ - LRM, the invisible left-to-right mark (strongly LTR). + ‏ - RLM, the invisible right-to-left mark (strongly RTL). + This test makes sure that the direction is set correctly for a textarea whose value is set + dynamically by script. + We use text-align:left because neither the dir="auto" nor the unicode-bidi:plaintext + specification states whether text-align:start and text-align:end should obey the paragraph + direction or the direction property in a unicode-bidi:plaintext element. + </div> + <div id="test" class="test"> + <script> + window.onload = function() { + var test = document.getElementById('test'); + var textareas = test.getElementsByTagName('textarea'); + for (var i = 0; i != textareas.length; i++) { + var input = textareas[i]; + if (input.parentNode.dir == 'ltr') { + // Assign a value whose first strong is RTL. + input.value = + '!\u200F123\u200E@\n' + + '@\u200E123\u200F!\n' + + '!123\u200F\u200E@\n' + + '@123\u200E\u200F!\n'; + } else { + // Assign a value whose first strong is LTR. + input.value = + '@\u200E123\u200F!\n' + + '!\u200F123\u200E@\n' + + '@123\u200E\u200F!\n' + + '!123\u200F\u200E@\n'; + } + } + } + </script> + <div dir="ltr"> + <textarea rows="5" dir="auto"> +‎ + </textarea> + </div> + <div dir="rtl"> + <textarea rows="5" dir="auto"> +‏ + </textarea> + </div> + </div> + <div class="ref"> + <div dir="ltr"> + <textarea rows="5" dir="rtl"> +!123@ +!123@ +!123@ +!123@ + </textarea> + </div> + <div dir="rtl"> + <textarea rows="5" dir="ltr"> +@123! +@123! +@123! +@123! + </textarea> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/document-dir.html b/testing/web-platform/tests/html/dom/elements/global-attributes/document-dir.html new file mode 100644 index 0000000000..675b4bc9d9 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/document-dir.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html dir="LTR"> +<title>document.dir</title> +<link rel="help" href="https://html.spec.whatwg.org/multipage/#dom-document-dir"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/#reflect"> +<link rel="author" title="Ms2ger" href="mailto:ms2ger@gmail.com"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id="log"></div> +<script> +test(function() { + assert_equals(document.dir, "ltr"); + assert_equals(document.documentElement.getAttribute("dir"), "LTR"); +}, "Markup attribute") +test(function() { + document.dir = "x-garbage"; + assert_equals(document.dir, ""); + assert_equals(document.documentElement.getAttribute("dir"), "x-garbage"); +}, "Setting the idl attribute to a garbage value") +test(function() { + document.dir = ""; + assert_true(document.documentElement.hasAttribute("dir"), "Attribute should still be around"); + assert_equals(document.dir, ""); + assert_equals(document.documentElement.getAttribute("dir"), ""); +}, "Setting the idl attribute to the empty string") +</script> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/id-attribute.html b/testing/web-platform/tests/html/dom/elements/global-attributes/id-attribute.html new file mode 100644 index 0000000000..660a7274a3 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/id-attribute.html @@ -0,0 +1,130 @@ +<!DOCTYPE HTML> +<html> +<head> +<title>The id attribute</title> +<meta charset=utf8> +<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-id-attribute"> +<style> + +#abcd { + position: absolute; + z-index: 1; +} + +#ABCD { + position: absolute; + z-index: 2; +} + +#a\ b { + position: absolute; + z-index: 3; +} + +#xyz { + position: absolute; + z-index: 4; +} + +#foobar { + position: absolute; + z-index: 5; +} + +#åèiöú { + position: absolute; + z-index: 6; +} + +</style> +</head> +<body> +<h1>The id attribute</h1> +<div id="log"></div> +<i id="abcd"></i> +<i id="ABCD"></i> +<i id="a b"></i> +<i id="åèiöú"></i> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + // id is associated for purposes of getElementById + test(function() { + assert_equals(document.getElementById("abcd"), document.getElementsByTagName("i")[0]); + }, "User agents must associate the element with an id value for purposes of getElementById."); + + test(function() { + assert_equals(document.getElementById("ABCD"), document.getElementsByTagName("i")[1]); + }, "Association is exact and therefore case-sensitive for getElementById."); + + test(function() { + assert_equals(document.getElementById("a b"), document.getElementsByTagName("i")[2]); + }, "Spaces are allowed in an id and still make an association for getElementByID."); + + test(function() { + assert_equals(document.getElementById("åèiöú"), document.getElementsByTagName("i")[3]); + }, "Non-ASCII is allowed in an id and still make an association for getElementById."); + + + // id is associated for purposes of CSS + test(function() { + assert_equals(document.defaultView.getComputedStyle(document.getElementById("abcd")).zIndex, "1"); + }, "User agents must associate the element with an id value for purposes of CSS."); + + test(function() { + assert_equals(document.defaultView.getComputedStyle(document.getElementById("ABCD")).zIndex, "2"); + }, "Association for CSS is exact and therefore case-sensitive."); + + test(function() { + assert_equals(document.defaultView.getComputedStyle(document.getElementById("a b")).zIndex, "3"); + }, "Spaces are allowed in an id and still make an association."); + + test(function() { + assert_equals(document.defaultView.getComputedStyle(document.getElementById("åèiöú")).zIndex, "6"); + }, "Non-ASCII is allowed in an id and still make an association for CSS."); + + + // id IDL attribute reflects the content attribute + var firstSpan = document.getElementById("abcd"); + + test(function() { + assert_equals(firstSpan.id, "abcd"); + }, "The id IDL attribute must reflect the id content attribute, for getting."); + + test(function() { + firstSpan.id = "xyz"; + assert_equals(firstSpan.getAttribute("id"), "xyz"); + }, "The id IDL attribute must reflect the id content attribute, for setting via IDL attribute."); + + test(function() { + assert_equals(document.getElementById("xyz"), firstSpan); + }, "After setting id via id attribute, getElementById find the element by the new id."); + + test(function() { + assert_equals(document.getElementById("abcd"), null); + }, "After setting id via id attribute, getElementById doesn't find the element by the old id."); + + test(function() { + assert_equals(document.defaultView.getComputedStyle(firstSpan).zIndex, "4"); + }, "After setting id via id attribute, CSS association is via the new ID."); + + test(function() { + firstSpan.setAttribute("id", "foobar"); + assert_equals(firstSpan.id, "foobar"); + }, "The id IDL attribute must reflect the id content attribute, for setting via setAttribute."); + + test(function() { + assert_equals(document.getElementById("foobar"), firstSpan); + }, "After setting id via setAttribute attribute, getElementById find the element by the new id."); + + test(function() { + assert_equals(document.getElementById("xyz"), null); + }, "After setting id via setAttribute attribute, getElementById doesn't find the element by the old id."); + + test(function() { + assert_equals(document.defaultView.getComputedStyle(firstSpan).zIndex, "5"); + }, "After setting id via setAttribute attribute, CSS association is via the new ID."); + +</script> +</body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/id-name-specialcase.html b/testing/web-platform/tests/html/dom/elements/global-attributes/id-name-specialcase.html new file mode 100644 index 0000000000..77e4100b70 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/id-name-specialcase.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>HTML5: test id with none pure alpha characters </title> +<link rel="author" title="justin.shen" href=mailto:cosmichut@msn.com"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id="log"></div> +<div style="display:none"> + <input id="123" value="123"></input> + <input id="1test" value="1test"></input> + <input id="_test" value="_test"></input> + <input id="." value="."></input> + <input id="中国" value="china"></input> +</div> +<script> +test(function() { + assert_equals(document.getElementById("123").value, "123"); +}, "id with digits only"); +test(function() { + assert_equals(document.getElementById("1test").value, "1test"); +},"id start with digits"); +test(function() { + assert_equals(document.getElementById("_test").value, "_test"); +},"id start with underscore"); +test(function() { + assert_equals(document.getElementById(".").value, "."); +},"id with punctuation only"); +test(function() { + assert_equals(document.getElementById("中国").value, "china"); +},"id with chinese character"); +</script> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/id-name.html b/testing/web-platform/tests/html/dom/elements/global-attributes/id-name.html new file mode 100644 index 0000000000..7fdac993b2 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/id-name.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>id and name attributes and getElementById</title> +<link rel="author" title="Ms2ger" href="mailto:ms2ger@gmail.com"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-id-attribute"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id="log"></div> +<div id="test"> +<div name="abcd"></div> +<p name="abcd" id="abcd"></p> +</div> +<script> +test(function() { + assert_equals(document.getElementById("abcd").nodeName, "P"); + assert_equals(document.getElementById("abcd").localName, "p"); +}); +</script> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/lang-xmllang-01-ref.html b/testing/web-platform/tests/html/dom/elements/global-attributes/lang-xmllang-01-ref.html new file mode 100644 index 0000000000..1606bca215 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/lang-xmllang-01-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<title>Languages</title> +<link rel="author" title="Ms2ger" href="mailto:ms2ger@gmail.com"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-lang-and-xml:lang-attributes"> +<link tel="help" href="http://www.w3.org/TR/CSS2/selector.html#lang"> +<meta name="flags" content="css21"> +<style> +#test > * { background: limegreen; } +</style> +<body> +<p>All lines below should have a green background.</p> +<div id="test"> +<div><p>{}{lang}{en}</p></div> +<div><p>{}{xml:lang}{en}</p></div> +<div><div><p>Parent: {}{lang}{en}</p></div></div> +<div><div><p>Parent: {}{xml:lang}{en}</p></div></div> +<div><p>{xml}{lang}{en}</p></div> +<div><p>{xml}{lang}{en} - {lang}{de}</p></div> +<div><p>{xml}{lang}{de} - {lang}{en}</p></div> +</div> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/lang-xmllang-01.html b/testing/web-platform/tests/html/dom/elements/global-attributes/lang-xmllang-01.html new file mode 100644 index 0000000000..9538f15ca8 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/lang-xmllang-01.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<title>Languages</title> +<link rel="match" href="lang-xmllang-01-ref.html"> +<link rel="author" title="Ms2ger" href="mailto:ms2ger@gmail.com"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-lang-and-xml:lang-attributes"> +<link tel="help" href="http://www.w3.org/TR/CSS2/selector.html#lang"> +<meta name="flags" content="css21"> +<style> +#test #a :lang(en) { background: limegreen; } +#test #b :lang(nl) { background: limegreen; } +#test #c :lang(en) { background: limegreen; } +#test #d :lang(nl) { background: limegreen; } +#test #e :lang(en) { background: limegreen; } +#test #f :lang(en) { background: limegreen; } +#test #g :lang(de) { background: limegreen; } +</style> +<body> +<p>All lines below should have a green background.</p> +<div id="test" lang="nl"> +<div id="a"><p lang="en">{}{lang}{en}</p></div> +<div id="b"><p xml:lang="en">{}{xml:lang}{en}</p></div> +<div id="c"><div lang="en"><p>Parent: {}{lang}{en}</p></div></div> +<div id="d"><div xml:lang="en"><p>Parent: {}{xml:lang}{en}</p></div></div> +</div> +<script> +try { + var XML = "http://www.w3.org/XML/1998/namespace"; + var container = document.getElementById("test"); + + var div = document.createElement("div"); + div.id = "e"; + var testNode = document.createElement("p"); + testNode.appendChild(document.createTextNode("{xml}{lang}{en}")); + testNode.setAttributeNS(XML, "xml:lang", "en"); + div.appendChild(testNode); + container.appendChild(div); + + div = document.createElement("div"); + div.id = "f"; + testNode = document.createElement("p"); + testNode.appendChild(document.createTextNode("{xml}{lang}{en} - {lang}{de}")); + testNode.setAttributeNS(XML, "xml:lang", "en"); + testNode.setAttributeNS(null, "lang", "de"); + div.appendChild(testNode); + container.appendChild(div); + + div = document.createElement("div"); + div.id = "g"; + testNode = document.createElement("p"); + testNode.appendChild(document.createTextNode("{xml}{lang}{de} - {lang}{en}")); + testNode.setAttributeNS(XML, "xml:lang", "de"); + testNode.setAttributeNS(null, "lang", "en"); + container.appendChild(testNode); + div.appendChild(testNode); + container.appendChild(div); +} catch (e) { +} +</script> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/lang-xyzzy-ref.html b/testing/web-platform/tests/html/dom/elements/global-attributes/lang-xyzzy-ref.html new file mode 100644 index 0000000000..b2037182b9 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/lang-xyzzy-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<title>Invalid languages</title> +<link rel="author" title="Ms2ger" href="mailto:ms2ger@gmail.com"> +<meta name="flags" content="css21"> +<style>#testp { color: green; }</style> +<body> +<div id="test"> +<p id="testp" lang="xyzzy">ABC</p> +</div> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/lang-xyzzy.html b/testing/web-platform/tests/html/dom/elements/global-attributes/lang-xyzzy.html new file mode 100644 index 0000000000..d6e6aeb647 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/lang-xyzzy.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>Invalid languages</title> +<link rel="match" href="lang-xyzzy-ref.html"> +<link rel="author" title="Ms2ger" href="mailto:ms2ger@gmail.com"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-lang-and-xml:lang-attributes"> +<link tel="help" href="http://www.w3.org/TR/CSS2/selector.html#lang"> +<meta name="flags" content="css21"> +<style>:lang(xyzzy) { color: green; }</style> +<body> +<div id="test"> +<p id="testp" lang="xyzzy">ABC</p> +</div> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/mapped-attribute-adopt-001.html b/testing/web-platform/tests/html/dom/elements/global-attributes/mapped-attribute-adopt-001.html new file mode 100644 index 0000000000..66ff3d64f1 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/mapped-attribute-adopt-001.html @@ -0,0 +1,23 @@ +<!doctype html> +<title>Adoption doesn't mess with mapped attributes</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1636516"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div hidden="unlikely">Should be hidden</div> +<script> +test(function() { + var tmpl = document.createElement("template"); + var fragment = tmpl.content; + var newEl = document.createElement("div"); + newEl.setAttribute("hidden", "unlikely"); + fragment.append(newEl); + document.adoptNode(newEl); + assert_equals( + getComputedStyle(document.querySelector("div")).display, + "none", + "hidden attribute should have an effect" + ); +}, "Adoption of an unrelated node shouldn't prevent mapped attributes from applying"); +</script> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/style-01-ref.html b/testing/web-platform/tests/html/dom/elements/global-attributes/style-01-ref.html new file mode 100644 index 0000000000..be8175e61d --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/style-01-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<title>The style attribute</title> +<link rel="author" title="Ms2ger" href="mailto:ms2ger@gmail.com"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-style-attribute"> +<link rel="help" href="http://www.w3.org/TR/css-style-attr/#syntax"> +<link rel="help" href="http://www.w3.org/TR/CSS21/cascade.html#cascading-order"> +<link rel="help" href="http://www.w3.org/TR/CSS21/cascade.html#specificity"> +<style> +#test p { background: limegreen; } +</style> +<div id="test"> +<p>This line should have a green background. +<p>This line should have a green background. +<p>This line should have a green background. +<p>This line should have a green background. +<p>This line should have a green background. +<p>This line should have a green background. +<p>This line should have a green background. +<p>This line should have a green background. +<p>This line should have a green background. +<p>This line should have a green background. +<p>This line should have a green background. +<p>This line should have a green background. +</div> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/style-01.html b/testing/web-platform/tests/html/dom/elements/global-attributes/style-01.html new file mode 100644 index 0000000000..c0e0995806 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/style-01.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>The style attribute</title> +<link rel="match" href="style-01-ref.html"> +<link rel="author" title="Ms2ger" href="mailto:ms2ger@gmail.com"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-style-attribute"> +<link rel="help" href="http://www.w3.org/TR/css-style-attr/#syntax"> +<link rel="help" href="http://www.w3.org/TR/CSS21/cascade.html#cascading-order"> +<link rel="help" href="http://www.w3.org/TR/CSS21/cascade.html#specificity"> +<style> +#idsel { background: red; } +#idsel2 { background: limegreen !important; } +</style> +<div id="test"> +<p style="background:limegreen">This line should have a green background. +<p style="/**/background:limegreen">This line should have a green background. +<p style="background/**/:limegreen">This line should have a green background. +<p style="background:/**/limegreen">This line should have a green background. +<p style="background:limegreen/**/">This line should have a green background. +<p id="idsel1" style="background:limegreen">This line should have a green background. +<p id="idsel2" style="background:red">This line should have a green background. +<p style="background:limegreen; background:r/**/ed">This line should have a green background. +<p style="background:limegreen;}">This line should have a green background. +<p style="};background:limegreen">This line should have a green background. +<p style="background:red;};background:limegreen">This line should have a green background. +<p style="background:limegreen;{background:red}">This line should have a green background. +</div> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/the-lang-attribute-001.html b/testing/web-platform/tests/html/dom/elements/global-attributes/the-lang-attribute-001.html new file mode 100644 index 0000000000..c2966f3620 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/the-lang-attribute-001.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html lang="ko" > +<head> +<meta charset="utf-8"/> +<title>lang attribute in html tag</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<link rel='help' href='https://html.spec.whatwg.org/multipage/#the-lang-and-xml:lang-attributes'> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name='flags' content='dom'> +<style type='text/css'> + #colonlangcontroltest { color: red; font-weight: bold; width: 400px; } + #colonlangcontroltest:lang(xx) { display:none; } +.test div { width: 50px; } +#box:lang(ko) { width: 100px; } +</style> +</head> +<body> + + + +<div class="test"><div id="box"> </div></div> +<p lang='xx' id='colonlangcontroltest'>This test failed because it relies on :lang for results, but :lang is not supported by this browser.</p> + + +<!--Notes: + +This test uses :lang to detect whether the language has been set. If :lang is not supported, a message will appear and the test will fail. + +--> +<script> +test(function() { +assert_equals(document.getElementById('colonlangcontroltest').offsetWidth, 0) +assert_equals(document.getElementById('box').offsetWidth, 100); +}, "The browser will recognize a language declared in a lang attribute on the html tag."); +</script> + +<div id='log'></div> + +</body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/the-lang-attribute-002.html b/testing/web-platform/tests/html/dom/elements/global-attributes/the-lang-attribute-002.html new file mode 100644 index 0000000000..205bc35f2d --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/the-lang-attribute-002.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html xml:lang="ko" > +<head> +<meta charset="utf-8"/> +<title>xml:lang attribute in html tag</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<link rel='help' href='https://html.spec.whatwg.org/multipage/#the-lang-and-xml:lang-attributes'> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name='flags' content='dom'> +<style type='text/css'> + #colonlangcontroltest { color: red; font-weight: bold; width: 400px; } + #colonlangcontroltest:lang(xx) { display:none; } +.test div { width: 50px; } +#box:lang(ko) { width: 100px; } +</style> +</head> +<body> + + + +<div class="test"><div id="box"> </div></div> +<p lang='xx' id='colonlangcontroltest'>This test failed because it relies on :lang for results, but :lang is not supported by this browser.</p> + + +<!--Notes: + +This test uses :lang to detect whether the language has been set. If :lang is not supported, a message will appear and the test will fail. + +--> +<script> +test(function() { +assert_equals(document.getElementById('colonlangcontroltest').offsetWidth, 0) +assert_equals(document.getElementById('box').offsetWidth, 50); +}, "The browser will NOT recognize a language declared in an xml:lang attribute on the html tag."); +</script> + +<div id='log'></div> + +</body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/the-lang-attribute-003.html b/testing/web-platform/tests/html/dom/elements/global-attributes/the-lang-attribute-003.html new file mode 100644 index 0000000000..717aa12e68 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/the-lang-attribute-003.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html > +<head> +<meta charset="utf-8"/> +<title>HTTP header</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<link rel='help' href='https://html.spec.whatwg.org/multipage/#the-lang-and-xml:lang-attributes'> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name='flags' content='http dom'> +<style type='text/css'> + #colonlangcontroltest { color: red; font-weight: bold; width: 400px; } + #colonlangcontroltest:lang(xx) { display:none; } +.test div { width: 50px; } +#box:lang(ko) { width: 100px; } +</style> +</head> +<body> + + + +<div class="test"><div id="box"> </div></div> +<p lang='xx' id='colonlangcontroltest'>This test failed because it relies on :lang for results, but :lang is not supported by this browser.</p> + + +<!--Notes: + +This test uses :lang to detect whether the language has been set. If :lang is not supported, a message will appear and the test will fail. + +--> +<script> +test(function() { +assert_equals(document.getElementById('colonlangcontroltest').offsetWidth, 0) +assert_equals(document.getElementById('box').offsetWidth, 100); +}, "The browser will recognize a language declared in the HTTP header, when there is no internal language declaration."); +</script> + +<div id='log'></div> + +</body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/the-lang-attribute-003.html.headers b/testing/web-platform/tests/html/dom/elements/global-attributes/the-lang-attribute-003.html.headers new file mode 100644 index 0000000000..0c47ecd4fa --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/the-lang-attribute-003.html.headers @@ -0,0 +1 @@ +Content-Language: ko diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/the-lang-attribute-004.html b/testing/web-platform/tests/html/dom/elements/global-attributes/the-lang-attribute-004.html new file mode 100644 index 0000000000..ff36f75add --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/the-lang-attribute-004.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html > +<head> +<meta charset="utf-8"/> + <meta http-equiv="Content-Language" content="ko" > +<title>pragma-set default</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<link rel='help' href='https://html.spec.whatwg.org/multipage/#the-lang-and-xml:lang-attributes'> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name='flags' content='dom'> +<style type='text/css'> + #colonlangcontroltest { color: red; font-weight: bold; width: 400px; } + #colonlangcontroltest:lang(xx) { display:none; } +.test div { width: 50px; } +#box:lang(ko) { width: 100px; } +</style> +</head> +<body> + + + +<div class="test"><div id="box"> </div></div> +<p lang='xx' id='colonlangcontroltest'>This test failed because it relies on :lang for results, but :lang is not supported by this browser.</p> + + +<!--Notes: + +This test uses :lang to detect whether the language has been set. If :lang is not supported, a message will appear and the test will fail. + +--> +<script> +test(function() { +assert_equals(document.getElementById('colonlangcontroltest').offsetWidth, 0) +assert_equals(document.getElementById('box').offsetWidth, 100); +}, "The browser will recognize a language declared in a meta element in the head using http-equiv='Content-Language' content='..' (with a single language tag value), when there is no other language declaration inside the document."); +</script> + +<div id='log'></div> + +</body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/the-lang-attribute-005.html b/testing/web-platform/tests/html/dom/elements/global-attributes/the-lang-attribute-005.html new file mode 100644 index 0000000000..63fb8e3bbb --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/the-lang-attribute-005.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html lang="ko" > +<head> +<meta charset="utf-8"/> +<title>HTTP header and html lang</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<link rel='help' href='https://html.spec.whatwg.org/multipage/#the-lang-and-xml:lang-attributes'> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name='flags' content='http dom'> +<style type='text/css'> + #colonlangcontroltest { color: red; font-weight: bold; width: 400px; } + #colonlangcontroltest:lang(xx) { display:none; } +.test div { width: 50px; } +#box:lang(ko) { width: 100px; } +</style> +</head> +<body> + + + +<div class="test"><div id="box"> </div></div> +<p lang='xx' id='colonlangcontroltest'>This test failed because it relies on :lang for results, but :lang is not supported by this browser.</p> + + +<!--Notes: + +This test uses :lang to detect whether the language has been set. If :lang is not supported, a message will appear and the test will fail. + +--> +<script> +test(function() { +assert_equals(document.getElementById('colonlangcontroltest').offsetWidth, 0) +assert_equals(document.getElementById('box').offsetWidth, 100); +}, "If there is a conflict between the language declarations in the HTTP header and the html element using lang, the browser will recognize the language declared in the html element."); +</script> + +<div id='log'></div> + +</body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/the-lang-attribute-005.html.headers b/testing/web-platform/tests/html/dom/elements/global-attributes/the-lang-attribute-005.html.headers new file mode 100644 index 0000000000..1b971b697a --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/the-lang-attribute-005.html.headers @@ -0,0 +1 @@ +Content-Language: zh diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/the-lang-attribute-006.html b/testing/web-platform/tests/html/dom/elements/global-attributes/the-lang-attribute-006.html new file mode 100644 index 0000000000..ede4912025 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/the-lang-attribute-006.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html > +<head> +<meta charset="utf-8"/> + <meta http-equiv="Content-Language" content="ko" > +<title>HTTP header and meta element</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<link rel='help' href='https://html.spec.whatwg.org/multipage/#the-lang-and-xml:lang-attributes'> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name='flags' content='http dom'> +<style type='text/css'> + #colonlangcontroltest { color: red; font-weight: bold; width: 400px; } + #colonlangcontroltest:lang(xx) { display:none; } +.test div { width: 50px; } +#box:lang(ko) { width: 100px; } +</style> +</head> +<body> + + + +<div class="test"><div id="box"> </div></div> +<p lang='xx' id='colonlangcontroltest'>This test failed because it relies on :lang for results, but :lang is not supported by this browser.</p> + + +<!--Notes: + +This test uses :lang to detect whether the language has been set. If :lang is not supported, a message will appear and the test will fail. + +--> +<script> +test(function() { +assert_equals(document.getElementById('colonlangcontroltest').offsetWidth, 0) +assert_equals(document.getElementById('box').offsetWidth, 100); +}, "If there is a conflict between the language declarations in the HTTP header and the Content-Language meta element, the UA will recognize the language declared in the meta element."); +</script> + +<div id='log'></div> + +</body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/the-lang-attribute-006.html.headers b/testing/web-platform/tests/html/dom/elements/global-attributes/the-lang-attribute-006.html.headers new file mode 100644 index 0000000000..1b971b697a --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/the-lang-attribute-006.html.headers @@ -0,0 +1 @@ +Content-Language: zh diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/the-lang-attribute-007.html b/testing/web-platform/tests/html/dom/elements/global-attributes/the-lang-attribute-007.html new file mode 100644 index 0000000000..8fafef036f --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/the-lang-attribute-007.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html lang="ko" > +<head> +<meta charset="utf-8"/> + <meta http-equiv="Content-Language" content="zh" > +<title>html lang and meta elements</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<link rel='help' href='https://html.spec.whatwg.org/multipage/#the-lang-and-xml:lang-attributes'> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name='flags' content='dom'> +<style type='text/css'> + #colonlangcontroltest { color: red; font-weight: bold; width: 400px; } + #colonlangcontroltest:lang(xx) { display:none; } +.test div { width: 50px; } +#box:lang(ko) { width: 100px; } +</style> +</head> +<body> + + + +<div class="test"><div id="box"> </div></div> +<p lang='xx' id='colonlangcontroltest'>This test failed because it relies on :lang for results, but :lang is not supported by this browser.</p> + + +<!--Notes: + +This test uses :lang to detect whether the language has been set. If :lang is not supported, a message will appear and the test will fail. + +--> +<script> +test(function() { +assert_equals(document.getElementById('colonlangcontroltest').offsetWidth, 0) +assert_equals(document.getElementById('box').offsetWidth, 100); +}, "If there is a conflict between the language declared using lang in the html element and that in the meta element, the UA will recognize the language declared in the html element."); +</script> + +<div id='log'></div> + +</body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/the-lang-attribute-008.html b/testing/web-platform/tests/html/dom/elements/global-attributes/the-lang-attribute-008.html new file mode 100644 index 0000000000..3be54154c1 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/the-lang-attribute-008.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html > +<head> +<meta charset="utf-8"/> +<title>lang="..." vs lang=""</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<link rel='help' href='https://html.spec.whatwg.org/multipage/#the-lang-and-xml:lang-attributes'> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name='flags' content='dom'> +<style type='text/css'> + #colonlangcontroltest { color: red; font-weight: bold; width: 400px; } + #colonlangcontroltest:lang(xx) { display:none; } +.test div { width: 50px; } +#box:lang(ko) { width: 100px; } +</style> +</head> +<body> + + + +<div class="test" lang="ko"><div id="box" lang=""> </div></div> +<p lang='xx' id='colonlangcontroltest'>This test failed because it relies on :lang for results, but :lang is not supported by this browser.</p> + + +<!--Notes: + +This test uses :lang to detect whether the language has been set. If :lang is not supported, a message will appear and the test will fail. + +--> +<script> +test(function() { +assert_equals(document.getElementById('colonlangcontroltest').offsetWidth, 0) +assert_equals(document.getElementById('box').offsetWidth, 50); +}, "If an element contains a lang attribute with an empty value, the value of a lang attribute higher up the document tree will no longer be applied to the content of that element."); +</script> + +<div id='log'></div> + +</body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/the-lang-attribute-009.html b/testing/web-platform/tests/html/dom/elements/global-attributes/the-lang-attribute-009.html new file mode 100644 index 0000000000..3a927028ef --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/the-lang-attribute-009.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html lang="" > +<head> +<meta charset="utf-8"/> +<title>lang="" vs HTTP</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<link rel='help' href='https://html.spec.whatwg.org/multipage/#the-lang-and-xml:lang-attributes'> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name='flags' content='http dom'> +<style type='text/css'> + #colonlangcontroltest { color: red; font-weight: bold; width: 400px; } + #colonlangcontroltest:lang(xx) { display:none; } +.test div { width: 50px; } +#box:lang(ko) { width: 100px; } +</style> +</head> +<body> + + + +<div class="test"><div id="box"> </div></div> +<p lang='xx' id='colonlangcontroltest'>This test failed because it relies on :lang for results, but :lang is not supported by this browser.</p> + + +<!--Notes: + +This test uses :lang to detect whether the language has been set. If :lang is not supported, a message will appear and the test will fail. + +--> +<script> +test(function() { +assert_equals(document.getElementById('colonlangcontroltest').offsetWidth, 0) +assert_equals(document.getElementById('box').offsetWidth, 50); +}, "If the HTTP header contains a language declaration but the html element uses an empty lang value, the UA will not recognize the language declared in the HTTP header."); +</script> + +<div id='log'></div> + +</body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/the-lang-attribute-009.html.headers b/testing/web-platform/tests/html/dom/elements/global-attributes/the-lang-attribute-009.html.headers new file mode 100644 index 0000000000..0c47ecd4fa --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/the-lang-attribute-009.html.headers @@ -0,0 +1 @@ +Content-Language: ko diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/the-lang-attribute-010.html b/testing/web-platform/tests/html/dom/elements/global-attributes/the-lang-attribute-010.html new file mode 100644 index 0000000000..2c21737471 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/the-lang-attribute-010.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html lang="" > +<head> +<meta charset="utf-8"/> + <meta http-equiv="Content-Language" content="ko" > +<title>lang="" vs meta Content-Language</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<link rel='help' href='https://html.spec.whatwg.org/multipage/#the-lang-and-xml:lang-attributes'> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<meta name='flags' content='dom'> +<style type='text/css'> + #colonlangcontroltest { color: red; font-weight: bold; width: 400px; } + #colonlangcontroltest:lang(xx) { display:none; } +.test div { width: 50px; } +#box:lang(ko) { width: 100px; } +</style> +</head> +<body> + + + +<div class="test"><div id="box"> </div></div> +<p lang='xx' id='colonlangcontroltest'>This test failed because it relies on :lang for results, but :lang is not supported by this browser.</p> + + +<!--Notes: + +This test uses :lang to detect whether the language has been set. If :lang is not supported, a message will appear and the test will fail. + +--> +<script> +test(function() { +assert_equals(document.getElementById('colonlangcontroltest').offsetWidth, 0) +assert_equals(document.getElementById('box').offsetWidth, 50); +}, "If the meta Content-Language element contains a language declaration but the html element uses an empty lang value, the UA will not recognize the language declared in the meta Content-Language element."); +</script> + +<div id='log'></div> + +</body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/the-lang-attribute-011.html.headers b/testing/web-platform/tests/html/dom/elements/global-attributes/the-lang-attribute-011.html.headers new file mode 100644 index 0000000000..827b4348f4 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/the-lang-attribute-011.html.headers @@ -0,0 +1 @@ +Content-Language: ko,zh,ja diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/the-translate-attribute-007.html b/testing/web-platform/tests/html/dom/elements/global-attributes/the-translate-attribute-007.html new file mode 100644 index 0000000000..abce2858a2 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/the-translate-attribute-007.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"/> +<title>no translate attribute</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<link rel='help' href='https://html.spec.whatwg.org/multipage/#the-translate-attribute'> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style type='text/css'> +</style> +</head> +<body> + + + +<div class="test"><div id="box"> </div></div> + + +<script> +test(function() { +assert_true(document.getElementById('box').translate); +}, "In the default case, ie. with no translate attribute in the page, javascript will detect the translation mode of text as translate-enabled."); +</script> + +<div id='log'></div> + +</body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/the-translate-attribute-008.html b/testing/web-platform/tests/html/dom/elements/global-attributes/the-translate-attribute-008.html new file mode 100644 index 0000000000..70486fe59b --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/the-translate-attribute-008.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"/> +<title>translate=yes</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<link rel='help' href='https://html.spec.whatwg.org/multipage/#the-translate-attribute'> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style type='text/css'> +</style> +</head> +<body> + + + +<div class="test"><div id="box" translate="yes"> </div></div> + + +<script> +test(function() { +assert_true(document.getElementById('box').translate); +}, "If the translate attribute is set to yes, javascript will detect the translation mode of text as translate-enabled."); +</script> + +<div id='log'></div> + +</body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/the-translate-attribute-009.html b/testing/web-platform/tests/html/dom/elements/global-attributes/the-translate-attribute-009.html new file mode 100644 index 0000000000..1ab49b0307 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/the-translate-attribute-009.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"/> +<title>translate=no</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<link rel='help' href='https://html.spec.whatwg.org/multipage/#the-translate-attribute'> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style type='text/css'> +</style> +</head> +<body> + + + +<div class="test"><div id="box" translate="no"> </div></div> + + +<script> +test(function() { +assert_false(document.getElementById('box').translate); +}, "If the translate attribute is set to no, javascript will detect the translation mode of text as no-translate."); +</script> + +<div id='log'></div> + +</body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/the-translate-attribute-010.html b/testing/web-platform/tests/html/dom/elements/global-attributes/the-translate-attribute-010.html new file mode 100644 index 0000000000..c45965e004 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/the-translate-attribute-010.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"/> +<title>translate inherits no</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<link rel='help' href='https://html.spec.whatwg.org/multipage/#the-translate-attribute'> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style type='text/css'> +</style> +</head> +<body> + + + +<div class="test"><div id="box" translate="no"> <span id="spantest"> </span></div></div> + + +<script> +test(function() { +assert_false(document.getElementById('spantest').translate); +}, "If the translate attribute is set to no, javascript will detect the translation mode of elements inside that element with no translate flag as no-translate."); +</script> + +<div id='log'></div> + +</body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/the-translate-attribute-011.html b/testing/web-platform/tests/html/dom/elements/global-attributes/the-translate-attribute-011.html new file mode 100644 index 0000000000..101f70e2e7 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/the-translate-attribute-011.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"/> +<title>translate=yes inside translate=no</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<link rel='help' href='https://html.spec.whatwg.org/multipage/#the-translate-attribute'> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style type='text/css'> +</style> +</head> +<body> + + + +<div class="test"><div id="box" translate="no"> <span id="spantest" translate="yes"> </span></div></div> + + +<script> +test(function() { +assert_true(document.getElementById('spantest').translate); +}, "If the translate attribute is set to yes on an element inside an element with the translate attribute set to no, javascript will detect the translation mode of text in the inner element as translate-enabled."); +</script> + +<div id='log'></div> + +</body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/the-translate-attribute-012.html b/testing/web-platform/tests/html/dom/elements/global-attributes/the-translate-attribute-012.html new file mode 100644 index 0000000000..1d81cfd8b1 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/the-translate-attribute-012.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"/> +<title>translate=""</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<link rel='help' href='https://html.spec.whatwg.org/multipage/#the-translate-attribute'> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style type='text/css'> +</style> +</head> +<body> + + + +<div class="test"><div id="box" translate=""> </div></div> + + +<script> +test(function() { +assert_true(document.getElementById('box').translate); +}, "If the translate attribute is set to a null string, javascript will detect the translation mode of text as translate-enabled."); +</script> + +<div id='log'></div> + +</body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/title-manual.html b/testing/web-platform/tests/html/dom/elements/global-attributes/title-manual.html new file mode 100644 index 0000000000..d781172bba --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/title-manual.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<title>The title attribute</title> +<style> +div > * { display: inline } +link::before { content: "link" } +</style> +<p>Hover each word below. The tooltip for each of them should be "PASS".</p> +<div title=PASS>div <link> <style>style</style> <dfn>dfn</dfn> <abbr>abbr</abbr> <menuitem>menuitem</menuitem></div> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/translate-enumerated-ascii-case-insensitive.html b/testing/web-platform/tests/html/dom/elements/global-attributes/translate-enumerated-ascii-case-insensitive.html new file mode 100644 index 0000000000..dedf559b98 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/translate-enumerated-ascii-case-insensitive.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="help" href="https://html.spec.whatwg.org/#attr-translate"> +<link rel="help" href="https://html.spec.whatwg.org/#enumerated-attribute"> +<meta name="assert" content="@translate values are ASCII case-insensitive"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<!-- + We wrap the <span> elements under test with <div> elements so the invalid + value default (inherit) can be distinguished from true through the IDL + attribute. The inherit state would otherwise yield true because inheritance + would go all the way to :root, whose translation mode is translate-enabled + because it’s also in the inherit state. +--> +<div translate="no"><span translate="yes"></span></div> +<div translate="no"><span translate="YeS"></span></div> +<div translate="no"><span translate="yeſ"></span></div> +<script> +const span = document.querySelectorAll("span"); + +test(() => { + assert_equals(span[0].translate, true, "lowercase valid"); + assert_equals(span[1].translate, true, "mixed case valid"); + assert_equals(span[2].translate, false, "non-ASCII invalid"); +}, "keyword yes"); +</script> diff --git a/testing/web-platform/tests/html/dom/elements/global-attributes/translate-inherit-no-parent-element.html b/testing/web-platform/tests/html/dom/elements/global-attributes/translate-inherit-no-parent-element.html new file mode 100644 index 0000000000..370225c7f7 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/global-attributes/translate-inherit-no-parent-element.html @@ -0,0 +1,33 @@ +<!doctype html> +<meta charset=utf-8> +<title>The translate attribute inherit state when there's no parent element</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> +test(() => { + const div = document.createElement("div"); + assert_true(div.translate); +}, 'No parent node'); + +test(() => { + const div = document.createElement("div"); + const frag = document.createDocumentFragment(); + frag.append(div); + assert_true(div.translate); +}, 'DocumentFragment parent node'); + +for (const translateValue of ['yes', 'no']) { + test(() => { + const div = document.createElement("div"); + const myElement = document.createElement("my-element"); + myElement.setAttribute('translate', translateValue); + myElement.attachShadow({mode: 'open'}); + myElement.shadowRoot.append(div); + assert_true(div.translate); + }, `ShadowRoot parent node whose shadow host has translate=${translateValue}`); +} + +test(() => { + assert_true(document.documentElement.translate); +}, 'Document parent node'); +</script> diff --git a/testing/web-platform/tests/html/dom/elements/images/bypass-cache-revalidation.html b/testing/web-platform/tests/html/dom/elements/images/bypass-cache-revalidation.html new file mode 100644 index 0000000000..38cdd876da --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/images/bypass-cache-revalidation.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title>Cached images can bypass revalidation</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/common/utils.js"></script> +<div id="imageDiv1"></div> +<div id="imageDiv2"></div> +<canvas id="canvas"></canvas> +<script> + +function getImagePixel(image) +{ + canvas.getContext("2d").drawImage(image, 0, 0, 10, 10); + return canvas.getContext("2d").getImageData(0, 0, 1, 1).data; +} + +let resolve; +promise_test(async (t) => { + const url = "image.py?id=" + token(); + + let promise = new Promise(r => resolve = r); + imageDiv1.innerHTML = `<img src="${url}" onload="resolve()"></img>`; + await promise; + + const url2 = "image.py?id=" + token(); + promise = new Promise(r => resolve = r); + imageDiv1.innerHTML = `<img src="${url2}" onload="resolve()"></img>`; + await promise; + + promise = new Promise(r => resolve = r); + imageDiv2.innerHTML = `<img id="image2" src="${url}" onload="resolve()"></img>`; + await promise; + + assert_array_equals(getImagePixel(image2), [0, 255, 0, 255]); +}, "Images can bypass no-cache"); +</script> + diff --git a/testing/web-platform/tests/html/dom/elements/images/image.py b/testing/web-platform/tests/html/dom/elements/images/image.py new file mode 100644 index 0000000000..b8bb34e618 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/images/image.py @@ -0,0 +1,28 @@ +import os.path + +from wptserve.utils import isomorphic_decode + +def main(request, response): + + key = request.GET[b'id'] + alreadyServedRequest = False + try: + alreadyServedRequest = request.server.stash.take(key) + except (KeyError, ValueError) as e: + pass + + if alreadyServedRequest: + body = open(os.path.join(os.path.dirname(isomorphic_decode(__file__)), u"../../../../images/red.png"), u"rb").read() + else: + request.server.stash.put(key, True); + body = open(os.path.join(os.path.dirname(isomorphic_decode(__file__)), u"../../../../images/green.png"), u"rb").read() + pass + + response.writer.write_status(200) + response.writer.write_header(b"etag", b"abcdef") + response.writer.write_header(b"content-length", len(body)) + response.writer.write_header(b"content-type", b"image/png") + response.writer.write_header(b"cache-control", b"public, max-age=31536000, no-cache") + response.writer.end_headers() + + response.writer.write(body) diff --git a/testing/web-platform/tests/html/dom/elements/name-content-attribute-and-property.html b/testing/web-platform/tests/html/dom/elements/name-content-attribute-and-property.html new file mode 100644 index 0000000000..3319c1875b --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/name-content-attribute-and-property.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<title>Only certain HTML elements reflect the name content attribute as a property</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/resources/common.js"></script> +<div id="log"></div> +<script> + function doesReflect(tagName) { + var element = document.createElement(tagName); + element.setAttribute("name", "foo"); + assert_equals(element.getAttribute("name"), "foo", "setAttribute should change content attribute"); + element.name = "bar"; + assert_equals(element.getAttribute("name"), "bar", "assignment to .name should change content attribute"); + } + + function doesNotReflect(tagName) { + var element = document.createElement(tagName); + element.setAttribute("name", "foo"); + assert_equals(element.getAttribute("name"), "foo", "setAttribute should change content attribute"); + element.name = "bar"; + assert_equals(element.getAttribute("name"), "foo", "assignment to .name should not change content attribute"); + } + + var reflectingTagNames = [ + "a", "button", "embed", "fieldset", "form", "frame", + "iframe", "img", "input", "map", "meta", "object", "output", + "param", "select", "slot", "textarea", + ]; + const old_and_new_elements = [...HTML5_ELEMENTS, ...HTML5_DEPRECATED_ELEMENTS]; + const nonReflectingTagNames = old_and_new_elements.filter(x => !reflectingTagNames.includes(x)); + + reflectingTagNames.forEach(function(tagName) { + test(function() { + doesReflect(tagName) + }, tagName + " element's name property reflects its content attribute"); + }); + + nonReflectingTagNames.forEach(function(tagName) { + test(function() { + doesNotReflect(tagName) + }, tagName + " element's name property does not reflect its content attribute"); + }); +</script> + diff --git a/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-001a.html b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-001a.html new file mode 100644 index 0000000000..16a308a2f7 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-001a.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"> +<title>The dir attribute: isolated from following number, opposite direction</title> +<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'> +<link rel="help" href='http://www.w3.org/TR/html5/dom.html#requirements-relating-to-the-bidirectional-algorithm'> +<link rel="match" href='reference/dir-isolation-001-ref.html'> +<meta name="assert" content='Element content with a dir attribute is treated as a neutral character and directionally isolated from a following number.'> +<style type="text/css"> +.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; margin-right: 200px; padding: 5px; clear: both; } +input { margin: 5px; } +</style> +</head> +<body> +<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p> +<!--Notes: +Key to entities used below: +א ... ו - The first six Hebrew letters (strongly RTL). +‭ - The LRO (left-to-right-override) formatting character. +‬ - The PDF (pop directional formatting) formatting character; closes LRO. +The punctuation is moved around in the source to make it easier to do visual comparisons when the test is run. +--> +<div class="test"> +<div dir="ltr"><span dir="rtl">א</span> 3</div> +<div dir="ltr"><span dir="rtl">a</span> 3</div> +<div dir="rtl"><span dir="ltr">א</span> 3</div> +<div dir="rtl"><span dir="ltr">a</span> 3</div> +</div> +<div class="ref"> +<div dir="ltr">‭א 3‬</div> +<div dir="ltr">‭a 3‬</div> +<div dir="rtl">‭3 א‬</div> +<div dir="rtl">‭3 a‬</div> +</div> +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-001b.html b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-001b.html new file mode 100644 index 0000000000..197f49aa24 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-001b.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"> +<title>The dir attribute: isolated from following number, auto</title> +<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'> +<link rel="help" href='http://www.w3.org/TR/html5/dom.html#requirements-relating-to-the-bidirectional-algorithm'> +<link rel="match" href='reference/dir-isolation-001-ref.html'> +<meta name="assert" content='Element content with a dir attribute is treated as a neutral character and directionally isolated from a following number.'> +<style type="text/css"> +.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; margin-right: 200px; padding: 5px; clear: both; } +input { margin: 5px; } +</style> +</head> +<body> +<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p> +<!--Notes: +Key to entities used below: +א ... ו - The first six Hebrew letters (strongly RTL). +‭ - The LRO (left-to-right-override) formatting character. +‬ - The PDF (pop directional formatting) formatting character; closes LRO. +The punctuation is moved around in the source to make it easier to do visual comparisons when the test is run. +--> +<div class="test"> +<div dir="ltr"><span dir="auto">א</span> 3</div> +<div dir="ltr"><span dir="auto">a</span> 3</div> +<div dir="rtl"><span dir="auto">א</span> 3</div> +<div dir="rtl"><span dir="auto">a</span> 3</div> +</div> +<div class="ref"> +<div dir="ltr">‭א 3‬</div> +<div dir="ltr">‭a 3‬</div> +<div dir="rtl">‭3 א‬</div> +<div dir="rtl">‭3 a‬</div> +</div> +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-001c.html b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-001c.html new file mode 100644 index 0000000000..95ec6c739d --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-001c.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"> +<title>The dir attribute: isolated from following number, same direction</title> +<link rel="author" title="Richard Ishida" href='mailto:ishida@w3.org'> +<link rel="help" href='http://www.w3.org/TR/html5/dom.html#requirements-relating-to-the-bidirectional-algorithm'> +<link rel="match" href='reference/dir-isolation-001-ref.html'> +<meta name="assert" content='Element content with a dir attribute is treated as a neutral character and directionally isolated from a following number.'> +<style type="text/css"> +.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; margin-right: 200px; padding: 5px; clear: both; } +input { margin: 5px; } +</style> +</head> +<body> +<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p> +<!--Notes: +Key to entities used below: +א ... ו - The first six Hebrew letters (strongly RTL). +‭ - The LRO (left-to-right-override) formatting character. +‬ - The PDF (pop directional formatting) formatting character; closes LRO. +The punctuation is moved around in the source to make it easier to do visual comparisons when the test is run. +--> +<div class="test"> +<div dir="ltr"><span dir="ltr">א</span> 3</div> +<div dir="ltr"><span dir="ltr">a</span> 3</div> +<div dir="rtl"><span dir="rtl">א</span> 3</div> +<div dir="rtl"><span dir="rtl">a</span> 3</div> +</div> +<div class="ref"> +<div dir="ltr">‭א 3‬</div> +<div dir="ltr">‭a 3‬</div> +<div dir="rtl">‭3 א‬</div> +<div dir="rtl">‭3 a‬</div> +</div> +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-002a.html b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-002a.html new file mode 100644 index 0000000000..7b7029a269 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-002a.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"> +<title>The dir attribute: isolated from following number with intervening neutrals, opposite direction</title> +<link rel="author" title='Richard Ishida' href='mailto:ishida@w3.org'> +<link rel="help" href='http://www.w3.org/TR/html5/dom.html#requirements-relating-to-the-bidirectional-algorithm'> +<link rel='match' href='reference/dir-isolation-002a-ref.html'> +<meta name='assert' content='Element content with a dir attribute is treated as a neutral character and directionally isolated from a following number.'> +<style type="text/css"> +.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; margin-right: 200px; padding: 5px; clear: both; } +input { margin: 5px; } +</style> +</head> +<body> +<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p> +<!--Notes: +Key to entities used below: +א ... ו - The first six Hebrew letters (strongly RTL). +‭ - The LRO (left-to-right-override) formatting character. +‬ - The PDF (pop directional formatting) formatting character; closes LRO. +The punctuation is moved around in the source to make it easier to do visual comparisons when the test is run. +--> +<div class="test"> +<div dir="ltr"><span dir="rtl">> א ></span> > 3 ></div> +<div dir="ltr"><span dir="rtl">> a ></span> > 3 ></div> +<div dir="rtl"><span dir="ltr">> א ></span> > 3 ></div> +<div dir="rtl"><span dir="ltr">> a ></span> > 3 ></div> +</div> +<div class="ref"> +<div dir="ltr">‭< א < > 3 >‬</div> +<div dir="ltr">‭< a < > 3 >‬</div> +<div dir="rtl">‭< 3 < > א >‬</div> +<div dir="rtl">‭< 3 < > a >‬</div> +</div> +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-002b.html b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-002b.html new file mode 100644 index 0000000000..d448de5080 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-002b.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"> +<title>The dir attribute: isolated from following number with intervening neutrals, auto</title> +<link rel="author" title='Richard Ishida' href='mailto:ishida@w3.org'> +<link rel="help" href='http://www.w3.org/TR/html5/dom.html#requirements-relating-to-the-bidirectional-algorithm'> +<link rel='match' href='reference/dir-isolation-002b-ref.html'> +<meta name='assert' content='Element content with a dir attribute is treated as a neutral character and directionally isolated from a following number.'> +<style type="text/css"> +.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; margin-right: 200px; padding: 5px; clear: both; } +input { margin: 5px; } +</style> +</head> +<body> +<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p> +<!--Notes: +Key to entities used below: +א ... ו - The first six Hebrew letters (strongly RTL). +‭ - The LRO (left-to-right-override) formatting character. +‬ - The PDF (pop directional formatting) formatting character; closes LRO. +The punctuation is moved around in the source to make it easier to do visual comparisons when the test is run. +--> +<div class="test"> +<div dir="ltr"><span dir="auto">> א ></span> > 3 ></div> +<div dir="ltr"><span dir="auto">> a ></span> > 3 ></div> +<div dir="rtl"><span dir="auto">> א ></span> > 3 ></div> +<div dir="rtl"><span dir="auto">> a ></span> > 3 ></div> +</div> +<div class="ref"> +<div dir="ltr">‭< א < > 3 >‬</div> +<div dir="ltr">‭> a > > 3 >‬</div> +<div dir="rtl">‭< 3 < < א <‬</div> +<div dir="rtl">‭< 3 < > a >‬</div> +</div> +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-002c.html b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-002c.html new file mode 100644 index 0000000000..e88fb1c845 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-002c.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"> +<title>The dir attribute: isolated from following number with intervening neutrals, same direction</title> +<link rel="author" title='Richard Ishida' href='mailto:ishida@w3.org'> +<link rel="help" href='http://www.w3.org/TR/html5/dom.html#requirements-relating-to-the-bidirectional-algorithm'> +<link rel='match' href='reference/dir-isolation-002c-ref.html'> +<meta name='assert' content='Element content with a dir attribute is treated as a neutral character and directionally isolated from a following number.'> +<style type="text/css"> +.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; margin-right: 200px; padding: 5px; clear: both; } +input { margin: 5px; } +</style> +</head> +<body> +<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p> +<!--Notes: +Key to entities used below: +א ... ו - The first six Hebrew letters (strongly RTL). +‭ - The LRO (left-to-right-override) formatting character. +‬ - The PDF (pop directional formatting) formatting character; closes LRO. +The punctuation is moved around in the source to make it easier to do visual comparisons when the test is run. +--> +<div class="test"> +<div dir="ltr"><span dir="ltr">> א ></span> > 3 ></div> +<div dir="ltr"><span dir="ltr">> a ></span> > 3 ></div> +<div dir="rtl"><span dir="rtl">> א ></span> > 3 ></div> +<div dir="rtl"><span dir="rtl">> a ></span> > 3 ></div> +</div> +<div class="ref"> +<div dir="ltr">‭> א > > 3 >‬</div> +<div dir="ltr">‭> a > > 3 >‬</div> +<div dir="rtl">‭< 3 < < א <‬</div> +<div dir="rtl">‭< 3 < < a <‬</div> +</div> +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-003a.html b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-003a.html new file mode 100644 index 0000000000..9cf65c8184 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-003a.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"> +<title>The dir attribute: isolated from immediately following number, opposite direction</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<link rel="help" href='http://www.w3.org/TR/html5/dom.html#requirements-relating-to-the-bidirectional-algorithm'> +<link rel='match' href='reference/dir-isolation-003-ref.html'> +<meta name='assert' content='Element content with a dir attribute is treated as a neutral character and is directionally isolated from a following number, even with no intervening white space.'> +<style type="text/css"> +.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; margin-right: 200px; padding: 5px; clear: both; } +input { margin: 5px; } +</style> +</head> +<body> +<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p> +<!--Notes: +Key to entities used below: +א ... ו - The first six Hebrew letters (strongly RTL). +‭ - The LRO (left-to-right-override) formatting character. +‬ - The PDF (pop directional formatting) formatting character; closes LRO. +The punctuation is moved around in the source to make it easier to do visual comparisons when the test is run. +--> +<div class="test"> +<div dir="ltr"><span dir="rtl">א</span>3</div> +<div dir="ltr"><span dir="rtl">a</span>3</div> +<div dir="rtl"><span dir="ltr">א</span>3</div> +<div dir="rtl"><span dir="ltr">a</span>3</div> +</div> +<div class="ref"> +<div dir="ltr">‭א3‬</div> +<div dir="ltr">‭a3‬</div> +<div dir="rtl">‭3א‬</div> +<div dir="rtl">‭3a‬</div> +</div> +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-003b.html b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-003b.html new file mode 100644 index 0000000000..2c6b553089 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-003b.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"> +<title>The dir attribute: isolated from immediately following number, auto</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<link rel="help" href='http://www.w3.org/TR/html5/dom.html#requirements-relating-to-the-bidirectional-algorithm'> +<link rel='match' href='reference/dir-isolation-003-ref.html'> +<meta name='assert' content='Element content with a dir attribute is treated as a neutral character and is directionally isolated from a following number, even with no intervening white space.'> +<style type="text/css"> +.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; margin-right: 200px; padding: 5px; clear: both; } +input { margin: 5px; } +</style> +</head> +<body> +<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p> +<!--Notes: +Key to entities used below: +א ... ו - The first six Hebrew letters (strongly RTL). +‭ - The LRO (left-to-right-override) formatting character. +‬ - The PDF (pop directional formatting) formatting character; closes LRO. +The punctuation is moved around in the source to make it easier to do visual comparisons when the test is run. +--> +<div class="test"> +<div dir="ltr"><span dir="auto">א</span>3</div> +<div dir="ltr"><span dir="auto">a</span>3</div> +<div dir="rtl"><span dir="auto">א</span>3</div> +<div dir="rtl"><span dir="auto">a</span>3</div> +</div> +<div class="ref"> +<div dir="ltr">‭א3‬</div> +<div dir="ltr">‭a3‬</div> +<div dir="rtl">‭3א‬</div> +<div dir="rtl">‭3a‬</div> +</div> +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-003c.html b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-003c.html new file mode 100644 index 0000000000..ac8735122b --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-003c.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"> +<title>The dir attribute: isolated from immediately following number, same direction</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<link rel="help" href='http://www.w3.org/TR/html5/dom.html#requirements-relating-to-the-bidirectional-algorithm'> +<link rel='match' href='reference/dir-isolation-003-ref.html'> +<meta name='assert' content='Element content with a dir attribute is treated as a neutral character and is directionally isolated from a following number, even with no intervening white space.'> +<style type="text/css"> +.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; margin-right: 200px; padding: 5px; clear: both; } +input { margin: 5px; } +</style> +</head> +<body> +<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p> +<!--Notes: +Key to entities used below: +א ... ו - The first six Hebrew letters (strongly RTL). +‭ - The LRO (left-to-right-override) formatting character. +‬ - The PDF (pop directional formatting) formatting character; closes LRO. +The punctuation is moved around in the source to make it easier to do visual comparisons when the test is run. +--> +<div class="test"> +<div dir="ltr"><span dir="ltr">א</span>3</div> +<div dir="ltr"><span dir="ltr">a</span>3</div> +<div dir="rtl"><span dir="rtl">א</span>3</div> +<div dir="rtl"><span dir="rtl">a</span>3</div> +</div> +<div class="ref"> +<div dir="ltr">‭א3‬</div> +<div dir="ltr">‭a3‬</div> +<div dir="rtl">‭3א‬</div> +<div dir="rtl">‭3a‬</div> +</div> +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-004a.html b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-004a.html new file mode 100644 index 0000000000..27a674ccdc --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-004a.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"> +<title>The dir attribute: numbers isolated from preceding text, opposite direction</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<link rel="help" href='http://www.w3.org/TR/html5/dom.html#requirements-relating-to-the-bidirectional-algorithm'> +<link rel='match' href='reference/dir-isolation-004-ref.html'> +<meta name='assert' content='Numeric element content with a dir attribute is treated as a neutral character and directionally isolated from preceding text.'> +<style type="text/css"> +.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; margin-right: 200px; padding: 5px; clear: both; } +input { margin: 5px; } +</style> +</head> +<body> +<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p> +<!--Notes: +Key to entities used below: +א ... ו - The first six Hebrew letters (strongly RTL). +‭ - The LRO (left-to-right-override) formatting character. +‬ - The PDF (pop directional formatting) formatting character; closes LRO. +The punctuation is moved around in the source to make it easier to do visual comparisons when the test is run. +--> +<div class="test"> +<div dir="ltr">א <span dir="rtl">3</span></div> +<div dir="ltr">a <span dir="rtl">3</span></div> +<div dir="rtl">א <span dir="ltr">3</span></div> +<div dir="rtl">a <span dir="ltr">3</span></div> +</div> +<div class="ref"> +<div dir="ltr">‭א 3‬</div> +<div dir="ltr">‭a 3‬</div> +<div dir="rtl">‭3 א‬</div> +<div dir="rtl">‭3 a‬</div> +</div> +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-004b.html b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-004b.html new file mode 100644 index 0000000000..6fe74393ae --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-004b.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"> +<title>The dir attribute: numbers isolated from preceding text, auto</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<link rel="help" href='http://www.w3.org/TR/html5/dom.html#requirements-relating-to-the-bidirectional-algorithm'> +<link rel='match' href='reference/dir-isolation-004-ref.html'> +<meta name='assert' content='Numeric element content with a dir attribute is treated as a neutral character and directionally isolated from preceding text.'> +<style type="text/css"> +.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; margin-right: 200px; padding: 5px; clear: both; } +input { margin: 5px; } +</style> +</head> +<body> +<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p> +<!--Notes: +Key to entities used below: +א ... ו - The first six Hebrew letters (strongly RTL). +‭ - The LRO (left-to-right-override) formatting character. +‬ - The PDF (pop directional formatting) formatting character; closes LRO. +The punctuation is moved around in the source to make it easier to do visual comparisons when the test is run. +--> +<div class="test"> +<div dir="ltr">א <span dir="auto">3</span></div> +<div dir="ltr">a <span dir="auto">3</span></div> +<div dir="rtl">א <span dir="auto">3</span></div> +<div dir="rtl">a <span dir="auto">3</span></div> +</div> +<div class="ref"> +<div dir="ltr">‭א 3‬</div> +<div dir="ltr">‭a 3‬</div> +<div dir="rtl">‭3 א‬</div> +<div dir="rtl">‭3 a‬</div> +</div> +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-004c.html b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-004c.html new file mode 100644 index 0000000000..43d994b2f0 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-004c.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"> +<title>The dir attribute: numbers isolated from preceding text, same direction</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<link rel="help" href='http://www.w3.org/TR/html5/dom.html#requirements-relating-to-the-bidirectional-algorithm'> +<link rel='match' href='reference/dir-isolation-004-ref.html'> +<meta name='assert' content='Numeric element content with a dir attribute is treated as a neutral character and directionally isolated from preceding text.'> +<style type="text/css"> +.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; margin-right: 200px; padding: 5px; clear: both; } +input { margin: 5px; } +</style> +</head> +<body> +<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p> +<!--Notes: +Key to entities used below: +א ... ו - The first six Hebrew letters (strongly RTL). +‭ - The LRO (left-to-right-override) formatting character. +‬ - The PDF (pop directional formatting) formatting character; closes LRO. +The punctuation is moved around in the source to make it easier to do visual comparisons when the test is run. +--> +<div class="test"> +<div dir="ltr">א <span dir="ltr">3</span></div> +<div dir="ltr">a <span dir="ltr">3</span></div> +<div dir="rtl">א <span dir="rtl">3</span></div> +<div dir="rtl">a <span dir="rtl">3</span></div> +</div> +<div class="ref"> +<div dir="ltr">‭א 3‬</div> +<div dir="ltr">‭a 3‬</div> +<div dir="rtl">‭3 א‬</div> +<div dir="rtl">‭3 a‬</div> +</div> +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-005a.html b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-005a.html new file mode 100644 index 0000000000..2fbddbd71f --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-005a.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"> +<title>The dir attribute: isolated from following text, opposite direction</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<link rel="help" href='http://www.w3.org/TR/html5/dom.html#requirements-relating-to-the-bidirectional-algorithm'> +<link rel='match' href='reference/dir-isolation-005-ref.html'> +<meta name='assert' content='Element content with a dir attribute is treated as a neutral character and directionally isolated from following text.'> +<style type="text/css"> +.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; margin-right: 200px; padding: 5px; clear: both; } +input { margin: 5px; } +</style> +</head> +<body> +<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p> +<!--Notes: +Key to entities used below: +א ... ו - The first six Hebrew letters (strongly RTL). +‭ - The LRO (left-to-right-override) formatting character. +‬ - The PDF (pop directional formatting) formatting character; closes LRO. +The punctuation is moved around in the source to make it easier to do visual comparisons when the test is run. +--> +<div class="test"> +<div dir="ltr"><span dir="rtl">א</span> ב...</div> +<div dir="ltr"><span dir="rtl">a</span> b...</div> +<div dir="rtl"><span dir="ltr">a</span> b...</div> +<div dir="rtl"><span dir="ltr">א</span> ב...</div> +</div> +<div class="ref"> +<div dir="ltr">‭א ב...‬</div> +<div dir="ltr">‭a b...‬</div> +<div dir="rtl">‭...b a‬</div> +<div dir="rtl">‭...ב א‬</div> +</div> +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-005b.html b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-005b.html new file mode 100644 index 0000000000..d61e258f21 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-005b.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"> +<title>The dir attribute: isolated from following text, auto</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<link rel="help" href='http://www.w3.org/TR/html5/dom.html#requirements-relating-to-the-bidirectional-algorithm'> +<link rel='match' href='reference/dir-isolation-005-ref.html'> +<meta name='assert' content='Element content with a dir attribute is treated as a neutral character and directionally isolated from following text.'> +<style type="text/css"> +.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; margin-right: 200px; padding: 5px; clear: both; } +input { margin: 5px; } +</style> +</head> +<body> +<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p> +<!--Notes: +Key to entities used below: +א ... ו - The first six Hebrew letters (strongly RTL). +‭ - The LRO (left-to-right-override) formatting character. +‬ - The PDF (pop directional formatting) formatting character; closes LRO. +The punctuation is moved around in the source to make it easier to do visual comparisons when the test is run. +--> +<div class="test"> +<div dir="ltr"><span dir="auto">א</span> ב...</div> +<div dir="ltr"><span dir="auto">a</span> b...</div> +<div dir="rtl"><span dir="auto">a</span> b...</div> +<div dir="rtl"><span dir="auto">א</span> ב...</div> +</div> +<div class="ref"> +<div dir="ltr">‭א ב...‬</div> +<div dir="ltr">‭a b...‬</div> +<div dir="rtl">‭...b a‬</div> +<div dir="rtl">‭...ב א‬</div> +</div> +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-005c.html b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-005c.html new file mode 100644 index 0000000000..d544275b2f --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-005c.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"> +<title>The dir attribute: isolated from following text, same direction</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<link rel="help" href='http://www.w3.org/TR/html5/dom.html#requirements-relating-to-the-bidirectional-algorithm'> +<link rel='match' href='reference/dir-isolation-005-ref.html'> +<meta name='assert' content='Element content with a dir attribute is treated as a neutral character and directionally isolated from following text.'> +<style type="text/css"> +.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; margin-right: 200px; padding: 5px; clear: both; } +input { margin: 5px; } +</style> +</head> +<body> +<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p> +<!--Notes: +Key to entities used below: +א ... ו - The first six Hebrew letters (strongly RTL). +‭ - The LRO (left-to-right-override) formatting character. +‬ - The PDF (pop directional formatting) formatting character; closes LRO. +The punctuation is moved around in the source to make it easier to do visual comparisons when the test is run. +--> +<div class="test"> +<div dir="ltr"><span dir="ltr">א</span> ב...</div> +<div dir="ltr"><span dir="ltr">a</span> b...</div> +<div dir="rtl"><span dir="rtl">a</span> b...</div> +<div dir="rtl"><span dir="rtl">א</span> ב...</div> +</div> +<div class="ref"> +<div dir="ltr">‭א ב...‬</div> +<div dir="ltr">‭a b...‬</div> +<div dir="rtl">‭...b a‬</div> +<div dir="rtl">‭...ב א‬</div> +</div> +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-006a.html b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-006a.html new file mode 100644 index 0000000000..430df00d9f --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-006a.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"> +<title>The dir attribute: isolated from following text with intervening neutrals, opposite direction</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<link rel="help" href='http://www.w3.org/TR/html5/dom.html#requirements-relating-to-the-bidirectional-algorithm'> +<link rel='match' href='reference/dir-isolation-006-ref.html'> +<meta name='assert' content='Element content with a dir attribute is treated as a neutral character and directionally isolated from following text despite intervening neutrals.'> +<style type="text/css"> +.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; margin-right: 200px; padding: 5px; clear: both; } +input { margin: 5px; } +</style> +</head> +<body> +<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p> +<!--Notes: +Key to entities used below: +א ... ו - The first six Hebrew letters (strongly RTL). +‭ - The LRO (left-to-right-override) formatting character. +‬ - The PDF (pop directional formatting) formatting character; closes LRO. +The punctuation is moved around in the source to make it easier to do visual comparisons when the test is run. +--> +<div class="test"> +<div dir="ltr"><span dir="rtl">> א ></span> > ב >...</div> +<div dir="rtl"><span dir="ltr">> a ></span> > b >...</div> +</div> +<div class="ref"> +<div dir="ltr">‭< א < > ב >...‬</div> +<div dir="rtl">‭...< b < > a >‬</div> +</div> +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-006b.html b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-006b.html new file mode 100644 index 0000000000..a6da487152 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-006b.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"> +<title>The dir attribute: isolated from following text with intervening neutrals, auto</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<link rel="help" href='http://www.w3.org/TR/html5/dom.html#requirements-relating-to-the-bidirectional-algorithm'> +<link rel='match' href='reference/dir-isolation-006-ref.html'> +<meta name='assert' content='Element content with a dir attribute is treated as a neutral character and directionally isolated from following text despite intervening neutrals.'> +<style type="text/css"> +.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; margin-right: 200px; padding: 5px; clear: both; } +input { margin: 5px; } +</style> +</head> +<body> +<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p> +<!--Notes: +Key to entities used below: +א ... ו - The first six Hebrew letters (strongly RTL). +‭ - The LRO (left-to-right-override) formatting character. +‬ - The PDF (pop directional formatting) formatting character; closes LRO. +The punctuation is moved around in the source to make it easier to do visual comparisons when the test is run. +--> +<div class="test"> +<div dir="ltr"><span dir="auto">> א ></span> > ב >...</div> +<div dir="rtl"><span dir="auto">> a ></span> > b >...</div> +</div> +<div class="ref"> +<div dir="ltr">‭< א < > ב >...‬</div> +<div dir="rtl">‭...< b < > a >‬</div> +</div> +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-006c.html b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-006c.html new file mode 100644 index 0000000000..3407d37f38 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-006c.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"> +<title>The dir attribute: isolated from following text with intervening neutrals, same direction</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<link rel="help" href='http://www.w3.org/TR/html5/dom.html#requirements-relating-to-the-bidirectional-algorithm'> +<link rel='match' href='reference/dir-isolation-006c-ref.html'> +<meta name='assert' content='Element content with a dir attribute is treated as a neutral character and directionally isolated from following text despite intervening neutrals.'> +<style type="text/css"> +.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; margin-right: 200px; padding: 5px; clear: both; } +input { margin: 5px; } +</style> +</head> +<body> +<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p> +<!--Notes: +Key to entities used below: +א ... ו - The first six Hebrew letters (strongly RTL). +‭ - The LRO (left-to-right-override) formatting character. +‬ - The PDF (pop directional formatting) formatting character; closes LRO. +The punctuation is moved around in the source to make it easier to do visual comparisons when the test is run. +--> +<div class="test"> +<div dir="ltr"><span dir="ltr">> א ></span> > ב >...</div> +<div dir="rtl"><span dir="rtl">> a ></span> > b >...</div> +</div> +<div class="ref"> +<div dir="ltr">‭> א > > ב >...‬</div> +<div dir="rtl">‭...< b < < a <‬</div> +</div> +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-007a.html b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-007a.html new file mode 100644 index 0000000000..e8b37b1b97 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-007a.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"> +<title>The dir attribute: isolated from immediately following text, opposite direction</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<link rel="help" href='http://www.w3.org/TR/html5/dom.html#requirements-relating-to-the-bidirectional-algorithm'> +<link rel='match' href='reference/dir-isolation-007-ref.html'> +<meta name='assert' content='Element content with a dir attribute is treated as a neutral character and directionally isolated from following text even with no intervening white space.'> +<style type="text/css"> +.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; margin-right: 200px; padding: 5px; clear: both; } +input { margin: 5px; } +</style> +</head> +<body> +<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p> +<!--Notes: +Key to entities used below: +א ... ו - The first six Hebrew letters (strongly RTL). +‭ - The LRO (left-to-right-override) formatting character. +‬ - The PDF (pop directional formatting) formatting character; closes LRO. +The punctuation is moved around in the source to make it easier to do visual comparisons when the test is run. +--> +<div class="test"> +<div dir="ltr"><span dir="rtl">א</span>ב...</div> +<div dir="ltr"><span dir="rtl">a</span>b...</div> +<div dir="rtl"><span dir="ltr">a</span>b...</div> +<div dir="rtl"><span dir="ltr">א</span>ב...</div> +</div> +<div class="ref"> +<div dir="ltr">‭אב...‬</div> +<div dir="ltr">‭ab...‬</div> +<div dir="rtl">‭...ba‬</div> +<div dir="rtl">‭...בא‬</div> +</div> +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-007b.html b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-007b.html new file mode 100644 index 0000000000..c54e63de7c --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-007b.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"> +<title>The dir attribute: isolated from immediately following text, auto</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<link rel="help" href='http://www.w3.org/TR/html5/dom.html#requirements-relating-to-the-bidirectional-algorithm'> +<link rel='match' href='reference/dir-isolation-007-ref.html'> +<meta name='assert' content='Element content with a dir attribute is treated as a neutral character and directionally isolated from following text even with no intervening white space.'> +<style type="text/css"> +.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; margin-right: 200px; padding: 5px; clear: both; } +input { margin: 5px; } +</style> +</head> +<body> +<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p> +<!--Notes: +Key to entities used below: +א ... ו - The first six Hebrew letters (strongly RTL). +‭ - The LRO (left-to-right-override) formatting character. +‬ - The PDF (pop directional formatting) formatting character; closes LRO. +The punctuation is moved around in the source to make it easier to do visual comparisons when the test is run. +--> +<div class="test"> +<div dir="ltr"><span dir="auto">א</span>ב...</div> +<div dir="ltr"><span dir="auto">a</span>b...</div> +<div dir="rtl"><span dir="auto">a</span>b...</div> +<div dir="rtl"><span dir="auto">א</span>ב...</div> +</div> +<div class="ref"> +<div dir="ltr">‭אב...‬</div> +<div dir="ltr">‭ab...‬</div> +<div dir="rtl">‭...ba‬</div> +<div dir="rtl">‭...בא‬</div> +</div> +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-007c.html b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-007c.html new file mode 100644 index 0000000000..b9c5219b8d --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-007c.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"> +<title>The dir attribute: isolated from immediately following text, same direction</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<link rel="help" href='http://www.w3.org/TR/html5/dom.html#requirements-relating-to-the-bidirectional-algorithm'> +<link rel='match' href='reference/dir-isolation-007-ref.html'> +<meta name='assert' content='Element content with a dir attribute is treated as a neutral character and directionally isolated from following text even with no intervening white space.'> +<style type="text/css"> +.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; margin-right: 200px; padding: 5px; clear: both; } +input { margin: 5px; } +</style> +</head> +<body> +<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p> +<!--Notes: +Key to entities used below: +א ... ו - The first six Hebrew letters (strongly RTL). +‭ - The LRO (left-to-right-override) formatting character. +‬ - The PDF (pop directional formatting) formatting character; closes LRO. +The punctuation is moved around in the source to make it easier to do visual comparisons when the test is run. +--> +<div class="test"> +<div dir="ltr"><span dir="ltr">א</span>ב...</div> +<div dir="ltr"><span dir="ltr">a</span>b...</div> +<div dir="rtl"><span dir="rtl">a</span>b...</div> +<div dir="rtl"><span dir="rtl">א</span>ב...</div> +</div> +<div class="ref"> +<div dir="ltr">‭אב...‬</div> +<div dir="ltr">‭ab...‬</div> +<div dir="rtl">‭...ba‬</div> +<div dir="rtl">‭...בא‬</div> +</div> +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-008a.html b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-008a.html new file mode 100644 index 0000000000..1455fd552b --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-008a.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"> +<title>The dir attribute: isolated from preceding text, opposite direction</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<link rel="help" href='http://www.w3.org/TR/html5/dom.html#requirements-relating-to-the-bidirectional-algorithm'> +<link rel='match' href='reference/dir-isolation-008-ref.html'> +<meta name='assert' content='Element content with a dir attribute is treated as a neutral character and directionally isolated from preceding text.'> +<style type="text/css"> +.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; margin-right: 200px; padding: 5px; clear: both; } +input { margin: 5px; } +</style> +</head> +<body> +<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p> +<!--Notes: +Key to entities used below: +א ... ו - The first six Hebrew letters (strongly RTL). +‭ - The LRO (left-to-right-override) formatting character. +‬ - The PDF (pop directional formatting) formatting character; closes LRO. +The punctuation is moved around in the source to make it easier to do visual comparisons when the test is run. +--> +<div class="test"> +<div dir="ltr">א <span dir="rtl">ב</span></div> +<div dir="ltr">a <span dir="rtl">b</span></div> +<div dir="rtl">א <span dir="ltr">ב</span></div> +<div dir="rtl">a <span dir="ltr">b</span></div> +</div> +<div class="ref"> +<div dir="ltr">‭א ב‬</div> +<div dir="ltr">‭a b‬</div> +<div dir="rtl">‭ב א‬</div> +<div dir="rtl">‭b a‬</div> +</div> +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-008b.html b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-008b.html new file mode 100644 index 0000000000..f12e6d67bf --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-008b.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"> +<title>The dir attribute: isolated from preceding text, auto</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<link rel="help" href='http://www.w3.org/TR/html5/dom.html#requirements-relating-to-the-bidirectional-algorithm'> +<link rel='match' href='reference/dir-isolation-008-ref.html'> +<meta name='assert' content='Element content with a dir attribute is treated as a neutral character and directionally isolated from preceding text.'> +<style type="text/css"> +.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; margin-right: 200px; padding: 5px; clear: both; } +input { margin: 5px; } +</style> +</head> +<body> +<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p> +<!--Notes: +Key to entities used below: +א ... ו - The first six Hebrew letters (strongly RTL). +‭ - The LRO (left-to-right-override) formatting character. +‬ - The PDF (pop directional formatting) formatting character; closes LRO. +The punctuation is moved around in the source to make it easier to do visual comparisons when the test is run. +--> +<div class="test"> +<div dir="ltr">א <span dir="auto">ב</span></div> +<div dir="ltr">a <span dir="auto">b</span></div> +<div dir="rtl">א <span dir="auto">ב</span></div> +<div dir="rtl">a <span dir="auto">b</span></div> +</div> +<div class="ref"> +<div dir="ltr">‭א ב‬</div> +<div dir="ltr">‭a b‬</div> +<div dir="rtl">‭ב א‬</div> +<div dir="rtl">‭b a‬</div> +</div> +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-008c.html b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-008c.html new file mode 100644 index 0000000000..b1754cf23e --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-008c.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"> +<title>The dir attribute: isolated from preceding text, same direction</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<link rel="help" href='http://www.w3.org/TR/html5/dom.html#requirements-relating-to-the-bidirectional-algorithm'> +<link rel='match' href='reference/dir-isolation-008-ref.html'> +<meta name='assert' content='Element content with a dir attribute is treated as a neutral character and directionally isolated from preceding text.'> +<style type="text/css"> +.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; margin-right: 200px; padding: 5px; clear: both; } +input { margin: 5px; } +</style> +</head> +<body> +<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p> +<!--Notes: +Key to entities used below: +א ... ו - The first six Hebrew letters (strongly RTL). +‭ - The LRO (left-to-right-override) formatting character. +‬ - The PDF (pop directional formatting) formatting character; closes LRO. +The punctuation is moved around in the source to make it easier to do visual comparisons when the test is run. +--> +<div class="test"> +<div dir="ltr">א <span dir="ltr">ב</span></div> +<div dir="ltr">a <span dir="ltr">b</span></div> +<div dir="rtl">א <span dir="rtl">ב</span></div> +<div dir="rtl">a <span dir="rtl">b</span></div> +</div> +<div class="ref"> +<div dir="ltr">‭א ב‬</div> +<div dir="ltr">‭a b‬</div> +<div dir="rtl">‭ב א‬</div> +<div dir="rtl">‭b a‬</div> +</div> +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-009a.html b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-009a.html new file mode 100644 index 0000000000..63a9706bae --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-009a.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"/> +<title>The dir attribute: isolated from surrounding text, opposite direction</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<link rel="help" href='http://www.w3.org/TR/html5/dom.html#requirements-relating-to-the-bidirectional-algorithm'> +<link rel='match' href='reference/dir-isolation-009-ref.html'> +<meta name='assert' content="Element content with a dir attribute is treated as a neutral character and directionally isolated from surrounding text."> +<style type='text/css'> +.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; margin-right: 200px; padding: 5px; clear: both; } +input { margin: 5px; } +</style> +</head> +<body> +<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p> +<!-- Key to entities used below: +א ... ו - The first six Hebrew letters (strongly RTL). +‭ - The LRO (left-to-right-override) formatting character. +‬ - The PDF (pop directional formatting) formatting character; closes LRO. +If the BDI in the test's first DIV were a SPAN, its b would prevent the א and the ב +from forming a single RTL run and thus keep the >s between from being mirrored into <s. +--> +<div class="test"> +<div dir="ltr">א > <span dir="rtl">> b ></span> > ג...</div> +<div dir="rtl">a > <span dir="ltr">> ב ></span> > c...</div> +</div> +<div class="ref"> +<div dir="ltr">‭ג < < b < < א...‬</div> +<div dir="rtl">‭...a > > ב > > c‬</div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-009b.html b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-009b.html new file mode 100644 index 0000000000..57098fa75a --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-009b.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"/> +<title>The dir attribute: isolated from surrounding text, auto</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<link rel="help" href='http://www.w3.org/TR/html5/dom.html#requirements-relating-to-the-bidirectional-algorithm'> +<link rel='match' href='reference/dir-isolation-009b-ref.html'> +<meta name='assert' content="Element content with a dir attribute is treated as a neutral character and directionally isolated from surrounding text."> +<style type='text/css'> +.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; margin-right: 200px; padding: 5px; clear: both; } +input { margin: 5px; } +</style> +</head> +<body> +<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p> +<!-- Key to entities used below: +א ... ו - The first six Hebrew letters (strongly RTL). +‭ - The LRO (left-to-right-override) formatting character. +‬ - The PDF (pop directional formatting) formatting character; closes LRO. +If the BDI in the test's first DIV were a SPAN, its b would prevent the א and the ב +from forming a single RTL run and thus keep the >s between from being mirrored into <s. +--> +<div class="test"> +<div dir="ltr">א > <span dir="auto">> b ></span> > ג...</div> +<div dir="rtl">a > <span dir="auto">> ב ></span> > c...</div> +</div> +<div class="ref"> +<div dir="ltr">‭ג < > b > < א...‬</div> +<div dir="rtl">‭...a > < ב < > c‬</div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-009c.html b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-009c.html new file mode 100644 index 0000000000..4aac3184ee --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/dir-isolation-009c.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html lang="en" > +<head> +<meta charset="utf-8"/> +<title>The dir attribute: isolated from surrounding text, same direction</title> +<link rel='author' title='Richard Ishida' href='mailto:ishida@w3.org'> +<link rel="help" href='http://www.w3.org/TR/html5/dom.html#requirements-relating-to-the-bidirectional-algorithm'> +<link rel='match' href='reference/dir-isolation-009b-ref.html'> +<meta name='assert' content="Element content with a dir attribute is treated as a neutral character and directionally isolated from surrounding text."> +<style type='text/css'> +.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; margin-right: 200px; padding: 5px; clear: both; } +input { margin: 5px; } +</style> +</head> +<body> +<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p> +<!-- Key to entities used below: +א ... ו - The first six Hebrew letters (strongly RTL). +‭ - The LRO (left-to-right-override) formatting character. +‬ - The PDF (pop directional formatting) formatting character; closes LRO. +If the BDI in the test's first DIV were a SPAN, its b would prevent the א and the ב +from forming a single RTL run and thus keep the >s between from being mirrored into <s. +--> +<div class="test"> +<div dir="ltr">א > <span dir="ltr">> b ></span> > ג...</div> +<div dir="rtl">a > <span dir="rtl">> ב ></span> > c...</div> +</div> +<div class="ref"> +<div dir="ltr">‭ג < > b > < א...‬</div> +<div dir="rtl">‭...a > < ב < > c‬</div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/reference/dir-isolation-001-ref.html b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/reference/dir-isolation-001-ref.html new file mode 100644 index 0000000000..b5882eb7a3 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/reference/dir-isolation-001-ref.html @@ -0,0 +1,16 @@ +<!doctype html> +<html> +<head> +<meta charset="utf-8"/> +<title>The dir attribute: isolated from following number, opposite direction</title> +<style type="text/css"> +.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; margin-right: 200px; padding: 5px; clear: both; } +input { margin: 5px; } +</style> +</head> +<body> +<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p> +<div class="ref"><div dir="ltr">‭א 3‬</div><div dir="ltr">‭a 3‬</div><div dir="rtl">‭3 א‬</div><div dir="rtl">‭3 a‬</div></div> +<div class="ref"><div dir="ltr">‭א 3‬</div><div dir="ltr">‭a 3‬</div><div dir="rtl">‭3 א‬</div><div dir="rtl">‭3 a‬</div></div> +</body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/reference/dir-isolation-002a-ref.html b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/reference/dir-isolation-002a-ref.html new file mode 100644 index 0000000000..f28559b5a1 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/reference/dir-isolation-002a-ref.html @@ -0,0 +1,16 @@ +<!doctype html> +<html> +<head> +<meta charset="utf-8"/> +<title>The dir attribute: isolated from following number with intervening neutrals, opposite direction</title> +<style type="text/css"> +.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; margin-right: 200px; padding: 5px; clear: both; } +input { margin: 5px; } +</style> +</head> +<body> +<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p> +<div class="ref"><div dir="ltr">‭< א < > 3 >‬</div><div dir="ltr">‭< a < > 3 >‬</div><div dir="rtl">‭< 3 < > א >‬</div><div dir="rtl">‭< 3 < > a >‬</div></div> +<div class="ref"><div dir="ltr">‭< א < > 3 >‬</div><div dir="ltr">‭< a < > 3 >‬</div><div dir="rtl">‭< 3 < > א >‬</div><div dir="rtl">‭< 3 < > a >‬</div></div> +</body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/reference/dir-isolation-002b-ref.html b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/reference/dir-isolation-002b-ref.html new file mode 100644 index 0000000000..d4eda2189d --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/reference/dir-isolation-002b-ref.html @@ -0,0 +1,16 @@ +<!doctype html> +<html> +<head> +<meta charset="utf-8"/> +<title>The dir attribute: isolated from following number with intervening neutrals, auto</title> +<style type="text/css"> +.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; margin-right: 200px; padding: 5px; clear: both; } +input { margin: 5px; } +</style> +</head> +<body> +<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p> +<div class="ref"><div dir="ltr">‭< א < > 3 >‬</div><div dir="ltr">‭> a > > 3 >‬</div><div dir="rtl">‭< 3 < < א <‬</div><div dir="rtl">‭< 3 < > a >‬</div></div> +<div class="ref"><div dir="ltr">‭< א < > 3 >‬</div><div dir="ltr">‭> a > > 3 >‬</div><div dir="rtl">‭< 3 < < א <‬</div><div dir="rtl">‭< 3 < > a >‬</div></div> +</body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/reference/dir-isolation-002c-ref.html b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/reference/dir-isolation-002c-ref.html new file mode 100644 index 0000000000..6c21d0147d --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/reference/dir-isolation-002c-ref.html @@ -0,0 +1,16 @@ +<!doctype html> +<html> +<head> +<meta charset="utf-8"/> +<title>The dir attribute: isolated from following number with intervening neutrals, same direction</title> +<style type="text/css"> +.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; margin-right: 200px; padding: 5px; clear: both; } +input { margin: 5px; } +</style> +</head> +<body> +<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p> +<div class="ref"><div dir="ltr">‭> א > > 3 >‬</div><div dir="ltr">‭> a > > 3 >‬</div><div dir="rtl">‭< 3 < < א <‬</div><div dir="rtl">‭< 3 < < a <‬</div></div> +<div class="ref"><div dir="ltr">‭> א > > 3 >‬</div><div dir="ltr">‭> a > > 3 >‬</div><div dir="rtl">‭< 3 < < א <‬</div><div dir="rtl">‭< 3 < < a <‬</div></div> +</body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/reference/dir-isolation-003-ref.html b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/reference/dir-isolation-003-ref.html new file mode 100644 index 0000000000..4c29838ee4 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/reference/dir-isolation-003-ref.html @@ -0,0 +1,16 @@ +<!doctype html> +<html> +<head> +<meta charset="utf-8"/> +<title>The dir attribute: isolated from immediately following number, opposite direction</title> +<style type="text/css"> +.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; margin-right: 200px; padding: 5px; clear: both; } +input { margin: 5px; } +</style> +</head> +<body> +<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p> +<div class="ref"><div dir="ltr">‭א3‬</div><div dir="ltr">‭a3‬</div><div dir="rtl">‭3א‬</div><div dir="rtl">‭3a‬</div></div> +<div class="ref"><div dir="ltr">‭א3‬</div><div dir="ltr">‭a3‬</div><div dir="rtl">‭3א‬</div><div dir="rtl">‭3a‬</div></div> +</body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/reference/dir-isolation-004-ref.html b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/reference/dir-isolation-004-ref.html new file mode 100644 index 0000000000..cb83dde584 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/reference/dir-isolation-004-ref.html @@ -0,0 +1,16 @@ +<!doctype html> +<html> +<head> +<meta charset="utf-8"/> +<title>The dir attribute: numbers isolated from preceding text, opposite direction</title> +<style type="text/css"> +.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; margin-right: 200px; padding: 5px; clear: both; } +input { margin: 5px; } +</style> +</head> +<body> +<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p> +<div class="ref"><div dir="ltr">‭א 3‬</div><div dir="ltr">‭a 3‬</div><div dir="rtl">‭3 א‬</div><div dir="rtl">‭3 a‬</div></div> +<div class="ref"><div dir="ltr">‭א 3‬</div><div dir="ltr">‭a 3‬</div><div dir="rtl">‭3 א‬</div><div dir="rtl">‭3 a‬</div></div> +</body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/reference/dir-isolation-005-ref.html b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/reference/dir-isolation-005-ref.html new file mode 100644 index 0000000000..4a6c301aa1 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/reference/dir-isolation-005-ref.html @@ -0,0 +1,16 @@ +<!doctype html> +<html> +<head> +<meta charset="utf-8"/> +<title>The dir attribute: isolated from following text, opposite direction</title> +<style type="text/css"> +.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; margin-right: 200px; padding: 5px; clear: both; } +input { margin: 5px; } +</style> +</head> +<body> +<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p> +<div class="ref"><div dir="ltr">‭א ב...‬</div><div dir="ltr">‭a b...‬</div><div dir="rtl">‭...b a‬</div><div dir="rtl">‭...ב א‬</div></div> +<div class="ref"><div dir="ltr">‭א ב...‬</div><div dir="ltr">‭a b...‬</div><div dir="rtl">‭...b a‬</div><div dir="rtl">‭...ב א‬</div></div> +</body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/reference/dir-isolation-006-ref.html b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/reference/dir-isolation-006-ref.html new file mode 100644 index 0000000000..0f6b7bbbd0 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/reference/dir-isolation-006-ref.html @@ -0,0 +1,16 @@ +<!doctype html> +<html> +<head> +<meta charset="utf-8"/> +<title>The dir attribute: isolated from following text with intervening neutrals, opposite direction</title> +<style type="text/css"> +.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; margin-right: 200px; padding: 5px; clear: both; } +input { margin: 5px; } +</style> +</head> +<body> +<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p> +<div class="ref"><div dir="ltr">‭< א < > ב >...‬</div><div dir="rtl">‭...< b < > a >‬</div></div> +<div class="ref"><div dir="ltr">‭< א < > ב >...‬</div><div dir="rtl">‭...< b < > a >‬</div></div> +</body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/reference/dir-isolation-006c-ref.html b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/reference/dir-isolation-006c-ref.html new file mode 100644 index 0000000000..0347c0910c --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/reference/dir-isolation-006c-ref.html @@ -0,0 +1,16 @@ +<!doctype html> +<html> +<head> +<meta charset="utf-8"/> +<title>The dir attribute: isolated from following text with intervening neutrals, same direction</title> +<style type="text/css"> +.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; margin-right: 200px; padding: 5px; clear: both; } +input { margin: 5px; } +</style> +</head> +<body> +<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p> +<div class="ref"><div dir="ltr">‭> א > > ב >...‬</div><div dir="rtl">‭...< b < < a <‬</div></div> +<div class="ref"><div dir="ltr">‭> א > > ב >...‬</div><div dir="rtl">‭...< b < < a <‬</div></div> +</body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/reference/dir-isolation-007-ref.html b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/reference/dir-isolation-007-ref.html new file mode 100644 index 0000000000..665153d649 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/reference/dir-isolation-007-ref.html @@ -0,0 +1,16 @@ +<!doctype html> +<html> +<head> +<meta charset="utf-8"/> +<title>The dir attribute: isolated from immediately following text, opposite direction</title> +<style type="text/css"> +.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; margin-right: 200px; padding: 5px; clear: both; } +input { margin: 5px; } +</style> +</head> +<body> +<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p> +<div class="ref"><div dir="ltr">‭אב...‬</div><div dir="ltr">‭ab...‬</div><div dir="rtl">‭...ba‬</div><div dir="rtl">‭...בא‬</div></div> +<div class="ref"><div dir="ltr">‭אב...‬</div><div dir="ltr">‭ab...‬</div><div dir="rtl">‭...ba‬</div><div dir="rtl">‭...בא‬</div></div> +</body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/reference/dir-isolation-008-ref.html b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/reference/dir-isolation-008-ref.html new file mode 100644 index 0000000000..8eb90f8b79 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/reference/dir-isolation-008-ref.html @@ -0,0 +1,16 @@ +<!doctype html> +<html> +<head> +<meta charset="utf-8"/> +<title>The dir attribute: isolated from preceding text, opposite direction</title> +<style type="text/css"> +.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; margin-right: 200px; padding: 5px; clear: both; } +input { margin: 5px; } +</style> +</head> +<body> +<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p> +<div class="ref"><div dir="ltr">‭א ב‬</div><div dir="ltr">‭a b‬</div><div dir="rtl">‭ב א‬</div><div dir="rtl">‭b a‬</div></div> +<div class="ref"><div dir="ltr">‭א ב‬</div><div dir="ltr">‭a b‬</div><div dir="rtl">‭ב א‬</div><div dir="rtl">‭b a‬</div></div> +</body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/reference/dir-isolation-009-ref.html b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/reference/dir-isolation-009-ref.html new file mode 100644 index 0000000000..1d2f57c6cf --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/reference/dir-isolation-009-ref.html @@ -0,0 +1,16 @@ +<!doctype html> +<html> +<head> +<meta charset="utf-8"/> +<title>The dir attribute: isolated from surrounding text, opposite direction</title> +<style type="text/css"> +.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; margin-right: 200px; padding: 5px; clear: both; } +input { margin: 5px; } +</style> +</head> +<body> +<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p> +<div class="ref"><div dir="ltr">‭ג < < b < < א...‬</div><div dir="rtl">‭...a > > ב > > c‬</div></div> +<div class="ref"><div dir="ltr">‭ג < < b < < א...‬</div><div dir="rtl">‭...a > > ב > > c‬</div></div> +</body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/reference/dir-isolation-009b-ref.html b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/reference/dir-isolation-009b-ref.html new file mode 100644 index 0000000000..30ee14c6c0 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/requirements-relating-to-bidirectional-algorithm-formatting-characters/reference/dir-isolation-009b-ref.html @@ -0,0 +1,16 @@ +<!doctype html> +<html> +<head> +<meta charset="utf-8"/> +<title>The dir attribute: isolated from surrounding text, auto</title> +<style type="text/css"> +.test, .ref { font-size: 150%; border: 1px solid orange; margin: 10px; margin-right: 200px; padding: 5px; clear: both; } +input { margin: 5px; } +</style> +</head> +<body> +<p class="instructions" dir="ltr">Test passes if the two boxes are identical.</p> +<div class="ref"><div dir="ltr">‭ג < > b > < א...‬</div><div dir="rtl">‭...a > < ב < > c‬</div></div> +<div class="ref"><div dir="ltr">‭ג < > b > < א...‬</div><div dir="rtl">‭...a > < ב < > c‬</div></div> +</body> +</html> diff --git a/testing/web-platform/tests/html/dom/elements/the-innertext-and-outertext-properties/dynamic-getter.html b/testing/web-platform/tests/html/dom/elements/the-innertext-and-outertext-properties/dynamic-getter.html new file mode 100644 index 0000000000..e34fcf5ac1 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/the-innertext-and-outertext-properties/dynamic-getter.html @@ -0,0 +1,88 @@ +<!DOCTYPE html> +<title>innerText/outerText getter test with dynamic style changes</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id="container"></div> +<script> +let container = document.querySelector('#container'); + +function testText(html, expectedPlain, msg, mutate) { + test(function() { + container.innerHTML = html; + + // Cause a flush of style and layout + document.body.offsetTop; + + mutate(); + + var e = document.getElementById('target'); + if (!e) { + e = container.firstChild; + } + assert_equals(e.innerText, expectedPlain, "innerText"); + assert_equals(e.outerText, expectedPlain, "outerText"); + container.textContext = ''; + }, msg + ' (' + format_value(html) + ')'); +} + +function setStyle(id, attr, value) { + let el = document.getElementById(id); + if (el) { + el.style[attr] = value; + } +} + +testText("<div id='target'><div id='child'>abc", "ABC", + "text-transform applied to child element", function() { + setStyle("child", "text-transform", "uppercase"); + }); +testText("<div id='parent'><div id='target'>abc", "ABC", + "text-transform applied to parent element", function() { + setStyle("parent", "text-transform", "uppercase"); + }); + +testText("<div id='target'>abc<div id='child'>def", "abc", + "display: none applied to child element", function() { + setStyle("child", "display", "none"); + }); +testText("<div id='parent'>invisible<div id='target'>abc", "abc", + "display: none applied to parent element", function() { + setStyle("parent", "display", "none"); + }); + +testText("<div id='target'>abc", "abc\ndef", + "insert node into sub-tree", function() { + let el = document.getElementById("target"); + if (el) { + let c = document.createTextNode("def"); + let d = document.createElement("div"); + d.appendChild(c); + el.appendChild(d); + } + }); + +testText("<div id='target'>abc<div id='remove'>def", "abc", + "remove node from sub-tree", function() { + let el = document.getElementById("target"); + let victim = document.getElementById("remove"); + if (el && victim) { + el.removeChild(victim); + } + }); + +testText("<div id='target'>", "abcdef", + "insert whole sub-tree", function() { + var el = document.getElementById("target"); + if (el) { + var def = document.createTextNode("def"); + var s = document.createElement("span"); + s.appendChild(def); + + var abc = document.createTextNode("abc"); + var d = document.createElement("div"); + d.appendChild(abc); + d.appendChild(s); + el.appendChild(d); + } + }); +</script> diff --git a/testing/web-platform/tests/html/dom/elements/the-innertext-and-outertext-properties/getter-first-letter-marker-multicol.html b/testing/web-platform/tests/html/dom/elements/the-innertext-and-outertext-properties/getter-first-letter-marker-multicol.html new file mode 100644 index 0000000000..3b579dca1c --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/the-innertext-and-outertext-properties/getter-first-letter-marker-multicol.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>Test innerText/outerText for a combination of a list item with ::first-letter in multicol</title> +<link rel="help" href="https://html.spec.whatwg.org/multipage/dom.html#dom-innertext"> +<link rel="help" href="https://crbug.com/1174985"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + #item { display: list-item; } + #item::first-letter { background: lime; } + .col { column-count: 1; } +</style> +<div id="item" class="col"><div class="col">PASS</div></div> +<script> + test(() => { + assert_equals(item.innerText, "PASS", "innerText"); + assert_equals(item.outerText, "PASS", "outerText"); + }, ""); +</script> diff --git a/testing/web-platform/tests/html/dom/elements/the-innertext-and-outertext-properties/getter-tests.js b/testing/web-platform/tests/html/dom/elements/the-innertext-and-outertext-properties/getter-tests.js new file mode 100644 index 0000000000..fd32e8d69a --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/the-innertext-and-outertext-properties/getter-tests.js @@ -0,0 +1,401 @@ +testText("<div>abc", "abc", "Simplest possible test"); + +/**** white-space:normal ****/ + +testText("<div> abc", "abc", "Leading whitespace removed"); +testText("<div>abc ", "abc", "Trailing whitespace removed"); +testText("<div>abc def", "abc def", "Internal whitespace compressed"); +testText("<div>abc\ndef", "abc def", "\\n converted to space"); +testText("<div>abc\rdef", "abc def", "\\r converted to space"); +testText("<div>abc\tdef", "abc def", "\\t converted to space"); +testText("<div>abc <br>def", "abc\ndef", "Trailing whitespace before hard line break removed"); +testText("<div>abc<br> def", "abc\ndef", "Leading whitespace after hard line break removed"); + +/**** <pre> ****/ + +testText("<pre> abc", " abc", "Leading whitespace preserved"); +testText("<pre>abc ", "abc ", "Trailing whitespace preserved"); +testText("<pre>abc def", "abc def", "Internal whitespace preserved"); +testText("<pre>abc\ndef", "abc\ndef", "\\n preserved"); +testText("<pre>abc\rdef", "abc\ndef", "\\r converted to newline"); +testText("<pre>abc\tdef", "abc\tdef", "\\t preserved"); +testText("<div><pre>abc</pre><pre>def</pre>", "abc\ndef", "Two <pre> siblings"); + +/**** <div style="white-space:pre"> ****/ + +testText("<div style='white-space:pre'> abc", " abc", "Leading whitespace preserved"); +testText("<div style='white-space:pre'>abc ", "abc ", "Trailing whitespace preserved"); +testText("<div style='white-space:pre'>abc def", "abc def", "Internal whitespace preserved"); +testText("<div style='white-space:pre'>abc\ndef", "abc\ndef", "\\n preserved"); +testText("<div style='white-space:pre'>abc\rdef", "abc\ndef", "\\r converted to newline"); +testText("<div style='white-space:pre'>abc\tdef", "abc\tdef", "\\t preserved"); + +/**** <span style="white-space:pre"> ****/ + +testText("<span style='white-space:pre'> abc", " abc", "Leading whitespace preserved"); +testText("<span style='white-space:pre'>abc ", "abc ", "Trailing whitespace preserved"); +testText("<span style='white-space:pre'>abc def", "abc def", "Internal whitespace preserved"); +testText("<span style='white-space:pre'>abc\ndef", "abc\ndef", "\\n preserved"); +testText("<span style='white-space:pre'>abc\rdef", "abc\ndef", "\\r converted to newline"); +testText("<span style='white-space:pre'>abc\tdef", "abc\tdef", "\\t preserved"); + +/**** <div style="white-space:pre-line"> ****/ + +testText("<div style='white-space:pre-line'> abc", "abc", "Leading whitespace removed"); +testText("<div style='white-space:pre-line'>abc ", "abc", "Trailing whitespace removed"); +testText("<div style='white-space:pre-line'>abc def", "abc def", "Internal whitespace collapsed"); +testText("<div style='white-space:pre-line'>abc\ndef", "abc\ndef", "\\n preserved"); +testText("<div style='white-space:pre-line'>abc\rdef", "abc\ndef", "\\r converted to newline"); +testText("<div style='white-space:pre-line'>abc\tdef", "abc def", "\\t converted to space"); + +/**** Collapsing whitespace across element boundaries ****/ + +testText("<div><span>abc </span> def", "abc def", "Whitespace collapses across element boundaries"); +testText("<div><span>abc </span><span></span> def", "abc def", "Whitespace collapses across element boundaries"); +testText("<div><span>abc </span><span style='white-space:pre'></span> def", "abc def", "Whitespace collapses across element boundaries"); +testText("<div>abc <input> def", "abc def", "Whitespace around <input> should not be collapsed"); +testText("<div>abc <span style='display:inline-block'></span> def", "abc def", "Whitespace around inline-block should not be collapsed"); +testText("<div>abc <span style='display:inline-block'> def </span> ghi", "abc def ghi", "Trailing space at end of inline-block should be collapsed"); +testText("<div><input> <div>abc</div>", "abc", "Whitespace between <input> and block should be collapsed"); +testText("<div><span style='inline-block'></span> <div>abc</div>", "abc", "Whitespace between inline-block and block should be collapsed"); +testText("<div>abc <img> def", "abc def", "Whitespace around <img> should not be collapsed"); +testText("<div>abc <img width=1 height=1> def", "abc def", "Whitespace around <img> should not be collapsed"); +testText("<div><img> abc", " abc", "Leading whitesapce should not be collapsed"); +testText("<div>abc <img>", "abc ", "Trailing whitesapce should not be collapsed"); +testText("<div>abc <b></b> def", "abc def", "Whitespace around empty span should be collapsed"); +testText("<div>abc <b><i></i></b> def", "abc def", "Whitespace around empty spans should be collapsed"); +testText("<div><canvas></canvas> abc", " abc", "<canvas> should not collapse following space"); +testText("<div>abc <img style='display:block'> def", "abc\ndef", "Replaced element <img> with display:block should be treated as block-level"); +testText("<div>abc <canvas style='display:block'></canvas> def", "abc\ndef", "Replaced element <canvas> with display:block should be treated as block-level"); + +/**** Soft line breaks ****/ + +testText("<div style='width:0'>abc def", "abc def", "Soft line breaks ignored"); +testText("<div style='width:0'>abc-def", "abc-def", "Soft line break at hyphen ignored"); +testText("<div style='width:0'><span>abc</span> <span>def</span>", "abc def", "Whitespace text node preserved"); + +/**** Soft line breaks when word-break:break-word is in effect ****/ +/* (based on Testcase #2 at https://bugzilla.mozilla.org/show_bug.cgi?id=1241631) */ + +testText("<div style='width:1px; word-break:break-word'>Hello Kitty</div>", "Hello Kitty", "Soft breaks ignored in presence of word-break:break-word"); +testText("<div style='width:1px; word-break:break-word'><x>Hello</x> <x>Kitty</x></div>", "Hello Kitty", "Element boundaries ignored for soft break handling (1)"); +testText("<div style='width:1px; word-break:break-word'><x>Hello</x> <x> Kitty</x></div>", "Hello Kitty", "Whitespace collapses across element boundaries at soft break (1)"); +testText("<div style='width:1px; word-break:break-word'><x>Hello</x><x> Kitty</x></div>", "Hello Kitty", "Element boundaries ignored for soft break handling (2)"); +testText("<div style='width:1px; word-break:break-word'><x>Hello </x> <x>Kitty</x></div>", "Hello Kitty", "Whitespace collapses across element boundaries at soft break (2)"); +testText("<div style='width:1px; word-break:break-word'><x>Hello </x><x>Kitty</x></div>", "Hello Kitty", "Element boundaries ignored for soft break handling (3)"); +testText("<div style='width:1px; word-break:break-word'><x>Hello </x><x> Kitty</x></div>", "Hello Kitty", "Whitespace collapses across element boundaries at soft break (3)"); +testText("<div style='width:1px; word-break:break-word'><x>Hello </x> <x> Kitty</x></div>", "Hello Kitty", "Whitespace collapses across element boundaries at soft break (4)"); +testText("<div style='width:1px; word-break:break-word'><x>Hello</x> Kitty</div>", "Hello Kitty", "Element boundaries ignored for soft break handling (4)"); +testText("<div style='width:1px; word-break:break-word'><x>Hello </x>Kitty</div>", "Hello Kitty", "Element boundaries ignored for soft break handling (5)"); +testText("<div style='width:1px; word-break:break-word; text-transform:uppercase'>Hello Kitty</div>", "HELLO KITTY", "Soft breaks ignored, text-transform applied"); +testText("<div style='width:1px; word-break:break-word'>Hello<br> Kitty</div>", "Hello\nKitty", "<br> returned as newline, following space collapsed"); +testText("<div style='width:1px; word-break:break-word'>Hello <br>Kitty</div>", "Hello\nKitty", "<br> returned as newline, preceding space collapsed"); +testText("<div style='width:1px; word-break:break-word'><x>Hello </x> <br> <x> Kitty</x></div>", "Hello\nKitty", "<br> returned as newline, adjacent spaces collapsed across element boundaries"); + +/**** first-line/first-letter ****/ + +testText("<div class='first-line-uppercase' style='width:0'>abc def", "ABC def", "::first-line styles applied"); +testText("<div class='first-letter-uppercase' style='width:0'>abc def", "Abc def", "::first-letter styles applied"); +testText("<div class='first-letter-float' style='width:0'>abc def", "abc def", "::first-letter float ignored"); + +/**** ****/ + +testText("<div> ", "\xA0", " preserved"); + +/**** display:none ****/ + +testText("<div style='display:none'>abc", "abc", "display:none container"); +testText("<div style='display:none'>abc def", "abc def", "No whitespace compression in display:none container"); +testText("<div style='display:none'> abc def ", " abc def ", "No removal of leading/trailing whitespace in display:none container"); +testText("<div>123<span style='display:none'>abc", "123", "display:none child not rendered"); +testText("<div style='display:none'><span id='target'>abc", "abc", "display:none container with non-display-none target child"); +testTextInSVG("<div id='target'>abc", "abc", "non-display-none child of svg"); +testTextInSVG("<div style='display:none' id='target'>abc", "abc", "display:none child of svg"); +testTextInSVG("<div style='display:none'><div id='target'>abc", "abc", "child of display:none child of svg"); + +/**** display:contents ****/ + +if (CSS.supports("display", "contents")) { + testText("<div style='display:contents'>abc", "abc", "display:contents container"); + testText("<div><div style='display:contents'>abc", "abc", "display:contents container"); + testText("<div>123<span style='display:contents'>abc", "123abc", "display:contents rendered"); + testText("<div style='display:contents'> ", "", "display:contents not processed via textContent"); + testText("<div><div style='display:contents'> ", "", "display:contents not processed via textContent"); +} + +/**** visibility:hidden ****/ + +testText("<div style='visibility:hidden'>abc", "", "visibility:hidden container"); +testText("<div>123<span style='visibility:hidden'>abc", "123", "visibility:hidden child not rendered"); +testText("<div style='visibility:hidden'>123<span style='visibility:visible'>abc", "abc", "visibility:visible child rendered"); + +/**** visibility:collapse ****/ + +testText("<table><tbody style='visibility:collapse'><tr><td>abc", "", "visibility:collapse row-group"); +testText("<table><tr style='visibility:collapse'><td>abc", "", "visibility:collapse row"); +testText("<table><tr><td style='visibility:collapse'>abc", "", "visibility:collapse cell"); +testText("<table><tbody style='visibility:collapse'><tr><td style='visibility:visible'>abc", "abc", + "visibility:collapse row-group with visible cell"); +testText("<table><tr style='visibility:collapse'><td style='visibility:visible'>abc", "abc", + "visibility:collapse row with visible cell"); +testText("<div style='display:flex'><span style='visibility:collapse'>1</span><span>2</span></div>", + "2", "visibility:collapse honored on flex item"); +testText("<div style='display:grid'><span style='visibility:collapse'>1</span><span>2</span></div>", + "2", "visibility:collapse honored on grid item"); + +/**** opacity:0 ****/ + +testText("<div style='opacity:0'>abc", "abc", "opacity:0 container"); +testText("<div style='opacity:0'>abc def", "abc def", "Whitespace compression in opacity:0 container"); +testText("<div style='opacity:0'> abc def ", "abc def", "Remove leading/trailing whitespace in opacity:0 container"); +testText("<div>123<span style='opacity:0'>abc", "123abc", "opacity:0 child rendered"); + +/**** generated content ****/ + +testText("<div class='before'>", "", "Generated content not included"); +testText("<div><div class='before'>", "", "Generated content on child not included"); + +/**** innerText on replaced elements ****/ + +testText("<button>abc", "abc", "<button> contents preserved"); +testText("<fieldset>abc", "abc", "<fieldset> contents preserved"); +testText("<fieldset><legend>abc", "abc", "<fieldset> <legend> contents preserved"); +testText("<input type='text' value='abc'>", "", "<input> contents ignored"); +testText("<textarea>abc", "", "<textarea> contents ignored"); +testText("<iframe>abc", "", "<iframe> contents ignored"); +testText("<iframe><div id='target'>abc", "", "<iframe> contents ignored"); +testText("<iframe src='data:text/html,abc'>", "","<iframe> subdocument ignored"); +testText("<audio style='display:block'>abc", "", "<audio> contents ignored"); +testText("<audio style='display:block'><source id='target' class='poke' style='display:block'>", "abc", "<audio> contents ok for element not being rendered"); +testText("<audio style='display:block'><source id='target' class='poke' style='display:none'>", "abc", "<audio> contents ok for element not being rendered"); +testText("<video>abc", "", "<video> contents ignored"); +testText("<video style='display:block'><source id='target' class='poke' style='display:block'>", "abc", "<video> contents ok for element not being rendered"); +testText("<video style='display:block'><source id='target' class='poke' style='display:none'>", "abc", "<video> contents ok for element not being rendered"); +testText("<canvas>abc", "", "<canvas> contents ignored"); +testText("<canvas><div id='target'>abc", "abc", "<canvas><div id='target'> contents ok for element not being rendered"); +testText("<img alt='abc'>", "", "<img> alt text ignored"); +testText("<img src='about:blank' class='poke'>", "", "<img> contents ignored"); +testText("<div><svg><text>abc</text></svg></div>", "abc", "<svg> text contents preserved"); +testText("<div><svg><defs><text>abc</text></defs></svg></div>", "", "<svg><defs> text contents ignored"); +testText("<div><svg><stop>abc</stop></svg></div>", "", "<svg> non-rendered text ignored"); +testText("<svg><foreignObject><span id='target'>abc</span></foreignObject></svg>", "abc", "<foreignObject> contents preserved"); + +/**** <select>, <optgroup> & <option> ****/ + +testText("<select size='1'><option>abc</option><option>def", "abc\ndef", "<select size='1'> contents of options preserved"); +testText("<select size='2'><option>abc</option><option>def", "abc\ndef", "<select size='2'> contents of options preserved"); +testText("<select size='1'><option id='target'>abc</option><option>def", "abc", "<select size='1'> contents of target option preserved"); +testText("<select size='2'><option id='target'>abc</option><option>def", "abc", "<select size='2'> contents of target option preserved"); +testText("<div>a<select></select>bc", "abc", "empty <select>"); +testText("<div>a<select><optgroup></select>bc", "a\nbc", "empty <optgroup> in <select>"); +testText("<div>a<select><option></select>bc", "a\nbc", "empty <option> in <select>"); +testText("<select class='poke'></select>", "", "<select> containing text node child"); +testText("<select><optgroup class='poke-optgroup'></select>", "", "<optgroup> containing <optgroup>"); +testText("<select><optgroup><option>abc</select>", "abc", "<optgroup> containing <option>"); +testText("<select><option class='poke-div'>123</select>", "123\nabc", "<div> in <option>"); +testText("<div>a<optgroup></optgroup>bc", "a\nbc", "empty <optgroup> in <div>"); +testText("<div>a<optgroup>123</optgroup>bc", "a\nbc", "<optgroup> in <div>"); +testText("<div>a<option></option>bc", "a\nbc", "empty <option> in <div>"); +testText("<div>a<option>123</option>bc", "a\n123\nbc", "<option> in <div>"); + +/**** innerText on replaced element children ****/ + +testText("<div><button>abc", "abc", "<button> contents preserved"); +testText("<div><fieldset>abc", "abc", "<fieldset> contents preserved"); +testText("<div><fieldset><legend>abc", "abc", "<fieldset> <legend> contents preserved"); +testText("<div><input type='text' value='abc'>", "", "<input> contents ignored"); +testText("<div><textarea>abc", "", "<textarea> contents ignored"); +testText("<div><select size='1'><option>abc</option><option>def", "abc\ndef", "<select size='1'> contents of options preserved"); +testText("<div><select size='2'><option>abc</option><option>def", "abc\ndef", "<select size='2'> contents of options preserved"); +testText("<div><iframe>abc", "", "<iframe> contents ignored"); +testText("<div><iframe src='data:text/html,abc'>", ""," <iframe> subdocument ignored"); +testText("<div><audio>abc", "", "<audio> contents ignored"); +testText("<div><video>abc", "", "<video> contents ignored"); +testText("<div><canvas>abc", "", "<canvas> contents ignored"); +testText("<div><img alt='abc'>", "", "<img> alt text ignored"); + +/**** Lines around blocks ****/ + +testText("<div>123<div>abc</div>def", "123\nabc\ndef", "Newline at block boundary"); +testText("<div>123<span style='display:block'>abc</span>def", "123\nabc\ndef", "Newline at display:block boundary"); +testText("<div>abc<div></div>def", "abc\ndef", "Empty block induces single line break"); +testText("<div>abc<div></div><div></div>def", "abc\ndef", "Consecutive empty blocks ignored"); +testText("<div><p>abc", "abc", "No blank lines around <p> alone"); +testText("<div><p>abc</p> ", "abc", "No blank lines around <p> followed by only collapsible whitespace"); +testText("<div> <p>abc</p>", "abc", "No blank lines around <p> preceded by only collapsible whitespace"); +testText("<div><p>abc<p>def", "abc\n\ndef", "Blank line between consecutive <p>s"); +testText("<div><p>abc</p> <p>def", "abc\n\ndef", "Blank line between consecutive <p>s separated only by collapsible whitespace"); +testText("<div><p>abc</p><div></div><p>def", "abc\n\ndef", "Blank line between consecutive <p>s separated only by empty block"); +testText("<div><p>abc</p><div>123</div><p>def", "abc\n\n123\n\ndef", "Blank lines between <p>s separated by non-empty block"); +testText("<div>abc<div><p>123</p></div>def", "abc\n\n123\n\ndef", "Blank lines around a <p> in its own block"); +testText("<div>abc<p>def", "abc\n\ndef", "Blank line before <p>"); +testText("<div><p>abc</p>def", "abc\n\ndef", "Blank line after <p>"); +testText("<div><p>abc<p></p><p></p><p>def", "abc\n\ndef", "One blank line between <p>s, ignoring empty <p>s"); +testText("<div style='visibility:hidden'><p><span style='visibility:visible'>abc</span></p>\n<div style='visibility:visible'>def</div>", + "abc\ndef", "Invisible <p> doesn't induce extra line breaks"); +testText("<div>abc<div style='margin:2em'>def", "abc\ndef", "No blank lines around <div> with margin"); +testText("<div>123<span style='display:inline-block'>abc</span>def", "123abcdef", "No newlines at display:inline-block boundary"); +testText("<div>123<span style='display:inline-block'> abc </span>def", "123abcdef", "Leading/trailing space removal at display:inline-block boundary"); +testText("<div>123<p style='margin:0px'>abc</p>def", "123\n\nabc\n\ndef", "Blank lines around <p> even without margin"); +testText("<div>123<h1>abc</h1>def", "123\nabc\ndef", "No blank lines around <h1>"); +testText("<div>123<h2>abc</h2>def", "123\nabc\ndef", "No blank lines around <h2>"); +testText("<div>123<h3>abc</h3>def", "123\nabc\ndef", "No blank lines around <h3>"); +testText("<div>123<h4>abc</h4>def", "123\nabc\ndef", "No blank lines around <h4>"); +testText("<div>123<h5>abc</h5>def", "123\nabc\ndef", "No blank lines around <h5>"); +testText("<div>123<h6>abc</h6>def", "123\nabc\ndef", "No blank lines around <h6>"); + +/**** Spans ****/ + +testText("<div>123<span>abc</span>def", "123abcdef", "<span> boundaries are irrelevant"); +testText("<div>123 <span>abc</span> def", "123 abc def", "<span> boundaries are irrelevant"); +testText("<div style='width:0'>123 <span>abc</span> def", "123 abc def", "<span> boundaries are irrelevant"); +testText("<div>123<em>abc</em>def", "123abcdef", "<em> gets no special treatment"); +testText("<div>123<b>abc</b>def", "123abcdef", "<b> gets no special treatment"); +testText("<div>123<i>abc</i>def", "123abcdef", "<i> gets no special treatment"); +testText("<div>123<strong>abc</strong>def", "123abcdef", "<strong> gets no special treatment"); +testText("<div>123<tt>abc</tt>def", "123abcdef", "<tt> gets no special treatment"); +testText("<div>123<code>abc</code>def", "123abcdef", "<code> gets no special treatment"); + +/**** Soft hyphen ****/ + +testText("<div>abc­def", "abc\xADdef", "soft hyphen preserved"); +testText("<div style='width:0'>abc­def", "abc\xADdef", "soft hyphen preserved"); + +/**** Tables ****/ + +testText("<div><table style='white-space:pre'> <td>abc</td> </table>", "abc", "Ignoring non-rendered table whitespace"); +testText("<div><table><tr><td>abc<td>def</table>", "abc\tdef", "Tab-separated table cells"); +testText("<div><table><tr><td>abc<td><td>def</table>", "abc\t\tdef", "Tab-separated table cells including empty cells"); +testText("<div><table><tr><td>abc<td><td></table>", "abc\t\t", "Tab-separated table cells including trailing empty cells"); +testText("<div><table><tr><td>abc<tr><td>def</table>", "abc\ndef", "Newline-separated table rows"); +testText("<div>abc<table><td>def</table>ghi", "abc\ndef\nghi", "Newlines around table"); +testText("<div><table style='border-collapse:collapse'><tr><td>abc<td>def</table>", "abc\tdef", + "Tab-separated table cells in a border-collapse table"); +testText("<div><table><tfoot>x</tfoot><tbody>y</tbody></table>", "xy", "tfoot not reordered"); +testText("<table><tfoot><tr><td>footer</tfoot><thead><tr><td style='visibility:collapse'>thead</thead><tbody><tr><td>tbody</tbody></table>", + "footer\n\ntbody", ""); +testText("<table><tr><td id=target>abc</td><td>def</td>", "abc", "No tab on table-cell itself"); +testText("<table><tr id=target><td>abc</td><td>def</td></tr><tr id=target><td>ghi</td><td>jkl</td></tr>", "abc\tdef", "No newline on table-row itself"); + +/**** Table captions ****/ + +testText("<div><table><tr><td>abc<caption>def</caption></table>", "abc\ndef", "Newline between cells and caption"); + +/**** display:table ****/ + +testText("<div><div class='table'><span class='cell'>abc</span>\n<span class='cell'>def</span></div>", + "abc\tdef", "Tab-separated table cells"); +testText("<div><div class='table'><span class='row'><span class='cell'>abc</span></span>\n<span class='row'><span class='cell'>def</span></span></div>", + "abc\ndef", "Newline-separated table rows"); +testText("<div>abc<div class='table'><span class='cell'>def</span></div>ghi", "abc\ndef\nghi", "Newlines around table"); + +/**** display:inline-table ****/ + +testText("<div><div class='itable'><span class='cell'>abc</span>\n<span class='cell'>def</span></div>", "abc\tdef", "Tab-separated table cells"); +testText("<div><div class='itable'><span class='row'><span class='cell'>abc</span></span>\n<span class='row'><span class='cell'>def</span></span></div>", + "abc\ndef", "Newline-separated table rows"); +testText("<div>abc<div class='itable'><span class='cell'>def</span></div>ghi", "abcdefghi", "No newlines around inline-table"); +testText("<div>abc<div class='itable'><span class='row'><span class='cell'>def</span></span>\n<span class='row'><span class='cell'>123</span></span></div>ghi", + "abcdef\n123ghi", "Single newline in two-row inline-table"); + +/**** display:table-row/table-cell/table-caption ****/ +testText("<div style='display:table-row'>", "", "display:table-row on the element itself"); +testText("<div style='display:table-cell'>", "", "display:table-cell on the element itself"); +testText("<div style='display:table-caption'>", "", "display:table-caption on the element itself"); + +/**** Lists ****/ + +testText("<div><ol><li>abc", "abc", "<ol> list items get no special treatment"); +testText("<div><ul><li>abc", "abc", "<ul> list items get no special treatment"); + +/**** Misc elements ****/ + +testText("<div><script style='display:block'>abc", "abc", "display:block <script> is rendered"); +testText("<div><style style='display:block'>abc", "abc", "display:block <style> is rendered"); +testText("<div><noscript style='display:block'>abc", "", "display:block <noscript> is not rendered (it's not parsed!)"); +testText("<div><template style='display:block'>abc", "", + "display:block <template> contents are not rendered (the contents are in a different document)"); +testText("<div>abc<br>def", "abc\ndef", "<br> induces line break"); +testText("<div>abc<br>", "abc\n", "<br> induces line break even at end of block"); +testText("<div><br class='poke'>", "\n", "<br> content ignored"); +testText("<div>abc<hr>def", "abc\ndef", "<hr> induces line break"); +testText("<div>abc<hr><hr>def", "abc\ndef", "<hr><hr> induces just one line break"); +testText("<div>abc<hr><hr><hr>def", "abc\ndef", "<hr><hr><hr> induces just one line break"); +testText("<div><hr class='poke'>", "abc", "<hr> content rendered"); +testText("<div>abc<!--comment-->def", "abcdef", "comment ignored"); +testText("<br>", "", "<br>"); +testText("<p>", "", "empty <p>"); +testText("<div>", "", "empty <div>"); + +/**** text-transform ****/ + +testText("<div><div style='text-transform:uppercase'>abc", "ABC", "text-transform is applied"); +testText("<div><div style='text-transform:uppercase'>Ma\xDF", "MASS", "text-transform handles es-zet"); +testText("<div><div lang='tr' style='text-transform:uppercase'>i \u0131", "\u0130 I", "text-transform handles Turkish casing"); + +/**** block-in-inline ****/ + +testText("<div>abc<span>123<div>456</div>789</span>def", "abc123\n456\n789def", "block-in-inline doesn't add unnecessary newlines"); + +/**** floats ****/ + +testText("<div>abc<div style='float:left'>123</div>def", "abc\n123\ndef", "floats induce a block boundary"); +testText("<div>abc<span style='float:left'>123</span>def", "abc\n123\ndef", "floats induce a block boundary"); +testText("<div style='float:left'>123", "123", "float on the element itself"); + +/**** position ****/ + +testText("<div>abc<div style='position:absolute'>123</div>def", "abc\n123\ndef", "position:absolute induces a block boundary"); +testText("<div>abc<span style='position:absolute'>123</span>def", "abc\n123\ndef", "position:absolute induces a block boundary"); +testText("<div style='position:absolute'>123", "123", "position:absolute on the element itself"); +testText("<div>abc<div style='position:relative'>123</div>def", "abc\n123\ndef", "position:relative has no effect"); +testText("<div>abc<span style='position:relative'>123</span>def", "abc123def", "position:relative has no effect"); + +/**** text-overflow:ellipsis ****/ + +testText("<div style='overflow:hidden'>abc", "abc", "overflow:hidden ignored"); +// XXX Chrome skips content with width:0 or height:0 and overflow:hidden; +// should we spec that? +testText("<div style='width:0; overflow:hidden'>abc", "abc", "overflow:hidden ignored even with zero width"); +testText("<div style='height:0; overflow:hidden'>abc", "abc", "overflow:hidden ignored even with zero height"); +testText("<div style='width:0; overflow:hidden; text-overflow:ellipsis'>abc", "abc", "text-overflow:ellipsis ignored"); + +/**** Support on non-HTML elements ****/ + +testText("<svg>abc", undefined, "innerText not supported on SVG elements"); +testText("<math>abc", undefined, "innerText not supported on MathML elements"); + +/**** Ruby ****/ + +testText("<div><ruby>abc<rt>def</rt></ruby>", "abcdef", "<rt> and no <rp>"); +testText("<div><ruby>abc<rp>(</rp><rt>def</rt><rp>)</rp></ruby>", "abcdef", "<rp>"); +testText("<div><rp>abc</rp>", "", "Lone <rp>"); +testText("<div><rp style='visibility:hidden'>abc</rp>", "", "visibility:hidden <rp>"); +testText("<div><rp style='display:block'>abc</rp>def", "abc\ndef", "display:block <rp>"); +testText("<div><rp style='display:block'> abc </rp>def", "abc\ndef", "display:block <rp> with whitespace"); +testText("<div><select class='poke-rp'></select>", "", "<rp> in a <select>"); + +/**** Shadow DOM ****/ + +if ("attachShadow" in document.body) { + testText("<div class='shadow'>", "", "Shadow DOM contents ignored"); + testText("<div><div class='shadow'>", "", "Shadow DOM contents ignored"); +} + +/**** Flexbox ****/ + +if (CSS.supports('display', 'flex')) { + testText("<div style='display:flex'><div style='order:1'>1</div><div>2</div></div>", + "1\n2", "CSS 'order' property ignored"); + testText("<div style='display:flex'><span>1</span><span>2</span></div>", + "1\n2", "Flex items blockified"); +} + +/**** Grid ****/ + +if (CSS.supports('display', 'grid')) { + testText("<div style='display:grid'><div style='order:1'>1</div><div>2</div></div>", + "1\n2", "CSS 'order' property ignored"); + testText("<div style='display:grid'><span>1</span><span>2</span></div>", + "1\n2", "Grid items blockified"); +} diff --git a/testing/web-platform/tests/html/dom/elements/the-innertext-and-outertext-properties/getter.html b/testing/web-platform/tests/html/dom/elements/the-innertext-and-outertext-properties/getter.html new file mode 100644 index 0000000000..ffb3d34fe9 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/the-innertext-and-outertext-properties/getter.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<title>innerText/outerText getter test</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +.before::before { content:'abc'; } +.table { display:table; } +.itable { display:inline-table; } +.row { display:table-row; } +.cell { display:table-cell; } +.first-line-uppercase::first-line { text-transform:uppercase; } +.first-letter-uppercase::first-letter { text-transform:uppercase; } +.first-letter-float::first-letter { float:left; } +</style> +<div id="container"></div> +<svg id="svgContainer"></svg> +<script> +let container = document.querySelector('#container'); +let svgContainer = document.querySelector('#svgContainer'); +function testText(html, expectedPlain, msg) { + textTextInContainer(container, html, expectedPlain, msg); +} +function testTextInSVG(html, expectedPlain, msg) { + textTextInContainer(svgContainer, html, expectedPlain, msg); +} +function textTextInContainer(cont, html, expectedPlain, msg) { + test(function() { + container.innerHTML = html; + if (cont != container) { + while (container.firstChild) { + cont.appendChild(container.firstChild); + } + } + var e = document.getElementById('target'); + if (!e) { + e = cont.firstChild; + } + var pokes = document.getElementsByClassName('poke'); + for (var i = 0; i < pokes.length; ++i) { + pokes[i].textContent = 'abc'; + } + ['rp', 'optgroup', 'div'].forEach(function(tag) { + pokes = document.getElementsByClassName('poke-' + tag); + for (var i = 0; i < pokes.length; ++i) { + var el = document.createElement(tag); + el.textContent = "abc"; + pokes[i].appendChild(el); + } + }); + var shadows = document.getElementsByClassName('shadow'); + for (var i = 0; i < shadows.length; ++i) { + var s = shadows[i].attachShadow({ mode: "open" }); + s.textContent = 'abc'; + } + while (e && e.nodeType != Node.ELEMENT_NODE) { + e = e.nextSibling; + } + assert_equals(e.innerText, expectedPlain, "innerText"); + assert_equals(e.outerText, expectedPlain, "outerText"); + cont.textContent = ''; + }, msg + ' (' + format_value(html) + ')'); +} +</script> +<script src="getter-tests.js"></script> diff --git a/testing/web-platform/tests/html/dom/elements/the-innertext-and-outertext-properties/innertext-setter-tests.js b/testing/web-platform/tests/html/dom/elements/the-innertext-and-outertext-properties/innertext-setter-tests.js new file mode 100644 index 0000000000..99ae5ec185 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/the-innertext-and-outertext-properties/innertext-setter-tests.js @@ -0,0 +1,42 @@ +testText("<div>", "abc", "abc", "Simplest possible test"); +testHTML("<div>", "abc\ndef", "abc<br>def", "Newlines convert to <br> in non-white-space:pre elements"); +testHTML("<pre>", "abc\ndef", "abc<br>def", "Newlines convert to <br> in <pre> element"); +testHTML("<textarea>", "abc\ndef", "abc<br>def", "Newlines convert to <br> in <textarea> element"); +testHTML("<div style='white-space:pre'>", "abc\ndef", "abc<br>def", "Newlines convert to <br> in white-space:pre element"); +testHTML("<div>", "abc\rdef", "abc<br>def", "CRs convert to <br> in non-white-space:pre elements"); +testHTML("<pre>", "abc\rdef", "abc<br>def", "CRs convert to <br> in <pre> element"); +testHTML("<div>", "abc\r\ndef", "abc<br>def", "Newline/CR pair converts to <br> in non-white-space:pre element"); +testHTML("<div>", "abc\n\ndef", "abc<br><br>def", "Newline/newline pair converts to two <br>s in non-white-space:pre element"); +testHTML("<div>", "abc\r\rdef", "abc<br><br>def", "CR/CR pair converts to two <br>s in non-white-space:pre element"); +testHTML("<div style='white-space:pre'>", "abc\rdef", "abc<br>def", "CRs convert to <br> in white-space:pre element"); +testText("<div>", "abc<def", "abc<def", "< preserved"); +testText("<div>", "abc>def", "abc>def", "> preserved"); +testText("<div>", "abc&", "abc&", "& preserved"); +testText("<div>", "abc\"def", "abc\"def", "\" preserved"); +testText("<div>", "abc\'def", "abc\'def", "\' preserved"); +testHTML("<svg>", "abc", "", "innerText not supported on SVG elements"); +testHTML("<math>", "abc", "", "innerText not supported on MathML elements"); +testText("<div>", "abc\0def", "abc\0def", "Null characters preserved"); +testText("<div>", "abc\tdef", "abc\tdef", "Tabs preserved"); +testText("<div>", " abc", " abc", "Leading whitespace preserved"); +testText("<div>", "abc ", "abc ", "Trailing whitespace preserved"); +testText("<div>", "abc def", "abc def", "Whitespace not compressed"); +testText("<div>abc\n\n", "abc", "abc", "Existing text deleted"); +testText("<div><br>", "abc", "abc", "Existing <br> deleted"); +testHTML("<div>", "", "", "Assigning the empty string"); +testHTML("<div>", null, "", "Assigning null"); +testHTML("<div>", undefined, "undefined", "Assigning undefined"); +testHTML("<div>", "\rabc", "<br>abc", "Start with CR"); +testHTML("<div>", "\nabc", "<br>abc", "Start with LF"); +testHTML("<div>", "\r\nabc", "<br>abc", "Start with CRLF"); +testHTML("<div>", "abc\r", "abc<br>", "End with CR"); +testHTML("<div>", "abc\n", "abc<br>", "End with LF"); +testHTML("<div>", "abc\r\n", "abc<br>", "End with CRLF"); + +// Setting innerText on these should not throw +["area", "base", "basefont", "bgsound", "br", "col", "embed", "frame", "hr", +"image", "img", "input", "keygen", "link", "menuitem", "meta", "param", +"source", "track", "wbr", "colgroup", "frameset", "head", "html", "table", +"tbody", "tfoot", "thead", "tr"].forEach(function(tag) { + testText(document.createElement(tag), "abc", "abc", "innerText on <" + tag + "> element"); +}); diff --git a/testing/web-platform/tests/html/dom/elements/the-innertext-and-outertext-properties/innertext-setter.html b/testing/web-platform/tests/html/dom/elements/the-innertext-and-outertext-properties/innertext-setter.html new file mode 100644 index 0000000000..a835a164ed --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/the-innertext-and-outertext-properties/innertext-setter.html @@ -0,0 +1,88 @@ +<!DOCTYPE html> +<title>innerText setter test</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id="container"></div> +<script> +// As of March 2017, WebKit and Blink have inconsistent results depending on +// rendered or not. setupTest() tests a rendered case, and setupTestDetached() +// tests a not-rendered case. + +function setupTest(context, plain) { + var container = document.getElementById("container"); + // context is either a string or an element node + if (typeof context === "string") { + container.innerHTML = context; + } else { + container.innerHTML = ""; + container.appendChild(context); + } + var e = container.firstChild; + while (e && e.nodeType != Node.ELEMENT_NODE) { + e = e.nextSibling; + } + e.offsetWidth; + var oldChild = e.firstChild; + e.innerText = plain; + return [e, oldChild]; +} + +function setupTestDetached(context, plain) { + var detachedContainer = document.createElement("div"); + // context is either a string or an element node + if (typeof context === "string") { + detachedContainer.innerHTML = context; + } else { + detachedContainer.innerHTML = ""; + detachedContainer.appendChild(context); + } + var e = detachedContainer.firstChild; + while (e && e.nodeType != Node.ELEMENT_NODE) { + e = e.nextSibling; + } + var oldChild = e.firstChild; + e.innerText = plain; + return [e, oldChild]; +} + +function assertNewSingleTextNode(newChild, expectedText, oldChild) { + assert_not_equals(newChild, null, "Should have a child"); + assert_equals(newChild.nodeType, Node.TEXT_NODE, "Child should be a text node"); + assert_equals(newChild.nextSibling, null, "Should have only one child"); + assert_equals(newChild.data, expectedText); + assert_not_equals(newChild, oldChild, "Child should be a *new* text node"); +} + +function assertNoEmptyTextChild(parent) { + for (var child = parent.firstChild; child; child = child.nextSibling) { + if (child.nodeType === Node.TEXT_NODE) { + assert_not_equals(child.data, "", "Should not have empty text nodes"); + } + } +} + +function testText(context, plain, expectedText, msg) { + test(function(){ + var arr = setupTest(context, plain); + assertNewSingleTextNode(arr[0].firstChild, expectedText, arr[1]); + }, msg); + test(function() { + var arr = setupTestDetached(context, plain); + assertNewSingleTextNode(arr[0].firstChild, expectedText, arr[1]); + }, msg + ", detached"); +} + +function testHTML(context, plain, expectedHTML, msg) { + test(function(){ + var e = setupTest(context, plain)[0]; + assert_equals(e.innerHTML, expectedHTML); + assertNoEmptyTextChild(e); + }, msg); + test(function() { + var e = setupTestDetached(context, plain)[0]; + assert_equals(e.innerHTML, expectedHTML); + assertNoEmptyTextChild(e); + }, msg + ", detached"); +} +</script> +<script src="innertext-setter-tests.js"></script> diff --git a/testing/web-platform/tests/html/dom/elements/the-innertext-and-outertext-properties/multiple-text-nodes.window.js b/testing/web-platform/tests/html/dom/elements/the-innertext-and-outertext-properties/multiple-text-nodes.window.js new file mode 100644 index 0000000000..07c55e9669 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/the-innertext-and-outertext-properties/multiple-text-nodes.window.js @@ -0,0 +1,16 @@ +async_test(t => { + const div = document.body.appendChild(document.createElement("div")); + t.add_cleanup(() => div.remove()); + const t1 = div.appendChild(new Text("")); + div.appendChild(new Text("")); + const t2 = div.appendChild(new Text("")); + const t3 = div.appendChild(new Text("")); + t.step_timeout(() => { + t1.data = "X"; + t2.data = " "; + t3.data = "Y"; + assert_equals(div.innerText, "X Y", "innerText"); + assert_equals(div.outerText, "X Y", "outerText"); + t.done(); + }, 100); +}, "Ensure multiple text nodes get rendered properly"); diff --git a/testing/web-platform/tests/html/dom/elements/the-innertext-and-outertext-properties/outertext-setter.html b/testing/web-platform/tests/html/dom/elements/the-innertext-and-outertext-properties/outertext-setter.html new file mode 100644 index 0000000000..953bedc9a8 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/the-innertext-and-outertext-properties/outertext-setter.html @@ -0,0 +1,180 @@ +<!DOCTYPE html> +<title>outerText setter test</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<ul> + <li>A <span id="testReplacePrevious">B</span></li> + <li><span id="testReplaceFollowing">A</span> B</li> + <li>A <span id="testReplaceBoth">B</span> C</li> + <li><span id="testRemove">Testing</span> removing node using outerText.</li> + <li><span id="testNewlines">Replace this child with lots of newlines</span></li> +</ul> + +<div id="container"></div> + +<script> +"use strict"; + +test(() => { + const node = document.getElementById("testReplacePrevious"); + const parent = node.parentNode; + + node.outerText = "Replaced"; + + assert_equals(parent.innerHTML, "A Replaced"); + assert_equals(parent.childNodes.length, 1, "It got merged with the previous text node"); +}, "Replacing a node and merging with the previous text node"); + +test(() => { + const node = document.getElementById("testReplaceFollowing"); + const parent = node.parentNode; + + node.outerText = "Replaced"; + + assert_equals(parent.innerHTML, "Replaced B"); + assert_equals(parent.childNodes.length, 1, "It got merged with the following text node"); +}, "Replacing a node and merging with the following text node"); + +test(() => { + const node = document.getElementById("testReplaceBoth"); + const parent = node.parentNode; + + node.outerText = "Replaced"; + + assert_equals(parent.innerHTML, "A Replaced C"); + assert_equals(parent.childNodes.length, 1, "It got merged with the previous and following text node"); +}, "Replacing a node and merging with the previous and following text node"); + +test(t => { + const container = document.getElementById("container"); + t.add_cleanup(() => { container.textContent = ""; }); + + container.append("A", "B", document.createElement("span"), "D", "E"); + assert_equals(container.childNodes.length, 5, "Precondition check: five separate nodes"); + + const node = container.childNodes[2]; + node.outerText = "Replaced"; + + assert_equals(container.innerHTML, "ABReplacedDE"); + assert_equals(container.childNodes.length, 3, "It got merged with the previous and following text node"); + assert_equals(container.childNodes[0].data, "A"); + assert_equals(container.childNodes[1].data, "BReplacedD"); + assert_equals(container.childNodes[2].data, "E"); +}, "Only merges with the previous and following text nodes, does not completely normalize"); + +test(t => { + const container = document.getElementById("container"); + t.add_cleanup(() => { container.textContent = ""; }); + + container.append(document.createElement("span")); + const node = container.childNodes[0]; + node.outerText = ""; + + assert_equals(container.childNodes.length, 1, "Creates text node for the empty string"); + assert_equals(container.childNodes[0].data, ""); +}, "Empty string"); + +test(t => { + const container = document.getElementById("container"); + t.add_cleanup(() => { container.textContent = ""; }); + + container.append("1", "2", document.createElement("span"), "3", "4"); + const node = container.childNodes[2]; + node.outerText = ""; + + assert_equals(container.childNodes.length, 3, "It got merged with the previous and following text node"); + assert_equals(container.childNodes[0].data, "1"); + assert_equals(container.childNodes[1].data, "23"); + assert_equals(container.childNodes[2].data, "4"); +}, "Empty string with surrounding text nodes"); + +test(t => { + const node = document.getElementById("testNewlines"); + const parent = node.parentNode; + + node.outerText = "\n\r\n\r"; + + assert_equals(parent.innerHTML, "<br><br><br>"); + assert_equals(parent.childNodes.length, 3); + assert_equals(parent.childNodes[0].localName, "br", "node 1"); + assert_equals(parent.childNodes[1].localName, "br", "node 2"); + assert_equals(parent.childNodes[2].localName, "br", "node 3"); +}, "Setting outerText to a bunch of newlines creates a bunch of <br>s with no text nodes"); + +test(() => { + const node = document.getElementById("testRemove"); + const parent = node.parentNode; + + node.outerText = ""; + + assert_equals(parent.innerHTML, " removing node using outerText."); +}, "Removing a node"); + +test(() => { + const node = document.createElement("span"); + + assert_throws_dom("NoModificationAllowedError", () => { node.outerText = ""; }); +}, "Detached node"); + +testText("<div>", "abc", "abc", "Simplest possible test"); +testHTML("<div>", "abc\ndef", "abc<br>def", "Newlines convert to <br> in non-white-space:pre elements"); +testHTML("<pre>", "abc\ndef", "abc<br>def", "Newlines convert to <br> in <pre> element"); +testHTML("<textarea>", "abc\ndef", "abc<br>def", "Newlines convert to <br> in <textarea> element"); +testHTML("<div style='white-space:pre'>", "abc\ndef", "abc<br>def", "Newlines convert to <br> in white-space:pre element"); +testHTML("<div>", "abc\rdef", "abc<br>def", "CRs convert to <br> in non-white-space:pre elements"); +testHTML("<pre>", "abc\rdef", "abc<br>def", "CRs convert to <br> in <pre> element"); +testHTML("<div>", "abc\r\ndef", "abc<br>def", "Newline/CR pair converts to <br> in non-white-space:pre element"); +testHTML("<div>", "abc\n\ndef", "abc<br><br>def", "Newline/newline pair converts to two <br>s in non-white-space:pre element"); +testHTML("<div>", "abc\r\rdef", "abc<br><br>def", "CR/CR pair converts to two <br>s in non-white-space:pre element"); +testHTML("<div style='white-space:pre'>", "abc\rdef", "abc<br>def", "CRs convert to <br> in white-space:pre element"); +testText("<div>", "abc<def", "abc<def", "< preserved"); +testText("<div>", "abc>def", "abc>def", "> preserved"); +testText("<div>", "abc&", "abc&", "& preserved"); +testText("<div>", "abc\"def", "abc\"def", "\" preserved"); +testText("<div>", "abc\'def", "abc\'def", "\' preserved"); +testHTML("<svg>", "abc", "<svg></svg>", "outerText not supported on SVG elements"); +testHTML("<math>", "abc", "<math></math>", "outerText not supported on MathML elements"); +testText("<div>", "abc\0def", "abc\0def", "Null characters preserved"); +testText("<div>", "abc\tdef", "abc\tdef", "Tabs preserved"); +testText("<div>", " abc", " abc", "Leading whitespace preserved"); +testText("<div>", "abc ", "abc ", "Trailing whitespace preserved"); +testText("<div>", "abc def", "abc def", "Whitespace not compressed"); +testText("<div>abc\n\n", "abc", "abc", "Existing text deleted"); +testText("<div><br>", "abc", "abc", "Existing <br> deleted"); +testHTML("<div>", "", "", "Assigning the empty string"); +testHTML("<div>", null, "", "Assigning null"); +testHTML("<div>", undefined, "undefined", "Assigning undefined"); +testHTML("<div>", "\rabc", "<br>abc", "Start with CR"); +testHTML("<div>", "\nabc", "<br>abc", "Start with LF"); +testHTML("<div>", "\r\nabc", "<br>abc", "Start with CRLF"); +testHTML("<div>", "abc\r", "abc<br>", "End with CR"); +testHTML("<div>", "abc\n", "abc<br>", "End with LF"); +testHTML("<div>", "abc\r\n", "abc<br>", "End with CRLF"); + +function testText(startingHTML, outerText, expected, description) { + test(t => { + const container = document.getElementById("container"); + t.add_cleanup(() => { container.textContent = ""; }); + + container.innerHTML = startingHTML; + const elementToReplace = container.firstElementChild; + + elementToReplace.outerText = outerText; + assert_equals(container.textContent, expected); + }, description); +} + +function testHTML(startingHTML, outerText, expected, description) { + test(t => { + const container = document.getElementById("container"); + t.add_cleanup(() => { container.textContent = ""; }); + + container.innerHTML = startingHTML; + const elementToReplace = container.firstElementChild; + + elementToReplace.outerText = outerText; + assert_equals(container.innerHTML, expected); + }, description); +} +</script> diff --git a/testing/web-platform/tests/html/dom/elements/wai-aria/README.md b/testing/web-platform/tests/html/dom/elements/wai-aria/README.md new file mode 100644 index 0000000000..bea30702d1 --- /dev/null +++ b/testing/web-platform/tests/html/dom/elements/wai-aria/README.md @@ -0,0 +1 @@ +The test suite for WAI-ARIA is available at: <https://www.w3.org/WAI/PF/testharness/>. |