OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <script src="../resources/subpixel-utils.js"></script> | 4 <script src="../resources/subpixel-utils.js"></script> |
5 <script> | |
6 if (window.internals) | |
7 window.internals.settings.setCSSExclusionsEnabled(true); | |
8 </script> | |
9 <!-- | 5 <!-- |
10 In this test the shape-inside shape is a rounded rectangle configured as a circl
e with radius of 100px. | 6 In this test the shape-inside shape is a rounded rectangle configured as a circl
e with radius of 100px. |
11 The shape-inside element contains a single square Ahem font character that just
fits wthin the circle. | 7 The shape-inside element contains a single square Ahem font character that just
fits wthin the circle. |
12 That means that the character's size is sqrt(2)*100px, which is 141.41356px. | 8 That means that the character's size is sqrt(2)*100px, which is 141.41356px. |
13 | 9 |
14 The x and y coordinates of the points at which the square intersects the circle
are half of the | 10 The x and y coordinates of the points at which the square intersects the circle
are half of the |
15 difference between circle's diameter and the size of the square: (200px - sqrt(2
)*100px) / 2 = 29.2893219px. | 11 difference between circle's diameter and the size of the square: (200px - sqrt(2
)*100px) / 2 = 29.2893219px. |
16 --> | 12 --> |
17 <style> | 13 <style> |
18 #shape-container { | 14 #shape-container { |
(...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
51 document.getElementById("shape-inside").style.top = "30px"; | 47 document.getElementById("shape-inside").style.top = "30px"; |
52 } | 48 } |
53 </script> | 49 </script> |
54 <p>The green rectangle should appear within the grey circle.</p> | 50 <p>The green rectangle should appear within the grey circle.</p> |
55 <div id="shape-container"> | 51 <div id="shape-container"> |
56 <div id="shape-background"></div> | 52 <div id="shape-background"></div> |
57 <div id="shape-inside">X</div> | 53 <div id="shape-inside">X</div> |
58 </div> | 54 </div> |
59 </body> | 55 </body> |
60 </html> | 56 </html> |
OLD | NEW |