Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-pseudo/first-letter-background-image-dynamic.html - WPT Dashboard Interop Dashboard
<!doctype html>
<title>CSS Test: ::first-letter correctly applies background-image dynamically</title>
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
<link rel="match" href="first-letter-background-image-ref.html">
<style>
div::first-letter {
color: lime;
}
div.image::first-letter {
/* Lime background */
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M/wHwAEBgIApD5fRAAAAABJRU5ErkJggg==');
}
</style>
<div>
A letter
</div>
<script>
let div = document.querySelector("div");
getComputedStyle(div).color;
div.classList.add('image');
</script>