2020 CSS queries

sql/2020/01_CSS/custom_property_cycles_max.sql

@@ -0,0 +1,106 @@
+#standardSQL
+CREATE TEMPORARY FUNCTION getCustomPropertyMaxCycles(payload STRING) RETURNS INT64 LANGUAGE js AS '''
+try {
+  function compute(vars) {
+    function walkElements(node, callback, parent) {
+      if (Array.isArray(node)) {
+        for (let n of node) {
+          walkElements(n, callback, parent);
+        }
+      }
+      else {
+        callback(node, parent);
+
+        if (node.children) {
+          walkElements(node.children, callback, node);
+        }
+      }
+    }
+
+    let ret = {
+      max_length: 0,
+      cycles_or_initial: 0
+    };
+
+    function countDependencyLength(node, property) {
+      if (!node) {
+        return 0;
+      }
+
+      let declarations = node.declarations;
+
+      if (!declarations || !(property in declarations)) {
+        return countDependencyLength(node.parent, property);
+      }
+
+      let o = declarations[property];
+
+      if (!o.references || o.references.length === 0) {
+        return 0;
+      }
+
+      let lengths = o.references.map(p => countDependencyLength(node, p));
+
+      return 1 + Math.max(...lengths);
+    }
+
+    walkElements(vars.computed, (node, parent) => {
+      if (parent && !node.parent) {
+        node.parent = parent;
+      }
+
+      if (node.declarations) {
+        for (let property in node.declarations) {
+
+          let o = node.declarations[property];
+          if (o.computed && o.computed.trim() !== o.value.trim() && (o.computed === "initial" || o.computed === "null")) {
+            // Cycle or missing ref
+            ret.cycles_or_initial++;
+          }
+          else {
+            let depth = countDependencyLength(node, property);
+
+            if (depth > ret.max_length) {
+              ret.max_length = depth;
+            }
+
+            incrementByKey(ret, depth);
+          }
+        }
+      }
+    });
+
+    return ret;
+  }
+  var $ = JSON.parse(payload);
+  var vars = JSON.parse($['_css-variables']);
+  var custom_props = compute(vars);
+  if (!('max_length' in custom_props)) return null;
+  return custom_props.max_length;
+} catch (e) {
+  return null;
+}
+'''
+OPTIONS (library="gs://httparchive/lib/css-utils.js");
+
+SELECT
+  percentile,
+  client,
+  APPROX_QUANTILES(max_cycles, 1000 IGNORE NULLS)[OFFSET(percentile * 10)] AS max_cycles_per_page
+FROM (
+  SELECT
+    _TABLE_SUFFIX AS client,
+    url,
+    MAX(getCustomPropertyMaxCycles(payload)) AS max_cycles
+  FROM
+    `httparchive.pages.2020_08_01_*`
+  GROUP BY
+    client,
+    url),
+  UNNEST([10, 25, 50, 75, 90, 100]) AS percentile
+GROUP BY
+  percentile,
+  client
+ORDER BY
+  percentile,
+  client

sql/2020/01_CSS/custom_property_registered.sql

@@ -40,17 +40,14 @@ try {
 }
 ''';
 
-SELECT
+SELECT DISTINCT
   _TABLE_SUFFIX AS client,
   prop,
-  COUNT(0) AS pages,
-  SUM(COUNT(0)) OVER (PARTITION BY _TABLE_SUFFIX) AS total,
-  COUNT(0) / SUM(COUNT(0)) OVER (PARTITION BY _TABLE_SUFFIX) AS pct
+  COUNT(DISTINCT url) OVER (PARTITION BY _TABLE_SUFFIX, prop) AS pages,
+  COUNT(DISTINCT url) OVER (PARTITION BY _TABLE_SUFFIX) AS total,
+  COUNT(DISTINCT url) OVER (PARTITION BY _TABLE_SUFFIX, prop) / COUNT(DISTINCT url) OVER (PARTITION BY _TABLE_SUFFIX) AS pct
 FROM
   `httparchive.pages.2020_08_01_*`,
   UNNEST(getCustomPropertiesWithComputedStyle(payload)) AS prop
-GROUP BY
-  client,
-  prop
 ORDER BY
   pct DESC

sql/2020/01_CSS/custom_property_root.sql

@@ -63,9 +63,9 @@ SELECT
   SUM(freq) AS freq,
   SUM(SUM(freq)) OVER (PARTITION BY client) AS total,
   SUM(freq) / SUM(SUM(freq)) OVER (PARTITION BY client) AS pct,
-  COUNT(DISTINCT page) AS pages,
+  COUNT(DISTINCT IF(freq > 0, page, NULL)) AS pages,
   total_pages,
-  COUNT(DISTINCT page) / total_pages AS pct_pages
+  COUNT(DISTINCT IF(freq > 0, page, NULL)) / total_pages AS pct_pages
 FROM (
   SELECT
     _TABLE_SUFFIX AS client,

sql/2020/01_CSS/gradient_bg_properties.sql

@@ -143,7 +143,7 @@ OPTIONS (library="gs://httparchive/lib/css-utils.js");
 
 SELECT
   client,
-  IF(REGEXP_CONTAINS(property, r'(?i)^(-webkit-|-o-|-moz-|-ms-)?background(-image)?'), 'bg', 'other') AS property_type,
+  IF(REGEXP_CONTAINS(property, r'(?i)(\b|_)background\b'), 'bg', 'other') AS property_type,
   COUNT(DISTINCT page) AS pages,
   total,
   COUNT(DISTINCT page) / total AS pct

sql/2020/01_CSS/gradient_stops_per_stylesheet.sql → sql/2020/01_CSS/gradient_stops_per_gradient.sql

@@ -157,7 +157,7 @@ OPTIONS (library="gs://httparchive/lib/css-utils.js");
 SELECT
   percentile,
   client,
-  APPROX_QUANTILES(color_stops, 1000 IGNORE NULLS)[OFFSET(500)] AS median_color_stop
+  APPROX_QUANTILES(color_stops, 1000 IGNORE NULLS)[OFFSET(percentile * 10)] AS color_stops_per_gradient
 FROM
   `httparchive.almanac.parsed_css`,
   UNNEST(getColorStops(css)) AS color_stops,

sql/2020/01_CSS/houdini_animated_custom_properties.sql

@@ -22,20 +22,19 @@ try {
 '''
 OPTIONS (library="gs://httparchive/lib/css-utils.js");
 
