colors: update sanity tests for new colors

CHANGELOG.md

@@ -13,6 +13,9 @@ Docs:
 Chores:
 * Bumped deps: Pango et al. to 3.3.6, Cairo to 1.16.4, Nokogiri to 1.10.3
 
+Compatibility:
+* A LOT more pre-defined colors built into Cairo. Some of the named colors got redefined with the upgrade to the latest Cairo. This means that named colors like `:gray` and `:green` may look slightly different.
+
 Special thanks to @lcarlsen
 
 ## v0.14.2 / 2018-08-01

samples/backend/backend_vectors_00_expected.svg

@@ -39,18 +39,18 @@
 <clipPath id="clip1">
   <path d="M 100 82 L 218 82 L 218 203 L 100 203 Z M 100 82 "/>
 </clipPath>
-<image id="image215" width="128" height="128" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAQAAABpN6lAAAAAAmJLR0QAxtiKRLcAAAAJcEhZcwAADdcAAA3XAUIom3gAAAAHdElNRQfeCAwPOiprCHMUAAAM90lEQVR42uVda3RVxRX+EiLhFRACYrQEjBheN0VABQlgKiDlbVCqxQd0UaiiRRHBroWg1UVVFGm6LGhXrNJSwSoiWhQDKBKCouIDEiERoiGoaJSXEkFDvv7gcnPOvWfmzMyZG2O7Z2Wtm3P27Nl7n3ns2bNnJoHwhzIUYlto56N7s6tQjRNoyJCCdkgv6nZDn+KByFTAT6CP6MuwisX4aUIIuQnX+qmBwlSE8bMlr38yafzsIslrweNKTMz9XxD+VJqYW6mjgHykGBTSrEGrIIX5qgq4MWRWxNwGrgLwxpCCAkY8YUp+OHc1+KYw4gkfBeRsNifemmSeQb4N9aqCnM0SBZh//ZPpOMlfauaZTPKuH7EWWGj7dWkjSbKtRo4kUjuP3b7A0fMHJ3w/SbJCI8fysAIKlbDTrakgP1oBlUYDX3S6PCzOckX83qyDMb7YV3GKxUGx0q0AO2bPmRFxrlfC3+dQwFEf3FSSo62aRg4FFMEW2TrI8MWdRTf8RYpdRvISqz1BUZ0C7Nn8b0TEOeCD2ZKxcI4QexFJ8nzLc4SwAkphj+gihzjrpZhrPRSwQ4A7wFdBZqkURCKwzOIE9E3H78G4XYg3GMM8p6+TPJ4m49XwryOWp8vLTk6HQxZ12jHqm/YS4B2kN9SykaRZJVmuASESVhuAuxskyWNM9sC5j2JYFoU72/HOvklUCisGkDO9GyXQuzEYaZSDs6vr5npjXwH5SNwWstuu3oj6vxcejHqy2ofCC47fWxy/j8fBabYtFGj+55Wu9/img52DD/1hZhh3tevpF3GZGyLDMslMT5Fau2aM/pDlocqyOCgggwkp/MZytfLyM5fjAlyJ4RiJxopUTiABie7qigvi4ERPqtbK0BcpWO+DU4IeMc8ycECTtUYxTw4r5x2IJLymhFmNxBOabK0DUYpHMAZNFIwhm3DIl7dhWIjtIDahrXI9Q5Bxfh//zl8zNQrjt1SHH3iA5dzDr/i9L+4n7O/JUQuO4xLuceGerixPAqj3HbYjy+PbFGAdCrA3bNDu8DGXC1GCYhTHDGyJCCGEHuiLwcLSc1Ee/t0el2EoLkP7GKyDaKPVZ2mlhyXf6Dhf5C2CcYD8lPM5QLmc3pzDnZ508jiFK/mNhI+ndSTSVcBIhYpdG/V/DRfTbMaRzgekonrD1HgqIFmTmSO8KfBoPYGfaZWZEU8FgJXKjHzDSdZMlrHKSjihR1mflScVGXnQut12h1K5BfFWwLUKTGznWXHx6Lfkq75lz463As70ZWFBXJc1bvEpvY8WNW07AACOopnwXQ0GY1OcIz+64k20Ege9aNFKNGFgnfDNQbSPu/jALrSNmEPR8I4mLSMFbBA8r0CaYNLTBCkG5TSX1LNz8ZYWb9YswVhH1Sko9sRtwyX8LozxEnvEOLxX8mtW8/WoVZ+mkbFmLxeys4CPAg8uhuhKY8P1SdZyHxMkq791sNTRo29xvdkUedOFP0Tl2smJSh5IenIRnXo4fc9mCng9xt4ThcfkxbC4h60JDvf4ep+zDcGfe9avEgH9T1xYu6VcX8w5XM9aDvWqASkcz54xU1tRmhfF3pniYSZmZkDW8inBEFbDyQq+YmdqzGoH1l89p8tjmccdYYxKthE1gWzWkCS/Zzk38Sku4HSO40WeJk0/F3NXSJV1K4PDK4qL7FWO5505lStY5aKzxq8PWCVk4VNu5UrmcTYncKBLqH/41pevAivgbCn9OQ7M+9iPdwrsxTtUOsFxmqztV2gwYwKKv9S3hHcUqGSrjgIt+LYGc/2U+oztgRTQ3Je+32pTpbh38348Q5G15xQ7zawA4j+gVMIDEgovmdgBHblXgbmmygPnakPxa5VLOCKg8AdzQyjP4ow/1VABtymXMNUz/8BglmBffithLtk4ekQVDmuVUB0zcqXaMIWfFzC3RNt+rNVWwDVa9G9z5X3Z3lzgCk/m9KM7p2uKXxFgjvKY3clQCrdFMfe20RxCzyS6VJv+ikjetfZngzNdzP3GSAGjNcQ3UfEg/XgSHfK/sBCu8oGyAnoY0a9bRlGLW9fyCJ0f+bXR2J11jSLeGpQY0X8m8muEbY9QIktMXc9Ko4ob2htSv9Lhd7DaBCa6BrEgsYUqJtHjxtSbOajMsKWADjEtN6hvfx6/loi/UNPEcqcKB6WP/XsSf4ILYhh838oCx/mcxZe5O1KzvmARH+agwHSfi+I2P4gCLuUhjy/0rwa9M+xej7iFK0xGgeZYgw2eKzAlaMgQu9O5MZ7FFrTTWxi5Gd8KBxLTzdRNUYYSDFDC7YUFhqV4f56L8SXmqQ6DXfiRtI/ub1Q1z47M1g7yj8yS4E3j+1JXuLl3aD8v9F8cXYIbfLel6zeCs1CBpKhnm1GCj1GOY0gEkIZMdEa2K8CpDF20S2qGo9L3T+M6/CCqAWMiy1gy6KD9VU7z7ExVYKOFdatYL9Mk71HgPkWmWmmz9A7N4W7rCnDtS4jaSKQUzNxOk6EZDAZdrStgqswO+Jtv9s5a7LQKvCxSqhfz4UPtGbedaTIK9A5kmZnABI3yTpfQ+ZwXqVqC0yRkcqxGFNlafxJt3KqDOTqW4GI0xSrBuwyNQel+K9Zde4xSxu3k+fR1pGK+XojMMYxDNqo87QB1mGjJwL1FGTPLI6hrFHIEwTs+HqEtOAN3BVDAJGsW/hDh/gQ/7v6MFlgTzCPUloWutvSZcntcR3swUbHMQtdm3E62PEJjXOsuSRZNElVYrV3mdNte4f0axx2cjMmxCcdVt8Nq+a00vMKtURv5PVxx85JNaIxUBawRCuGcRoGSl+AA0iL/jVbKMwB2ob8CzsjIr5dtusXviqmQmQq5dtIu3OpbYhMX/ihbTWAj7o55dpNCvnMt14BOvhi/c/33IvKC14B0gQP7WD2PASS5wrfEMg8PdnKQGpCLCsEWtGQN47S+IBPnxTzriUPoadoJPoLnJG8f0t78Gm94UBCp/j6m6zeB5LBj0hkPvJVLXYEul9RzE1goLe0s157WaHhRkCtJ5JR+F8BB7MLO8N9ux0h76pTORejtszW5mdUvvEf6tq5GfoefAUhG13Dqgq4YhUPIQqVaDUhirsSGHqk80LxnuQZcKCmri+9wmcnLbe0XqHTsDJThLbSsAOlxKI6Icx1ZjLbM1I22LaRd4VqrDUA2pZ3qODx3Zvy3zICvOb5LdwnecYvfX+yIa+PaZF8vW2aGukaHBI2ldVOQnSCy24HXs34UMN/F3KvGLmobHaDTjb9eXxYzBWyNYu9OIeYUK+IvFtK/yoW3r74UEAviIxTXBxb/Q6W4QJP4ZUMF9PJk8zIh/q5A4u+VbH+LhVGashgNg94nfLwinB51x3bjwe8tpAtDKIqVebM8DK5VWXSMSo8bff17hPSGCXLsqI8mUCNheb7ERbpfS/itkkXYKYb2ohUFdPRhfAtPk4RbfqwkfIFojxdB8FmT3WH2FDDZl/3vpIcY9ORDURtenVDIm6UBGOm+9WhevA9QWI6rFbCexGSHG93rmIOL0RWdkIqmAA7hS5TiQ5T6UF2AWb4lF2JQfDvBKsU2XMNrrQZADuNhC7PGwE2gpeYY/isrwg+NbH5Wge46doCu526IFnYHPI0qTA00Db4a5SjQWpJXtwUaQftQ9cXSWJ43hO+e5zDt796fyzxp3c+HpDVitXIJKdQ+UrPMo8D3uCB8dMWffCrnBs5kN98yzuE0/kdgbWx2xKgN4r180wPnqLI0GUzI2bwxW6/PrIMirEOB6xzZf2O8EpVKFGMH9uEIjuAwatEKLdESachCSBKAU47f4yWP530wFENxqeNJGvYr8ZFTpHmvxBCStXyFtwscD9sYPxjhy11XTucLPK4RTHFjSPNg5e4+MYIH46iALspcdlAO5Mu3fbS2F3xEcBhXGWycdcMYq1ZF2Jds93D1MzzY/soxM+jOGYp1ZAvvZJ9wkzsFs6yLHyIBYq61OtDPI6yldRROjoL41znwcy3sJBOlubB8wcKEGFG8Btk1PuJ/EIU/KTJNst8ALF+xMTdKlL6eWC18FNBRcBDPl5bFj1yxYe+SlSdcguQahc8v8sxxt5Xdiu5U5JwL2blmZ5NyPE+FQPxvpcd5pFkU33XNjq2LlupW5f0uXespUMBI6dkAQ6yJH3PRkp2rtk7BKgXcfxrsD8q0poB8L3dA0MvWmkecmSrYjXgiRgGpcTB1vA1ggT8k2HV7Jw9LKlfGn6S8vGY3Ca/bI4JduDiW5AE21sjhnNN/UU/iSy9cDFYLbmONZiU+x6GAfj/C1xe4BE37gsd4nnaeU2dVraz3ti/1iZpdu3u6EVNHSZJN4i68xrW7J+2C+rp4eTTJaXEvRfPiZYYN5Pq5evvRONOXX739f3/5eoLKylgZCrEttPPRvdlVqMaJBi10CtohvajbDX2KB/rdOw8A+C/P9iz7dYa7BgAAAABJRU5ErkJggg=="/>
+<image id="image260" width="128" height="128" xlink:href="data:image/png;base64,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"/>
 <filter id="alpha" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
   <feColorMatrix type="matrix" in="SourceGraphic" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
 </filter>
 <mask id="mask0">
   <g filter="url(#alpha)">
