- From: Tab Atkins Jr.. via cvs-syncmail <cvsmail@w3.org>
- Date: Thu, 04 Aug 2011 21:14:12 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-images
In directory hutz:/tmp/cvs-serv16255
Modified Files:
Overview.html Overview.src.html
Log Message:
Broke apart the element() issues, added demos to each.
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.html,v
retrieving revision 1.126
retrieving revision 1.127
diff -u -d -r1.126 -r1.127
--- Overview.html 4 Aug 2011 01:04:08 -0000 1.126
+++ Overview.html 4 Aug 2011 21:14:09 -0000 1.127
@@ -471,9 +471,56 @@
<div class=example> TODO: copy an example from the MozHacks article</div>
- <p class=issue>How does this work for inline elements, or elements broken
- across lines/columns/pages/etc? How does this work for "internal" elements
- like <option>?</p>
+ <p class=issue>For transforms, transforms <strong>on the element</strong>
+ don't affect the geometry/size of the image (as normal), but do affect the
+ appearance (<a href="data:text/html;charset=utf-8,<!DOCTYPE
+ html>%0A<p id%3Dfoo><span
+ id%3Dbar>foofoofoo<br>bar<%2Fspan><%2Fp>%0A<div><%2Fdiv>%0A<style>%0Aspan
+ { border%3A thick solid red%3B }%0Ap { border%3A thin solid black%3B
+ width%3A 50px%3B -moz-transform%3Arotate(30deg)%3B}%0Adiv { %0A border%3A
+ thick solid black%3B%0A width%3A 200px%3B%0A height%3A 200px%3B%0A
+ background%3A -moz-element(%23foo)%3B%0A}%0A<%2Fstyle>">demo</a>) (this
+ looks kinda weird, but whatever). Transforms on an ancestor are ignored
+ (<a href="data:text/html;charset=utf-8,<!DOCTYPE html>%0A<p
+ id%3Dfoo><span
+ id%3Dbar>foofoofoo<br>bar<%2Fspan><%2Fp>%0A<div><%2Fdiv>%0A<style>%0Aspan
+ { border%3A thick solid red%3B }%0Ap { border%3A thin solid black%3B
+ width%3A 50px%3B -moz-transform%3Arotate(30deg)%3B}%0Adiv { %0A border%3A
+ thick solid black%3B%0A width%3A 200px%3B%0A height%3A 200px%3B%0A
+ background%3A -moz-element(%23bar)%3B%0A}%0A<%2Fstyle>">demo</a>).
+
+ <p class=issue>For inline elements, the image is sized to the bounding box
+ of the individual pieces, if they're broken across a line (see above
+ demos).
+
+ <p class=issue>Elements broken across columns also size themselves
+ according to the bounding box (<a
+ href="data:text/html;charset=utf-8,<!DOCTYPE html>%0A<p id%3Dfoo>foo
+ foo foo <span id%3Dbar>foo foo<%2Fspan> foo foo
+ foo<%2Fp>%0A<div><%2Fdiv>%0A<style>%0Aspan { border%3A thick
+ solid red%3B }%0Ap { border%3A thin solid black%3B width%3A 100px%3B
+ -moz-column-width%3A40px%3B}%0Adiv { %0A border%3A thick solid black%3B%0A
+ width%3A 200px%3B%0A height%3A 200px%3B%0A background%3A
+ -moz-element(%23bar)%3B%0A}%0A<%2Fstyle>">demo</a>).
+
+ <p class=issue>What happens with elements broken across regions? Pages?
+
+ <p class=issue>An <option> element still has a proper renderer (not
+ what's displayed when you're folded up; the display in the tray when it
+ comes out), and thus works fine in element() (<a
+ href="data:text/html;charset=utf-8,<!DOCTYPE html>%0A<select
+ id%3Dfoo>%0A <option id%3Dbar>one<%2Foption>%0A <option
+ id%3Dbaz>two<%2Foption>%0A<%2Fselect>%0A<input type%3Dradio
+ name%3Da id%3Dselect><label for%3Dselect>select<%2Flabel>%0A |
+ <input type%3Dradio name%3Da id%3Doption1><label
+ for%3Doption1>option1<%2Flabel>%0A | <input type%3Dradio name%3Da
+ id%3Doption2><label
+ for%3Doption2>option2<%2Flabel>%0A<div><%2Fdiv>%0A<style>%0Adiv
+ { %0A border%3A thick solid black%3B%0A width%3A 200px%3B%0A height%3A
+ 200px%3B%0A}%0A%0A%23select%3Achecked ~ div { background%3A
+ -moz-element(%23foo)%3B }%0A%23option1%3Achecked ~ div { background%3A
+ -moz-element(%23bar)%3B }%0A%23option2%3Achecked ~ div { background%3A
+ -moz-element(%23baz)%3B }%0A<%2Fstyle>">demo</a>).)</p>
<!-- ====================================================================== -->
<h4 class="no-num no-toc" id=element-cycles> Detecting and Resolving
Index: Overview.src.html
===================================================================
RCS file: /sources/public/csswg/css3-images/Overview.src.html,v
retrieving revision 1.133
retrieving revision 1.134
diff -u -d -r1.133 -r1.134
--- Overview.src.html 4 Aug 2011 01:04:08 -0000 1.133
+++ Overview.src.html 4 Aug 2011 21:14:10 -0000 1.134
@@ -298,7 +298,15 @@
TODO: copy an example from the MozHacks article
</div>
- <p class=issue>How does this work for inline elements, or elements broken across lines/columns/pages/etc? How does this work for "internal" elements like <option>?</p>
+ <p class=issue>For transforms, transforms <strong>on the element</strong> don't affect the geometry/size of the image (as normal), but do affect the appearance (<a href="data:text/html;charset=utf-8,<!DOCTYPE html>%0A<p id%3Dfoo><span id%3Dbar>foofoofoo<br>bar<%2Fspan><%2Fp>%0A<div><%2Fdiv>%0A<style>%0Aspan { border%3A thick solid red%3B }%0Ap { border%3A thin solid black%3B width%3A 50px%3B -moz-transform%3Arotate(30deg)%3B}%0Adiv { %0A border%3A thick solid black%3B%0A width%3A 200px%3B%0A height%3A 200px%3B%0A background%3A -moz-element(%23foo)%3B%0A}%0A<%2Fstyle>">demo</a>) (this looks kinda weird, but whatever). Transforms on an ancestor are ignored (<a href="data:text/html;charset=utf-8,<!DOCTYPE html>%0A<p id%3Dfoo><span id%3Dbar>foofoofoo<br>bar<%2Fspan><%2Fp>%0A<div><%2Fdiv>%0A<style>%0Aspan { border%3A thick solid red%3B }%0Ap { border%3A thin solid black%3B width%3A 50px%3B -moz-transform%3Arotate(30deg)%3B}%0Adiv { %0A border%3A thick slid black%3B%0A width%3A 200px%3B%0A height%3A 200px%3B%0A background%3A -moz-element(%23bar)%3B%0A}%0A<%2Fstyle>">demo</a>).</p>
+
+ <p class=issue>For inline elements, the image is sized to the bounding box of the individual pieces, if they're broken across a line (see above demos).</p>
+
+ <p class=issue>Elements broken across columns also size themselves according to the bounding box (<a href="data:text/html;charset=utf-8,<!DOCTYPE html>%0A<p id%3Dfoo>foo foo foo <span id%3Dbar>foo foo<%2Fspan> foo foo foo<%2Fp>%0A<div><%2Fdiv>%0A<style>%0Aspan { border%3A thick solid red%3B }%0Ap { border%3A thin solid black%3B width%3A 100px%3B -moz-column-width%3A40px%3B}%0Adiv { %0A border%3A thick solid black%3B%0A width%3A 200px%3B%0A height%3A 200px%3B%0A background%3A -moz-element(%23bar)%3B%0A}%0A<%2Fstyle>">demo</a>).</p>
+
+ <p class=issue>What happens with elements broken across regions? Pages?</p>
+
+ <p class=issue>An <option> element still has a proper renderer (not what's displayed when you're folded up; the display in the tray when it comes out), and thus works fine in element() (<a href="data:text/html;charset=utf-8,<!DOCTYPE html>%0A<select id%3Dfoo>%0A <option id%3Dbar>one<%2Foption>%0A <option id%3Dbaz>two<%2Foption>%0A<%2Fselect>%0A<input type%3Dradio name%3Da id%3Dselect><label for%3Dselect>select<%2Flabel>%0A | <input type%3Dradio name%3Da id%3Doption1><label for%3Doption1>option1<%2Flabel>%0A | <input type%3Dradio name%3Da id%3Doption2><label for%3Doption2>option2<%2Flabel>%0A<div><%2Fdiv>%0A<style>%0Adiv { %0A border%3A thick solid black%3B%0A width%3A 200px%3B%0A height%3A 200px%3B%0A}%0A%0A%23select%3Achecked ~ div { background%3A -moz-element(%23foo)%3B }%0A%23option1%3Achecked ~ div { background%3A -moz-element(%23bar)%3B }%0A%23option2%3Achecked ~ div { background%3A -moz-element(%23baz)%3B }%0A<%2Fstyle>">demo</a>).)</p>
<!-- ====================================================================== -->
Received on Thursday, 4 August 2011 21:14:13 UTC