<!DOCTYPE html>
<html>
<head>
  <style>
    #result {
      width: 100px;
      height:100px;
      background-color:#0063AB;
    }
  </style>
</head>
<body>

<div id="result"></div>

<script>

  let test_status = 'pending';
  document.querySelector('#result').style.display = 'none';

  function expect(expected_output, btoa_input) {
    if (expected_output !== btoa(btoa_input)) {
      test_status = 'failed';
      const fullMessage = 'Test failed! expected btoa('+btoa_input+') to be: '+expected_output;
      console.error(fullMessage.replace('\0', '\\0'));
    }
  }

  const test_cases = [
    // Each of these entries is a pair of (expected_result, btoa() input).
    ['AA==', '\0'],
    ['CjM=', '\0123'],
    ['YWJjAGRlZg==', 'abc\0def'],
  ];

  for (let i = 0; i < test_cases.length; i++) {
    expect(test_cases[i][0], test_cases[i][1]);
  }

  if (test_status !== 'failed') {
    document.querySelector('#result').style.display = 'block';
  }


</script>

</body>
</html>