Grid was truncated on Safari

Merge svg_flags2 into color+svg test so we can have flags

colrv1/bw/emoji_u270d.svg

@@ -0,0 +1,4 @@
+<svg enable-background="new 0 0 128 128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<!-- just the pencil -->
+<path d="m70.04 7c0.11 0 0.21 0.02 0.29 0.07l8.77 4.95c0.04 0.02 0.17 0.1 0.24 0.34 0.04 0.15 0.1 0.54-0.2 1.03l-56.86 94.66c-0.12 0.19-0.27 0.37-0.45 0.5l-13.91 10.28 3.77-15.75c0.04-0.16 0.1-0.31 0.19-0.46l56.98-94.85c0.31-0.53 0.82-0.77 1.18-0.77m0-3c-1.44 0-2.91 0.81-3.76 2.22l-56.97 94.85c-0.25 0.41-0.43 0.85-0.54 1.3l-4.73 19.74c-0.25 1.08 0.5 1.89 1.4 1.89 0.33 0 0.68-0.11 1-0.35l17.18-12.7c0.5-0.37 0.92-0.83 1.24-1.37l56.86-94.65c1.21-2.01 0.7-4.49-1.14-5.53l-8.77-4.95c-0.55-0.3-1.16-0.45-1.77-0.45z" fill="#424242"/>
+</svg>

colrv1/bw/emoji_u270d_1f3fb.svg

@@ -0,0 +1,4 @@
+<svg enable-background="new 0 0 128 128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<!-- just the pencil -->
+<path d="m70.04 7c0.11 0 0.21 0.02 0.29 0.07l8.77 4.95c0.04 0.02 0.17 0.1 0.24 0.34 0.04 0.15 0.1 0.54-0.2 1.03l-56.86 94.66c-0.12 0.19-0.27 0.37-0.45 0.5l-13.91 10.28 3.77-15.75c0.04-0.16 0.1-0.31 0.19-0.46l56.98-94.85c0.31-0.53 0.82-0.77 1.18-0.77m0-3c-1.44 0-2.91 0.81-3.76 2.22l-56.97 94.85c-0.25 0.41-0.43 0.85-0.54 1.3l-4.73 19.74c-0.25 1.08 0.5 1.89 1.4 1.89 0.33 0 0.68-0.11 1-0.35l17.18-12.7c0.5-0.37 0.92-0.83 1.24-1.37l56.86-94.65c1.21-2.01 0.7-4.49-1.14-5.53l-8.77-4.95c-0.55-0.3-1.16-0.45-1.77-0.45z" fill="#424242"/>
+</svg>

colrv1/bw/emoji_u270d_1f3fc.svg

@@ -0,0 +1,4 @@
+<svg enable-background="new 0 0 128 128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<!-- just the pencil -->
+<path d="m70.04 7c0.11 0 0.21 0.02 0.29 0.07l8.77 4.95c0.04 0.02 0.17 0.1 0.24 0.34 0.04 0.15 0.1 0.54-0.2 1.03l-56.86 94.66c-0.12 0.19-0.27 0.37-0.45 0.5l-13.91 10.28 3.77-15.75c0.04-0.16 0.1-0.31 0.19-0.46l56.98-94.85c0.31-0.53 0.82-0.77 1.18-0.77m0-3c-1.44 0-2.91 0.81-3.76 2.22l-56.97 94.85c-0.25 0.41-0.43 0.85-0.54 1.3l-4.73 19.74c-0.25 1.08 0.5 1.89 1.4 1.89 0.33 0 0.68-0.11 1-0.35l17.18-12.7c0.5-0.37 0.92-0.83 1.24-1.37l56.86-94.65c1.21-2.01 0.7-4.49-1.14-5.53l-8.77-4.95c-0.55-0.3-1.16-0.45-1.77-0.45z" fill="#424242"/>
+</svg>

colrv1/bw/emoji_u270d_1f3fd.svg

@@ -0,0 +1,4 @@
+<svg enable-background="new 0 0 128 128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<!-- just the pencil -->
+<path d="m70.04 7c0.11 0 0.21 0.02 0.29 0.07l8.77 4.95c0.04 0.02 0.17 0.1 0.24 0.34 0.04 0.15 0.1 0.54-0.2 1.03l-56.86 94.66c-0.12 0.19-0.27 0.37-0.45 0.5l-13.91 10.28 3.77-15.75c0.04-0.16 0.1-0.31 0.19-0.46l56.98-94.85c0.31-0.53 0.82-0.77 1.18-0.77m0-3c-1.44 0-2.91 0.81-3.76 2.22l-56.97 94.85c-0.25 0.41-0.43 0.85-0.54 1.3l-4.73 19.74c-0.25 1.08 0.5 1.89 1.4 1.89 0.33 0 0.68-0.11 1-0.35l17.18-12.7c0.5-0.37 0.92-0.83 1.24-1.37l56.86-94.65c1.21-2.01 0.7-4.49-1.14-5.53l-8.77-4.95c-0.55-0.3-1.16-0.45-1.77-0.45z" fill="#424242"/>
+</svg>

