<!DOCTYPE html>
<html class="reftest-wait">
<meta charset="utf-8">
<style>
@font-face {
  font-family: test;
  src: url(../fonts/sil/CharisSIL-R.ttf);
}
#test {
  font: 100px test, serif;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-color: blue;
  -webkit-text-stroke-width: 2px;
}
::selection {
  background: transparent;
  color: blue;
}
</style>
<script>
function doTest() {
  let div = document.getElementById("test");
  let range = document.createRange();
  range.setStart(div.firstChild, 2);
  range.setEnd(div.firstChild, 3);
  window.getSelection().addRange(range);
  document.documentElement.removeAttribute("class");
}
</script>
<body onload="doTest()">
<div id="test">office</div>