Codebase Browser
chromium
Go to App

chromium/third_party/blink/web_tests/virtual/text-antialias/mac-system-ui-width.html 

<!DOCTYPE html>
<style>
  .system-ui-font {
    font-family: system-ui, cursive;
  }
</style>
<div style="display: flex;">
  <div style="flex: 1; font-size: 12px;">
    <div class="system-ui-font" style="font-stretch: 10%;">System font at width 10</div>
    <div class="system-ui-font" style="font-stretch: 30%;">System font at width 30</div>
    <div class="system-ui-font" style="font-stretch: 40%;">System font at width 40</div>
    <div class="system-ui-font" style="font-stretch: 50%;">System font at width 50</div>
    <div class="system-ui-font" style="font-stretch: 60%;">System font at width 60</div>
    <div class="system-ui-font" style="font-stretch: 70%;">System font at width 70</div>
    <div class="system-ui-font" style="font-stretch: 80%;">System font at width 80</div>
    <div class="system-ui-font" style="font-stretch: 90%;">System font at width 90</div>
    <div class="system-ui-font" style="font-stretch: 100%;">System font at width 100</div>
    <div class="system-ui-font" style="font-stretch: 110%;">System font at width 110</div>
    <div class="system-ui-font" style="font-stretch: 120%;">System font at width 120</div>
    <div class="system-ui-font" style="font-stretch: 130%;">System font at width 130</div>
    <div class="system-ui-font" style="font-stretch: 140%;">System font at width 140</div>
    <div class="system-ui-font" style="font-stretch: 150%;">System font at width 150</div>
    <div class="system-ui-font" style="font-stretch: 200%;">System font at width 200</div>
    <div class="system-ui-font" style="font-variation-settings: 'wdth' 10;">Variable system font at width 10</div>
    <div class="system-ui-font" style="font-variation-settings: 'wdth' 30;">Variable system font at width 30</div>
    <div class="system-ui-font" style="font-variation-settings: 'wdth' 40;">Variable system font at width 40</div>
    <div class="system-ui-font" style="font-variation-settings: 'wdth' 50;">Variable system font at width 50</div>
    <div class="system-ui-font" style="font-variation-settings: 'wdth' 60;">Variable system font at width 60</div>
    <div class="system-ui-font" style="font-variation-settings: 'wdth' 70;">Variable system font at width 70</div>
    <div class="system-ui-font" style="font-variation-settings: 'wdth' 80;">Variable system font at width 80</div>
    <div class="system-ui-font" style="font-variation-settings: 'wdth' 90;">Variable system font at width 90</div>
    <div class="system-ui-font" style="font-variation-settings: 'wdth' 100;">Variable system font at width 100</div>
    <div class="system-ui-font" style="font-variation-settings: 'wdth' 110;">Variable system font at width 110</div>
    <div class="system-ui-font" style="font-variation-settings: 'wdth' 120;">Variable system font at width 120</div>
    <div class="system-ui-font" style="font-variation-settings: 'wdth' 130;">Variable system font at width 130</div>
    <div class="system-ui-font" style="font-variation-settings: 'wdth' 140;">Variable system font at width 140</div>
    <div class="system-ui-font" style="font-variation-settings: 'wdth' 150;">Variable system font at width 150</div>
    <div class="system-ui-font" style="font-variation-settings: 'wdth' 200;">Variable system font at width 200</div>
    <div class="system-ui-font" style="font-stretch: 110%; font-variation-settings: 'wdth' 10;">Variable system font at
      width 10 overriden</div>
    <div class="system-ui-font" style="font-stretch: 110%; font-variation-settings: 'wdth' 30;">Variable system font at
      width 30 overriden</div>
    <div class="system-ui-font" style="font-stretch: 110%; font-variation-settings: 'wdth' 40;">Variable system font at
      width 40 overriden</div>
    <div class="system-ui-font" style="font-stretch: 110%; font-variation-settings: 'wdth' 50;">Variable system font at
      width 50 overriden</div>
    <div class="system-ui-font" style="font-stretch: 110%; font-variation-settings: 'wdth' 60;">Variable system font at
      width 60 overriden</div>
    <div class="system-ui-font" style="font-stretch: 110%; font-variation-settings: 'wdth' 70;">Variable system font at
      width 70 overriden</div>
    <div class="system-ui-font" style="font-stretch: 110%; font-variation-settings: 'wdth' 80;">Variable system font at
      width 80 overriden</div>
    <div class="system-ui-font" style="font-stretch: 110%; font-variation-settings: 'wdth' 90;">Variable system font at
      width 90 overriden</div>
    <div class="system-ui-font" style="font-stretch: 110%; font-variation-settings: 'wdth' 100;">Variable system font at
      width 100 overriden</div>
    <div class="system-ui-font" style="font-stretch: 110%; font-variation-settings: 'wdth' 110;">Variable system font at
      width 110 overriden</div>
    <div class="system-ui-font" style="font-stretch: 110%; font-variation-settings: 'wdth' 120;">Variable system font at
      width 120 overriden</div>
    <div class="system-ui-font" style="font-stretch: 110%; font-variation-settings: 'wdth' 130;">Variable system font at
      width 130 overriden</div>
    <div class="system-ui-font" style="font-stretch: 110%; font-variation-settings: 'wdth' 140;">Variable system font at
      width 140 overriden</div>
    <div class="system-ui-font" style="font-stretch: 110%; font-variation-settings: 'wdth' 150;">Variable system font at
      width 150 overriden</div>
    <div class="system-ui-font" style="font-stretch: 110%; font-variation-settings: 'wdth' 200;">Variable system font at
      width 200 overriden</div>
  </div>
  <div style="flex: 1; font-size: 20px;">
    <div class="system-ui-font" style="font-stretch: 10%;">System font at width 10</div>
    <div class="system-ui-font" style="font-stretch: 30%;">System font at width 30</div>
    <div class="system-ui-font" style="font-stretch: 40%;">System font at width 40</div>
    <div class="system-ui-font" style="font-stretch: 50%;">System font at width 50</div>
    <div class="system-ui-font" style="font-stretch: 60%;">System font at width 60</div>
    <div class="system-ui-font" style="font-stretch: 70%;">System font at width 70</div>
    <div class="system-ui-font" style="font-stretch: 80%;">System font at width 80</div>
    <div class="system-ui-font" style="font-stretch: 90%;">System font at width 90</div>
    <div class="system-ui-font" style="font-stretch: 100%;">System font at width 100</div>
    <div class="system-ui-font" style="font-stretch: 110%;">System font at width 110</div>
    <div class="system-ui-font" style="font-stretch: 120%;">System font at width 120</div>
    <div class="system-ui-font" style="font-stretch: 130%;">System font at width 130</div>
    <div class="system-ui-font" style="font-stretch: 140%;">System font at width 140</div>
    <div class="system-ui-font" style="font-stretch: 150%;">System font at width 150</div>
    <div class="system-ui-font" style="font-stretch: 200%;">System font at width 200</div>
    <div class="system-ui-font" style="font-variation-settings: 'wdth' 10;">Variable system font at width 10</div>
    <div class="system-ui-font" style="font-variation-settings: 'wdth' 30;">Variable system font at width 30</div>
    <div class="system-ui-font" style="font-variation-settings: 'wdth' 40;">Variable system font at width 40</div>
    <div class="system-ui-font" style="font-variation-settings: 'wdth' 50;">Variable system font at width 50</div>
    <div class="system-ui-font" style="font-variation-settings: 'wdth' 60;">Variable system font at width 60</div>
    <div class="system-ui-font" style="font-variation-settings: 'wdth' 70;">Variable system font at width 70</div>
    <div class="system-ui-font" style="font-variation-settings: 'wdth' 80;">Variable system font at width 80</div>
    <div class="system-ui-font" style="font-variation-settings: 'wdth' 90;">Variable system font at width 90</div>
    <div class="system-ui-font" style="font-variation-settings: 'wdth' 100;">Variable system font at width 100</div>
    <div class="system-ui-font" style="font-variation-settings: 'wdth' 110;">Variable system font at width 110</div>
    <div class="system-ui-font" style="font-variation-settings: 'wdth' 120;">Variable system font at width 120</div>
    <div class="system-ui-font" style="font-variation-settings: 'wdth' 130;">Variable system font at width 130</div>
    <div class="system-ui-font" style="font-variation-settings: 'wdth' 140;">Variable system font at width 140</div>
    <div class="system-ui-font" style="font-variation-settings: 'wdth' 150;">Variable system font at width 150</div>
    <div class="system-ui-font" style="font-variation-settings: 'wdth' 200;">Variable system font at width 200</div>
    <div class="system-ui-font" style="font-stretch: 110%; font-variation-settings: 'wdth' 10;">Variable system font at
      width 10 overriden</div>
    <div class="system-ui-font" style="font-stretch: 110%; font-variation-settings: 'wdth' 30;">Variable system font at
      width 30 overriden</div>
    <div class="system-ui-font" style="font-stretch: 110%; font-variation-settings: 'wdth' 40;">Variable system font at
      width 40 overriden</div>
    <div class="system-ui-font" style="font-stretch: 110%; font-variation-settings: 'wdth' 50;">Variable system font at
      width 50 overriden</div>
    <div class="system-ui-font" style="font-stretch: 110%; font-variation-settings: 'wdth' 60;">Variable system font at
      width 60 overriden</div>
    <div class="system-ui-font" style="font-stretch: 110%; font-variation-settings: 'wdth' 70;">Variable system font at
      width 70 overriden</div>
    <div class="system-ui-font" style="font-stretch: 110%; font-variation-settings: 'wdth' 80;">Variable system font at
      width 80 overriden</div>
    <div class="system-ui-font" style="font-stretch: 110%; font-variation-settings: 'wdth' 90;">Variable system font at
      width 90 overriden</div>
    <div class="system-ui-font" style="font-stretch: 110%; font-variation-settings: 'wdth' 100;">Variable system font at
      width 100 overriden</div>
    <div class="system-ui-font" style="font-stretch: 110%; font-variation-settings: 'wdth' 110;">Variable system font at
      width 110 overriden</div>
    <div class="system-ui-font" style="font-stretch: 110%; font-variation-settings: 'wdth' 120;">Variable system font at
      width 120 overriden</div>
    <div class="system-ui-font" style="font-stretch: 110%; font-variation-settings: 'wdth' 130;">Variable system font at
      width 130 overriden</div>
    <div class="system-ui-font" style="font-stretch: 110%; font-variation-settings: 'wdth' 140;">Variable system font at
      width 140 overriden</div>
    <div class="system-ui-font" style="font-stretch: 110%; font-variation-settings: 'wdth' 150;">Variable system font at
      width 150 overriden</div>
    <div class="system-ui-font" style="font-stretch: 110%; font-variation-settings: 'wdth' 200;">Variable system font at
      width 200 overriden</div>
  </div>
</div>