-
Notifications
You must be signed in to change notification settings - Fork 161
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Set
display:none in addition to hidden attribute when hiding elem…
…ents inside a shadow root (#9026) Set `display:none` in addition to `hidden` attribute when hiding elements inside a shadow root Fixes #8256
- Loading branch information
Johannes Eriksson
committed
Sep 23, 2020
1 parent
fd3c09f
commit 3c3e4cb
Showing
8 changed files
with
261 additions
and
8 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
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
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
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
12 changes: 12 additions & 0 deletions
12
flow-tests/test-root-context/frontend/lit/lit-template-inner.js
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 |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import {html, LitElement} from 'lit-element'; | ||
|
|
||
| class TemplateInner extends LitElement { | ||
|
|
||
| render() { | ||
| return html` | ||
| <div>Hello template inner</div> | ||
| `; | ||
| } | ||
| } | ||
|
|
||
| customElements.define('lit-template-inner', TemplateInner); |
14 changes: 14 additions & 0 deletions
14
flow-tests/test-root-context/frontend/lit/lit-template-outer.js
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 |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| import {html, LitElement} from 'lit-element'; | ||
| import './lit-template-inner.js'; | ||
|
|
||
| class TemplateOuter extends LitElement { | ||
|
|
||
| render() { | ||
| return html` | ||
| <div>Hello template outer</div> | ||
| <lit-template-inner id="inner" style="display: block"></lit-template-inner> | ||
| `; | ||
| } | ||
| } | ||
|
|
||
| customElements.define('lit-template-outer', TemplateOuter); |
54 changes: 54 additions & 0 deletions
54
...text/src/main/java/com/vaadin/flow/uitest/ui/littemplate/InnerTemplateVisibilityView.java
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 |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| package com.vaadin.flow.uitest.ui.littemplate; | ||
|
|
||
| import com.vaadin.flow.component.Tag; | ||
| import com.vaadin.flow.component.dependency.JsModule; | ||
| import com.vaadin.flow.component.html.NativeButton; | ||
| import com.vaadin.flow.component.littemplate.LitTemplate; | ||
| import com.vaadin.flow.component.polymertemplate.Id; | ||
| import com.vaadin.flow.router.Route; | ||
| import com.vaadin.flow.uitest.servlet.ViewTestLayout; | ||
| import com.vaadin.flow.uitest.ui.AbstractDivView; | ||
|
|
||
| @Route(value = "com.vaadin.flow.uitest.ui.littemplate.InnerTemplateVisibilityView", layout = ViewTestLayout.class) | ||
| public class InnerTemplateVisibilityView extends AbstractDivView { | ||
|
|
||
| public static final String TOGGLE_INNER_VISIBILITY_BUTTON_ID = "toggleInnerVisibility"; | ||
| public static final String TOGGLE_OUTER_VISIBILITY_BUTTON_ID = "toggleOuterVisibility"; | ||
| public static final String INNER_ID = "inner"; | ||
| public static final String OUTER_ID = "outer"; | ||
|
|
||
| @Tag("lit-template-inner") | ||
| @JsModule("./lit/lit-template-inner.js") | ||
| public static class Inner extends LitTemplate { | ||
| public Inner() { | ||
| } | ||
| } | ||
|
|
||
| @Tag("lit-template-outer") | ||
| @JsModule("./lit/lit-template-outer.js") | ||
| public static class Outer extends LitTemplate { | ||
| @Id("inner") | ||
| Inner inner; | ||
|
|
||
| public Outer() { | ||
| } | ||
| } | ||
|
|
||
| public InnerTemplateVisibilityView() { | ||
| Outer outer = new Outer(); | ||
| outer.setId(OUTER_ID); | ||
| outer.inner.setId(INNER_ID); | ||
|
|
||
| NativeButton toggleOuterVisibilityButton = new NativeButton( | ||
| "Toggle visibility of outer", | ||
| e -> outer.setVisible(!outer.isVisible())); | ||
| toggleOuterVisibilityButton.setId(TOGGLE_OUTER_VISIBILITY_BUTTON_ID); | ||
|
|
||
| NativeButton toggleInnerVisibility = new NativeButton( | ||
| "Toggle visibility of inner", | ||
| e -> outer.inner.setVisible(!outer.inner.isVisible())); | ||
| toggleInnerVisibility.setId(TOGGLE_INNER_VISIBILITY_BUTTON_ID); | ||
|
|
||
| add(toggleOuterVisibilityButton, toggleInnerVisibility, outer); | ||
| } | ||
| } |
77 changes: 77 additions & 0 deletions
77
...ontext/src/test/java/com/vaadin/flow/uitest/ui/littemplate/InnerTemplateVisibilityIT.java
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 |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| package com.vaadin.flow.uitest.ui.littemplate; | ||
|
|
||
| import org.junit.Assert; | ||
| import org.junit.Test; | ||
| import org.openqa.selenium.By; | ||
| import org.openqa.selenium.WebElement; | ||
|
|
||
| import com.vaadin.flow.component.html.testbench.NativeButtonElement; | ||
| import com.vaadin.flow.testutil.ChromeBrowserTest; | ||
|
|
||
| public class InnerTemplateVisibilityIT extends ChromeBrowserTest { | ||
|
|
||
| @Test | ||
| public void innerTemplateIsHiddenWithDisplayNone() { | ||
| open(); | ||
|
|
||
| // when inner is hidden | ||
| NativeButtonElement toggleButton = $(NativeButtonElement.class) | ||
| .id(InnerTemplateVisibilityView.TOGGLE_INNER_VISIBILITY_BUTTON_ID); | ||
| toggleButton.click(); | ||
|
|
||
| // then: element is not visible, attribute 'hidden' and 'display: none' | ||
| // set | ||
| WebElement outer = findElement( | ||
| By.id(InnerTemplateVisibilityView.OUTER_ID)); | ||
| WebElement inner = findInShadowRoot(outer, | ||
| By.id(InnerTemplateVisibilityView.INNER_ID)).get(0); | ||
| Assert.assertFalse("expected inner to be hidden", inner.isDisplayed()); | ||
| Assert.assertNotNull("expected attribute hidden on inner", | ||
| inner.getAttribute("hidden")); | ||
| Assert.assertEquals("expected 'display: none' on inner", "none", | ||
| inner.getCssValue("display")); | ||
| } | ||
|
|
||
| @Test | ||
| public void innerTemplateDisplayStyleRestored() { | ||
| open(); | ||
|
|
||
| // when inner is hidden and unhidden | ||
| NativeButtonElement toggleButton = $(NativeButtonElement.class) | ||
| .id(InnerTemplateVisibilityView.TOGGLE_INNER_VISIBILITY_BUTTON_ID); | ||
| toggleButton.click(); | ||
| toggleButton.click(); | ||
|
|
||
| // then: element is visible, attribute and 'display: none' are no longer | ||
| // present | ||
| WebElement outer = findElement( | ||
| By.id(InnerTemplateVisibilityView.OUTER_ID)); | ||
| WebElement inner = findInShadowRoot(outer, | ||
| By.id(InnerTemplateVisibilityView.INNER_ID)).get(0); | ||
| Assert.assertTrue("expected inner to be visible", inner.isDisplayed()); | ||
| Assert.assertNull("inner should not have attribute hidden", | ||
| inner.getAttribute("hidden")); | ||
| Assert.assertEquals("expected 'display: block' on inner", "block", | ||
| inner.getCssValue("display")); | ||
| } | ||
|
|
||
| @Test | ||
| public void outerTemplateIsHiddenWithAttributeOnly() { | ||
| open(); | ||
|
|
||
| // when hidden | ||
| NativeButtonElement toggleButton = $(NativeButtonElement.class) | ||
| .id(InnerTemplateVisibilityView.TOGGLE_OUTER_VISIBILITY_BUTTON_ID); | ||
| toggleButton.click(); | ||
|
|
||
| // then: element is not visible, attribute 'hidden' is set but | ||
| // 'display: none' is not set | ||
| WebElement outer = findElement( | ||
| By.id(InnerTemplateVisibilityView.OUTER_ID)); | ||
| Assert.assertFalse("expected outer to be hidden", outer.isDisplayed()); | ||
| Assert.assertNotNull("expected attribute hidden on outer", | ||
| outer.getAttribute("hidden")); | ||
| Assert.assertEquals("expected no style attribute", "", | ||
| outer.getAttribute("style")); | ||
| } | ||
| } |