Anne van Kesteren

Canvas

This topic was discussed before a couple of times: Your body element is just a div, ::viewport(media), :root and <html id=""> comment 8. It is time to write an entry that addresses/combines most of the issues with the HTML and BODY element.

In the end, only the HTML element has some special features and restrictions, but the BODY element has some of those as well, when we are sending your document as text/html, which is still the most common use on the internet. The best example (or only?) is probably the background property. CSS2.1 defines that the background from the root element becomes the background of the entire canvas:

The background of the root element becomes the background of the canvas and covers the entire canvas, anchored at the same point as it would be if it was painted only for the root element itself. The root element does not paint this background again.

This implies that this is a special treatment for the root element (this is the same as the HTML element in HTML and valid (1.x) XHTML documents). If we read this to the letter and we should, it's a specification, the HTML element can have a width and height property (there is nothing "special" specified for the root element). It is also wrong when the element stretches, it should not stretch.

Moose made a good example to show that there is a canvas. The only problem with the page is that the description is "wrong". It's actually just another test only Opera passes, since the HTML element isn't that special, only some properties are special when they are applied to certain elements (like the root element). When a document is send as text/html some properties behave different on the BODY (and HTML element) as well. The background property on the BODY element will be applied to the canvas if there isn't any background set for the HTML element (other than background:transparent;). The overflow property on the BODY or HTML element could behave special when the document is send as text/html:

HTML UAs may apply the overflow property from the BODY or HTML elements to the viewport.

Comments

  1. When I wrote the description in May last year, I didn't quite know what to make of the result of my test, since all browsers had problems with the page at that time (that is one of the reasons why I included two screenshots).

    Tell me what is wrong with my description (other than it being silly), and I'll gladly correct it.

    M.

    Posted by Moose at

  2. First, Opera displays the page correctly. I haven't tested it with previous versions yet, but for 7.5 I'm quite sure of that. Mozilla does it the wrong way and I can't test with Internet Explorer, but I'm quite sure it doesn't get it.

    I'm not sure why you said it, but you wouldn't expect a horizontal scrollbar, since the HTML element is not the canvas and it can have a scrollbar itself (using overflow) in XML.

    Positioning the BODY element outside the HTML element is correct and perfectly normal. Your description says you are positioning it outside the canvas, this is wrong, since the HTML element isn't the canvas.

    That's it, I think. Question for you: where is Opera's bug database?

    Posted by Anne at

  3. >Positioning the BODY element outside the HTML element is correct and perfectly normal.
    LOL, I wouldn't call it normal. There are days where I happen to let the body stay in the html. I don't know anymore where Opera's bug reporting system is. But it is more or less like a black hole: you can put something in it, but there is never coming something out.

    Posted by Martijn at

  4. Anne: That�s it, I think. Question for you: where is Opera�s bug database?

    It's at Opera BTS. I think only Opera employees and elektrans have access to it, though.

    Martinj: But it is more or less like a black hole: you can put something in it, but there is never coming something out.

    Well, they will contact you if they need more information. The elektrans have access to it as well, but it's not open to the public.

    Posted by liorean at