Skip to content
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

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

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 1 commit
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
69 changes: 69 additions & 0 deletions Recipe.min.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1649,6 +1649,75 @@ void function() {
});
}();

/*
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.
*/
void function() {
window.CSSUsage.StyleWalker.recipesToRun.push(
function svg_css_transform_preserve_3d(element, results)
{
var nodeName = element.nodeName;

if (nodeName == "svg")
{
var elementsToCheck = [element];
var elementHasTranform = false;
var elementHas3DStyle = false;

while (elementsToCheck.length > 0 && (!elementHas3DStyle || !elementHasTranform))
{
var children = [];

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

// 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"]) {
elementHasTranform = true;
}

// 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")) {
elementHas3DStyle = true;
}
}
}

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

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

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

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

return results;
});
}();

/*
RECIPE: z-index on static flex items
-------------------------------------------------------------
Expand Down
69 changes: 69 additions & 0 deletions cssUsage.src.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1649,6 +1649,75 @@ void function() {
});
}();

/*
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.
*/
void function() {
window.CSSUsage.StyleWalker.recipesToRun.push(
function svg_css_transform_preserve_3d(element, results)
{
var nodeName = element.nodeName;

if (nodeName == "svg")
{
var elementsToCheck = [element];
var elementHasTranform = false;
var elementHas3DStyle = false;

while (elementsToCheck.length > 0 && (!elementHas3DStyle || !elementHasTranform))
{
var children = [];

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

// 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"]) {
elementHasTranform = true;
}

// 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")) {
elementHas3DStyle = true;
}
}
}

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

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

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

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

return results;
});
}();

/*
RECIPE: z-index on static flex items
-------------------------------------------------------------
Expand Down
68 changes: 68 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,68 @@
/*
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.
*/
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))

{
var elementsToCheck = [element];
var elementHasTranform = false;
var elementHas3DStyle = false;

while (elementsToCheck.length > 0 && (!elementHas3DStyle || !elementHasTranform))
{
var children = [];

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

// 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"]) {
elementHasTranform = true;
}

// 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")) {
elementHas3DStyle = true;
}
}
}

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

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

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

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

return results;
});
}();
24 changes: 24 additions & 0 deletions tests/recipes/svg_css-transform_preserve-3d.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SVG CSS transform and preserve-3d test</title>
<style>
text {
width: 70%;
margin: 0 auto;
display: block;
transform: perspective(300px) rotateX(30deg);
transform-style: preserve-3d;
}
</style>
<script src="../../Recipe.min.js"></script>
</head>
<body>
<svg viewBox="0 0 100 100">
<g>
<circle cx="20" cy="20" r="20"/>
<text x="0" y="20">YAY!!!!!!!!!!!</text>
</g>
</svg>
</body>
</html>