Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tests for directionality and shadow DOM #29820

Merged
merged 28 commits into from
Oct 6, 2023
Merged

Tests for directionality and shadow DOM #29820

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
8413b5d
Tests for :dir() and shadow DOM from issue #3699
meyerweb Jul 28, 2021
e1bc0bb
Moved tests from /css to /shadow-dom
meyerweb Jul 29, 2021
29065a8
git rm css/css-scoping/dir-shadow/
meyerweb Aug 9, 2021
24f8e36
Removed errant tabs from dir-shadow.32.html
meyerweb Jul 29, 2021
7e745c1
Updated tests to remove CSS reliance
meyerweb Aug 9, 2021
87fb95d
Updates to tests 36-38 clarifying direction on nodes and contents
meyerweb Nov 23, 2021
037bc08
Moved original test run to v001
meyerweb Dec 7, 2021
7799c4b
Restored reftests, removed testharness
meyerweb Dec 7, 2021
0d0a74b
Tweaked test 29
meyerweb Dec 15, 2021
245e97a
Added test 41 for auto-dir slot with no content
meyerweb Dec 22, 2021
2c1acb3
Added test 41 for auto-dir slot with no content
meyerweb Dec 22, 2021
402332e
Added test 41 for auto-dir slot with no content
meyerweb Dec 22, 2021
bd7a5a5
Added test 41 for auto-dir slot with no content
meyerweb Dec 22, 2021
7cbb809
Fixed test 41
meyerweb Mar 3, 2022
5a9b5a9
Fixed test 38
meyerweb Mar 3, 2022
ed99cdf
First draft of language handling tests
meyerweb Jul 28, 2022
49be516
Sync expections basedon https://github.com/web-platform-tests/wpt/pul…
bkardell Feb 23, 2023
5d84263
Add periods where relevant as that is part of the rendering we need t…
bkardell Feb 23, 2023
a38a347
Correct dir-shadow-31-ref.html .
dbaron Aug 21, 2023
a7a7745
Move tests to html/dom/elements/global-attributes/.
dbaron Sep 7, 2023
4a7db82
Change expectation for dir-shadow-036.html.
dbaron Sep 26, 2023
d9c9fe2
Add real rel=help links.
dbaron Oct 2, 2023
1ea8cb7
Switch to more widely supported :lang() syntax since that's not the f…
dbaron Oct 2, 2023
5d64cd3
Add references for lang-attribute-shadow-* tests.
dbaron Oct 2, 2023
587ea30
Better <title> elements, based on initial paragraphs.
dbaron Oct 5, 2023
d3372b5
Also test HTML direction with Element.matches().
dbaron Oct 5, 2023
17f7f25
Fix confusing test descriptions.
dbaron Oct 5, 2023
c91b9c9
Drop lang attribute tests in favor of #42364.
dbaron Oct 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions html/dom/elements/global-attributes/dir-shadow-01-ref.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>[dir] and shadow slots: dir=ltr on the slot, paragraph in the light tree</title>
<link rel="author" title="Eric Meyer" href="mailto:[email protected]">
<link rel="help" href="https://html.spec.whatwg.org/multipage/C#the-dir-attribute">
<link rel="help" href="https://github.com/whatwg/html/issues/3699">
<link rel="help" href="https://github.com/whatwg/html/pull/9796">
<style type="text/css">
body {width: 600px;}
div {border: 1px solid gray; margin: 1em;}
div p {width: 50%; border: 1px dotted;}
</style>
</head>
<body>

<p>`dir=ltr` on the &lt;slot&gt;, paragraph in the light tree</p>
<div id="host"><p>paragraph.</p></div>
<p id="result">The HTML direction / computed CSS `direction` value for the paragraph is: ltr / ltr.</p>

</body>
</html>
33 changes: 33 additions & 0 deletions html/dom/elements/global-attributes/dir-shadow-01.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>[dir] and shadow slots: dir=ltr on the slot, paragraph in the light tree</title>
<link rel="author" title="Eric Meyer" href="mailto:[email protected]">
<link rel="help" href="https://html.spec.whatwg.org/multipage/C#the-dir-attribute">
<link rel="help" href="https://github.com/whatwg/html/issues/3699">
<link rel="help" href="https://github.com/whatwg/html/pull/9796">
<link rel="match" href="dir-shadow-01-ref.html">
<style type="text/css">
body {width: 600px;}
div {border: 1px solid gray; margin: 1em;}
div p {width: 50%; border: 1px dotted;}
</style>
<script src="dir-shadow-utils.js"></script>
</head>
<body>