colrv1/bw/emoji_u270d_1f3fe.svg

@@ -0,0 +1,4 @@
+<svg enable-background="new 0 0 128 128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<!-- just the pencil -->
+<path d="m70.04 7c0.11 0 0.21 0.02 0.29 0.07l8.77 4.95c0.04 0.02 0.17 0.1 0.24 0.34 0.04 0.15 0.1 0.54-0.2 1.03l-56.86 94.66c-0.12 0.19-0.27 0.37-0.45 0.5l-13.91 10.28 3.77-15.75c0.04-0.16 0.1-0.31 0.19-0.46l56.98-94.85c0.31-0.53 0.82-0.77 1.18-0.77m0-3c-1.44 0-2.91 0.81-3.76 2.22l-56.97 94.85c-0.25 0.41-0.43 0.85-0.54 1.3l-4.73 19.74c-0.25 1.08 0.5 1.89 1.4 1.89 0.33 0 0.68-0.11 1-0.35l17.18-12.7c0.5-0.37 0.92-0.83 1.24-1.37l56.86-94.65c1.21-2.01 0.7-4.49-1.14-5.53l-8.77-4.95c-0.55-0.3-1.16-0.45-1.77-0.45z" fill="#424242"/>
+</svg>

colrv1/bw/emoji_u270d_1f3ff.svg

@@ -0,0 +1,4 @@
+<svg enable-background="new 0 0 128 128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<!-- just the pencil -->
+<path d="m70.04 7c0.11 0 0.21 0.02 0.29 0.07l8.77 4.95c0.04 0.02 0.17 0.1 0.24 0.34 0.04 0.15 0.1 0.54-0.2 1.03l-56.86 94.66c-0.12 0.19-0.27 0.37-0.45 0.5l-13.91 10.28 3.77-15.75c0.04-0.16 0.1-0.31 0.19-0.46l56.98-94.85c0.31-0.53 0.82-0.77 1.18-0.77m0-3c-1.44 0-2.91 0.81-3.76 2.22l-56.97 94.85c-0.25 0.41-0.43 0.85-0.54 1.3l-4.73 19.74c-0.25 1.08 0.5 1.89 1.4 1.89 0.33 0 0.68-0.11 1-0.35l17.18-12.7c0.5-0.37 0.92-0.83 1.24-1.37l56.86-94.65c1.21-2.01 0.7-4.49-1.14-5.53l-8.77-4.95c-0.55-0.3-1.16-0.45-1.77-0.45z" fill="#424242"/>
+</svg>

colrv1/grid.html

