Skip to content

GitLab

T
tangled
Commit 5421adcf authored by Kyoko Muto's avatar Kyoko Muto Committed by Commit Bot
Browse files
Options

Add button to a custom element, <my-detail>/<my-summary> 

In this Cl, we add a button to emulate other <summary><details> features in addition to
create my custom elements, <my-detail>/<my-summary>, with the imperative Shadow DOM
Distribution API.

Furthermore, the reftest is also changed because the appearance is changed due to these addition.

Previous implementation CL: crrev.com/c/1192783

Bug: 869308
Change-Id: I4131321879524a236aefd4e2f1c846dafc548aa0
Reviewed-on: https://chromium-review.googlesource.com/1220969
Commit-Queue: Kyoko Muto <kymuto@google.com>
Reviewed-by: default avatarHayato Ito <hayato@chromium.org>
Cr-Commit-Position: refs/heads/master@{#593126}
parent 74789b0b
Hide whitespace changes
Inline Side-by-side
Showing with 21 additions and 9 deletions
third_party/WebKit/LayoutTests/shadow-dom/imperative-apis/custom-detail-summary.js
View file @ 5421adcf
...@@ -18,20 +18,35 @@ customElements.define("my-detail", class extends HTMLElement { ...@@ -18,20 +18,35 @@ customElements.define("my-detail", class extends HTMLElement {
if (!target.shadowRoot.querySelector(':scope > slot')) { if (!target.shadowRoot.querySelector(':scope > slot')) {
const slot1 = document.createElement("slot"); const slot1 = document.createElement("slot");
const slot2 = document.createElement("slot"); const slot2 = document.createElement("slot");
const child1 = document.createElement("span");
const child2 = document.createElement("span");
target.appendChild(child1);
target.appendChild(child2);
child1.innerHTML = "&rtrif; ";
child1.addEventListener('click', (e) => {
slot2.style.display = "block";
child2.innerHTML = "&dtrif; ";
child1.innerText = "";
});
child2.addEventListener('click', (e) => {
slot2.style.display = "none";
child1.innerHTML = "&rtrif; ";
child2.innerText = "";
});
const shadowRoot = target.shadowRoot; const shadowRoot = target.shadowRoot;
shadowRoot.appendChild(slot1); shadowRoot.appendChild(slot1);
shadowRoot.appendChild(slot2); shadowRoot.appendChild(slot2);
slot1.style.display = "block"; slot1.style.display = "block";
slot1.style.backgroundColor = "red";
const observer = new MutationObserver(function(mutations) { const observer = new MutationObserver(function(mutations) {
//Get the first <my-summary> element from <my-detail>'s direct children //Get the first <my-summary> element from <my-detail>'s direct children
const my_summary = target.querySelector(':scope > my-summary'); const my_summary = target.querySelector(':scope > my-summary');
if (my_summary) { if (my_summary) {
slot1.assign([my_summary]); slot1.assign([child1,child2,my_summary]);
} else { } else {
slot1.assign([]); slot1.assign([child1,child2]);
} }
slot2.assign(target.childNodes); slot2.assign(target.childNodes);
slot2.style.display = "none";
}); });
observer.observe(this, {childList: true}); observer.observe(this, {childList: true});
} }
......
third_party/WebKit/LayoutTests/shadow-dom/imperative-apis/test-custom-detail-summary-expected.html
View file @ 5421adcf
<html> <html>
<body> <body>
<p style="display: block; background-color: red;">added-summary</p> <div>&rtrif; added-summary</div>
<p>another test</p> </body>
<p>summary first-summary</p>
</body>
</html> </html>
third_party/WebKit/LayoutTests/shadow-dom/imperative-apis/test-custom-detail-summary.html
View file @ 5421adcf
...@@ -4,7 +4,6 @@ ...@@ -4,7 +4,6 @@
<my-detail id="my-detail"> <my-detail id="my-detail">
<p>another test</p> <p>another test</p>
<my-summary id="my-summary">summary</my-summary> <my-summary id="my-summary">summary</my-summary>
<my-summary>first-summary</my-summary>
</my-detail> </my-detail>
<my-summary id="my-summary1">added-summary</my-summary> <my-summary id="my-summary1">added-summary</my-summary>
<script> <script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment