background-clip and background-origin question

What is the relationship between background-clip (define background painting area) and background-origin (define background positioning area)? How do they impact each other?

I have a case like below:

              border:7px dashed #354658;
              padding: 20px;
              background-image: url("support/green_box.PNG");
              background-repeat: repeat-x;
              background-position: center;
              background-color: silver;
              width:60px;
              height:60px;
              background-clip: border-box;
              background-origin: padding-box;

I assume both background-color (silver) & background-image ('support/green_box.PNG') will appear only in the padding-box area (background-origin: padding-box) and dashed border space should be blank/white. IE8 behaves this way, but some other browsers (Chrome/Safari/Opera v11) still paint both background-color and background-image behind the dashed border. Which browser's behavior is the right one? Looks like IE8 does properly but I am not sure.

Thanks,
-Tao

Received on Wednesday, 19 January 2011 22:31:37 UTC