| <head> |
| <style id="inlinestyle1"> |
| |
| /* An inline style can't contain the end style tag. This escaped url string |
| evaluates to the style end tag, so it should remain escaped in the serialized |
| MHTML page. */ |
| p#p-end-style-tag { |
| display: none; |
| background-image: url("\3C/style>"); |
| } |
| p#p-end-style-tag { |
| display: revert; |
| } |
| </style> |
| |
| <link rel="stylesheet" href="style.css"> |
| </head> |
| <style> |
| @import url("imported_inline.css"); |
| #hidden1 { |
| display: block; |
| } |
| #hidden2 { |
| display: none; |
| } |
| /* |
| This style won't serialize correctly because the spec does not allow it, see |
| crbug.com/40804066. Because this style element is not modified by JS, Chrome |
| should leave it alone rather than serialize a replacement. |
| */ |
| #font-a { |
| --font-sans: sans; |
| font: normal 600 60px var(--font-sans); |
| line-height: 30px; |
| } |
| </style> |
| |
| |
| <body> |
| <!--Only hidden1 and hidden4 should be visible if stylesheets |
| are applied in the correct order. --> |
| |
| <!--Hidden by <link>, shown by inline style.--> |
| <div id="hidden1">hidden1</div> |
| <!--Shown by <link>, hidden by inline style.--> |
| <div id="hidden2">hidden2</div> |
| <!--Shown by first inline style, Hidden by <link>.--> |
| <div id="hidden3">hidden3</div> |
| <!--Hidden by first inline style, Shown by <link>.--> |
| <div id="hidden4">hidden4</div> |
| |
| |
| |
| <div id="font-a">font-a</div> |
| <div id="font-b">font-b</div> |
| <div id="font-c">font-b</div> |
| |
| <div id="font-d">font-d</div> |
| |
| <p id="p-end-style-tag">This should show if inline CSS is escaped.</p> |
| <script> |
| // Ensure we serialize the modified stylesheet. |
| const sheet1 = document.getElementById("inlinestyle1").sheet; |
| sheet1.insertRule(`#hidden3 { |
| display: block; |
| }`); |
| sheet1.insertRule(`#hidden4 { |
| display: none; |
| }`); |
| // Ensure a style appended like this isn't re-serialized incorrectly. |
| const sheet2 = document.createElement("style"); |
| sheet2.innerText = ` |
| #hidden-by-appended-style { |
| --font-sans: sans; |
| font: normal 600 60px var(--font-sans); |
| line-height: 30px; |
| }`; |
| document.head.appendChild(sheet2); |
| </script> |
| |
| </body> |
