Make tracking vector image darkmode-aware. Fixes #2905.

bikeshed/fingerprinting.py

@@ -25,7 +25,7 @@ def addTrackingVector(doc: t.SpecT) -> None:
                     h.E.path(
                         {
                             "id": trackingVectorId,
-                            "stroke": "black",
+                            "stroke": "currentcolor",
                             "stroke-linecap": "round",
                             "stroke-linejoin": "round",
                             "stroke-dasharray": "3,2,35,2,20,2",
@@ -45,6 +45,7 @@ def addTrackingVector(doc: t.SpecT) -> None:
                 {
                     "class": doc.md.trackingVectorClass,
                     "href": "https://infra.spec.whatwg.org/#tracking-vector",
+                    "style": "color: currentcolor",
                 },
                 trackingVectorImage(
                     doc.md.trackingVectorImage,
@@ -67,7 +68,7 @@ def trackingVectorImage(
 ) -> t.ElementT:
     if imageURL is None:
         return h.E.svg(
-            {"width": "46", "height": "64", "role": "img", "aria-label": altText},
+            {"width": "46", "height": "64", "role": "img", "aria-label": altText, "class": "darkmode-aware"},
             h.E.title({}, title),
             h.E.use({"href": "#" + trackingVectorId}),
         )
@@ -78,5 +79,6 @@ def trackingVectorImage(
             "src": imageURL,
             "width": imageWidth,
             "height": imageHeight,
+            "class": "darkmode-aware",
         },
     )

docs/index.bs

@@ -1485,7 +1485,7 @@ There are several additional optional keys:
 		and specifies whether and how <{wpt}> elements display anything in the output document.
 	* <dfn>Tracking Vector Class</dfn> is the HTML `class` attribute value used on the link inserted in elements annotated with the `tracking-vector` attribute.
 	* <dfn>Tracking Vector Image</dfn> is an image URL that can be used to represent tracking vectors with an external image.
-		Otherwise an inline SVG is used. The image is a child of the aforementioned link.
+		Otherwise an inline SVG is used. The image is a child of the aforementioned link. This image *will* be marked as darkmode-aware, so make sure it actually is.
 	* <dfn>Tracking Vector Image Width</dfn> is the width of the external image, if any.
 	* <dfn>Tracking Vector Image Height</dfn> is the height of the external image, if any.
 	* <dfn>Tracking Vector Alt Text</dfn> is the replacement text for the inline SVG or external image.

docs/index.html

@@ -1488,9 +1488,9 @@
 		}
 	}
 </style>
-  <meta content="Bikeshed version 877030e6d, updated Fri Mar 8 15:11:56 2024 -0800" name="generator">
+  <meta content="Bikeshed version 26c78a10d, updated Wed Jul 24 12:23:55 2024 -0700" name="generator">
   <link href="https://speced.github.io/bikeshed/" rel="canonical">
