Blitz - WPT: variable-gpos-m2b.html

wpt / css / css-fonts / variations / variable-gpos-m2b.html

/css/css-fonts/variations/variable-gpos-m2b.html

<!DOCTYPE html>
<html class="reftest-wait">
<link rel="match" href="variable-gpos-m2b-ref.html">
<meta charset="utf-8">
<style>
    @font-face {
    font-family: variabletest_box;
    src: url(resources/variabletest_box.ttf);
    }

    body {
    font-family: variabletest_box, sans-serif;
    sans-serif;
    font-size: 100px;
    }

    .gpos_m2b_left {
    font-variation-settings: "VM2B" 0;
    }

    .gpos_m2b_middle {
    font-variation-settings: "VM2B" 500;
    }

    .gpos_m2b_right {
    font-variation-settings: "VM2B" 1000;
    }
</style>
<!-- The variabletest_box font has an M glyph saying "m2b pos" that combines
     with the combining box below. And it has a glyph for combining box below
     whose mark anchor can be shifted horizontally using the VM2B axis. The font
     also has N and O glyphs which have fixed shifted base anchor points at the
     middle and at the right position. In this reftest we check whether
     applying the VM2B axis works as expected and shifts the mark anchor point
     left so that the combining mark is placed correctly at the middle and at
     the right position. The VM2B rendering must be identical to the
     conventional rendering with the fixed base anchor points. -->
<span class="gpos_m2b_left">M&#x033B;</span>
<span class="gpos_m2b_middle">M&#x033B;</span>
<span class="gpos_m2b_right">M&#x033B;</span>
<script>
    document.fonts.ready.then(
        () => { document.documentElement.classList.remove("reftest-wait"); });
</script>
</html>

/css/css-fonts/variations/variable-gpos-m2b-ref.html

<!DOCTYPE html>
<html class="reftest-wait">
<meta charset="utf-8">
<style>
    @font-face {
    font-family: variabletest_box;
    src: url(resources/variabletest_box.ttf);
    }

    body {
    font-family: variabletest_box, sans-serif;
    sans-serif;
    font-size: 100px;
    }
</style>
M&#x033B; N&#x033B; O&#x033B;
<script>
    document.fonts.ready.then(
        () => { document.documentElement.classList.remove("reftest-wait"); });
</script>
</html>