-SELECT
+SELECT DISTINCT
   client,
   custom_property,
-  COUNT(DISTINCT url) AS pages,
-  COUNT(0) AS freq,
-  SUM(COUNT(0)) OVER (PARTITION BY client) AS total,
-  COUNT(0) / SUM(COUNT(0)) OVER (PARTITION BY client) AS pct
+  COUNT(DISTINCT page) OVER (PARTITION BY client, custom_property) AS pages,
+  COUNT(DISTINCT page) OVER (PARTITION BY client) AS total_pages,
+  COUNT(DISTINCT page) OVER (PARTITION BY client, custom_property) / COUNT(DISTINCT page) OVER (PARTITION BY client) AS pct_pages,
+  COUNT(0) OVER (PARTITION BY client, custom_property) AS freq,
+  COUNT(0) OVER (PARTITION BY client) AS total,
+  COUNT(0) OVER (PARTITION BY client, custom_property) / COUNT(0) OVER (PARTITION BY client) AS pct
 FROM
   `httparchive.almanac.parsed_css`,
   UNNEST(getAnimatedCustomProperties(css)) AS custom_property
 WHERE
   date = '2020-08-01'
-GROUP BY
-  client,
-  custom_property
 ORDER BY
   pct DESC

sql/2020/01_CSS/meta_unknown_properties.sql

@@ -36,13 +36,15 @@ OPTIONS (library="gs://httparchive/lib/css-utils.js");
 SELECT
   *
 FROM (
-  SELECT
+  SELECT DISTINCT
     client,
     property,
-    COUNT(DISTINCT page) AS pages,
-    SUM(freq) AS freq,
-    SUM(SUM(freq)) OVER (PARTITION BY client) AS total,
-    SUM(freq) / SUM(SUM(freq)) OVER (PARTITION BY client) AS pct
+    COUNT(DISTINCT page) OVER (PARTITION BY client, property) AS pages,
+    COUNT(DISTINCT page) OVER (PARTITION BY client) AS total,
+    COUNT(DISTINCT page) OVER (PARTITION BY client, property) / COUNT(DISTINCT page) OVER (PARTITION BY client) AS pct_pages,
+    SUM(freq) OVER (PARTITION BY client, property) AS freq,
+    SUM(freq) OVER (PARTITION BY client) AS total,
+    SUM(freq) OVER (PARTITION BY client, property) / SUM(freq) OVER (PARTITION BY client) AS pct
   FROM (
     SELECT
       client,
@@ -54,10 +56,7 @@ FROM (
       UNNEST(getUnknownProperties(css)) AS property
     WHERE
       date = '2020-08-01' AND
-      LENGTH(property) > 1)
-  GROUP BY
-    client,
-    property)
+      LENGTH(property.property) > 1))
 WHERE
   pct >= 0.01
 ORDER BY

sql/2020/01_CSS/vendor_prefix_keywords.sql

@@ -35,8 +35,10 @@ try {
           }
 
           // Prefixed keywords
-          for (let k of value.matchAll(/(?<![-a-z])-[a-z]+-[a-z-]+(?=;|\\s|,|\\/)/g)) {
-            incrementByKey(ret.keywords, k);
+          if (!matches(property, /(^|-)(transition(-property)?|animation(-name)?)$/)) {
+            for (let k of value.matchAll(/(?<![-a-z])-[a-z]+-[a-z-]+(?=$|\\s|,|\\/)/g)) {
+              incrementByKey(ret.keywords, k);
+            }
           }
         });
       }