-<use xlink:href="#image215" transform="matrix(1,0,0,1,250,250)"/>
+<use xlink:href="#image260" transform="matrix(1,0,0,1,250,250)"/>
   </g>
 </mask>
 </defs>
-<g id="surface208">
+<g id="surface253">
-<rect x="0" y="0" width="825" height="1125" style="fill:rgb(50.196078%,50.196078%,50.196078%);fill-opacity:1;stroke:none;"/>
+<rect x="0" y="0" width="825" height="1125" style="fill:rgb(74.509804%,74.509804%,74.509804%);fill-opacity:1;stroke:none;"/>
 <g style="fill:rgb(0%,0%,0%);fill-opacity:1;">
   <use xlink:href="#glyph0-1" x="94" y="600"/>
   <use xlink:href="#glyph0-2" x="170" y="600"/>
@@ -78,7 +78,7 @@
 <path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 181.779507 141.859042 L 197.398822 126.241402 M 200.74827 129.590013 L 184.943061 145.39271 " transform="matrix(4.664947,0,0,4.664947,-744.909784,-480.042297)"/>
 </g>
 <path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 193.6875 78.402344 C 180.496094 74.996094 165.875 78.382813 155.546875 88.707031 C 140.015625 104.238281 140.015625 129.460938 155.546875 144.992188 C 171.078125 160.523438 196.300781 160.523438 211.832031 144.992188 C 222.167969 134.652344 225.5625 120.054688 222.140625 106.851563 L 195.851563 133.136719 L 173.378906 127.160156 L 167.402344 104.6875 Z M 193.6875 78.402344 "/>
