test/manual/index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>mini-css-extract-plugin testcase</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="/dist/preloaded1.css" />
  <style>
    .test {
      background: lightcoral;
    }
    .errors {
      font-weight: bold;
      color: darkred;
    }
    .preloaded-css1 {
      background: lightgreen;
    }
  </style>
  <style data-href="preloaded2.css">
    .preloaded-css2 {
      background: lightgreen;
    }
  </style>
  <link rel="stylesheet" type="text/css" href="/dist/main.css" />
</head>
<body>
  <div class="test initial-css">
    Initial CSS: Must be green
  </div>
  <div class="test lazy-css">
    <p>Lazy CSS: Must be red, but turn green when <button class="lazy-button">pressing this button</button>.</p>
    <p>But turn orange, when <button class="lazy-button2">pressing this button</button>. Additional clicks have no effect.</p>
    <p>Refresh and press buttons in reverse order: This should turn green instead.</p>
  </div>
  <div class="test preloaded-css1">
    <p>Preloaded CSS: Must be green.</p>
    <p><button class="preloaded-button1">Pressing this button</button> displays an alert and should turn red.</p>
  </div>
  <div class="test preloaded-css2">
    <p>Preloaded inlined CSS: Must be green.</p>
    <p><button class="preloaded-button2">Pressing this button</button> displays an alert and should turn red.</p>
  </div>
  <div class="errors"></div>
  <script async defer src="/dist/main.js"></script>
</body>
</html>