@@ -0,0 +1,191 @@
+<!-- Copyright 2021 Google LLC.
+SPDX-License-Identifier: Apache-2.0 -->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Emoji Grid COLRv1 Example</title>
+    <meta name="description" content="Demonstrates a picker-like list of COLRv1 emoji." />
+    <link
+      id="favicon"
+      rel="icon"
+      href="https://web.dev/images/favicon.ico"
+      type="image/x-icon"
+    />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="/styles.css" />
+    <script src="/chromacheck-min.js"></script>
+    <script src="/emoji-grid-draw.js"></script>
+
+    <style>
+
+      @font-face {
+        font-family: "Noto Color Emoji";
+        src: url(build/NotoColorEmojiCompatTest-Regular.ttf);
+      }
+
+      /* Copyright 2021 Google LLC.
+      SPDX-License-Identifier: Apache-2.0 */
+
+      body {
+        font-family: sans-serif;
+      }
+
+      #reqs {
+        background-color: #fde030;
+        border-radius: 4px;
+        padding: 4px;
+        margin: 8px;
+      }
+
+      .chromacheck-colrv1 #reqs {
+        display: none;
+      }
+
+      .grid {
+        margin: 2rem auto;
+        max-width: 375px;
+      }
+
+      div[role="listbox"] {
+        display: grid;
+        grid-template-columns: repeat(9, 2.5em);
+        gap: 0;
+      }
+
+      button {
+        background: transparent;
+        border: 0;
+        cursor: pointer;
+        font: 2em "Noto Color Emoji";
+        min-width: 0;
+        width: 2em;
+        padding: 0;
+        position: relative;
+      }
+
+      .variants {
+        background: #fff;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
+        border-radius: 8px;
+        display: none;
+        grid-template-columns: repeat(5, 1fr);
+        gap: 4px;
+        left: 50%;
+        padding: 8px;
+        position: absolute;
+        top: 100%;
+        transform: translate(-50%, 16px);
+        max-width: 250px;
+        z-index: 9;
+      }
+
+      .has-variants:hover:after {
+        border-bottom: 16px solid #fff;
+        border-left: 16px solid transparent;
+        border-right: 16px solid transparent;
+        content: "";
+        display: block;
+        filter: drop-shadow(0 -1px 1px rgba(0, 0, 0, 0.09));
+        height: 0;
+        left: 50%;
+        position: absolute;
+        top: 100%;
+        transform: translateX(-50%);
+        width: 0;
+        z-index: 10;
+      }
+
+      .has-variants:hover .variants {
+        display: grid;
+      }
+
+    </style>
+  </head>
+  <body>
+    <pre>
+      Uses a combined COLRv1 and SVG font. Should work on Firefox, Chrome 98+, Safari.
+      Chrome <98 will fail, would need CBDT to enable.
+    </pre>
+    <div class="grid"></div>
+  </body>
+  <script>
+(async () => {
+  const metadata = await (
+    await fetch(
+      "https://raw.githubusercontent.com/googlefonts/emoji-metadata/main/emoji_14_0_ordering.json"
+    )
+  ).json();
+
+  const grid = document.querySelector(".grid");
+
+  for (const group of metadata) {
+    // Wrapper for each group
+    const parent = document.createElement("div");
+
+    // Titles
+    const h1 = document.createElement("h1");
+    h1.textContent = group.group;
+    parent.append(h1);
+
+    // Emoji section
+    const container = document.createElement("div");
+    container.setAttribute("role", "listbox");
+
+    for (const emoji of group.emoji) {
+      const button = document.createElement("button");
+      button.setAttribute("role", "option");
+      button.textContent = htmlCodepoints(emoji.base);
+      button.className = "emoji";
+
+      // Variants
+      const variants = document.createElement("div");
+      variants.className = "variants";
+      for (const alternate of emoji.alternates) {        
+        // Skip repeating the "yellow version"
+        if (alternate.join("") === emoji.base.join("")) {
+          continue;
+        }
+        const variantButton = document.createElement("button");
+        variantButton.setAttribute("role", "option");
+        variantButton.textContent = htmlCodepoints(alternate);
+        variantButton.className = "emoji";        
+        variants.append(variantButton);
+      }
+
+      if (emoji.alternates.length) {
+        button.classList.add("has-variants");
+      }
+
+      button.append(variants);
+      container.append(button);
+    }
+
+    parent.append(container);
+
+    grid.append(parent);
+  }
+  
+  grid.addEventListener('click', async (e) => {
+    if (e.target.nodeName.toLowerCase() !== 'button') {
+      return;
+    }
+    try {
+      await navigator.clipboard.writeText(e.target.textContent);
+      setTimeout(() => {
+        e.target.style.filter = '';
+      }, 1000);
+      e.target.style.filter = 'opacity(0.5)';
+    } catch (err) {
+      console.error(err.name, err.message);
+    }
+  })
+})();
+
+function htmlCodepoints(arr) {
+  return arr.map((codepoint) => String.fromCodePoint(codepoint)).join("");
+}
+
+  </script>
+</html>