<p>`dir=ltr` on the &lt;slot&gt;, paragraph in the light tree</p>
<div id="host"><p>paragraph.</p></div>
<p id="result">The HTML direction / computed CSS `direction` value for the paragraph is: </p>

<script type="text/javascript">
let root = host.attachShadow({mode:"open"});
root.innerHTML = `
<slot dir="ltr"></slot>
`;
result.innerHTML += html_direction(host.firstChild) + " / " + getComputedStyle(host.firstChild).direction + '.';
</script>

</body>
</html>
23 changes: 23 additions & 0 deletions html/dom/elements/global-attributes/dir-shadow-02-ref.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>[dir] and shadow slots: dir=ltr on the slot, paragraph in the light tree</title>
<link rel="author" title="Eric Meyer" href="mailto:[email protected]">
<link rel="help" href="https://html.spec.whatwg.org/multipage/C#the-dir-attribute">
<link rel="help" href="https://github.com/whatwg/html/issues/3699">
<link rel="help" href="https://github.com/whatwg/html/pull/9796">
<style type="text/css">
body {width: 600px;}
div {border: 1px solid gray; margin: 1em;}
div p {width: 50%; border: 1px dotted;}
</style>
</head>
<body>

<p>`dir=ltr` on the &lt;slot&gt;, paragraph in the light tree</p>
<div id="host"><p>اختبر.</p></div>
<p id="result">The HTML direction / computed CSS `direction` value for the paragraph is: ltr / ltr.</p>

</body>
</html>
33 changes: 33 additions & 0 deletions html/dom/elements/global-attributes/dir-shadow-02.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>[dir] and shadow slots: dir=ltr on the slot, paragraph in the light tree</title>
<link rel="author" title="Eric Meyer" href="mailto:[email protected]">
<link rel="help" href="https://html.spec.whatwg.org/multipage/C#the-dir-attribute">
<link rel="help" href="https://github.com/whatwg/html/issues/3699">
<link rel="help" href="https://github.com/whatwg/html/pull/9796">
<link rel="match" href="dir-shadow-02-ref.html">
<style type="text/css">
body {width: 600px;}
div {border: 1px solid gray; margin: 1em;}
div p {width: 50%; border: 1px dotted;}
</style>
<script src="dir-shadow-utils.js"></script>
</head>
<body>

<p>`dir=ltr` on the &lt;slot&gt;, paragraph in the light tree</p>
<div id="host"><p>اختبر.</p></div>
<p id="result">The HTML direction / computed CSS `direction` value for the paragraph is: </p>

<script type="text/javascript">
let root = host.attachShadow({mode:"open"});
root.innerHTML = `
<slot dir="ltr"></slot>
`;
result.innerHTML += html_direction(host.firstChild) + " / " + getComputedStyle(host.firstChild).direction + '.';
</script>

</body>
</html>
23 changes: 23 additions & 0 deletions html/dom/elements/global-attributes/dir-shadow-03-ref.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>[dir] and shadow slots: dir=rtl on the slot, paragraph in the light tree</title>
<link rel="author" title="Eric Meyer" href="mailto:[email protected]">
<link rel="help" href="https://html.spec.whatwg.org/multipage/C#the-dir-attribute">
<link rel="help" href="https://github.com/whatwg/html/issues/3699">
<link rel="help" href="https://github.com/whatwg/html/pull/9796">
<style type="text/css">
body {width: 600px;}
div {border: 1px solid gray; margin: 1em;}
div p {width: 50%; border: 1px dotted;}
</style>
</head>
<body>

<p>`dir=rtl` on the &lt;slot&gt;, paragraph in the light tree</p>
<div id="host"><p dir="rtl">paragraph.</p></div>
<p id="result">The HTML direction / computed CSS `direction` value for the paragraph is: ltr / rtl.</p>

</body>
</html>
33 changes: 33 additions & 0 deletions html/dom/elements/global-attributes/dir-shadow-03.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>[dir] and shadow slots: dir=rtl on the slot, paragraph in the light tree</title>
<link rel="author" title="Eric Meyer" href="mailto:[email protected]">
<link rel="help" href="https://html.spec.whatwg.org/multipage/C#the-dir-attribute">
<link rel="help" href="https://github.com/whatwg/html/issues/3699">
<link rel="help" href="https://github.com/whatwg/html/pull/9796">
<link rel="match" href="dir-shadow-03-ref.html">
<style type="text/css">
body {width: 600px;}
div {border: 1px solid gray; margin: 1em;}
div p {width: 50%; border: 1px dotted;}
</style>
<script src="dir-shadow-utils.js"></script>
</head>
<body>

