Fix bug that media attribute is not honored on <style> element.

vivliostyle · Jan 29, 2019 · 35bea5e · 35bea5e
1 parent 5e12deb
commit 35bea5e
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 4 deletions.
diff --git a/src/adapt/ops.js b/src/adapt/ops.js
@@ -1695,8 +1695,11 @@ adapt.ops.OPSDocStore.prototype.parseOPSResource = function(response) {
                 const localName = child.localName;
                 if (ns == adapt.base.NS.XHTML) {
                     if (localName == "style") {
+                        const classes = child.getAttribute("class");
+                        const media = child.getAttribute("media");
+                        const title = child.getAttribute("title");
                         sources.push({url, text:child.textContent,
-                            flavor:adapt.cssparse.StylesheetFlavor.AUTHOR, classes: null, media: null});
+                            flavor:adapt.cssparse.StylesheetFlavor.AUTHOR, classes: (title ? classes : null), media});
                     } else if (localName == "link") {
                         const rel = child.getAttribute("rel");
                         const classes = child.getAttribute("class");

diff --git a/test/files/print_media/index.html b/test/files/print_media/index.html
@@ -6,10 +6,14 @@
     <style>
         .link_all, .link_print, .link_tv_or_print,
         .import_all, .import_print, .import_tv_or_print,
-        .at_media_all, .at_media_print, .at_media_tv_or_print {
+        .at_media_all, .at_media_print, .at_media_tv_or_print,
+        .style_all, .style_print, .style_tv_or_print {
             color: red;
         }
-        .link_tv, .link_tv_or_print_nocolor, .import_tv, .import_tv_or_print_nocolor, .at_media_tv, .at_media_tv_or_print_nocolor {
+        .link_tv, .link_tv_or_print_nocolor,
+        .import_tv, .import_tv_or_print_nocolor,
+        .at_media_tv, .at_media_tv_or_print_nocolor,
+        .style_tv, .style_tv_or_print_nocolor {
             color: green;
         }
 
@@ -50,6 +54,31 @@
     <link rel="stylesheet" type="text/css" media="tv" href="link_tv.css">
     <link rel="stylesheet" type="text/css" media="tv, print" href="link_tv_or_print.css">
     <link rel="stylesheet" type="text/css" media="tv, print and (color:0)" href="link_tv_or_print_nocolor.css">
+    <style type="text/css" media="all">
+        .style_all {
+            color: green;
+        }
+    </style>
+    <style type="text/css" media="print">
+        .style_print {
+            color: green;
+        }
+    </style>
+    <style type="text/css" media="tv">
+        .style_tv {
+            color: red;
+        }
+    </style>
+    <style type="text/css" media="tv, print">
+        .style_tv_or_print {
+            color: green;
+        }
+    </style>
+    <style type="text/css" media="tv, print and (color:0)">
+        .style_tv_or_print_nocolor {
+            color: red;
+        }
+    </style>
 </head>
 <body>
 <p class="link_all">This text should be green. (<code>link</code> element with <code>media="all"</code>)</p>
@@ -69,5 +98,11 @@
 <p class="at_media_tv">This text should not be red. (<code>@media tv</code> in <code>style</code> element)</p>
 <p class="at_media_tv_or_print">This text should be green. (<code>@media tv, print</code> in <code>style</code> element)</p>
 <p class="at_media_tv_or_print_nocolor">This text should not be red. (<code>@media tv, print and (color:0)</code> in <code>style</code> element)</p>
+
+<p class="style_all">This text should be green. (<code>style</code> element with <code>media="all"</code>)</p>
+<p class="style_print">This text should be green. (<code>style</code> element with <code>media="print"</code>)</p>
+<p class="style_tv">This text should not be red. (<code>style</code> element with <code>media="tv"</code>)</p>
+<p class="style_tv_or_print">This text should be green. (<code>style</code> element with <code>media="tv, print"</code>)</p>
+<p class="style_tv_or_print_nocolor">This text should not be red. (<code>style</code> element with <code>media="tv, print and (color:0)"</code>)</p>
 </body>
-</html>
+</html>