adobe-webplatform / css-shapes-polyfill Goto Github PK
View Code? Open in Web Editor NEWPolyfill for the CSS Shapes Specification
License: Other
Polyfill for the CSS Shapes Specification
License: Other
When using the technique described in the "Alice in Wonderland" example (https://www.html5rocks.com/en/tutorials/shapes/getting-started/#toc-inside-shape among other), this fails in Microsoft Edge and Firefox.
Works in IE 11 and Chrome
Experience Firefox and Microsoft Edge
Experience IE 11 and Chrome 57
Example code (from the demo set)
simple-shape-outsides.html.txt
Example:
@media (max-width: 767px) {
.wrap {
shape-outside: url(...);
}
}
Expected: The polyfill will respect the media-query and re-calculate the shape when the media-query is in use.
Actual: Error attempting to run querySelectorAll
on @media ...
: shapes-polyfill.js#L1379
dear developers,
thanks for your great work.
i would like to include the shapes-polyfill.js in wordpress. i put it in the footer.php of my theme, it does not work properly. it seems that the script is not answering, so i must stop manually.
browser in use is ff 38.0.5
downloaded demos from your platform are looking well, there are no javascript-problems.
i would be very pleased, if you could help.
thank you so much.
regards
willy-george
Setting the z-index to -1 will occasionally hide the float's content.
For example, if the shape-outside float and the body both have different background colors.
On IE 11.0.7
Simple Shape CSS Values
Tests fail.
Error message: Access is denied.
Currently the this test fails:
Hi Team,
am getting this issue 'A script on this page may be busy, or it may have stopped responding. You can stop the script now, open the script in the debugger, or let the script continue.' and css polyfill is not working
Hi, I used code like it was specified in readme:
<p> <img class="shape" src="hubert-photo.png" /> Blablabla (...) blablabla </p>
.shape
{
border-radius: 50%; /* gives circle */
float: right;
shape-outside: circle(50%);
shape-margin: 1em;
}
Tried in Firefox 47, and Palemoon 27, both give error in console:
"SyntaxError: An invalid or illegal string was specified" in line 1379 of the not-minified source:
new StylePolyfill(function(rules) {
rules.forEach(function(rule) {
var els = document.querySelectorAll(rule.selector); // <------- here
for (var i = 0; i < els.length; i++)
els[i].setAttribute('data-' + rule.property, rule.value);
});
By inspecting variables I see els is undefined. So querySelectorAll didn't return anything.
The rule variable contains:
property: "shape-outside"
selector: "*/.shape"
value: "circle(50%)"
The querySelectorAll doesn't work with this selector syntax. Do you know why? Is that Firefox specific limitation?
If I change selector to ".shape" then the js doesn't break, querySelectorAll returns proper node. I don't see the script working as intended but it might be due to many things.
Anyway, is the removal of */ a good workardound? Where is the */ added in the file? I can't find it.
I test it with shape-inside property but it doesn't work.
Do you think to implement it?
Thanks for your work!
Failing test case:
ae11b97
I have this problem. I don't know why
"An error occurred loading a stylesheet, probably because we can't access the local file system"
<style>
.container {
width: 800px;
}
.shape {
float: left;
padding: 20px;
border: 21px solid yellow;
width: 80px;
height: 80px;
-webkit-shape-outside: padding-box;
}
</style>
</head>
<body>
<div class="container"><div class="shape"></div>
<p>Pelicans are a genus of large water birds comprising the family Pelecanidae. They are characterised by a long beak and large throat pouch used for catching prey and draining water from the scooped up contents before swallowing. They have predominantly pale plumage, the exceptions being the Brown and Peruvian Pelicans. The bills, pouches and bare facial skin of all species become brightly coloured before the breeding season. The eight living pelican species have a patchy global distribution, ranging latitudinally from the tropics to the temperate zone, though they are absent from interior South America as well as from polar regions and the open ocean. Fossil evidence of pelicans dates back at least 30 million years, to the remains of a beak very similar to that of modern species recovered from Oligocene strata in France.
</div>
<script src='../shapes-polyfill.js'></script>
Also border is painted on the top of the content.
Would be nice to have these available for both.
Appears in Firefox 37.0.1. Seems to comply with the Known Issues section: "Multiple shaped floats stacking or in close proximity may clear each other once the polyfill is applied."
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.