<p>`dir=rtl` on the &lt;slot&gt;, paragraph in the light tree</p>
<div id="host"><p>paragraph.</p></div>
<p id="result">The HTML direction / computed CSS `direction` value for the paragraph is: </p>

<script type="text/javascript">
let root = host.attachShadow({mode:"open"});
root.innerHTML = `
<slot dir="rtl"></slot>
`;
result.innerHTML += html_direction(host.firstChild) + " / " + getComputedStyle(host.firstChild).direction + '.';
</script>

</body>
</html>
23 changes: 23 additions & 0 deletions html/dom/elements/global-attributes/dir-shadow-04-ref.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>[dir] and shadow slots: dir=rtl on the slot, paragraph in the light tree</title>
<link rel="author" title="Eric Meyer" href="mailto:[email protected]">
<link rel="help" href="https://html.spec.whatwg.org/multipage/C#the-dir-attribute">
<link rel="help" href="https://github.com/whatwg/html/issues/3699">
<link rel="help" href="https://github.com/whatwg/html/pull/9796">
<style type="text/css">
body {width: 600px;}
div {border: 1px solid gray; margin: 1em;}
div p {width: 50%; border: 1px dotted;}
</style>
</head>
<body>

<p>`dir=rtl` on the &lt;slot&gt;, paragraph in the light tree</p>
<div id="host"><p dir="rtl">اختبر.</p></div>
<p id="result">The HTML direction / computed CSS `direction` value for the paragraph is: ltr / rtl.</p>

</body>
</html>
33 changes: 33 additions & 0 deletions html/dom/elements/global-attributes/dir-shadow-04.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>[dir] and shadow slots: dir=rtl on the slot, paragraph in the light tree</title>
<link rel="author" title="Eric Meyer" href="mailto:[email protected]">
<link rel="help" href="https://html.spec.whatwg.org/multipage/C#the-dir-attribute">
<link rel="help" href="https://github.com/whatwg/html/issues/3699">
<link rel="help" href="https://github.com/whatwg/html/pull/9796">
<link rel="match" href="dir-shadow-04-ref.html">
<style type="text/css">
body {width: 600px;}
div {border: 1px solid gray; margin: 1em;}
div p {width: 50%; border: 1px dotted;}
</style>
<script src="dir-shadow-utils.js"></script>
</head>
<body>

<p>`dir=rtl` on the &lt;slot&gt;, paragraph in the light tree</p>
<div id="host"><p>اختبر.</p></div>
<p id="result">The HTML direction / computed CSS `direction` value for the paragraph is: </p>

<script type="text/javascript">
let root = host.attachShadow({mode:"open"});
root.innerHTML = `
<slot dir="rtl"></slot>
`;
result.innerHTML += html_direction(host.firstChild) + " / " + getComputedStyle(host.firstChild).direction + '.';
</script>

</body>
</html>
23 changes: 23 additions & 0 deletions html/dom/elements/global-attributes/dir-shadow-05-ref.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>[dir] and shadow slots: dir=auto on the slot, paragraph in the light tree</title>
<link rel="author" title="Eric Meyer" href="mailto:[email protected]">
<link rel="help" href="https://html.spec.whatwg.org/multipage/C#the-dir-attribute">
<link rel="help" href="https://github.com/whatwg/html/issues/3699">
<link rel="help" href="https://github.com/whatwg/html/pull/9796">
<style type="text/css">
body {width: 600px;}
div {border: 1px solid gray; margin: 1em;}
div p {width: 50%; border: 1px dotted;}
</style>
</head>
<body>

<p>`dir=auto` on the &lt;slot&gt;, paragraph in the light tree</p>
<div id="host"><p>paragraph.</p></div>
<p id="result">The HTML direction / computed CSS `direction` value for the paragraph is: ltr / ltr.</p>

