summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/html/semantics/document-metadata/the-style-element/style_type_svg.svg
blob: 6b0d1e874e32f9225183518041777c4d1a280805 (plain)
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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:h="http://www.w3.org/1999/xhtml"
     width="800px" height="8000px">
  <title>&lt;style&gt; type="" edge cases</title>
  <metadata>
    <h:link rel="help" href="https://html.spec.whatwg.org/multipage/semantics.html#update-a-style-block"/>
  </metadata>
  <h:script src="/resources/testharness.js"/>
  <h:script src="/resources/testharnessreport.js"/>

  <style>
  #test1 { color: rgb(0, 128, 0); }
  </style>

  <style type="">
  #test2 { color: rgb(0, 128, 0); }
  </style>

  <style type="TEXT/CsS">
  #test3 { color: rgb(0, 128, 0); }
  </style>

  <style type=" text/css ">
  #test4 { color: rgb(0, 128, 0); }
  </style>

  <style type="text/css; charset=utf-8">
  #test5 { color: rgb(0, 128, 0); }
  </style>

  <h:body>
    <h:div id="test1"/>
    <h:div id="test2"/>
    <h:div id="test3"/>
    <h:div id="test4"/>
    <h:div id="test5"/>

    <h:script><![CDATA[
    "use strict";

    test(() => {
      assertApplied("test1");
    }, "With no type attribute, the style should apply");

    test(() => {
      assertApplied("test2");
    }, "With an empty type attribute, the style should apply");

    test(() => {
      assertApplied("test3");
    }, "With a mixed-case type attribute, the style should apply");

    test(() => {
      assertNotApplied("test4");
    }, "With a whitespace-surrounded type attribute, the style should not apply");

    test(() => {
      assertNotApplied("test5");
    }, "With a charset parameter in the type attribute, the style should not apply");

    function getColor(id) {
      return window.getComputedStyle(document.getElementById(id)).color;
    }

    function assertApplied(id) {
      assert_equals(getColor(id), "rgb(0, 128, 0)");
    }

    function assertNotApplied(id) {
      assert_not_equals(getColor(id), "rgb(0, 128, 0)");
    }
    ]]></h:script>
  </h:body>
</svg>