image/test/mochitest/mq_dynamic_svg_test.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

<!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>