Re: canvas origin?

On 9/04/2011 10:16 AM, Anton Prowse wrote:
> On 08/04/2011 15:29, Alan Gresley wrote:
>> The canvas origin is not just one point (marked by the 'X' below). It is
>> the top and left edges of the viewport in LTR flow and top and right
>> edges of the viewport in LTR flow.
>
> This is nonsensical, because the position of the canvas with respect to
> the viewport obviously varies depending on where the canvas has been
> scrolled to. And even what I /think/ you're trying to say is merely
> equivalent to a single point.


There is a single point where the x and y axises meet. The x-axis is the 
top edge. The y-axis is the left edge.


<!DOCTYPE html>
<style type="text/css">
   html { background: blue }
   body { background: white }
   .block { background: lime; margin: 200px }
   .ap-left { background: red; width: 100px; height:100px; position: 
absolute; left: 0 }
   .ap-top { background: orange; width: 100px; height:100px; position: 
absolute; top: 0 }
</style>

<div class="block">block
   <div class="ap-left">ap. left</div>
   <div class="ap-top">ap. top</div>
</div>


The absolutely positioned element with offset value of left:0 (red box) 
is positioned at the top edge of the viewport.

The absolutely positioned element with offset value of top:0 (orange 
box) is positioned at the top edge of the viewport.



> On 08/04/2011 19:31, Alan Gresley wrote:
>> The ICB can be larger than the viewport.
>
> Nonsense. The ICB (in continuous media) is clearly defined to have the
> dimensions of the viewport in 10.1.


I did say can. Where is the float situated in the following test?


<!DOCTYPE html>
<style type="text/css">
   html { background: blue }
   body { background: white; width:2000px }
   .right { background: lime; width: 100px; height:100px; float:right }
   .ap-right { background: red; width: 100px; height:100px; position: 
absolute; right: 0 }
</style>

Some text to show the background of the body
<div class="right">float</div>
<div class="ap-right">ap</div>


>> Please remember that the ICB is calculated differently for elements that
>> are not in normal flow (ie. floats, position absolute).
>
> No, you seem to be confusing "initial containing block" with "containing
> block".
>
>
> Cheers,
> Anton Prowse
> http://dev.moonhenge.net


No I'm not.

For floats and absolutely positioned elements with an offset value of 
auto, the ICB is formed by the content edge of the root element. For 
absolutely positioned elements with an offset value of 0 (or integer 
positive or negative values), the ICB is formed by the viewport.


<!DOCTYPE html>
<style type="text/css">
   html { background: silver; padding:100px }
   body { background: white }
   .left {float:left; width: 2000px; height: 100px; background: blue }
   .right {float:right; width: 1000px; height: 100px; background: green }
   [class*="ap"] { position:absolute; width: 100px; height: 100px; }
   .ap-left { left: 0; background: red }
   .ap-right { right: 0; background: fuchsia }
   .ap-top { top: 0; background: orange }
   .ap-bottom { bottom: 0; background: yellow }
</style>

<div class="left">float left</div>
<div class="right">float right</div>
Some text to show the background of the body
<div class="ap-left"></div>
<div class="ap-right"></div>
<div class="ap-top"></div>
<div class="ap-bottom"></div>


By the way, CSS is confusing sometimes and I do a brilliant job at 
showing this. I call it serendipity.

Serendipity: –noun: an aptitude for making desirable discoveries by 
accident.


-- 
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo

Received on Saturday, 9 April 2011 06:14:03 UTC