font-ligatures-linebreak-word.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
  <title>Ligature Linebreaking</title>
  <script src="../../resources/testharness.js"></script>
  <script src="../../resources/testharnessreport.js"></script>

<style type="text/css">
@font-face {
  font-family: megalopolis;
  src: url(../../third_party/MEgalopolis/MEgalopolisExtra.woff) format("woff");
}

body { 
font-family: megalopolis, sans-serif; 
}

.dlig {
-moz-font-feature-settings:"frac" 1, "dlig" 1; 
-moz-font-feature-settings:"frac=1, dlig=1"; 
-ms-font-feature-settings:"frac" 1, "dlig" 1; 
-o-font-feature-settings:"frac" 1, "dlig" 1; 
-webkit-font-feature-settings:"frac" 1, "dlig" 1; 
font-feature-settings:"frac" 1, "dlig" 1;
font-size: 24px;
line-height: 100%;
padding: 0px;
}

p { font-family: serif; font-style: italic; }

.container {
width: 1.4em;
background-color: lightpink;
word-wrap: break-word;
}

</style>
</head>

<body>
<div class="dlig container">CACA</div>

<div id="log"></div>
<script>
  setup({ explicit_done: true });
  window.addEventListener("load", function() {
    test(function(){
      assert_true(document.querySelector('.dlig').clientHeight <= 24, "Two ligatures laid out in one line.");
    }, "Word expected to be laid out in one line.");
    done();
  });
</script>

</body></html>

chromium/third_party/blink/web_tests/virtual/text-antialias/font-ligatures-linebreak-word.html