</body>
</html>
33 changes: 33 additions & 0 deletions html/dom/elements/global-attributes/dir-shadow-05.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>[dir] and shadow slots: dir=auto on the slot, paragraph in the light tree</title>
<link rel="author" title="Eric Meyer" href="mailto:[email protected]">
<link rel="help" href="https://html.spec.whatwg.org/multipage/C#the-dir-attribute">
<link rel="help" href="https://github.com/whatwg/html/issues/3699">
<link rel="help" href="https://github.com/whatwg/html/pull/9796">
<link rel="match" href="dir-shadow-05-ref.html">
<style type="text/css">
body {width: 600px;}
div {border: 1px solid gray; margin: 1em;}
div p {width: 50%; border: 1px dotted;}
</style>
<script src="dir-shadow-utils.js"></script>
</head>
<body>

<p>`dir=auto` on the &lt;slot&gt;, paragraph in the light tree</p>
<div id="host"><p>paragraph.</p></div>
<p id="result">The HTML direction / computed CSS `direction` value for the paragraph is: </p>

<script type="text/javascript">
let root = host.attachShadow({mode:"open"});
root.innerHTML = `
<slot dir="auto"></slot>
`;
result.innerHTML += html_direction(host.firstChild) + " / " + getComputedStyle(host.firstChild).direction + '.';
</script>

</body>
</html>
23 changes: 23 additions & 0 deletions html/dom/elements/global-attributes/dir-shadow-06-ref.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>[dir] and shadow slots: dir=auto on the slot, paragraph in the light tree</title>
<link rel="author" title="Eric Meyer" href="mailto:[email protected]">
<link rel="help" href="https://html.spec.whatwg.org/multipage/C#the-dir-attribute">
<link rel="help" href="https://github.com/whatwg/html/issues/3699">
<link rel="help" href="https://github.com/whatwg/html/pull/9796">
<style type="text/css">
body {width: 600px;}
div {border: 1px solid gray; margin: 1em;}
div p {width: 50%; border: 1px dotted;}
</style>
</head>
<body>

<p>`dir=auto` on the &lt;slot&gt;, paragraph in the light tree</p>
<div id="host"><p dir="rtl">اختبر.</p></div>
<p id="result">The HTML direction / computed CSS `direction` value for the paragraph is: ltr / rtl.</p>

</body>
</html>
33 changes: 33 additions & 0 deletions html/dom/elements/global-attributes/dir-shadow-06.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>[dir] and shadow slots: dir=auto on the slot, paragraph in the light tree</title>
<link rel="author" title="Eric Meyer" href="mailto:[email protected]">
<link rel="help" href="https://html.spec.whatwg.org/multipage/C#the-dir-attribute">
<link rel="help" href="https://github.com/whatwg/html/issues/3699">
<link rel="help" href="https://github.com/whatwg/html/pull/9796">
<link rel="match" href="dir-shadow-06-ref.html">
<style type="text/css">
body {width: 600px;}
div {border: 1px solid gray; margin: 1em;}
div p {width: 50%; border: 1px dotted;}
</style>
<script src="dir-shadow-utils.js"></script>
</head>
<body>

<p>`dir=auto` on the &lt;slot&gt;, paragraph in the light tree</p>
<div id="host"><p>اختبر.</p></div>
<p id="result">The HTML direction / computed CSS `direction` value for the paragraph is: </p>

<script type="text/javascript">
let root = host.attachShadow({mode:"open"});
root.innerHTML = `
<slot dir="auto"></slot>
`;
result.innerHTML += html_direction(host.firstChild) + " / " + getComputedStyle(host.firstChild).direction + '.';
</script>

</body>
</html>
23 changes: 23 additions & 0 deletions html/dom/elements/global-attributes/dir-shadow-07-ref.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>[dir] and shadow slots: dir=ltr on the shadow host, paragraph in the light tree</title>
<link rel="author" title="Eric Meyer" href="mailto:[email protected]">
<link rel="help" href="https://html.spec.whatwg.org/multipage/C#the-dir-attribute">
<link rel="help" href="https://github.com/whatwg/html/issues/3699">
<link rel="help" href="https://github.com/whatwg/html/pull/9796">
<style type="text/css">
body {width: 600px;}
div {border: 1px solid gray; margin: 1em;}
div p {width: 50%; border: 1px dotted;}
</style>
</head>
<body>

<p>`dir=ltr` on the shadow host, paragraph in the light tree</p>
<div id="host" dir="ltr"><p>paragraph.</p></div>
<p id="result">The HTML direction / computed CSS `direction` value for the paragraph is: ltr / ltr.</p>

</body>
</html>
Loading