-  <meta content="877030e6d61bab4f3a1d4418979e63e3bed69306" name="revision">
+  <meta content="26c78a10d73876e96a126dbf7599eab4d0d998ed" name="revision">
   <meta content="dark light" name="color-scheme">
 <style>/* Boilerplate: style-autolinks */
 .css.css, .property.property, .descriptor.descriptor {
@@ -2299,7 +2299,7 @@
   <div class="head">
    <p data-fill-with="logo"></p>
    <h1 class="p-name no-ref" id="title">Bikeshed Documentation</h1>
-   <h2 class="no-num no-toc no-ref heading settled" id="profile-and-date"><span class="content">Living Standard, <time class="dt-updated" datetime="2024-03-08">8 March 2024</time></span></h2>
+   <h2 class="no-num no-toc no-ref heading settled" id="profile-and-date"><span class="content">Living Standard, <time class="dt-updated" datetime="2024-08-06">6 August 2024</time></span></h2>
    <div data-fill-with="spec-metadata">
     <dl>
      <dt>This version:
@@ -2314,9 +2314,9 @@ <h2 class="no-num no-toc no-ref heading settled" id="profile-and-date"><span cla
    <div data-fill-with="warning"></div>
    <p class="copyright" data-fill-with="copyright"><a href="http://creativecommons.org/publicdomain/zero/1.0/" rel="license"><img alt="CC0" height="15" src="https://licensebuttons.net/p/zero/1.0/80x15.png" width="80"></a> To the extent possible under law, the editors have waived all copyright
 and related or neighboring rights to this work.
-In addition, as of 8 March 2024,
-the editors have made this specification available under the <a href="http://www.openwebfoundation.org/legal/the-owf-1-0-agreements/owfa-1-0" rel="license">Open Web Foundation Agreement Version 1.0</a>,
-which is available at http://www.openwebfoundation.org/legal/the-owf-1-0-agreements/owfa-1-0.
+In addition, as of 6 August 2024,
+the editors have made this specification available under the <a href="https://www.openwebfoundation.org/the-agreements/the-owf-1-0-agreements-granted-claims/owfa-1-0" rel="license">Open Web Foundation Agreement Version 1.0</a>,
+which is available at https://www.openwebfoundation.org/the-agreements/the-owf-1-0-agreements-granted-claims/owfa-1-0.
 Parts of this work may be from another specification document.  If so, those parts are instead covered by the license of that specification document. </p>
    <hr title="Separator for header">
   </div>
@@ -3889,7 +3889,7 @@ <h2 class="heading settled" data-level="4" id="metadata"><span class="secno">4.
      <p><dfn class="dfn-paneled" data-dfn-for="metadata" data-dfn-type="dfn" data-export id="metadata-tracking-vector-class">Tracking Vector Class</dfn> is the HTML <code>class</code> attribute value used on the link inserted in elements annotated with the <code>tracking-vector</code> attribute.</p>
     <li data-md>
      <p><dfn class="dfn-paneled" data-dfn-for="metadata" data-dfn-type="dfn" data-export id="metadata-tracking-vector-image">Tracking Vector Image</dfn> is an image URL that can be used to represent tracking vectors with an external image.
-Otherwise an inline SVG is used. The image is a child of the aforementioned link.</p>
+Otherwise an inline SVG is used. The image is a child of the aforementioned link. This image <em>will</em> be marked as darkmode-aware, so make sure it actually is.</p>
     <li data-md>
      <p><dfn class="dfn-paneled" data-dfn-for="metadata" data-dfn-type="dfn" data-export id="metadata-tracking-vector-image-width">Tracking Vector Image Width</dfn> is the width of the external image, if any.</p>
     <li data-md>
@@ -4534,7 +4534,7 @@ <h3 class="heading settled" data-level="5.12" id="tracking-vectors"><span class=
     <a class="self-link" href="#example-tracking-vector"></a> 
 <pre class="highlight"><c- p>&lt;</c-><c- f>p</c-> <c- e>tracking-vector</c-><c- p>></c->This is an example of an element annotated with that attribute.
 </pre>
-    <p><a class="tracking-vector" href="https://infra.spec.whatwg.org/#tracking-vector"><svg aria-label="(This is a tracking vector.)" height="64" role="img" width="46"><title>There is a tracking vector here.</title><use href="#b732b3fe"></use></svg></a> This is an example of an element annotated with that attribute. </p>
+    <p><a class="tracking-vector" href="https://infra.spec.whatwg.org/#tracking-vector" style="color: currentcolor"><svg aria-label="(This is a tracking vector.)" class="darkmode-aware" height="64" role="img" width="46"><title>There is a tracking vector here.</title><use href="#b732b3fe"></use></svg></a> This is an example of an element annotated with that attribute. </p>
    </div>
    <p>The various "Tracking Vector *" metadata keys can be used to customize the appearance of this annotation,
 though it’s encouraged to leave those in their default state for a consistent appearance across standards.</p>
@@ -8177,6 +8177,6 @@ <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content
 </script>
   <svg style="display:none" viewBox="0 0 46 64">
    <defs>
-    <path d="M2 23Q17 -16 40 12M1 35Q17 -20 43 20M2 40Q18 -19 44 25M3 43Q19 -16 45 29M5 46Q20 -12 45 32M5 49Q11 40 15 27T27 16T45 37M5 49Q15 38 19 25T34 27T44 41M6 52Q17 40 21 28T32 29T43 44M6 52Q21 42 23 31T30 32T42 47M7 54Q23 47 24 36T28 34T41 50M8 56Q26 50 26 35Q28 48 40 53M10 58Q24 54 27 45Q30 52 38 55M27 50Q28 53 36 57M25 52Q28 56 31 57M22 55L26 57M10 58L37 57M13 60L32 60M16 62L28 63" fill="none" id="b732b3fe" stroke="black" stroke-dasharray="3,2,35,2,20,2" stroke-linecap="round" stroke-linejoin="round"></path>
+    <path d="M2 23Q17 -16 40 12M1 35Q17 -20 43 20M2 40Q18 -19 44 25M3 43Q19 -16 45 29M5 46Q20 -12 45 32M5 49Q11 40 15 27T27 16T45 37M5 49Q15 38 19 25T34 27T44 41M6 52Q17 40 21 28T32 29T43 44M6 52Q21 42 23 31T30 32T42 47M7 54Q23 47 24 36T28 34T41 50M8 56Q26 50 26 35Q28 48 40 53M10 58Q24 54 27 45Q30 52 38 55M27 50Q28 53 36 57M25 52Q28 56 31 57M22 55L26 57M10 58L37 57M13 60L32 60M16 62L28 63" fill="none" id="b732b3fe" stroke="currentcolor" stroke-dasharray="3,2,35,2,20,2" stroke-linecap="round" stroke-linejoin="round"></path>
    </defs>
   </svg>

tests/fingerprint001.html

@@ -430,11 +430,11 @@ <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   </nav>
   <main>
    <p>Here’s some text.</p>
-   <p><a class="tracking-vector" href="https://infra.spec.whatwg.org/#tracking-vector"><svg aria-label="(This is a tracking vector.)" height="64" role="img" width="46"><title>There is a tracking vector here.</title><use href="#b732b3fe"></use></svg></a> Some more text that fingerprints! </p>
+   <p><a class="tracking-vector" href="https://infra.spec.whatwg.org/#tracking-vector" style="color: currentcolor"><svg aria-label="(This is a tracking vector.)" class="darkmode-aware" height="64" role="img" width="46"><title>There is a tracking vector here.</title><use href="#b732b3fe"></use></svg></a> Some more text that fingerprints! </p>
    <p>And then some more after that.</p>
   </main>
   <svg style="display:none" viewBox="0 0 46 64">
    <defs>
-    <path d="M2 23Q17 -16 40 12M1 35Q17 -20 43 20M2 40Q18 -19 44 25M3 43Q19 -16 45 29M5 46Q20 -12 45 32M5 49Q11 40 15 27T27 16T45 37M5 49Q15 38 19 25T34 27T44 41M6 52Q17 40 21 28T32 29T43 44M6 52Q21 42 23 31T30 32T42 47M7 54Q23 47 24 36T28 34T41 50M8 56Q26 50 26 35Q28 48 40 53M10 58Q24 54 27 45Q30 52 38 55M27 50Q28 53 36 57M25 52Q28 56 31 57M22 55L26 57M10 58L37 57M13 60L32 60M16 62L28 63" fill="none" id="b732b3fe" stroke="black" stroke-dasharray="3,2,35,2,20,2" stroke-linecap="round" stroke-linejoin="round"></path>
+    <path d="M2 23Q17 -16 40 12M1 35Q17 -20 43 20M2 40Q18 -19 44 25M3 43Q19 -16 45 29M5 46Q20 -12 45 32M5 49Q11 40 15 27T27 16T45 37M5 49Q15 38 19 25T34 27T44 41M6 52Q17 40 21 28T32 29T43 44M6 52Q21 42 23 31T30 32T42 47M7 54Q23 47 24 36T28 34T41 50M8 56Q26 50 26 35Q28 48 40 53M10 58Q24 54 27 45Q30 52 38 55M27 50Q28 53 36 57M25 52Q28 56 31 57M22 55L26 57M10 58L37 57M13 60L32 60M16 62L28 63" fill="none" id="b732b3fe" stroke="currentcolor" stroke-dasharray="3,2,35,2,20,2" stroke-linecap="round" stroke-linejoin="round"></path>
    </defs>
   </svg>

tests/fingerprint003.html

@@ -430,11 +430,11 @@ <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   </nav>
   <main>
    <p>Here’s some text.</p>
-   <p><a class="foo" href="https://infra.spec.whatwg.org/#tracking-vector"><svg aria-label="(This is a tracking vector.)" height="64" role="img" width="46"><title>There is a tracking vector here.</title><use href="#b732b3fe"></use></svg></a> Some text that tracks. </p>
+   <p><a class="foo" href="https://infra.spec.whatwg.org/#tracking-vector" style="color: currentcolor"><svg aria-label="(This is a tracking vector.)" class="darkmode-aware" height="64" role="img" width="46"><title>There is a tracking vector here.</title><use href="#b732b3fe"></use></svg></a> Some text that tracks. </p>
    <p>And then some more after that.</p>
   </main>
   <svg style="display:none" viewBox="0 0 46 64">
    <defs>
-    <path d="M2 23Q17 -16 40 12M1 35Q17 -20 43 20M2 40Q18 -19 44 25M3 43Q19 -16 45 29M5 46Q20 -12 45 32M5 49Q11 40 15 27T27 16T45 37M5 49Q15 38 19 25T34 27T44 41M6 52Q17 40 21 28T32 29T43 44M6 52Q21 42 23 31T30 32T42 47M7 54Q23 47 24 36T28 34T41 50M8 56Q26 50 26 35Q28 48 40 53M10 58Q24 54 27 45Q30 52 38 55M27 50Q28 53 36 57M25 52Q28 56 31 57M22 55L26 57M10 58L37 57M13 60L32 60M16 62L28 63" fill="none" id="b732b3fe" stroke="black" stroke-dasharray="3,2,35,2,20,2" stroke-linecap="round" stroke-linejoin="round"></path>
+    <path d="M2 23Q17 -16 40 12M1 35Q17 -20 43 20M2 40Q18 -19 44 25M3 43Q19 -16 45 29M5 46Q20 -12 45 32M5 49Q11 40 15 27T27 16T45 37M5 49Q15 38 19 25T34 27T44 41M6 52Q17 40 21 28T32 29T43 44M6 52Q21 42 23 31T30 32T42 47M7 54Q23 47 24 36T28 34T41 50M8 56Q26 50 26 35Q28 48 40 53M10 58Q24 54 27 45Q30 52 38 55M27 50Q28 53 36 57M25 52Q28 56 31 57M22 55L26 57M10 58L37 57M13 60L32 60M16 62L28 63" fill="none" id="b732b3fe" stroke="currentcolor" stroke-dasharray="3,2,35,2,20,2" stroke-linecap="round" stroke-linejoin="round"></path>
    </defs>
   </svg>

tests/fingerprint004.html

@@ -430,6 +430,6 @@ <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   </nav>
   <main>
    <p>Here’s some text.</p>
-   <p><a class="tracking-vector" href="https://infra.spec.whatwg.org/#tracking-vector"><img alt="You&apos;re welcome!" height="100" src="https://xanthir.com/pony" title="There is a tracking vector here." width="100"></a> Some text that fingerprints! </p>
+   <p><a class="tracking-vector" href="https://infra.spec.whatwg.org/#tracking-vector" style="color: currentcolor"><img alt="You&apos;re welcome!" class="darkmode-aware" height="100" src="https://xanthir.com/pony" title="There is a tracking vector here." width="100"></a> Some text that fingerprints! </p>
    <p>And then some more after that.</p>
   </main>

tests/fingerprint005.html

@@ -430,11 +430,11 @@ <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   </nav>
   <main>
    <p>Here’s some text.</p>
-   <p><a class="tracking-vector" href="https://infra.spec.whatwg.org/#tracking-vector"><svg aria-label="(This is a tracking vector.)" height="64" role="img" width="46"><title>There is a tracking vector here.</title><use href="#b732b3fe"></use></svg></a> Some text that fingerprints! </p>
+   <p><a class="tracking-vector" href="https://infra.spec.whatwg.org/#tracking-vector" style="color: currentcolor"><svg aria-label="(This is a tracking vector.)" class="darkmode-aware" height="64" role="img" width="46"><title>There is a tracking vector here.</title><use href="#b732b3fe"></use></svg></a> Some text that fingerprints! </p>
    <p>And then some more after that.</p>
   </main>
   <svg style="display:none" viewBox="0 0 46 64">
    <defs>
-    <path d="M2 23Q17 -16 40 12M1 35Q17 -20 43 20M2 40Q18 -19 44 25M3 43Q19 -16 45 29M5 46Q20 -12 45 32M5 49Q11 40 15 27T27 16T45 37M5 49Q15 38 19 25T34 27T44 41M6 52Q17 40 21 28T32 29T43 44M6 52Q21 42 23 31T30 32T42 47M7 54Q23 47 24 36T28 34T41 50M8 56Q26 50 26 35Q28 48 40 53M10 58Q24 54 27 45Q30 52 38 55M27 50Q28 53 36 57M25 52Q28 56 31 57M22 55L26 57M10 58L37 57M13 60L32 60M16 62L28 63" fill="none" id="b732b3fe" stroke="black" stroke-dasharray="3,2,35,2,20,2" stroke-linecap="round" stroke-linejoin="round"></path>
+    <path d="M2 23Q17 -16 40 12M1 35Q17 -20 43 20M2 40Q18 -19 44 25M3 43Q19 -16 45 29M5 46Q20 -12 45 32M5 49Q11 40 15 27T27 16T45 37M5 49Q15 38 19 25T34 27T44 41M6 52Q17 40 21 28T32 29T43 44M6 52Q21 42 23 31T30 32T42 47M7 54Q23 47 24 36T28 34T41 50M8 56Q26 50 26 35Q28 48 40 53M10 58Q24 54 27 45Q30 52 38 55M27 50Q28 53 36 57M25 52Q28 56 31 57M22 55L26 57M10 58L37 57M13 60L32 60M16 62L28 63" fill="none" id="b732b3fe" stroke="currentcolor" stroke-dasharray="3,2,35,2,20,2" stroke-linecap="round" stroke-linejoin="round"></path>
    </defs>
   </svg>

tests/fingerprint006.html

@@ -430,11 +430,11 @@ <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   </nav>
   <main>
    <p>Here’s some text.</p>
-   <p><a class="tracking-vector" href="https://infra.spec.whatwg.org/#tracking-vector"><svg aria-label="(This is a tracking vector.)" height="64" role="img" width="46"><title>A custom Tracking Vector title, &lt;script>alert("xss")&lt;/script>.</title><use href="#b732b3fe"></use></svg></a> Some text that fingerprints! </p>
+   <p><a class="tracking-vector" href="https://infra.spec.whatwg.org/#tracking-vector" style="color: currentcolor"><svg aria-label="(This is a tracking vector.)" class="darkmode-aware" height="64" role="img" width="46"><title>A custom Tracking Vector title, &lt;script>alert("xss")&lt;/script>.</title><use href="#b732b3fe"></use></svg></a> Some text that fingerprints! </p>
    <p>And then some more after that.</p>
   </main>
   <svg style="display:none" viewBox="0 0 46 64">
    <defs>
-    <path d="M2 23Q17 -16 40 12M1 35Q17 -20 43 20M2 40Q18 -19 44 25M3 43Q19 -16 45 29M5 46Q20 -12 45 32M5 49Q11 40 15 27T27 16T45 37M5 49Q15 38 19 25T34 27T44 41M6 52Q17 40 21 28T32 29T43 44M6 52Q21 42 23 31T30 32T42 47M7 54Q23 47 24 36T28 34T41 50M8 56Q26 50 26 35Q28 48 40 53M10 58Q24 54 27 45Q30 52 38 55M27 50Q28 53 36 57M25 52Q28 56 31 57M22 55L26 57M10 58L37 57M13 60L32 60M16 62L28 63" fill="none" id="b732b3fe" stroke="black" stroke-dasharray="3,2,35,2,20,2" stroke-linecap="round" stroke-linejoin="round"></path>
+    <path d="M2 23Q17 -16 40 12M1 35Q17 -20 43 20M2 40Q18 -19 44 25M3 43Q19 -16 45 29M5 46Q20 -12 45 32M5 49Q11 40 15 27T27 16T45 37M5 49Q15 38 19 25T34 27T44 41M6 52Q17 40 21 28T32 29T43 44M6 52Q21 42 23 31T30 32T42 47M7 54Q23 47 24 36T28 34T41 50M8 56Q26 50 26 35Q28 48 40 53M10 58Q24 54 27 45Q30 52 38 55M27 50Q28 53 36 57M25 52Q28 56 31 57M22 55L26 57M10 58L37 57M13 60L32 60M16 62L28 63" fill="none" id="b732b3fe" stroke="currentcolor" stroke-dasharray="3,2,35,2,20,2" stroke-linecap="round" stroke-linejoin="round"></path>
    </defs>
   </svg>

tests/github/whatwg/infra/infra.html

@@ -252,7 +252,7 @@ <h3 class="heading settled" data-level="2.4" id="privacy"><span class="secno">2.
 that involves drawing a border around the text) also leaks information that can be used to group a
 user’s requests. (In this case, by potentially exposing, via a brute force search, which fonts a
 user has installed, information which can vary considerably from user to user.) </p>
-   <p><a class="tracking-vector" href="https://infra.spec.whatwg.org/#tracking-vector"><img alt="(This is a tracking vector.)" crossorigin height="64" src="https://resources.whatwg.org/tracking-vector.svg" title="There is a tracking vector here." width="46"></a> Features that are defined in documents using the Infra Standard that can be used
+   <p><a class="tracking-vector" href="https://infra.spec.whatwg.org/#tracking-vector" style="color: currentcolor"><img alt="(This is a tracking vector.)" class="darkmode-aware" crossorigin height="64" src="https://resources.whatwg.org/tracking-vector.svg" title="There is a tracking vector here." width="46"></a> Features that are defined in documents using the Infra Standard that can be used
 as a <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="tracking-vector">tracking vector</dfn> are marked as this paragraph is. </p>
    <p>Other features in the platform can be used for the same purpose, including, but not limited to: </p>
    <ul>