-
Notifications
You must be signed in to change notification settings - Fork 3.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #211 from yutak/shadow-dom/basic-ref-tests
shadow-dom: Improve the readability of two basic reftests.
- Loading branch information
Showing
4 changed files
with
128 additions
and
60 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,25 @@ | ||
| <!DOCTYPE html> | ||
| <!-- | ||
| Distributed under both the W3C Test Suite License [1] and the W3C | ||
| 3-clause BSD License [2]. To contribute to a W3C Test Suite, see the | ||
| policies and contribution forms [3]. | ||
| [1] http://www.w3.org/Consortium/Legal/2008/04-testsuite-license | ||
| [2] http://www.w3.org/Consortium/Legal/2008/03-bsd-license | ||
| [3] http://www.w3.org/2004/10/27-testcases | ||
| --> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>Shadow DOM Test</title> | ||
| <link rel="author" title="Hayato Ito" href="mailto:hayato@google.com"> | ||
| </head> | ||
| <body> | ||
| <div> | ||
| <div>Hello a Shadow Root.</div> | ||
| </div> | ||
| </body> | ||
| <head> | ||
| <title>Shadow DOM Test: Basic shadow root (reference)</title> | ||
| <link rel="author" title="Hayato Ito" href="mailto:hayato@google.com"> | ||
| <link rel="author" title="Yuta Kitamura" href="mailto:yutak@google.com"> | ||
| <style> | ||
| p { color: black; } | ||
| div { color: green; } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <p>You should see green text saying "PASS" below.</p> | ||
| <div>PASS</div> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,20 +1,35 @@ | ||
| <!DOCTYPE html> | ||
| <!-- | ||
| Distributed under both the W3C Test Suite License [1] and the W3C | ||
| 3-clause BSD License [2]. To contribute to a W3C Test Suite, see the | ||
| policies and contribution forms [3]. | ||
| [1] http://www.w3.org/Consortium/Legal/2008/04-testsuite-license | ||
| [2] http://www.w3.org/Consortium/Legal/2008/03-bsd-license | ||
| [3] http://www.w3.org/2004/10/27-testcases | ||
| --> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>Shadow DOM Test - Tests a shadow root.</title> | ||
| <link rel="reference" href="shadow-root-001-ref.html"> | ||
| <link rel="author" title="Hayato Ito" href="mailto:hayato@google.com"> | ||
| <link rel="help" href="https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html#shadow-trees"> | ||
| <script src="../testcommon.js"></script> | ||
| <meta name="assert" content="When a shadow root is attached, the shadow tree is used."> | ||
| </head> | ||
| <body> | ||
| <div id='host'> | ||
| </div> | ||
| <script> | ||
| var shadowRoot = createSR(host); | ||
| shadowRoot.innerHTML = '<div>Hello a Shadow Root.</div>'; | ||
| </script> | ||
| </body> | ||
| <head> | ||
| <title>Shadow DOM Test: Basic shadow root</title> | ||
| <link rel="match" href="shadow-root-001-ref.html"> | ||
| <link rel="author" title="Hayato Ito" href="mailto:hayato@google.com"> | ||
| <link rel="author" title="Yuta Kitamura" href="mailto:yutak@google.com"> | ||
| <link rel="help" href="http://www.w3.org/TR/2013/WD-shadow-dom-20130514/#shadow-trees"> | ||
| <meta name="assert" content="When a shadow root is attached, the shadow tree is rendered."> | ||
| <script src="../testcommon.js"></script> | ||
| <style> | ||
| p { color: black; } | ||
| * { color: red; } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <p>You should see green text saying "PASS" below.</p> | ||
| <div id="host">FAIL</div> | ||
| <script> | ||
| var shadowRoot = window.host.createShadowRoot(); | ||
| shadowRoot.innerHTML = | ||
| '<style>#pass { color: green; }</style>\n' + | ||
| '<div id="pass">PASS</div>'; | ||
| </script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,15 +1,31 @@ | ||
| <!DOCTYPE html> | ||
| <!-- | ||
| Distributed under both the W3C Test Suite License [1] and the W3C | ||
| 3-clause BSD License [2]. To contribute to a W3C Test Suite, see the | ||
| policies and contribution forms [3]. | ||
| [1] http://www.w3.org/Consortium/Legal/2008/04-testsuite-license | ||
| [2] http://www.w3.org/Consortium/Legal/2008/03-bsd-license | ||
| [3] http://www.w3.org/2004/10/27-testcases | ||
| --> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <title>Shadow DOM Test</title> | ||
| <link rel="author" title="Anna Ogawa" href="mailto:anna.ogawa.0219@gmail.com" /> | ||
| </head> | ||
| <body> | ||
| <div> | ||
| <div>Hello a Shadow Root.</div> | ||
| <div>Apple.</div> | ||
| <div>Orange.</div> | ||
| </div> | ||
| </body> | ||
| <head> | ||
| <title>Shadow DOM Test: Basic distribution (reference)</title> | ||
| <link rel="author" title="Anna Ogawa" href="mailto:anna.ogawa.0219@gmail.com"> | ||
| <link rel="author" title="Yuta Kitamura" href="mailto:yutak@google.com"> | ||
| <style> | ||
| p { color: black; } | ||
| div { color: green; } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <p> | ||
| You should see four lines of green text "A", "B", "C" and "D" below, | ||
| in this order. | ||
| </p> | ||
| <div>A</div> | ||
| <div>B</div> | ||
| <div>C</div> | ||
| <div>D</div> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,24 +1,49 @@ | ||
| <!DOCTYPE html> | ||
| <!-- | ||
| Distributed under both the W3C Test Suite License [1] and the W3C | ||
| 3-clause BSD License [2]. To contribute to a W3C Test Suite, see the | ||
| policies and contribution forms [3]. | ||
| [1] http://www.w3.org/Consortium/Legal/2008/04-testsuite-license | ||
| [2] http://www.w3.org/Consortium/Legal/2008/03-bsd-license | ||
| [3] http://www.w3.org/2004/10/27-testcases | ||
| --> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <title>Shadow DOM Test - Tests a content element.</title> | ||
| <link rel="reference" href="shadow-root-002-ref.html" /> | ||
| <link rel="author" title="Anna Ogawa" href="mailto:anna.ogawa.0219@gmail.com" /> | ||
| <link rel="help" href="https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html#shadow-trees" /> | ||
| <script src="../testcommon.js"></script> | ||
| <meta name="assert" content=" | ||
| When a shadow root is attached, a content element in a shadow tree is used." /> | ||
| </head> | ||
| <body> | ||
| <div id='host'> | ||
| <div>Apple.</div> | ||
| <div>Orange.</div> | ||
| </div> | ||
|
|
||
| <script> | ||
| var shadowRoot = createSR(host); | ||
| shadowRoot.innerHTML = '<div>Hello a Shadow Root.</div><div><content></content></div>'; | ||
| </script> | ||
| </body> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>Shadow DOM Test: Basic distribution</title> | ||
| <link rel="match" href="shadow-root-002-ref.html"> | ||
| <link rel="author" title="Anna Ogawa" href="mailto:anna.ogawa.0219@gmail.com"> | ||
| <link rel="author" title="Yuta Kitamura" href="mailto:yutak@google.com"> | ||
| <link rel="help" href="http://www.w3.org/TR/2013/WD-shadow-dom-20130514/#shadow-trees"> | ||
| <meta name="assert" content="On distribution, content element is replaced with the shadow host's children."> | ||
| <script src="../testcommon.js"></script> | ||
| <style> | ||
| p { color: black; } | ||
| .pass { color: green; } | ||
| * { color: red; } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <p> | ||
| You should see four lines of green text "A", "B", "C" and "D" below, | ||
| in this order. | ||
| </p> | ||
| <div id="host"> | ||
| <div class="pass">B</div> | ||
| <div class="pass">C</div> | ||
| </div> | ||
| <script> | ||
| var shadowRoot = window.host.createShadowRoot(); | ||
|
|
||
| shadowRoot.innerHTML = | ||
| '<style>\n' + | ||
| '.shadow-pass { color: green; }\n' + | ||
| '* { color: red; }\n' + | ||
| '</style>' + | ||
| '<div class="shadow-pass">A</div>\n' + | ||
| '<content>FAIL</content>' + | ||
| '<div class="shadow-pass">D</div>'; | ||
| </script> | ||
| </body> | ||
| </html> |