colrv1/handwriting.html

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+
+<style>
+@font-face {
+  font-family: 'colrv1_and_svg';
+  font-style: normal;
+  font-weight: 400;
+  src: url(build/NotoHandWriting-Regular.ttf);
+}
+@font-face {
+  font-family: 'colrv1_only';
+  font-style: normal;
+  font-weight: 400;
+  src: url(build/NotoHandWritingCOLRv1-Regular.ttf);
+}
+@font-face {
+  font-family: 'glyf_only';
+  font-style: normal;
+  font-weight: 400;
+  src: url(build/NotoHandWritingglyf-Regular.ttf);
+}
+
+
+svg_and_colrv1 {
+  font-family:  "colrv1_and_svg", "glyf_only";
+  font-size:  6em;
+}
+colrv1_only {
+  font-family:  "colrv1_only", "glyf_only";
+  font-size:  6em;
+}
+glyf_only {
+  font-family:  "glyf_only";
+  font-size:  6em;
+}
+</style>
+
+<div>
+<svg_and_colrv1>&#x270d;</svg_and_colrv1> 
+<svg_and_colrv1>&#x270d;&#x1f3fb;</svg_and_colrv1> 
+<svg_and_colrv1>&#x270d;&#x1f3fc;</svg_and_colrv1> 
+<svg_and_colrv1>&#x270d;&#x1f3fd;</svg_and_colrv1> 
+<svg_and_colrv1>&#x270d;&#x1f3fe;</svg_and_colrv1> 
+<svg_and_colrv1>&#x270d;&#x1f3ff;</svg_and_colrv1>
+</div>
+<div>
+<colrv1_only>&#x270d;</colrv1_only> 
+<colrv1_only>&#x270d;&#x1f3fb;</colrv1_only> 
+<colrv1_only>&#x270d;&#x1f3fc;</colrv1_only> 
+<colrv1_only>&#x270d;&#x1f3fd;</colrv1_only> 
+<colrv1_only>&#x270d;&#x1f3fe;</colrv1_only> 
+<colrv1_only>&#x270d;&#x1f3ff;</colrv1_only>
+</div>
+<div>
+<glyf_only>&#x270d;</glyf_only> 
+<glyf_only>&#x270d;&#x1f3fb;</glyf_only> 
+<glyf_only>&#x270d;&#x1f3fc;</glyf_only> 
+<glyf_only>&#x270d;&#x1f3fd;</glyf_only> 
+<glyf_only>&#x270d;&#x1f3fe;</glyf_only> 
+<glyf_only>&#x270d;&#x1f3ff;</glyf_only>
+</div>

colrv1/noto_handwriting-glyf.toml

@@ -0,0 +1,22 @@
+family = "Noto Handwriting glyf Test"
+output_file = "NotoHandWritingglyf-Regular.ttf"
+color_format = "glyf"
+clipbox_quantization = 32
+
+[axis.wght]
+name = "Weight"
+default = 400
+
+[master.regular]
+style_name = "Regular"
+srcs = [
+  "bw/emoji_u270d.svg", 
+  "bw/emoji_u270d_1f3fb.svg", 
+  "bw/emoji_u270d_1f3fc.svg", 
+  "bw/emoji_u270d_1f3fd.svg", 
+  "bw/emoji_u270d_1f3fe.svg", 
+  "bw/emoji_u270d_1f3ff.svg"
+]
+
+[master.regular.position]
+wght = 400

colrv1/noto_handwriting-glyf_colr_1.toml

@@ -0,0 +1,22 @@
+family = "Noto Handwriting COLRv1 Test"
+output_file = "NotoHandWritingCOLRv1-Regular.ttf"
+color_format = "glyf_colr_1"
+clipbox_quantization = 32
+
+[axis.wght]
+name = "Weight"
+default = 400
+
+[master.regular]
+style_name = "Regular"
+srcs = [
+  "red_pen/emoji_u270d.svg", 
+  "red_pen/emoji_u270d_1f3fb.svg", 
+  "red_pen/emoji_u270d_1f3fc.svg", 
+  "red_pen/emoji_u270d_1f3fd.svg", 
+  "red_pen/emoji_u270d_1f3fe.svg", 
+  "red_pen/emoji_u270d_1f3ff.svg"
+]
+
+[master.regular.position]
+wght = 400

colrv1/noto_handwriting-glyf_colr_1_and_picosvgz.toml

@@ -0,0 +1,24 @@
+# This is supposed to work in Firefox and Safari as they support OT-SVG
+
+family = "Noto Handwriting Test"
+output_file = "NotoHandWriting-Regular.ttf"
+color_format = "glyf_colr_1_and_picosvgz"
+clipbox_quantization = 32
+
+[axis.wght]
+name = "Weight"
+default = 400
+
+[master.regular]
+style_name = "Regular"
+srcs = [
+  "red_pen/emoji_u270d.svg", 
+  "red_pen/emoji_u270d_1f3fb.svg", 
+  "red_pen/emoji_u270d_1f3fc.svg", 
+  "red_pen/emoji_u270d_1f3fd.svg", 
+  "red_pen/emoji_u270d_1f3fe.svg", 
+  "red_pen/emoji_u270d_1f3ff.svg"
+]
+
+[master.regular.position]
+wght = 400

colrv1/requirements.txt

@@ -0,0 +1,5 @@
+nanoemoji >= 0.9.12  # we need latest spec support
+Brotli>=1.0.9  # for compare sizes
+
+# The following packages are considered to be unsafe in a requirements file:
+# setuptools