Skip to content

Add new SVG CSS transform and preserve 3d recipe. #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Add new SVG CSS transform and preserve 3d recipe. #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
94b3a5e
Add new SVG CSS transform and preserve 3d recipe.
jevery23 Sep 20, 2017
0e04ba9
Update svg_css-transform_preserve-3d crawler recipe as a result of PR…
jevery23 Sep 22, 2017
a324070
Added the ability to record transform value in css transform script.
jevery23 Nov 1, 2017
118f356
Added the ability to differentiate count of transform values seen by …
jevery23 Nov 1, 2017
23240cc
Remove not needed Crawler recipes.
jevery23 Nov 21, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
655 changes: 301 additions & 354 deletions Recipe.min.js
View file
Open in desktop

Large diffs are not rendered by default.

179 changes: 63 additions & 116 deletions cssUsage.src.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1541,141 +1541,88 @@ void function() { try {
} catch (ex) { /* do something maybe */ throw ex; } }();

/*
RECIPE: object_fit_object_position
RECIPE: svg_css-transform_preserve-3d
-------------------------------------------------------------
Author: joevery
Description: Get count of how many times object-fit and object-position CSS properties are used on websites and classify by HTML tag.
Description: Get count of svg elements on page along with how many contain the transform CSS property and the transform-style CSS property with value preserve-3d in their namespace.
In addition, we want to classify the number of elements that have either of these CSS properties applied by the HTML tags they are applied to.
*/
void function() {
window.CSSUsage.StyleWalker.recipesToRun.push(
function object_fit_object_position(element, results)
{
// Need this to ensure no errors on html and head tags when running the code below.
if (!element.CSSUsage) return;

if (element.CSSUsage["object-fit"])
{
// Allows counting of number of HTML tags using object-fit CSS property on page.
results["object-fit"] = results["object-fit"] || { count: 0, };
results["object-fit"].count++;

// Classify count by HTML tag.
var nodeName = element.nodeName;
results["object-fit"][nodeName] = results["object-fit"][nodeName] || { count: 0, };
results["object-fit"][nodeName].count++;
}

if (element.CSSUsage["object-position"])
{
// Allows counting of number of HTML tags using object-position CSS property on page.
results["object-position"] = results["object-position"] || { count: 0, };
results["object-position"].count++;

// Classify count by HTML tag.
var nodeName = element.nodeName;
results["object-position"][nodeName] = results["object-position"][nodeName] || { count: 0, };
results["object-position"][nodeName].count++;
}

return results;
});
}();

/*
RECIPE: object_fit_onvideo
-------------------------------------------------------------
Author: joevery
Description: Get count of how many times object-fit CSS property is used on a video element on websites.
*/
void function() {
window.CSSUsage.StyleWalker.recipesToRun.push(
function object_fit_onvideo(element, results)
function svg_css_transform_preserve_3d(element, results)
{
var nodeName = element.nodeName;

if (nodeName == "VIDEO")
if (nodeName == "svg")
{
if (element.CSSUsage["object-fit"])
{
var key = "VIDEO" + "_" + "object-fit";
results[key] = results[key] || { count: 0, };
results[key].count++;
}
}
return results;
});
}();
results["svg"] = results["svg"] || { count: 0, };
results["svg"].count++;

/*
RECIPE: position-sticky_ancestry-tree
-------------------------------------------------------------
Author: joevery
Description: Get count of how many times position CSS property with value sticky are used on websites and classify by HTML tag.
*/
void function() {
window.CSSUsage.StyleWalker.recipesToRun.push(
function position_sticky_ancestry_tree(element, results)
{
// Need this to ensure no errors on html and head tags when running the code below.
if (!element.CSSUsage) return;
var elementsToCheck = [element];
var level = 0;

if (element.CSSUsage["position"] == "sticky")
{
var nodeName = element.nodeName;

var ancestryTreeArray = [nodeName];

var currentParent = element.parentElement;

while (currentParent)
while (elementsToCheck.length > 0)
{
ancestryTreeArray.push(currentParent.nodeName);
currentParent = currentParent.parentElement;
var children = [];

for (var i = 0; i < elementsToCheck.length; ++i)
{
var e = elementsToCheck[i];

// We want to skip nested svg elements and do them later, but of course do the one we just found.
if (e.nodeName != "svg" || level == 0)
{
// If no CSS on element, then don't do what is inside if statement, otherwise it will hit error.
if (e.CSSUsage)
{
if (e.CSSUsage["transform"])
{
var tNodeName = e.nodeName;
var tValues = e.CSSUsage["transform"];

results["svg"]["transform"] = results["svg"]["transform"] || { count: 0, };
results["svg"]["transform"].count++;

for (i = 0; i < tValues.length; ++i)
{
results["svg"]["transform"][tValues[i]] = results["svg"]["transform"][tValues[i]] || { count: 0, };
results["svg"]["transform"][tValues[i]].count++;

results["svg"]["transform"][tValues[i]][tNodeName] = results["svg"]["transform"][tValues[i]][tNodeName] || { count: 0, };
results["svg"]["transform"][tValues[i]][tNodeName].count++;
}
}

// We have to check for the transform-style property first before checking its values, otherwise it will hit error.
var transformStyle = e.CSSUsage["transform-style"];
if (transformStyle)
{
if (transformStyle.valuesArray.includes("preserve-3d"))
{
var tsNodeName = e.nodeName;

results["svg"]["transform-style_preserve-3d"] = results["svg"]["transform-style_preserve-3d"] || { count: 0, };
results["svg"]["transform-style_preserve-3d"].count++;

results["svg"]["transform-style_preserve-3d"][tsNodeName] = results["svg"]["transform-style_preserve-3d"][tsNodeName] || { count: 0, };
results["svg"]["transform-style_preserve-3d"][tsNodeName].count++;
}
}
}

// Need to convert children HTML collection to array to combine with other children found.
children = children.concat(Array.from(e.children));
}
}
++level;
elementsToCheck = children;
}

var ancestryTree = ancestryTreeArray.join("-");

results["sticky"] = results["sticky"] || { count: 0, };
results["sticky"].count++;

results["sticky"][nodeName] = results["sticky"][nodeName] || { count: 0, };
results["sticky"][nodeName].count++;

results["sticky"][nodeName][ancestryTree] = results["sticky"][nodeName][ancestryTree] || { count: 0, };
results["sticky"][nodeName][ancestryTree].count++;
}

return results;
});
}();

