adobe-webplatform / css-shapes-polyfill Goto Github PK

View Code? Open in Web Editor NEW

303.0 303.0 46.0 2.81 MB

Polyfill for the CSS Shapes Specification

License: Other

JavaScript 99.33% CSS 0.67%

css-shapes-polyfill's People

Contributors

Stargazers

Watchers

Forkers

iam-msm alanjoxa zhaoheng briannaorg larscwallin purpleladydragons alexlasek paularmstrong csaunier urbie-mk2 components-aleuser01 fredericksilva modulexcite ttessman argayash ganlanyuan maksimpuganov davidbachmann alexapostolov natelspence woowe gustavoquinalha adioslabs codiceovvio wiltonlazary haithemaraissia nagle zhl584433499 liubingbing6 mcmaxwell greengremlin oligoform controlledchaos d-ahmed beingsane foobarbecue hdshing othomation juuuuushin isabella232 babamisaki orsonok seanpm2001

css-shapes-polyfill's Issues

The container gets too big for shape-outside: padding-box when border is applied.

<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>

with polyfill:

native:

Also border is painted on the top of the content.

Bower or Nodejs support

Would be nice to have these available for both.

It doesn't support shape-inside property

I test it with shape-inside property but it doesn't work.
Do you think to implement it?

Thanks for your work!

Does not work when shape-rules are nested in @media queries

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

shape-outside: content-box with padding wraps around padding box

Failing test case:
ae11b97

The polyfill should respect margin-box

Currently the this test fails:

css-shapes-polyfill/tests/shape-info-tests.js

Line 47 in 6dbafa4

name: 'for margin-box',

An error occurred loading a stylesheet, probably because we can't access the local file system

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"

Inset on the margin-box + (padding & border & margin) fails

82102b3

Does not work when floating one shape to the left, and a second to the right, in Firefox.

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."

Wrapping content between two shapes fail in Microsoft Edge

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

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.

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

querySelectorAll in Firefox, syntax error

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.

5 tests fail on IE 11

On IE 11.0.7

Simple Shape CSS Values

shape-outside
shape-margin
shape-image-threshold
shape-outside, shape-margin, shape-image-threshold
embedded with other rules

Tests fail.
Error message: Access is denied.

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