Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Remove obsolete shadow-dom + regions demo; addresses #30

  • Loading branch information...
commit 13d4a4a1db76a3faa7ef3d2ab7b5f7ad59f45074 1 parent cd37a3c
@oslego oslego authored
View
47 samples/css-regions/shadow-dom/README.md
@@ -1,47 +0,0 @@
-CSS Regions in Shadow DOM
-=====
-
-This is an experiment to hilight how CSS Regions interact with Shadow DOM.
-
-**updated June 2012**
-
-- ShadowRoot now implements <code>applyAuthorStyles</code> flag
-
-- workaround using <code>scoped</code> styles no longer required
-
-Requirements
------
-This experiment works in a Webkit-enabled browser with Shadow DOM and CSS Regions enabled.
-
-At the time of this writing Google Chrome Dev channel and Google Chrome Canary builds have Shadow DOM and CSS Regions support.
-
-[Download Google Chrome Canary](http://tools.google.com/dlpage/chromesxs)
-
-**How to enable Shadow DOM in Google Chrome**
-
-* type `about:flags` into the address bar of the browser;
-
-* find the "Enable Shadow DOM" flag and toggle it on;
-
-* restart the browser;
-
-* [test if Shadow DOM works](http://jsfiddle.net/dglazkov/eQSZd/)
-
-**How to enable CSS Regions in Google Chrome**
-
-* type `about:flags` into the address bar of the browser;
-
-* find the "Enable CSS Regions" flag and toggle it on; if you're running Chrome 23+, search for the "Enable experimental WebKit features" and toggle it on
-
-* restart the browser;
-
-* [test if CSS Regions work](http://jsfiddle.net/vwmpX/)
-
-
-Expected result
------
-You should see two green border boxes with text flowing between them when the browser window is resized.
-
-**Screenshot of expected result**
-
-![CSS Regions and Shadow DOM in Google Chrome](http://s17.postimage.org/yhccfeswv/expected_result.png)
View
BIN  samples/css-regions/shadow-dom/expected-result.png
Deleted file not rendered
View
86 samples/css-regions/shadow-dom/index.html
@@ -1,86 +0,0 @@
-<!--
-Copyright 2012 (C) Adobe Systems Incorporated. All rights reserved.
-
-This code is licensed under Creative Commons and dedicated to the Public Domain.
-http://creativecommons.org/publicdomain/zero/1.0/
-
-Author: Razvan Caliman (rcaliman@adobe.com)
-
-Learn, create and have fun! ;)
--->
-<!DOCTYPE HTML>
-<html>
-<head>
- <title>CSS Regions and Shadow DOM</title>
- <meta charset="UTF-8">
- <meta name="robots" content="noindex">
- <style type="text/css">
-
- body{
- font-family: Helvetica, Arial, sans-serif;
- }
-
- article{
- -webkit-flow-into: myFlow;
- }
-
- .region{
- -webkit-flow-from: myFlow;
- width: 40%;
- padding: 5%;
- height: 350px;
- float: left;
- outline: 1px solid green;
- }
-
- </style>
-</head>
-<body>
-
-<article>
- <h1>Demo of CSS Regions working with Shadow DOM</h1>
- <p>This experiment shows how CSS Regions interact with Shadow DOM.</p>
-
- <p>
- It works if you see two boxes with text and green borders. When you resize the browser window the text should flow from one box to another.
- </p>
-
- <p>Be sure you're using <a href="http://tools.google.com/dlpage/chromesxs" title="Chrome Canary - Google">a browser</a> supporting Shadow DOM and CSS Regions.</p>
-
- <p>
- There should be no <code>&lt;div class="region"&gt;</code> elements under <code>&lt;div id="shadow-host"&gt;</code> .
- </p>
-
- <h2>How it works</h2>
-
- <p>
- The content of the <code>&lt;article&gt;</code> tag is associated with the named flow called 'myFlow'. A shadow root is created under <code>&lt;div id="shadow-host"&gt;</code> and two regions that consume from the 'myFlow' named flow are appended to it.
- </p>
- <p>By default shadow root child nodes are not affected by styles declared outside the shadow DOM tree. This means that the regions don't render content from the named flow which is declared outside.</p>
-
- <p>Switching the boolean <code>applyAuthorStyles</code> flag on the shadow root to 'true' changes the behavior. This means that styles defined outside are inherited by the regions nested under the shadow root. </p>
-</article>
-
-<div id="shadow-host"></div>
-
-<script type="text/javascript">
- if (!window.WebKitShadowRoot){
- document.body.innerHTML = 'No Shadow DOM support. Use <a href="http://tools.google.com/dlpage/chromesxs">Google Chrome Canary</a>'
- }
- else{
- var root = new WebKitShadowRoot(document.querySelector("#shadow-host")),
- region = document.createElement("div")
-
- region.className = "region"
-
- // ShadowRoot.applyAuthorStyles tells the ShadowRoot to inherit the styles declared outside its boundaries.
- // By default the DOM under the ShadowRoot will NOT inherit styles defined outside.
- root.applyAuthorStyles = true;
-
- // Generate regions under the ShadowRoot
- root.appendChild(region)
- root.appendChild(region.cloneNode(false))
- }
-</script>
-</body>
-</html>
Please sign in to comment.
Something went wrong with that request. Please try again.