/*
RECIPE: z-index on static flex items
-------------------------------------------------------------
Author: Francois Remy
Description: Get count of flex items who should create a stacking context but do not really
*/

void function() {

window.CSSUsage.StyleWalker.recipesToRun.push( function zstaticflex(/*HTML DOM Element*/ element, results) {
if(!element.parentElement) return;

// the problem happens if the element is a flex item with static position and non-auto z-index
if(getComputedStyle(element.parentElement).display != 'flex') return results;
if(getComputedStyle(element).position != 'static') return results;
if(getComputedStyle(element).zIndex != 'auto') {
results.likely = 1;
}

// the problem might happen if z-index could ever be non-auto
if(element.CSSUsage["z-index"] && element.CSSUsage["z-index"].valuesArray.length > 0) {
results.possible = 1;
}

});
}();

//
// This file is only here to create the TSV
// necessary to collect the data from the crawler
Expand Down
24 changes: 0 additions & 24 deletions src/recipes/object-fit-onvideo.js
View file
Open in desktop

This file was deleted.

40 changes: 0 additions & 40 deletions src/recipes/object-fit_object-position.js
View file
Open in desktop

This file was deleted.

42 changes: 0 additions & 42 deletions src/recipes/position-sticky_ancestry-tree.js
View file
Open in desktop

This file was deleted.

82 changes: 82 additions & 0 deletions src/recipes/svg_css-transform_preserve-3d.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
/*
RECIPE: svg_css-transform_preserve-3d
-------------------------------------------------------------
Author: joevery
Description: Get count of svg elements on page along with how many contain the transform CSS property and the transform-style CSS property with value preserve-3d in their namespace.
In addition, we want to classify the number of elements that have either of these CSS properties applied by the HTML tags they are applied to.
*/
void function() {
window.CSSUsage.StyleWalker.recipesToRun.push(
function svg_css_transform_preserve_3d(element, results)
{
var nodeName = element.nodeName;

if (nodeName == "svg")
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This will only allow <svg> to be looked at. What if the transform is on a different element. I'm trying to track down every possible element that it can be on but the spec doesn't seem clear here so I'll sync up with Bogdan on this.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just noticed that you're adding children to the elementsToCheck array, not sure if we should do it this way since recipes will pass in every element. So you should be able to just check that the nodeName is contained within an array that contains various SVG elements (which I'll get to you after chatting with Bogdan) like this:

if (elementToCheck.includes(nodeName))

{
results["svg"] = results["svg"] || { count: 0, };
results["svg"].count++;

var elementsToCheck = [element];
var level = 0;

while (elementsToCheck.length > 0)
{
var children = [];

for (var i = 0; i < elementsToCheck.length; ++i)
{
var e = elementsToCheck[i];

// We want to skip nested svg elements and do them later, but of course do the one we just found.
if (e.nodeName != "svg" || level == 0)
{
// If no CSS on element, then don't do what is inside if statement, otherwise it will hit error.
if (e.CSSUsage)
{
if (e.CSSUsage["transform"])
{
var tNodeName = e.nodeName;
var tValues = e.CSSUsage["transform"];

results["svg"]["transform"] = results["svg"]["transform"] || { count: 0, };
results["svg"]["transform"].count++;

for (i = 0; i < tValues.length; ++i)
{
results["svg"]["transform"][tValues[i]] = results["svg"]["transform"][tValues[i]] || { count: 0, };
results["svg"]["transform"][tValues[i]].count++;

results["svg"]["transform"][tValues[i]][tNodeName] = results["svg"]["transform"][tValues[i]][tNodeName] || { count: 0, };
results["svg"]["transform"][tValues[i]][tNodeName].count++;
}
}

// We have to check for the transform-style property first before checking its values, otherwise it will hit error.
var transformStyle = e.CSSUsage["transform-style"];
if (transformStyle)
{
if (transformStyle.valuesArray.includes("preserve-3d"))
{
var tsNodeName = e.nodeName;

results["svg"]["transform-style_preserve-3d"] = results["svg"]["transform-style_preserve-3d"] || { count: 0, };
results["svg"]["transform-style_preserve-3d"].count++;

results["svg"]["transform-style_preserve-3d"][tsNodeName] = results["svg"]["transform-style_preserve-3d"][tsNodeName] || { count: 0, };
results["svg"]["transform-style_preserve-3d"][tsNodeName].count++;
}
}
}

// Need to convert children HTML collection to array to combine with other children found.
children = children.concat(Array.from(e.children));
}
}
++level;
elementsToCheck = children;
}
}

return results;
});
}();
Loading