| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > |
| <title>Font Width Variant Text Combine</title> |
| <style> |
| @font-face { |
| font-family: LiberationSansWidthVariants; |
| src: url(../../third_party/LiberationSansWidthVariants/liberation_sans_width_variants.ttf) format("truetype"); |
| } |
| |
| #test { |
| font-family: "LiberationSansWidthVariants"; |
| font-size: 24px; |
| text-rendering: geometricPrecision; |
| line-height: 100%; |
| margin: 0; |
| padding: 0px; |
| } |
| |
| .hwid { |
| -webkit-font-feature-settings: 'hwid'; |
| } |
| .twid { |
| -webkit-font-feature-settings: 'twid'; |
| } |
| .qwid { |
| -webkit-font-feature-settings: 'qwid'; |
| } |
| |
| </style> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script> |
| setup({ explicit_done: true }); |
| function testWidthVariant() { |
| var elements = document.querySelectorAll("#test > div"); |
| for (var i = 0; i < elements.length; ++i) { |
| var div = elements[i]; |
| var normal = div.firstChild; |
| var text = normal.innerText; |
| test(function () { |
| var hwid = addVariant(normal, "hwid"); |
| var twid = addVariant(normal, "twid"); |
| var qwid = addVariant(normal, "qwid"); |
| var width = normal.getBoundingClientRect().width; |
| var widthHwid = hwid.getBoundingClientRect().width; |
| var widthTwid = twid.getBoundingClientRect().width; |
| var widthQwid = qwid.getBoundingClientRect().width; |
| assert_less_than(widthHwid, width, "hwid"); |
| assert_less_than(widthTwid, widthHwid, "twid"); |
| assert_less_than(widthQwid, widthTwid, "qwid"); |
| }, text); |
| } |
| done(); |
| } |
| function addVariant(base, variantClassName) { |
| var variant = base.cloneNode(true); |
| variant.className = variantClassName; |
| base.parentElement.appendChild(document.createTextNode(" ")); |
| base.parentElement.appendChild(variant); |
| return variant; |
| } |
| </script> |
| </head> |
| |
| <body onload="testWidthVariant();"> |
| <div id="test"> |
| <div><span>1</span></div> |
| <div><span>9</span></div> |
| <div><span>22</span></div> |
| <div><span>99</span></div> |
| <div><span>123456</span></div> |
| <div><span>222222</span></div> |
| <div><span>999999</span></div> |
| </div> |
| <div id="log"></div> |
| </body> |
| </html> |
| |
