lighthouse-cli/test/fixtures/dobetterweb/dbw_tester.html

<!doctype html>
<!--
 * Copyright 2016 Google Inc. All Rights Reserved.
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
 * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
-->

<!-- FAIL - appcache manifest. Note: Appcache cannot be toggled at runtime. -->
<html manifest="clock.appcache">
<head>
<title>DoBetterWeb Mega Tester... Of Death</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">

<template id="links-blocking-first-paint-tmpl">
  <link rel="stylesheet" href="./dbw_tester.css?scriptActivated&delay=200"> <!-- PASS: initiator is script -->
</template>

<!-- Note: these will only fail when using the static-server.js, which supports the ?delay=true param.
     If you're using your own server, the resource will load instantly and the
     stylesheets will be ignored for being below the threshold. -->
<!-- we use a relative protocol url to test that `new URL(resource)` in the critical-request-chains.js audit can handle it -->
<link rel="stylesheet" href="//localhost:10200/dobetterweb/dbw_tester.css?delay=100"> <!-- FAIL, when run under smokehouse -->
<link rel="stylesheet" href="./unknown404.css?delay=200"> <!-- FAIL -->
<link rel="stylesheet" href="./dbw_tester.css?delay=2200"> <!-- FAIL -->
<link rel="stylesheet" href="./dbw_disabled.css?delay=200&isdisabled" disabled> <!-- PASS -->
<link rel="import" href="./dbw_partial_a.html?delay=200"> <!-- FAIL -->
<link rel="import" href="./dbw_partial_b.html?delay=200&isasync" async> <!-- PASS -->

<!-- PASS: preload that's activated later does not block rendering. -->
<link rel="preload" href="./dbw_tester.css?delay=2000&async=true" as="style" onload="this.rel = 'stylesheet'">
<!-- PASS: async stylesheet that loads after FCP -->
<link rel="stylesheet" href="./dbw_tester.css?delay=3000&async=true" disabled onload="this.disabled = false">

<!-- FAIL: block rendering -->
<script src="./dbw_tester.js"></script>

<!-- FAIL(errors-in-console): exception thrown -->
<script type="text/javascript">throw new Error('An error');</script>

<style>
  body {
    color: #000;
  }
  .failedselector {
    -webkit-box-flex: 1; /* FAIL */
    box-flex: 1; /* FAIL */
  }
</style>

<template id="old-flexbox-tmpl">
<style>
  p, div {
    background: red, green;
    border-radius: 3px;
    transform: translateZ(0);
    display: box; /* FAIL */
    transition: opacity 300ms ease-in-out;
  }
  .span {
    transform: translate3d(0,0,0);
    display: box; /* FAIL: old flexbox usage */
  }
  .span2,
  .span3 {
          display: box;  /* FAIL: old flexbox usage */
    color:     red;
  }
  .span4,
  .span5 { display:     box; /* FAIL - old flexbox, weird formatting */
    box-shadow: 3px 3px 3px purple,
                3px 3px 3px blue;
  }
  .span6 {
    box-shadow: 3px 3px 3px purple,
                3px 3px
                3px green;
  }
</style>
</template>

<template id="deprecations-tmpl">
  <style>
    body /deep/ div {
      color: pink; /* FAIL - deprecation warning */
    }
  </style>
</template>

</head>
<body>

<div>
  <h2>Do better web tester page</h2>
  <span>Hi there!</span>
</div>

<section id="touchmove-section">touchmove section</section>

<template id="noopener-links-tmpl">
  <!-- FAIL - does not use rel="noopener" to open external link -->
  <a href="https://www.google.com/" target="_blank">external link</a>
  <!-- FAIL - does not use rel="noopener" and has no href attribute, giving an
    href value of '' when read, which will throw in a `new URL('')` constructor -->
  <a target="_blank">external link</a>
  <!-- PASS -->
  <a href="https://www.google.com/" target="_blank" rel="noopener nofollow">external link that uses rel noopener and another unrelated rel attribute</a>
  <!-- PASS -->
  <a href="./doesnotexist" target="_blank">internal link is ok</a>
