chromium_src/content/test/data/mhtml/styles.html · OpenHarmony-TPC/chromium_src - AtomGit

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