Quick HTML test case

For reporting a bug or an unexpected behavior, the simpler the test is, the better. You can create a very simple HTML file to demonstrate the issue or you can use an online code web app such as jsfiddle or codepen. (I have a preference for codepen but I don't know why.) But most of the time, I'm using data: URL to share a simple piece of code for a test.

Let's take this code.

<div class="test" style="opacity:clamp(50%,0%,70%)"></div>

The style attribute returns different values when we extract the value using getPropertyValue()

• 0.5 in Safari Technology Preview 18.4 (220) 20622.1.14.5
• calc(0.5) in Firefox Nightly 141.0a1 14125.6.5
• clamp(50%, 0%, 70%) in Google Chrome Canary 139.0.7233.0 7233.0

According to the WPT test, Firefox returns the right answer: calc(0.5)

To see the returned value, we coud do :

<!-- The code being tested. -->
<div class="test" style="opacity:clamp(50%,0%,70%)"></div>

<!-- Something that can hold the test result. -->
<div class="log"></div>

<!-- the script extracting the value and writing the test result. -->
<script>
  document.querySelector(".log").textContent=document.querySelector(".test").style.getPropertyValue("opacity");
</script>

This is very simple. I can put all of this on one line.

<div class="test" style="opacity:clamp(50%,0%,70%)"></div><div class="log"></div><script>document.querySelector(".log").textContent=document.querySelector(".test").style.getPropertyValue("opacity");</script>

Then I just need to add the right data URL in front of it. This is HTML, so we add data:text/html,. That's it. This will instruct the browser to parse the code in the URL bar to process it as HTML.

data:text/html,<div class="test" style="opacity:clamp(50%,0%,70%)"></div><div class="log"></div><script>document.querySelector(".log").textContent=document.querySelector(".test").style.getPropertyValue("opacity");</script>

Then you can copy/paste this code in the URL bar of your favorite browser or more exactly in multiple browsers.

Hope it helps! Yes, I opened a bug for the issue.

Note: For those, who are wondering why I didn't use id instead of class. The # sign in the querySelector() would require to escape #, because it would have unintended consequences on the parsing of the URL.

Otsukare!