</template>

<template id="password-inputs-can-be-pasted-into">
  <!-- FAIL - calls preventDefault on event -->
  <input type="password" onpaste="event.preventDefault();" />
  <!-- PASS -->
  <input type="password" />
  <!-- FAIL - returns false in event handler -->
  <input type="password" onpaste="return false;" />

</template>

<!-- FAIL(image-aspect-ratio): image is naturally 480x318 -->
<img src="lighthouse-480x318.jpg" width="480" height="57">
<!-- PASS(image-aspect-ratio) -->
<img src="lighthouse-480x318.jpg" width="480" height="318">


<!-- Some websites overwrite the original Error object. The captureJSCallUsage function
  relies on the native Error object and prepareStackTrace from V8. When overwriting the stack
  property the e.stack inside the gatherer won't be in the correct format
  https://github.com/GoogleChrome/lighthouse/issues/1194 -->
<script>window.Error = function(error) { this.stack = 'stacktrace'; };</script>

<!--The javascriptDialogOpening test is disabled as we hit a platform bug frequently on travis-->
<!--<script>window.confirm('Is DBW Mega Tester the best site?')</script>-->

<script>
function stampTemplate(id, location) {
  const template = document.querySelector('#' + id);
  location.appendChild(template.content.cloneNode(true));
}

function dateNowTest() {
  function helloDate() {
    // FAIL - Date.now() usage in a function.
    return Date.now();
  }
  helloDate();
  const d = Date.now(); // FAIL
  eval('Date.now()'); // FAIL
  new Function('Date.now()')() // FAIL
}

function consoleTimeTest() {
  // FAIL
  console.time('arg1');
  for (let i = 0; i < 2; i++) {
    // FAIL
    console.time('arg2');
  }
  console.timeEnd('arg1');
  console.timeEnd('arg2');

  eval("console.time('arg3')"); // FAIL
}

function documentWriteTest() {
  document.write('Hi'); // FAIL
  document.write('There'); // FAIL
  document.write('2.0!'); // FAIL
}

function websqlTest() {
  const db = openDatabase('mydb', '1.0', 'my first database', 1024);
}

function mutationEvenTest() {
  // FAIL
  document.addEventListener('DOMNodeInserted', function(e) {
    console.log('DOMNodeInserted');
  });

  // FAIL
  document.addEventListener('DOMNodeRemoved', function(e) {
    console.log('DOMNodeRemoved');
  });

  // FAIL
  document.body.addEventListener('DOMNodeInserted', function(e) {
    console.log('DOMNodeInserted');
  });

  // FAIL
  const el = document.querySelector('#touchmove-section');
  el.addEventListener('DOMNodeInserted', function(e) {
    console.log('DOMNodeInserted on element');
  });

  // FAIL
  window.addEventListener('DOMNodeInserted', function(e) {
    console.log('DOMNodeInserted');
  });

  // PASS - not MutationEvents
  window.addEventListener('DOMContentLoaded', function(e) {
    console.log('DOMContentLoaded');
  });
}

function passiveEventsListenerTest() {
  // FAIL
  window.addEventListener('wheel', function(e) {
    console.log('wheel');
  });

  // FAIL
  window.addEventListener('touchstart', function(e) {
    console.log('touchstart');
  });

  // PASS - passive:false doesn't get a warning now. crbug.com/770208
  window.addEventListener('mousewheel', function(e) {
    console.log('mousewheel');
  }, {passive: false});

  // FAIL
  document.addEventListener('touchstart', function(e) {
    console.log('touchstart document');
  });

  // FAIL
  document.body.addEventListener('touchmove', function(e) {
    console.log('touchmove');
  });

  // FAIL
  const el = document.querySelector('#touchmove-section');
  el.addEventListener('touchmove', function(e) {
    console.log('touchmove');
  });

  // PASS - calls preventDefault() but isnt passive;
  document.addEventListener('touchstart', function(e) {

    e.preventDefault(); // intentionally surrounded by whitespace.

    console.log('touchstart - preventDefault called');
  });

  // PASS
  document.body.addEventListener('touchstart', function(e) {
    console.log('touchstart');
  }, {passive: true});

  // PASS
  window.addEventListener('touchstart', function(e) {
    console.log('touchstart passive');
  }, {passive: true});

  // PASS - another event on window that isn't wheel/touch
  window.addEventListener('scroll', function(e) {
    console.log('scroll');
  });
}

