OLD | NEW |
---|---|
(Empty) | |
1 <!DOCTYPE html> | |
2 <html> | |
3 <link href="resources/flexbox.css" rel="stylesheet"> | |
4 <style> | |
5 .flexbox { | |
6 background: green; | |
7 position: relative; | |
8 } | |
9 </style> | |
10 <script src="../../resources/js-test.js"></script> | |
11 <script src="../../resources/check-layout.js"></script> | |
12 <script> | |
13 function checkPaddingAndMargin() | |
14 { | |
15 shouldBeEqualToString('window.getComputedStyle(document.getElementById("flex Item1"),null).getPropertyValue("padding-top")', '10px'); | |
tony
2014/07/10 17:10:06
I think it would a bit clearer to put a div inside
harpreet.sk
2014/07/14 08:38:07
Done.
| |
16 shouldBeEqualToString('window.getComputedStyle(document.getElementById("flex Item1"),null).getPropertyValue("padding-bottom")', '10px'); | |
17 shouldBeEqualToString('window.getComputedStyle(document.getElementById("flex Item1"),null).getPropertyValue("padding-left")', '78.390625px'); | |
18 shouldBeEqualToString('window.getComputedStyle(document.getElementById("flex Item1"),null).getPropertyValue("padding-right")', '78.390625px'); | |
19 shouldBeEqualToString('window.getComputedStyle(document.getElementById("flex Item2"),null).getPropertyValue("padding-top")', '8px'); | |
tony
2014/07/10 17:10:06
How does this get a value of 8px? The percent hei
harpreet.sk
2014/07/14 08:38:06
There was a mistake in previous solution. Correct
| |
20 shouldBeEqualToString('window.getComputedStyle(document.getElementById("flex Item2"),null).getPropertyValue("padding-bottom")', '8px'); | |
21 shouldBeEqualToString('window.getComputedStyle(document.getElementById("flex Item2"),null).getPropertyValue("padding-left")', '313.59375px'); | |
22 shouldBeEqualToString('window.getComputedStyle(document.getElementById("flex Item2"),null).getPropertyValue("padding-right")', '313.59375px'); | |
23 shouldBeEqualToString('window.getComputedStyle(document.getElementById("flex Item3"),null).getPropertyValue("padding-top")', '6px'); | |
24 shouldBeEqualToString('window.getComputedStyle(document.getElementById("flex Item3"),null).getPropertyValue("padding-bottom")', '6px'); | |
25 shouldBeEqualToString('window.getComputedStyle(document.getElementById("flex Item3"),null).getPropertyValue("padding-left")', '235.1875px'); | |
26 shouldBeEqualToString('window.getComputedStyle(document.getElementById("flex Item3"),null).getPropertyValue("padding-right")', '235.1875px'); | |
tony
2014/07/10 17:10:06
Why no tests for before/after? You make code chan
harpreet.sk
2014/07/14 08:38:06
Done.
| |
27 checkLayout('.flexbox'); | |
28 } | |
29 </script> | |
30 <body onload="checkPaddingAndMargin()"> | |
31 <div class="flexbox" style="height:100px"> | |
32 <div id="flexItem1" data-expected-height="100" style="background:yellow; pad ding:10%;">Pasta batman</div> | |
33 </div> | |
34 | |
35 <div class="flexbox" style="height:30%"> | |
tony
2014/07/10 17:10:06
Did you mean to put a percent height here? It doe
harpreet.sk
2014/07/14 08:38:07
Just wanted add the case when containing block has
| |
36 <div id="flexItem2" data-expected-height="20" style="padding:40%; background :yellow">Pasta batman</div> | |
tony
2014/07/10 17:10:06
Is the height based on the font? That seems unrel
harpreet.sk
2014/07/14 08:38:06
Acknowledged.
| |
37 </div> | |
38 | |
39 <div class="flexbox"> | |
40 <div id="flexItem3" data-expected-height="20" style="padding:30%; background :yellow">Pasta batman</div> | |
41 </div> | |
42 </body> | |
43 </html> | |
OLD | NEW |