Bug 1786053 [wpt PR 35535] - Simplify pop-up CSS rules, and add !impo…

…rtant to display:none, a=testonly

Automatic update from web-platform-tests
Simplify pop-up CSS rules, and add !important to display:none

Per the resolution and discussion at [1], we've decided to simplify
the UA rules for pop-up attribute selectors, to capture *any*
`popup` attribute value. Additionally (and this part is tentative),
it looks like we'll likely resolve to put back `!important` on
display:none, so that `[popup] {display:flex}` can work.

[1] openui/open-ui#561 (comment)

Bug: 1307772
Change-Id: If3d52cce0c9cbd3c6134ff57836d65c93eb12c48
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3840811
Auto-Submit: Mason Freed <masonf@chromium.org>
Commit-Queue: Mason Freed <masonf@chromium.org>
Reviewed-by: David Baron <dbaron@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1037921}

--

wpt-commits: a0ece3bbdbfdf1bd0f66f841b06d54c1d927af0a
wpt-pr: 35535

testing/web-platform/tests/html/semantics/popups/popup-appearance-ref.tentative.html

@@ -12,9 +12,8 @@
 </style>
 
 <p>There should be four pop-ups with similar appearance, and
-  the word Unknown with no special styling.</p>
+   the word "Unknown" should not be visible on the page.</p>
 <div class="fake-pop-up" id=blank>Blank</div>
 <div class="fake-pop-up" id=auto>Auto</div>
 <div class="fake-pop-up" id=hint><span>Hint</span></div>
 <div class="fake-pop-up" id=manual>Manual</div>
-<div class="not-a-pop-up!" id=unknown>Unknown</div>

testing/web-platform/tests/html/semantics/popups/popup-appearance.tentative.html

@@ -14,13 +14,13 @@
 </style>
 
 <p>There should be four pop-ups with similar appearance, and
-   the word Unknown with no special styling.</p>
+   the word "Unknown" should not be visible on the page.</p>
 <div popup>Blank
   <div popup=auto>Auto</div>
 </div>
 <div popup=hint>Hint</div>
 <div popup=manual>Manual</div>
-<!-- This ensures unsupported popup values don't receive styling -->
+<!-- This ensures unsupported popup values are hidden -->
 <div popup=unknown>Unknown</div>
 <script>
   document.querySelectorAll('[popup]').forEach(p => {

testing/web-platform/tests/html/semantics/popups/popup-attribute-basic.tentative.html

@@ -57,12 +57,14 @@
     parent.appendChild(popUp);
   }
   function assertNotAPopUp(nonPopUp) {
-    // Non-popup elements should already be visible.
-    assert_true(popUpVisible(nonPopUp, /*isPopUp*/false));
+    // If the non-pop-up element nonetheless has a 'popup' attribute, it should
+    // be invisible. Otherwise, it should be visible.
+    const expectVisible = !nonPopUp.hasAttribute('popup');
+    assert_equals(popUpVisible(nonPopUp, /*isPopUp*/false),expectVisible);
     assert_throws_dom("NotSupportedError",() => nonPopUp.showPopUp(),'Calling showPopUp on a non-pop-up should throw NotSupportedError');
-    assert_true(popUpVisible(nonPopUp, /*isPopUp*/false));
+    assert_equals(popUpVisible(nonPopUp, /*isPopUp*/false),expectVisible);
     assert_throws_dom("NotSupportedError",() => nonPopUp.hidePopUp(),'Calling hidePopUp on a non-pop-up should throw NotSupportedError');
-    assert_true(popUpVisible(nonPopUp, /*isPopUp*/false));
+    assert_equals(popUpVisible(nonPopUp, /*isPopUp*/false),expectVisible);
   }
 
   Array.from(document.getElementById('popups').children).forEach(popUp => {

testing/web-platform/tests/html/semantics/popups/popup-hidden-display-ref.tentative.html

@@ -2,14 +2,3 @@
 <meta charset="utf-8">
 <link rel=author href="mailto:masonf@chromium.org">
 <link rel="stylesheet" href="resources/popup-styles.css">
-
-<div class=fake-pop-up>This content should be visible</div>
-
-<style>
-  .fake-pop-up {
-    top: 0;
-    left: 0;
-    width: 300px;
-    height: 200px;
-  }
-</style>

testing/web-platform/tests/html/semantics/popups/popup-hidden-display.tentative.html

@@ -4,11 +4,12 @@
 <link rel=help href="https://open-ui.org/components/popup.research.explainer">
 <link rel=match href="popup-hidden-display-ref.tentative.html">
 
-<div popup>This content should be visible</div>
+<div popup>This content should *not* be visible</div>
+<div popup=invalid>This content should *not* be visible</div>
 
 <style>
   [popup] {
-    display: block; /* This should make the popup visible */
+    display: block !important; /* This should *not* make the popup visible */
     top: 0;
     width: 300px;
     height: 200px;

testing/web-platform/tests/html/semantics/popups/resources/popup-styles.css

@@ -9,16 +9,11 @@
   margin: auto;
   border: solid;
   overflow: auto;
-  padding: 1em;
   color: CanvasText;
   background-color: Canvas;
 }
 .fake-pop-up-backdrop {
   position: fixed;
-  inset-inline-start: 0;
-  inset-inline-end: 0;
-  inset-block-start: 0;
-  inset-block-end: 0;
-  background: transparent;
+  top:0; right:0; bottom:0; left:0;
   pointer-events: none !important;
 }