function geolocationOnStartTest() {
  navigator.geolocation.getCurrentPosition(function(position) {
    // noop
  });

  const watchID = navigator.geolocation.watchPosition(function(position) {
    navigator.geolocation.clearWatch(watchID);
  });
}

function notificationOnStartTest() {
  Notification.requestPermission().then(function () {
    // noop
  });
}

function oldCSSFlexboxTest() {
  stampTemplate('old-flexbox-tmpl', document.body);
}

function linksBlockingFirstPaintTest() {
  stampTemplate('links-blocking-first-paint-tmpl', document.head);
}

function noRelOpenLinksTest() {
  stampTemplate('noopener-links-tmpl', document.body);
}

function passwordInputsCanBePastedIntoTest() {
  stampTemplate('password-inputs-can-be-pasted-into', document.body);
}


function deprecationsTest() {
  stampTemplate('deprecations-tmpl', document.head);

  // TODO: some deprecated API messages are not currently being logged correctly.
  // See: https://crbug.com/680832
  try {
    MediaStreamTrack.getSources(); // Should eventually FAIL
  } catch(e) {}

  console.timeline(); // Should eventually FAIL

  // FAIL
  const xhr = new XMLHttpRequest();
  xhr.open('GET', 'dbw_tester.html', false);
  xhr.send();

  window.webkitStorageInfo.PERSISTENT // FAIL
}

function isOnHttps() {
  // Check blob URL.
  const blob = new Blob(['fake'])
  const img = document.createElement('img');
  img.src = URL.createObjectURL(blob);
  document.body.appendChild(img); // PASS
}

// Figure out which tests to fun.
const params = new URLSearchParams(location.search);
if (location.search === '') {
  documentWriteTest();
  dateNowTest();
  consoleTimeTest();
  websqlTest();
  mutationEvenTest();
  passiveEventsListenerTest();
  geolocationOnStartTest();
  notificationOnStartTest();
  linksBlockingFirstPaintTest();
  noRelOpenLinksTest();
  // oldCSSFlexboxTest();
  deprecationsTest();
  passwordInputsCanBePastedIntoTest();
  isOnHttps();
} else {
  if (params.has('documentWrite')) {
    documentWriteTest();
  }
  if (params.has('dateNow')) {
    dateNowTest();
  }
  if (params.has('consoleTime')) {
    consoleTimeTest();
  }
  if (params.has('websql')) {
    websqlTest();
  }
  if (params.has('mutationEvents')) {
    mutationEvenTest();
  }
  if (params.has('passiveEvents')) {
    passiveEventsListenerTest();
  }
  if (params.has('geolocation')) {
    geolocationOnStartTest();
  }
  if (params.has('notifications')) {
    notificationOnStartTest();
  }
  if (params.has('linksblockfp')) {
    linksBlockingFirstPaintTest();
  }
  if (params.has('relnoopener')) {
    noRelOpenLinksTest();
  }
  // if (params.has('oldcssflexbox')) {
  //   oldCSSFlexboxTest();
  // }
  if (params.has('deprecations')) {
    deprecationsTest();
  }
  if (params.has('passwordinputs')) {
    passwordInputsCanBePastedIntoTest();
  }
  if (params.has('isonhttps')) {
    isOnHttps();
  }
}
</script>

<!-- PASS: not in header, so it does not block rendering. zone.js is loaded
     by the static-server and provides a polyfill for Promise. -->
<script src="/zone.js"></script>
<!-- FAIL(is-on-https): requires a non-localhost http file
     FAIL: Loads a vulnerable JS library
-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>