Bug 76000 - margin test for CSS3 calc
Summary: margin test for CSS3 calc
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: New Bugs (show other bugs)
Version: 528+ (Nightly build)
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Mike Lawther
URL:
Keywords:
Depends on:
Blocks: 16662
  Show dependency treegraph
 
Reported: 2012-01-10 15:48 PST by Mike Lawther
Modified: 2012-01-11 19:53 PST (History)
2 users (show)

See Also:


Attachments
Patch (6.05 KB, patch)
2012-01-10 15:49 PST, Mike Lawther
no flags Details | Formatted Diff | Diff
Patch (7.34 KB, patch)
2012-01-10 22:33 PST, Mike Lawther
no flags Details | Formatted Diff | Diff
Patch (7.20 KB, patch)
2012-01-11 15:15 PST, Mike Lawther
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Mike Lawther 2012-01-10 15:48:08 PST
margin test for CSS3 calc
Comment 1 Mike Lawther 2012-01-10 15:49:41 PST
Created attachment 121922 [details]
Patch
Comment 2 Daniel Bates 2012-01-10 16:54:41 PST
Comment on attachment 121922 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=121922&action=review

I suggest writing this test using LayoutTests/fast/js/resources/js-test-{pre, post}.js, which provide convenience functions to assert equality with descriptive output. Using these scripts would also make the output of this test more consistent with the output other PASS/FAIL tests. One example of using these scripts to write a test is: <http://trac.webkit.org/browser/trunk/LayoutTests/fast/css/aspect-ratio-inheritance.html>.

> LayoutTests/css3/calc/margin.html:75
> +        var error = [];
> +        if (width != expectedWidth)
> +            error.push("wrong width");
> +        if (height != expectedHeight)
> +            error.push("wrong height");
> +

It would be beneficial to print the expected width/height and actual width/height in the expected results so as to make it more straight forward to diagnose the reason for test failure should one or more the sub tests fail.
Comment 3 Mike Lawther 2012-01-10 21:33:58 PST
I agree about printing the actual vs the expected. The problem I had was that cr-linux had a different default margin than WebKit Mac, and since calc() doesn't work yet, the expected values were different. I didn't want to have to maintain two sets of results though. Maybe I'll try setting a margin, and getting calc() to override it instead.
Comment 4 Mike Lawther 2012-01-10 22:33:29 PST
Created attachment 121978 [details]
Patch
Comment 5 Mike Lawther 2012-01-10 22:36:59 PST
Hi Daniel - I've changed the test to use the pre/post js libraries.

I've also defaulted the margin to 0px, so it should pass OK on cr-linux (my results were generated on the Mac port).
Comment 6 Mike Lawther 2012-01-11 15:15:25 PST
Created attachment 122106 [details]
Patch
Comment 7 Daniel Bates 2012-01-11 18:03:54 PST
Comment on attachment 122106 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=122106&action=review

> LayoutTests/css3/calc/margin.html:29
> +        <div><p id="percent-all">This element should have an overall margin of 25 pixels (10% of parent width of 300px minus 5px).</p></div><br/>
> +        <div><p id="percent-left">This element should have a left margin of 25 pixels (10% of parent width of 300px minus 5px).</p></div><br/>
> +        <div><p id="percent-right">This element should have a right margin of 25 pixels (10% of parent width of 300px minus 5px).</p></div><br/>
> +        <div><p id="percent-top">This element should have a top margin of 25 pixels (10% of parent width of 300px minus 5px).</p></div><br/>
> +        <div><p id="percent-bottom">This element should have a bottom margin of 25 pixels (10% of parent width of 300px minus 5px).</p></div><br/>

Are these calculations correct with respect the definitions in <style> above? Notice that the style for the <p> specifies a width and height of 200px and 120px, respectively. Wouldn't a percentage value in the -webkit-calc expression be with respect to the height/width of the <p> (since it explicitly defines such dimensions) instead of its containing block? For example, looking at <p id="percent-left">, I would expect that the value of the margin-left property is -webkit-calc(10% - 5px) = 15px = 10% * 200px - 5px.
Comment 8 Daniel Bates 2012-01-11 18:06:09 PST
(In reply to comment #7)
> [...] Wouldn't a percentage value in the -webkit-calc expression be with respect to the height/width of the <p> (since it explicitly defines such dimensions) instead of its containing block?

I meant to write:

Wouldn't a percentage value in the -webkit-calc expression be with respect to the height/width of the <p> (since it explicitly defines such dimensions) instead of the height/width of <div id="wrapper">?
Comment 9 Daniel Bates 2012-01-11 18:24:22 PST
(In reply to comment #8)
> [...]
> Wouldn't a percentage value in the -webkit-calc expression be with respect to the height/width of the <p> (since it explicitly defines such dimensions) instead of the height/width of <div id="wrapper">?

Never mind. I'm not sure why I was thinking this.
Comment 10 Mike Lawther 2012-01-11 18:50:22 PST
Thanks for the review Daniel! I wrote this test a while ago, and margins were one of the trickiest things to measure, hence the contortions this test goes through.

If you can think of a better way to measure margins, I'll happily update this test.
Comment 11 WebKit Review Bot 2012-01-11 19:53:16 PST
Comment on attachment 122106 [details]
Patch

Clearing flags on attachment: 122106

Committed r104783: <http://trac.webkit.org/changeset/104783>
Comment 12 WebKit Review Bot 2012-01-11 19:53:20 PST
All reviewed patches have been landed.  Closing bug.