Update UA stylesheet for ::interest-button

This updates the UA stylesheet for the ::interest-button pseudo
element to match the proposal on the issue:

- w3c/csswg-drafts#12437

Bug: 453705247
Change-Id: I92fbcd047e1f7cdd011800f3e0514548d747adcb
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7793652
Reviewed-by: David Baron <dbaron@chromium.org>
Commit-Queue: Mason Freed <masonf@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1621336}

Author: mfreed7

html/semantics/interestfor/interestfor-keyboard-invalidation.tentative.html

@@ -35,6 +35,9 @@
   [interestfor] {
     interest-delay: 0s;
   }
+  [interestfor]::interest-button {
+    display: none;
+  }
   #target {
     inset:auto;
     top:50px;

html/semantics/interestfor/interestfor-plain-inline-element.tentative.html

@@ -17,14 +17,20 @@
       border: none;
       padding: 0;
     }
+    [interestfor] {
+      interest-delay: 0s;
+    }
+    [interestfor]::interest-button {
+      display: none;
+    }
   </style>
   <script src="/resources/testdriver.js"></script>
   <script src="/resources/testdriver-actions.js"></script>
   <script src="/resources/testdriver-vendor.js"></script>
   <script src="resources/invoker-utils.js"></script>
   <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
   <div id="container" style="font:20px/1 Ahem; width:100px; height:100px; color:green; background:red;">
-    <a id="anchor" href="#" interestfor="doohickey" style="interest-delay:0s;">x</a>xxxx
+    <a id="anchor" href="#" interestfor="doohickey">x</a>xxxx
   </div>
   <div popover="hint" id="doohickey">
     <div style="margin-left:-20px; width:100px; height:80px; background:green;"></div>

html/semantics/interestfor/interestfor-pseudo-element-appearance-ref.html

@@ -3,63 +3,58 @@
 <link rel="author" href="mailto:masonf@chromium.org">
 
 <div class=example>
-  <button class=invoker><span class=before>::before</span><span>Button</span><span class=after>::after</span></button>
-  <button class=interestbutton>::interest-button</button>
+  <button class=invoker>
+    <span class=before>::before</span><span class=content>Button</span><span class=interestbutton>::interest-button</span><span class=after>::after</span></button>
 </div>
 <div class=example>
-  <a href=# class=invoker><span class=before>::before</span><span>Link</span><button class=interestbutton>::interest-button</button><span class=after>::after</span></a>
+  <a href=# class=invoker><span class=before>::before</span><span class=content>Link</span><span class=interestbutton>::interest-button</span><span class=after>::after</span></a>
 </div>
 <div class=example>
   <img src="/images/blue.png" usemap="#map1" width=40 height=40>
-  <span class=before>::before</span><map id="map1"><area href="/" shape="default" class=invoker></map><button class=interestbutton>::interest-button</button><span class=after>::after</span>
+  <span class=before>::before</span><map id="map1"><area href="/" shape="default" class=invoker></map><span class=interestbutton>::interest-button</span><span class=after>::after</span>
 </div>
 
 <div id=target></div>
 
 <style>
   .before {
     content: "::before";
-    border: 1px solid green;
+    border: 1px solid lime;
   }
   /* UA stylesheet for ::interest-button: */
   .interestbutton {
-    user-select: none;
-    color: buttontext;
     display: inline-block;
+    box-sizing: border-box;
+    border: 1px solid currentColor;
+    border-radius: 0.5em;
+    color: inherit;
+    background-color: transparent;
+    padding-block: 0.25em;
+    padding-inline: 0.5em;
+    min-block-size: max(24px, 1lh);
+    min-inline-size: 24px;
     text-align: center;
-    cursor: default;
-    background-color: buttonface;
     margin-inline-start: 0.5em;
-    padding-block: 1px;
-    padding-inline: 6px;
-    border-width: 1px;
-    border-radius: 5px;
-    border-style: outset;
-    border-color: buttonborder;
+    user-select: none;
+  }
+
+  .interestbutton:hover {
+    background-color: color-mix(in lab, currentColor 10%, transparent);
+  }
+  .interestbutton:active {
+    background-color: color-mix(in lab, currentColor 20%, transparent);
   }
   .after {
     content: "::after";
-    border: 1px solid green;
+    border: 1px solid lime;
   }
   /* Test convenience: */
   .example {
-    display:block;
     width: 400px;
     height: 50px;
   }
-  .invoker>span {
+  .content {
     border: 1px solid black;
   }
-  .interestbutton {
-    font-family: arial;
-    font-size: 13px;
-  }
 </style>
 
-<script>
-  // Fix up parser moving out the button
-  const interestButton = document.querySelector('button.invoker');
-  const movedButton = document.querySelector('button.invoker + button.interestbutton');
-  const afterSpan = interestButton.querySelector('.after');
-  interestButton.insertBefore(movedButton, afterSpan);
-</script>

html/semantics/interestfor/interestfor-pseudo-element-appearance.tentative.html

@@ -20,20 +20,17 @@
 <style>
   [interestfor]::before {
     content: "::before";
-    border: 1px solid green;
+    border: 1px solid lime;
   }
   [interestfor]::interest-button {
     content: "::interest-button";
-    font-family: arial;
-    font-size: 13px;
   }
   [interestfor]::after {
     content: "::after";
-    border: 1px solid green;
+    border: 1px solid lime;
   }
   /* Test convenience: */
   .example {
-    display:block;
     width: 400px;
     height: 50px;
   }