-<use xlink:href="#image215" transform="matrix(1,0,0,1,250,75)"/>
+<use xlink:href="#image260" transform="matrix(1,0,0,1,250,75)"/>
 <rect x="0" y="0" width="825" height="1125" style="fill:rgb(100%,0%,0%);fill-opacity:1;stroke:none;" mask="url(#mask0)"/>
 </g>
 </svg>

samples/backend/backend_vectors_01_expected.svg

@@ -39,18 +39,18 @@
 <clipPath id="clip1">
   <path d="M 100 82 L 218 82 L 218 203 L 100 203 Z M 100 82 "/>
 </clipPath>
-<image id="image215" width="128" height="128" xlink:href="data:image/png;base64,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"/>
+<image id="image260" width="128" height="128" xlink:href="data:image/png;base64,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"/>
 <filter id="alpha" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
   <feColorMatrix type="matrix" in="SourceGraphic" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
 </filter>
 <mask id="mask0">
   <g filter="url(#alpha)">
-<use xlink:href="#image215" transform="matrix(1,0,0,1,250,250)"/>
+<use xlink:href="#image260" transform="matrix(1,0,0,1,250,250)"/>
   </g>
 </mask>
 </defs>
-<g id="surface211">
+<g id="surface256">
-<rect x="0" y="0" width="825" height="1125" style="fill:rgb(50.196078%,50.196078%,50.196078%);fill-opacity:1;stroke:none;"/>
+<rect x="0" y="0" width="825" height="1125" style="fill:rgb(74.509804%,74.509804%,74.509804%);fill-opacity:1;stroke:none;"/>
 <g style="fill:rgb(0%,0%,0%);fill-opacity:1;">
   <use xlink:href="#glyph0-1" x="94" y="600"/>
   <use xlink:href="#glyph0-2" x="170" y="600"/>
