Bug 1265342 Part 10: Update a shape-outside circle test to make it more precise and correct. draft
authorBrad Werth <bwerth@mozilla.com>
Tue, 17 Apr 2018 13:19:36 -0700
changeset 787959 5beab75354125ea6ec905968675171de4fdcf40e
parent 787958 d6061ae7c5bf4ee928455cdb0f4678d9cf8480c2
child 787960 d32dfada78dd41bbd77ac79100b07ff08127a3dc
push id107854
push userbwerth@mozilla.com
push dateWed, 25 Apr 2018 18:14:35 +0000
Bug 1265342 Part 10: Update a shape-outside circle test to make it more precise and correct. The test shape-outside-circle-027.html has two issues that prevent it from matching the reference image. For that test to pass, the text must be floated right by 75 pixels. The two issues are: 1) The circle is defined as 35% of 170 pixels, which calculates to 59.5px. Since the shape-margin is 15px, this makes the total offset less than the target of 75px. 2) The circle is offset upwards by 10 pixels, which introduces a slight angle between the block start of the text and the center of the circle. The cosine of this small angle is slightly less than 1, which reduces the offset by some amount. The changes made here specify the circle radius in whole pixels, and move the center of the circle such that it is between the block start and block end of the floated text, ensuring that the full width of the circle + shape-margin will be used for calculating the float area. MozReview-Commit-ID: JQ9Mc3GU4tW
--- a/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-027.html
+++ b/testing/web-platform/tests/css/css-shapes/shape-outside/supported-shapes/circle/shape-outside-circle-027.html
@@ -31,17 +31,17 @@
     #test-shape {
         float: right;
         width: 110px;
         height: 110px;
         margin: 10px;
         padding: 10px;
         border: 10px solid transparent;
         shape-margin: 15px;
-        shape-outside: margin-box circle(35% at 85px 75px);
+        shape-outside: margin-box circle(60px);
     #line {
         position: absolute;
         top: 0px;
         left: 140px;
         width: 2px;
         height: 200px;
         border-left: 2px solid blue;