mq_dynamic_svg_test.html

Enable keyboard shortcuts

<!DOCTYPE html>

<html>

<meta charset=utf-8>

<style>

@media (prefers-color-scheme: dark) {

  rect { fill: green; }

iframe { border: none; }

</style>

<p>inline</p>

<svg width="50" height="50">

  <rect width="50" height="50" fill="red"/>

</svg>

<p>iframe</p>

<iframe src='data:image/svg+xml,

  <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">

    <style>

      @media (prefers-color-scheme: dark) {

        rect { fill: green; }

    </style>

    <rect width="50" height="50" fill="red"/>

  </svg>

' width=50 height=50></iframe>

<p>img</p>

<img src='data:image/svg+xml,

  <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">

    <style>

      @media (prefers-color-scheme: dark) {

        rect { fill: green; }

    </style>

    <rect width="50" height="50" fill="red"/>

  </svg>

' width=50 height=50>

<p>background-image</p>

<div style='background-image: url("data:image/svg+xml,\

  <svg xmlns=&apos;http://www.w3.org/2000/svg&apos; width=&apos;50&apos; height=&apos;50&apos;>\

    <style>\

      @media (prefers-color-scheme: dark) {\

        rect { fill: green; }\

}\

    </style>\

    <rect width=&apos;50&apos; height=&apos;50&apos; fill=&apos;red&apos;/>\

  </svg>\

"); width: 50px; height: 50px;'></div>

<p>img with nested document</p>

<img src='data:image/svg+xml,

  <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">

    <image href="data:image/svg+xml,

      &amp;lt;svg xmlns=&amp;quot;http://www.w3.org/2000/svg&amp;quot; width=&amp;quot;50&amp;quot; height=&amp;quot;50&amp;quot;>

        &amp;lt;style>

          @media (prefers-color-scheme: dark) {

            rect { fill: green; }

        &amp;lt;/style>

        &amp;lt;rect width=&amp;quot;50&amp;quot; height=&amp;quot;50&amp;quot; fill=&amp;quot;red&amp;quot;/>

      &amp;lt;/svg>

    " width="50" height="50"/>

  </svg>

' width=50 height=50>