Switch gentests to use the Ahem font (#496)

* Switch font used in generated tests to Ahem

This aligns our gentests with the Web Platform Test suite which also
uses Ahem. See https://github.com/Kozea/Ahem

* Set gentest font color to green

(cherry picked from commit 9a29acdb56e10e69391997d34653e245898bedfd)

cd0c4403a09b47837719a8ee201808ca253cdefb · by Nico Burns · 2023-06-15T19:18:08Z (3 years ago) · parent 7303e4262 · browse the tree at this commit

Semantic delta

No definition changed: this change is text, documentation or data.

1 files · +9 −10

scripts/gentest/test_base_style.css +9 −10

diff --git a/scripts/gentest/test_base_style.css b/scripts/gentest/test_base_style.css
index e06d7c6e9..452a2d703 100644
--- a/scripts/gentest/test_base_style.css
+++ b/scripts/gentest/test_base_style.css
@@ -1,14 +1,13 @@
 
-/* The font "silkscreen" subsetted to only contain the"H" (capital h) glyph
-   The "H" glyph in this font happens to be exactly 10 pixels wide by 14 high
-   Furthermore, we can use a line-height of 0.71428571428 to scale the height to 10 pixels
+/* The Ahem font. See: https://github.com/Kozea/Ahem
+   The "X" glyph in this font happens to be exactly 10 pixels wide by 10 high
 
-   By combining H's with zero-width space characters (&#8203;) we can reliably set an elements
+   By combining X's with zero-width space characters (&#8203;) we can reliably set an elements
    min-content and max-content sizes.
 */
 @font-face {
-    font-family: 'silkscreen-h';
-    src: url(data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAAAOAABAAAAAAB7wAAAMkAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGh4GVgCCWggoCWQRCAqBZIFjCw4AATYCJAMYBCAFhAgHRQxTG5IGAC4GnDLLNaI4Ih4+4mqyRg9HHA8fX6MqHp72+9+vvWfOXEdEkkaIJglvYpJJhEbI4o0QLSQ8tJ/ez/fn9/eeN4h3Sl/w0L7uB5CWVVeaGMPcBJ633fsTGVBiIcZj6bwqRjr/xwv9r0t5/9KdBfjyxtcttVqp2BpQ5igTsIwHKEClWemU7qWRJxTUvMlUEGFYTu6MiB4KAT+fp/dg+5v9Fv69218CBMZYBKQQOqEiEXk09nVq/s6XeKGtjZ/YGaTvuOsU8iDXv/GnFcEbKGugCQSgoGAFApzQKrBCmx3AUF9KE2vo188/xL88/d//tz8HAgCiEYBIJJqaQGH+cAUj836+xIwmiKdguu3lmr40xRRttVIHO9vba0mbR4MOy0bNii8ytRLxqinknInaInQ5/fyRo50El0++w51kOyRDQbdLiMP9JaQ7ndb6ImiT0iv8w9zYdBmYv0UBQkyZDRoYo2IJsAKAiqdaACFqHddRN6mnHNuQ1xoZxagOY6ibXWetv11yO7O8lNrMNr/YtP2GLBIM+xS27eNenffMPGrd71AqqStRoU7XEGjzf4SiWL7W1joeDmyy35U6kk1Hw1JyFFqXJYz6vaKF/UPjTYGsxZIgaOLfZSQfyPCjxejHY90mIBDM3vrQeXa2+LVrsW3mZzN9onlv0ZcgKGv+G/lfRwME063FM+sBMbP03UqzskBpxvIcqW+nHpxmAGDshSLqAEdAjLCAHWnsEopVMqjW2UVnh0M0C9zhiwk/+IqeEXzTFbu13w3E4Yl+FMuyKQ9LCUL8csB9bl9eLPMpwHKJgjRmMTEvLUUufpyCgjiMKi0nzCUqIS4vIAfDUqz1cJKPTefqCrvV87VoxnEZqOgQF58CRKEoDGFiQBg4hNjYhJj4l0Ng1adXbsD8Qm8ULUC3oeIOPrmyBGGh1yt5hDi40xlH52nomGIchmVkdMjyhaI87eSvdMkqisrJwRJagGndGDN+IzKKYlPa2tVb1UyE0Vm8E6WDQ+0fisnRquQDfePRqLVMer19ufM5pj3RRNRTJ2E/0i2NeZW75H150GioP1GlAAA=) format('woff2');
+    font-family: 'ahem';
+    src: url(data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAAAXYAA0AAAAAKjgAAAWAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGh4GYACEUhEQCrUAlzALg3AAATYCJAOHVgQgBYZQB4RFG5AYFeOYFbBxgM3u/5P9f53AyfVjdayDrHio6Mo1sl6KByXlCXnIVzSV5fT5TQ6ZXYT2USiITV79J77MWg5EBsol7qDhyo33x8P3c+Gf+142my1jCuTYlRUqFhJYETii8Z2qKkDFIPmzBIAMunuOxJGJPs+89lYS9Ec0RfnM0Mq1cEQnuxeTQGhm4JhuxBMZ4EBHEV1vjc4Fu7x5fMIF6JSO/8U5lc0B0A3VCXQhbYfk///VdNbjMwXYa1vASnF+7bd0/afj0z/RstqGAQUSRwFlCwcaZ1maalGAqYWaZhAIp0HbGFGhQp8R+fesEPDRAacNrm2GQQH4Yj1KJ9ANA5CE8LtQICHlL+OkliLdSodxIjppPDY1MknRAfZzqZd6AcCqaTlzdf8x5brZybVnteg9V2ZJ49QC2eMMgyGWIKTLKGIyFpirpdLdeHud1wBDLIvtcTo9TZ/me3U/MBAgQ0eIFMUoWdJlcnQ5uufoPjIjC7IjN6Mfo7/jfuP+/TE16K420VkXY0osJTGepPeBfUGBAxKT+N7qR/I7o/n99ma5sMfNpdn8778f/+vxxa27wV3/rnfXvivdpe6Ct5PbIVzANRzDEWzDBsxAAoyguwJ99HOvD8EOipKwViRk7A2KVtmuOl107da9R8/bQOaB8A+ceQBEmFDGhVTaWOdDnOZl3fbjvO7n/X4ty4uyqpu264dxmhfL1Xqz3e0Px9P5cr3dH09CoxWTnllYVtPY0NTS3Nre2dHV3dvT1z84PDQyNjo1OT1zxkBjCEe8OM274BCfdYFX5surkXt1+7j7ZhMBcoN4bXi/9v5gFx8jFerSxZW9/eOTg8Pxt/kyIJ/cIA5DO/tXSabE7IzcvPyc4hLEFaquXFjfdpW8vrEZ3tlaQ8gqSS/RyOAPiO/xC/kVxV1ADRIIhPayEkwZPFmF/VHetd2z3NS91a3du+zl1aO36LEDX4L21P96y+5f+qv+8ss34XX05bPtoNb3U1j23Ox8QHjXnz+Jjeh7z5m/VV3zl6+r2zXg/GWuUUk90q+Y/EuCia9U+V/Hi3vKH2k91NA5kbZXA39cAiZjp55uyKLoEGfIKFRxhpIecY6yOq5TYVC8ppYB8S2VqpTkXnoX6q1H6pPvU6bX9MyANJGem5xm0wtV2uR6qUxbj/iQDUm7DXkVyeQAoxApohs55BkYMxBARTYKQGkjUUiYlrTXGBSTjPdZNEwhsv5GiIu2WLutqCjOzBiNUCJVG2QEcri6wGFxMxBSkWAxQFvbyOdIvmgOfP2RUPAtqClwBVkbyNVkJIhXG06ZEQlFppEZcsCo8Jgh54qFAIdogE8JK7bbCCWduZxmZpdZQNvw9obxRlBsXOEYyGiQrvayDC6imNOoxRAvSK5Oi0j9dkxmgftX5lagZSZaGPpMFCeJmRL5zynRq5RLsUtvhRAgXnS+tgl8l86WDo2N/RgrP+RBKOZDEZsI70NJdph0Qz+iBDQi/djb/kBEiiz/cnqnqnR01U13PfTUS299vCeRyuQKpUqt0er0BiMAQjCCYjhBUjTDcrwgmswWq83ucLrcHq/PDw0DCwePgIiEjIKKho6BiYWNg4uHT0BIRExCSkZOQUlFrVuKmsaE1yMtK5OIgjTrjY4lcfn2w8JHbwX4F1X059e/pIota3ohaeVD26K3btOebTt2vTM4su9AH5w/DvuOnTD59C0DkZmVnY1DPRo3Fw8vP5+AoA8hEWFRYkQblyATK57Cqx+TDvRrGMk6dO/KtRt3Ltyq0tTS1bNqWMeaREtpStbNmhkzi/HLCwr40MIpLMfGzWOQwrZ5C2lFGe2oolOu9ndsWTO1zQnXTp7cFzWnznij+LuUYlVenjzayBbkk89aAgA=) format('woff2');
     font-weight: normal;
     font-style: normal;
 }
@@ -33,10 +32,10 @@ body > * {
 }
 
 #test-root {
-  font-family: silkscreen-h;
-  line-height: 0.71428571428;
-  font-size: 14px;
-  color: white;
+  font-family: ahem;
+  line-height: 1;
+  font-size: 10px;
+  color: green;
 }
 
 div {