From 204d8b0043024e7727b20e03e1ffe340553c7106 Mon Sep 17 00:00:00 2001
From: Sid Vishnoi <sidvishnoi8@gmail.com>
Date: Fri, 17 Apr 2020 15:29:05 +0530
Subject: [PATCH] fix(core/dfn-panel): workaround css-validator errors

---
 assets/dfn-panel.css  | 27 +++++++++++++++------------
 src/core/dfn-panel.js | 11 +++++++----
 2 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/assets/dfn-panel.css b/assets/dfn-panel.css
index ca1daa4f1a..ae73e2a8b2 100644
--- a/assets/dfn-panel.css
+++ b/assets/dfn-panel.css
@@ -1,39 +1,42 @@
 /* dfn popup panel that list all local references to a dfn */
+/**
+ * TODO: Revert changes due to https://github.com/w3c/respec/pull/2888 when
+ * https://github.com/w3c/css-validator/pull/111 is fixed.
+ */
 dfn {
   cursor: pointer;
 }
 
 .dfn-panel {
-  --fill: #fff;
   position: absolute;
-  left: var(--left); /* set via JS */
-  top: var(--top); /* set via JS */
   z-index: 35;
   min-width: 300px;
   max-width: 500px;
   padding: 0.5em 0.75em;
   margin-top: 0.6em;
   font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
-  background: var(--fill);
+  background: #fff;
   color: black;
   box-shadow: 0 1em 3em -0.4em rgba(0, 0, 0, 0.3),
     0 0 1px 1px rgba(0, 0, 0, 0.05);
   border-radius: 2px;
 }
-
 /* Triangle/caret */
-.dfn-panel:not(.docked)::before,
-.dfn-panel:not(.docked)::after {
+.dfn-panel:not(.docked) > .caret {
+  position: relative;
+  top: -0.25em;
+}
+.dfn-panel:not(.docked) > .caret::before,
+.dfn-panel:not(.docked) > .caret::after {
   content: "";
   position: absolute;
   border: 10px solid transparent;
   border-top: 0;
-  border-bottom: 9px solid #a2a9b1; /* triangle outline */
-  top: -9px;
-  left: calc(var(--caret-offset, 0px) + 0.75em); /* set via JS */
+  border-bottom: 10px solid #fff;
+  top: 0;
 }
-.dfn-panel:not(.docked)::after {
-  border-bottom: 10px solid var(--fill); /* triangle fill */
+.dfn-panel:not(.docked) > .caret::before {
+  border-bottom: 10px solid #a2a9b1;
 }
 
 .dfn-panel * {
diff --git a/src/core/dfn-panel.js b/src/core/dfn-panel.js
index 1ad9f0f09c..18be7b88f8 100644
--- a/src/core/dfn-panel.js
+++ b/src/core/dfn-panel.js
@@ -30,6 +30,8 @@ export async function run() {
         break;
       }
       case "dock": {
+        panel.style.left = null;
+        panel.style.top = null;
         panel.classList.add("docked");
         break;
       }
@@ -70,6 +72,7 @@ function createPanel(dfn) {
   /** @type {HTMLElement} */
   const panel = hyperHTML`
     <aside class="dfn-panel" id="dfn-panel">
+      <span class="caret"></span>
       <b><a class="self-link" href="${href}">Permalink</a></b>
       <b>Referenced in:</b>
       ${referencesToHTML(id, links)}
@@ -158,8 +161,8 @@ function displayPanel(dfn, panel, { x, y }) {
 
   const top = window.scrollY + closestTop + dfnRects[0].height;
   const left = x - MARGIN;
-  panel.style.setProperty("--left", `${left}px`);
-  panel.style.setProperty("--top", `${top}px`);
+  panel.style.left = `${left}px`;
+  panel.style.top = `${top}px`;
 
   // Find if the panel is flowing out of the window
   const panelRect = panel.getBoundingClientRect();
@@ -167,8 +170,8 @@ function displayPanel(dfn, panel, { x, y }) {
   if (panelRect.right > SCREEN_WIDTH) {
     const newLeft = Math.max(MARGIN, x + MARGIN - panelRect.width);
     const newCaretOffset = left - newLeft;
-    panel.style.setProperty("--left", `${newLeft}px`);
-    panel.style.setProperty("--caret-offset", `${newCaretOffset}px`);
+    panel.style.left = `${newLeft}px`;
+    panel.querySelector(".caret").style.left = `${newCaretOffset}px`;
   }
 }