Commit 77c618c3 authored by svilayphiou's avatar svilayphiou

updated CSS regions polyfill by François Rémy

parent 60e1e3bc
.idea/.name
.idea/css-regions.iml
.idea/encodings.xml
.idea/vcs.xml
.idea/workspace.xml
.idea/scopes/scope_settings.xml
.idea/modules.xml
.idea/misc.xml
examples/.DS_Store
examples/AdRegions.zip
examples/AdRegions/.DS_Store
examples/AdRegions/ads/1.jpg
examples/AdRegions/ads/2.jpg
examples/AdRegions/ads/3.jpg
examples/AdRegions/ads/4.png
examples/AdRegions/index.html
examples/AdRegions/style.css
examples/AdRegions/test.js
use-cases/content-folding/.DS_Store
playground/content-folding/.DS_Store
.DS_Store
*.iml
.idea/libraries/sass_stdlib.xml
./node_modules/
.sass-cache/
Contributions to this code are covered by the Adobe contributors license agreement.
Developers must sign and submit the Adobe CLA in order to contribute to this project:
http://adobe-webplatform.github.com/css-regions-polyfill/dev/cssregionspolyfill-cla.html
CSS Regions Polyfill
Copyright 2012 Adobe Systems Incorporated
This software is licensed under the Apache License, Version 2.0 (see
LICENSE file).
This software uses the following third party libraries that may have
licenses differing from that of the software itself. You can find the
libraries and their respective licenses below.
- content-folding - ./playground/content-folding
This is a modified version of this demo:
http://css-tricks.com/content-folding/
There are no license information available for this. However Chris Coyier (the author of this example) has
agreed to let us use his work.
- Paginated Content - ./playground/paginated-content
Original example can be found here: http://christiancantrell.com/adobe/hlp/callout.html
The text is from Mark Twain's novel A Connecticut Yankee in King Arthur's Court.
- Complex Content Flow - ./playground/the-first-example/image.png ./playground/the-first-example/complex-flow.png
These two images are from the CSS Regions spec (http://dev.w3.org/csswg/css3-regions/).
License information: http://www.w3.org/Consortium/Legal/2002/copyright-documents-20021231
- Breaking News Example - ./playground/breaking-news
This example is from the CSS Regions Use Cases page from W3C:
http://wiki.csswg.org/spec/css3-regions/regions-use-cases
License information: http://www.w3.org/Consortium/Legal/2002/copyright-documents-20021231
# CSS Regions polyfill
Prototype library for using [CSS Regions](http://html.adobe.com/webstandards/cssregions/) features in browsers that don't have support for them.
**UPDATE, April 2014: This polyfill is obsolete.**
**[François Remy](https://github.com/FremyCompany) wrote an improved [CSS Regions polyfill](https://github.com/FremyCompany/css-regions-polyfill) with better browser support and broader feature coverage.**
## Usage
Include the polyfill script in your page
<pre>
&lt;script src='cssregions.js'&gt;&lt;/script&gt;
</pre>
Use standard CSS regions syntax on the same page.
<pre>
#content{
/* pull content into a named flow */
flow-into: myflow;
}
.region{
/* flow the content into other boxes */
flow-from: myFlow;
width: 200px;
height: 100px;
}
</pre>
The `#content` will be extracted and split across `.region` elements. Regions should be block elements and have explicit dimensions for the polyfill to work.
## Contributing
**DO NOT directly modify the `cssregions.js` or `cssregions.min.js` files in the project root.** These files are automatically built from components located under the `src/` directory.
The project uses [Grunt](http://gruntjs.com) to automate the build process.
Grunt depends on [Node.js](http://nodejs.org/) and [npm](https://npmjs.org/).
**Install Grunt**
```
npm install -g grunt
```
Tell Grunt to watch for changes and automatically build `cssregions.js` and `cssregions.min.js`:
```
cd ./path/to/polyfill/
grunt watch
```
While `grunt watch` is running, every time you make changes to components under `src/` the main files, `cssregions.js` and `cssregions.min.js`, are built and written to the project root.
To do a one-time build run:
```
grunt build
```
## Testing
The polyfill has a [QUnit](https://github.com/jquery/qunit)-driven test suite in the `/test/` folder. New code should include at least one test.
**Run the tests**
Open the `test/index.html` file in a browser. This runs the QUnit test suite. Refresh compulsively after making changes to project files. You can automatically run the test suite with other tools. See below.
### Optionals
[Testem](https://github.com/airportyh/testem) automatically runs the QUnit suite across browsers as you make changes to the files. A configuration is provided in `/testem.json`. Testem is optional, but [pretty cool](http://net.tutsplus.com/tutorials/javascript-ajax/make-javascript-testing-fun-with-testem/).
Testem depends on [NodeJS](http://nodejs.org/) and [npm](https://npmjs.org/).
**Install Testem**
```npm install testem -g```
**Run Testem**
```
cd ./path/to/polyfill/
testem
```
This command will open up the browsers specified in the `testem.json` config file and run the test suite located at `/test/index.html`. As you make changes to any of the files, Testem will re-run the tests.
Learn more from the [Testem docs](https://github.com/airportyh/testem/blob/master/README.md)
## License information
The code in this repository implies and respects different licenses. This is a quick overview. For details check each folder's corresponding LICENSE.md file.
- Apache 2 for CSS Regions polyfill
- Public Domain for tests, demos and docs
- Third party assets under their own licenses
See LICENSE.md for details.
CSS Regions Polyfill Feature Support
=====
A lot of effort was put into building the current polyfill to support the basic use cases for CSS Regions.
Some features require refinement, others are not yet implemented.
The CSS Regions polyfill is meant to illustrate the functionality of CSS Regions in browsers that don't yet support
them. Keep in mind that the polyfill cannot match the peformance or the full scope of features natively
implemented in the browser.
Your feedback, suggestions and contributions are welcome.
What works
---
- CSS `flow-into` and `flow-from` properties;
- CSS Object Model:
- `document.getNamedFlows()`;
- `NamedFlow` interface;
- `NamedFlow.overset` property;
- `NamedFlow.firstEmptyRegionIndex` property;
- `NamedFlow.getRegions()` method;
- `NamedFlow.getContent()` method;
- `regionlayoutupdate` event on `NamedFlow`;
- `Region.regionOverset` property;
- content reflow due to viewport resize;
What kind of works:
---
- CSS Object Model:
- `NamedFlow.getRegionsByContent()`;
This is almost next to impossible to implement it correctly for all possible scenarios in JavaScript. The current
implementation might work for some use cases and not for others.
What doesn't work
---
- content reflow due to media queries;
- content reflow due to DOM changes;
- content reflow due to viewport orientation change;
- nested named flows;
- loading styles from cross-domain linked stylesheets;
- CSS `region-break-*` properties;
- CSS `region-overset` property;
- CSS region styling with `@region`;
- CSS Object Model:
- `Region.getRegionFlowRanges()` method;
- `Region.getComputedRegionStyle()` method;
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="37.599px" height="63px" viewBox="0 0 37.599 63" enable-background="new 0 0 37.599 63" xml:space="preserve">
<rect fill="#E30613" width="37.599" height="63"/>
<g>
<polygon fill="#FFFFFF" points="21.361,27.169 28.604,27.169 28.604,44.449 "/>
<polygon fill="#FFFFFF" points="16.255,27.169 9.004,27.169 9.004,44.449 "/>
<polygon fill="#FFFFFF" points="18.807,33.536 23.424,44.448 20.398,44.448 19.016,40.973 15.636,40.973 "/>
<g>
<path fill="#FFFFFF" d="M30.085,27.169c0.464,0,0.834,0.373,0.834,0.839c0,0.473-0.37,0.847-0.838,0.847s-0.847-0.374-0.847-0.847
c0-0.466,0.379-0.839,0.847-0.839H30.085z M30.081,27.312c-0.371,0-0.67,0.312-0.67,0.699c0,0.389,0.299,0.7,0.674,0.7
c0.37,0.004,0.667-0.312,0.667-0.7c0-0.387-0.297-0.699-0.667-0.699H30.081z M29.928,28.498h-0.17v-0.935
c0.079-0.014,0.157-0.027,0.282-0.027c0.149,0,0.243,0.029,0.305,0.077c0.052,0.038,0.081,0.104,0.081,0.191
c0,0.121-0.079,0.2-0.182,0.226v0.009c0.082,0.015,0.135,0.089,0.152,0.228c0.024,0.146,0.043,0.203,0.059,0.231h-0.172
c-0.022-0.028-0.041-0.114-0.062-0.239c-0.019-0.111-0.081-0.158-0.196-0.158h-0.098V28.498z M29.928,27.972h0.102
c0.121,0,0.224-0.041,0.224-0.15c0-0.083-0.06-0.157-0.216-0.157c-0.051,0-0.084,0-0.109,0.003V27.972z"/>
</g>
<path fill="#FFFFFF" d="M11.636,51.673l-0.229-1.355c-0.067-0.393-0.149-1.003-0.21-1.425h-0.023
c-0.069,0.424-0.163,1.053-0.232,1.428l-0.247,1.353H11.636z M10.571,52.558l-0.298,1.504H9.167l1.377-6.26h1.352l1.25,6.26h-1.11
l-0.292-1.504H10.571z"/>
<path fill="#FFFFFF" d="M15.657,51.265c0-0.082,0-0.181-0.017-0.271c-0.043-0.308-0.21-0.588-0.475-0.588
c-0.45,0-0.619,0.654-0.619,1.418c0,0.88,0.24,1.382,0.603,1.382c0.17,0,0.364-0.087,0.47-0.455
c0.024-0.072,0.038-0.173,0.038-0.288V51.265z M16.792,47.634v5.13c0,0.409,0.02,0.907,0.037,1.299h-0.98l-0.065-0.522h-0.023
c-0.164,0.321-0.522,0.598-0.947,0.598c-0.937,0-1.402-1.031-1.402-2.333c0-1.584,0.695-2.354,1.447-2.354
c0.392,0,0.651,0.191,0.779,0.469h0.019v-2.286H16.792z"/>
<path fill="#FFFFFF" d="M19.148,53.271c0.431,0,0.541-0.811,0.541-1.485c0-0.638-0.11-1.47-0.56-1.47
c-0.479,0-0.58,0.832-0.58,1.47c0,0.772,0.128,1.485,0.589,1.485H19.148z M19.126,54.138c-1.04,0-1.697-0.838-1.697-2.333
c0-1.631,0.842-2.354,1.722-2.354c1.033,0,1.679,0.876,1.679,2.33c0,1.867-1.012,2.357-1.694,2.357H19.126z"/>
<path fill="#FFFFFF" d="M22.596,52.442c0,0.112,0.02,0.219,0.043,0.288c0.114,0.382,0.309,0.476,0.461,0.476
c0.438,0,0.617-0.553,0.617-1.439c0-0.804-0.189-1.36-0.622-1.36c-0.215,0-0.396,0.233-0.458,0.483
c-0.021,0.078-0.041,0.2-0.041,0.287V52.442z M21.464,47.634h1.132v2.363h0.018c0.224-0.348,0.521-0.547,0.953-0.547
c0.854,0,1.283,0.968,1.283,2.229c0,1.602-0.642,2.459-1.469,2.459c-0.398,0-0.661-0.176-0.898-0.619h-0.023l-0.062,0.543h-0.971
c0.016-0.378,0.038-0.889,0.038-1.298V47.634z"/>
<path fill="#FFFFFF" d="M27.562,51.361c0.004-0.639-0.18-1.088-0.541-1.088c-0.412,0-0.586,0.603-0.598,1.088H27.562z
M26.419,52.158c0.013,0.821,0.446,1.089,0.984,1.089c0.343,0,0.635-0.074,0.851-0.158l0.155,0.812
c-0.302,0.13-0.767,0.21-1.212,0.21c-1.217,0-1.878-0.825-1.878-2.239c0-1.519,0.768-2.427,1.774-2.427
c0.973,0,1.512,0.803,1.512,2.12c0,0.299-0.014,0.467-0.035,0.601L26.419,52.158z"/>
</g>
</svg>
body, html, h1, h2, h3, header p, article p {
margin: 0;
padding: 0;
}
body, html {
font-family: source-sans-pro, helvetica, arial, sans-serif;
font-size: 100%;
color: #333;
padding-bottom: 2em;
}
h1, h2, h3 {
font-family: league-gothic, helvetica, arial, serif;
font-weight: normal;
}
h1 {
font-size: 4em;
}
h2 {
font-size: 2em;
margin: 1em 0 0.5em;
}
h3 {
font-size: 1.7em;
margin: 1.2em 0 0.3em;
color: gray;
}
pre, code {
font-family: source-code-pro, monospace;
}
code {
background: #eee;
padding: 0 0.2em;
font-size: 0.8em;
/* border: 1px solid #d7d7d7;*/
}
pre {
padding: 0.5em;
margin: 0 0 2em;
/* border: 1px solid #d7d7d7;*/
background: #eee;
overflow: auto;
}
section {
margin: 2em 0 1em;
}
header, article {
padding: 0 1em 0;
}
header {
padding-top: 3em;
}
header h1 {
margin: 0 0 35px;
margin: 0 0 2rem;
color: black;
}
header p {
font-size: 1.1em;
line-height: 1.5em;
margin: 0 0 1.5em;
color: #333;
}
header:after {
content: " ";
display: block;
clear: both;
}
article p {
margin: 1em 0;
}
article p, article li {
line-height: 1.5em;
}
#download {
text-align: center;
width: 100%;
margin: 0 0 2em;
}
#download .button {
display: block;
background: lightgreen;
font-size: 2em;
color: darkgreen;
text-align: center;
padding: 0.3em 0;
margin: 0 0 0.3em;
border-radius: 5px;
text-decoration: none;
font-family: league-gothic, helvetica, arial, sans-serif;
}
#download .button:hover {
background: darkgreen;
color: white;
}
#download span {
color: #999;
font-size: 0.8em;
}
#download span a {
color: #999;
}
#download span a:hover {
color: darkgray;
}
#download span + span {
display: block;
}
.logo {
position: absolute;
overflow: hidden;
right: 10%;
top: 0;
height: 0;
/* hide text beyond overflow */
padding-top: 4em;
width: 2.2em;
background: url(../adobelogo.svg) center top no-repeat;
background-size: cover;
}
@media screen and (min-width: 42em) {
header, article {
max-width: 40em;
margin: 0 auto;
font-size: 110%;
}
section:first-of-type {
margin-top: 1em;
}
.logo {
right: 1em;
}
header {
position: relative;
}
header p {
float: left;
width: 60%;
margin-bottom: 0;
}
header #download {
width: 35%;
float: right;
margin-bottom: 0;
}
header #download span + span {
display: inline;
}
}
%reset{
margin: 0;
padding: 0;
}
body, html{
@extend %reset;
font-family: source-sans-pro, helvetica, arial, sans-serif;
font-size: 100%;
color: #333;
padding-bottom: 2em;
}
h1, h2, h3{
@extend %reset;
font-family: league-gothic, helvetica, arial, serif;
font-weight: normal;
}
h1{
font-size: 4em;
}
h2{
font-size: 2em;
margin: 1em 0 0.5em;
}
h3{
font-size: 1.7em;
margin: 1.2em 0 0.3em;
color: gray;
}
pre, code{
font-family: source-code-pro, monospace;
}
code{
background: #eee;
padding: 0 0.2em;
font-size: 0.8em;
/* border: 1px solid #d7d7d7;*/
}
pre{
padding: 0.5em;
margin: 0 0 2em;
/* border: 1px solid #d7d7d7;*/
background: #eee;
overflow: auto;
}
section{
margin: 2em 0 1em;
}
header, article{
padding: 0 1em 0;
}
header{
padding-top: 3em;
h1{
margin: 0 0 35px;
margin: 0 0 2rem;
color: black;
}
p{
@extend %reset;
font-size: 1.1em;
line-height: 1.5em;
margin: 0 0 1.5em;
color: #333;
}
&:after{
content: " ";
display: block;
clear: both;
}
}
article{
p{
@extend %reset;
margin: 1em 0;
}
p, li{
line-height: 1.5em;
}
}
#download{
text-align: center;
width: 100%;
margin: 0 0 2em;
.button{
display: block;
background: lightgreen;
font-size: 2em;
color: darkgreen;
text-align: center;
padding: 0.3em 0;
margin: 0 0 0.3em;
border-radius: 5px;
text-decoration: none;
font-family: league-gothic, helvetica, arial, sans-serif;
&:hover{
background: darkgreen;
color: white;
}
}
span{
color: #999;
font-size: 0.8em;
a{
color: #999;
&:hover{
color: darkgray;
}
}
}
span + span{
display: block;
}
}
.logo{
position: absolute;
overflow: hidden;
right: 10%;
top: 0;
height: 0;
/* hide text beyond overflow */
padding-top: 4em;
width: 2.2em;
background: url(../adobelogo.svg) center top no-repeat;
background-size: cover;
}
@media screen and (min-width: 42em){
header, article{
max-width: 40em;
margin: 0 auto;
font-size: 110%;
}
section:first-of-type{
margin-top: 1em;
}
.logo{
right: 1em;
}
header{
// makes abs position .logo relative to header
position: relative;
p {
float: left;
width: 60%;
margin-bottom: 0;
}
#download{
width: 35%;
float: right;
margin-bottom: 0;
span + span{
display: inline;
}
}
}
}
/*
Copyright 2012 Adobe Systems Inc.;
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
@font-face
{
font-family: "LeagueGothic";
src: url('../fonts/league_gothic/League_Gothic-webfont.ttf'),
url('../fonts/league_gothic/League_Gothic-webfont.svg'),
url('../fonts/league_gothic/League_Gothic-webfont.woff'),
url('../fonts/league_gothic/League_Gothic-webfont.eot');
/* "League Gothic" Copyright (c) 2010, Caroline Hadilaksono & Micha Rich */
/* http://theleagueofmoveabletype.com */
}
@font-face
{
font-family: "Source";
src: url('../fonts/sourcesans/sourcesans-regular-webfont.ttf'),
url('../fonts/sourcesans/sourcesans-regular-webfont.svg'),
url('../fonts/sourcesans/sourcesans-regular-webfont.woff'),