@@ -78,7 +78,7 @@
 <path style="fill:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0%,0%,0%);stroke-opacity:1;stroke-miterlimit:4;" d="M 181.779507 141.859042 L 197.398822 126.241402 M 200.74827 129.590013 L 184.943061 145.39271 " transform="matrix(4.664947,0,0,4.664947,-744.909784,-480.042297)"/>
 </g>
 <path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 193.6875 78.402344 C 180.496094 74.996094 165.875 78.382813 155.546875 88.707031 C 140.015625 104.238281 140.015625 129.460938 155.546875 144.992188 C 171.078125 160.523438 196.300781 160.523438 211.832031 144.992188 C 222.167969 134.652344 225.5625 120.054688 222.140625 106.851563 L 195.851563 133.136719 L 173.378906 127.160156 L 167.402344 104.6875 Z M 193.6875 78.402344 "/>
-<use xlink:href="#image215" transform="matrix(1,0,0,1,250,75)"/>
+<use xlink:href="#image260" transform="matrix(1,0,0,1,250,75)"/>
 <rect x="0" y="0" width="825" height="1125" style="fill:rgb(100%,0%,0%);fill-opacity:1;stroke:none;" mask="url(#mask0)"/>
 </g>
 </svg>

samples/colors/_colors.rb

@@ -19,17 +19,23 @@ Squib::Deck.new(width: 825, height: 1125, cards: 1) do
 end
 
 # This script generates a table of the built-in constants
-Squib::Deck.new(width: 3000, height: 1500) do
+colors = (Cairo::Color.constants - %i(HEX_RE Base RGB CMYK HSV X11))
+colors.sort_by! do |c|
+  hsv = Cairo::Color.parse(c).to_hsv
+  [(hsv.hue / 16.0).to_i, hsv.value, hsv.saturation]
+end
+w, h = 300, 50
+deck_height = 4000
+deck_width = (colors.size / ((deck_height / h) + 1)) * w
+Squib::Deck.new(width: deck_width, height: deck_height) do
   background color: :white
-  colors = (Cairo::Color.constants - %i(HEX_RE Base RGB CMYK HSV X11))
+  x, y = 0, 0
-  colors.sort_by! {|c| Cairo::Color.parse(c).to_s}
-  x, y, w, h = 0, 0, 300, 50
   colors.each_with_index do |color, i|
     rect x: x, y: y, width: w, height: h, fill_color: color
     text str: color.to_s, x: x + 5, y: y + 13, font: 'Sans Bold 5',
          color: (Cairo::Color.parse(color).to_hsv.v > 0.9) ? '#000' : '#fff'
     y += h
-    if y > @height
+    if y > deck_height
       x += w
       y = 0
     end