[CSS Exclusions] Additional simple polygon tests
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 17 Oct 2012 16:27:06 +0000 (16:27 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 17 Oct 2012 16:27:06 +0000 (16:27 +0000)
https://bugs.webkit.org/show_bug.cgi?id=98548

Patch by Hans Muller <hmuller@adobe.com> on 2012-10-17
Reviewed by Dirk Schulze.

Added a pair of CSS Exclusions shape-inside ref-tests for regular polygons
with 8 and 16 sides. Also made some small revisions to the supporting code,
simple-polyon.js, and the existing simple polygon tests, and to localize and
correct the conversion from float to layout coordinates. All of the tests
now round/truncate the left edge of line segment intervals depending on whether
subpixel layout is enabled.

* fast/exclusions/resources/simple-polygon.js:
(createRegularPolygonVertices):
(polygonXIntercepts):
(simulatePolygonShape):
(generateSimulatedPolygonShapeInsideElement):
(createPolygonShapeInsideTestCase):
(createPolygonShapeInsideTestCaseExpected):
* fast/exclusions/shape-inside/shape-inside-regular-polygon16-expected.html: Added.
* fast/exclusions/shape-inside/shape-inside-regular-polygon16.html: Added.
* fast/exclusions/shape-inside/shape-inside-regular-polygon8-expected.html: Added.
* fast/exclusions/shape-inside/shape-inside-regular-polygon8.html: Added.
* fast/exclusions/shape-inside/shape-inside-simple-polygon-001-expected.html:
* fast/exclusions/shape-inside/shape-inside-simple-polygon-001.html:
* fast/exclusions/shape-inside/shape-inside-simple-polygon-002-expected.html:
* fast/exclusions/shape-inside/shape-inside-simple-polygon-002.html:
* fast/exclusions/shape-inside/shape-inside-simple-polygon-003-expected.html:
* fast/exclusions/shape-inside/shape-inside-simple-polygon-003.html:
* fast/exclusions/shape-inside/shape-inside-simple-polygon-004-expected.html:
* fast/exclusions/shape-inside/shape-inside-simple-polygon-004.html:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@131610 268f45cc-cd09-0410-ab3c-d52691b4dbfc

14 files changed:
LayoutTests/ChangeLog
LayoutTests/fast/exclusions/resources/simple-polygon.js
LayoutTests/fast/exclusions/shape-inside/shape-inside-regular-polygon16-expected.html [new file with mode: 0644]
LayoutTests/fast/exclusions/shape-inside/shape-inside-regular-polygon16.html [new file with mode: 0644]
LayoutTests/fast/exclusions/shape-inside/shape-inside-regular-polygon8-expected.html [new file with mode: 0644]
LayoutTests/fast/exclusions/shape-inside/shape-inside-regular-polygon8.html [new file with mode: 0644]
LayoutTests/fast/exclusions/shape-inside/shape-inside-simple-polygon-001-expected.html
LayoutTests/fast/exclusions/shape-inside/shape-inside-simple-polygon-001.html
LayoutTests/fast/exclusions/shape-inside/shape-inside-simple-polygon-002-expected.html
LayoutTests/fast/exclusions/shape-inside/shape-inside-simple-polygon-002.html
LayoutTests/fast/exclusions/shape-inside/shape-inside-simple-polygon-003-expected.html
LayoutTests/fast/exclusions/shape-inside/shape-inside-simple-polygon-003.html
LayoutTests/fast/exclusions/shape-inside/shape-inside-simple-polygon-004-expected.html
LayoutTests/fast/exclusions/shape-inside/shape-inside-simple-polygon-004.html

index 56a669c..f554f8f 100644 (file)
@@ -1,3 +1,37 @@
+2012-10-17  Hans Muller  <hmuller@adobe.com>
+
+        [CSS Exclusions] Additional simple polygon tests
+        https://bugs.webkit.org/show_bug.cgi?id=98548
+
+        Reviewed by Dirk Schulze.
+
+        Added a pair of CSS Exclusions shape-inside ref-tests for regular polygons
+        with 8 and 16 sides. Also made some small revisions to the supporting code,
+        simple-polyon.js, and the existing simple polygon tests, and to localize and
+        correct the conversion from float to layout coordinates. All of the tests
+        now round/truncate the left edge of line segment intervals depending on whether
+        subpixel layout is enabled.
+
+        * fast/exclusions/resources/simple-polygon.js:
+        (createRegularPolygonVertices):
+        (polygonXIntercepts):
+        (simulatePolygonShape):
+        (generateSimulatedPolygonShapeInsideElement):
+        (createPolygonShapeInsideTestCase):
+        (createPolygonShapeInsideTestCaseExpected):
+        * fast/exclusions/shape-inside/shape-inside-regular-polygon16-expected.html: Added.
+        * fast/exclusions/shape-inside/shape-inside-regular-polygon16.html: Added.
+        * fast/exclusions/shape-inside/shape-inside-regular-polygon8-expected.html: Added.
+        * fast/exclusions/shape-inside/shape-inside-regular-polygon8.html: Added.
+        * fast/exclusions/shape-inside/shape-inside-simple-polygon-001-expected.html:
+        * fast/exclusions/shape-inside/shape-inside-simple-polygon-001.html:
+        * fast/exclusions/shape-inside/shape-inside-simple-polygon-002-expected.html:
+        * fast/exclusions/shape-inside/shape-inside-simple-polygon-002.html:
+        * fast/exclusions/shape-inside/shape-inside-simple-polygon-003-expected.html:
+        * fast/exclusions/shape-inside/shape-inside-simple-polygon-003.html:
+        * fast/exclusions/shape-inside/shape-inside-simple-polygon-004-expected.html:
+        * fast/exclusions/shape-inside/shape-inside-simple-polygon-004.html:
+
 2012-10-17  Vsevolod Vlasov  <vsevik@chromium.org>
 
         Web Inspector: [Regression] Undoing script changes does not restore breakpoints.
index 04e4a00..806caca 100644 (file)
@@ -13,6 +13,30 @@ function createPolygon(vertices) {
     };
 }
 
+function createRegularPolygonVertices(size, nSides)
+{
+    var radius = size / (2 * Math.cos(Math.PI / nSides));
+    var inset = size / 2 + 20;
+    var vertices = [];
+
+    for (var i = 0; i < nSides/2; i++) {
+        var a = (1 + 2*i) * (Math.PI / nSides);
+        vertices[i] = {x: Math.floor(radius * Math.cos(a)), y: Math.floor(radius * Math.sin(a))};
+        vertices[nSides - i - 1] = {x: vertices[i].x, y: -vertices[i].y}  // Y axis symmetry
+    }
+
+    for (var i = 0; i < nSides; i++) {
+        vertices[i].x += inset;
+        vertices[i].y += inset;
+    }
+
+    return vertices;
+}
+
+function subpixelRound(f) { 
+    return Math.floor(!hasSubpixelSupport ? f : (Math.floor(f * 64) + 32) / 64);  // see FractionLayoutUnit::round()
+}
+
 // Return two X intercepts of the horizontal line at y. We're assuming that the polygon
 // 0 or 2 intercepts for all y.Of course this isn't true for polygons in general,
 // just the ones used by the test cases supported by this file.
@@ -53,7 +77,10 @@ function polygonXIntercepts(polygon, y) {
         }
     }
 
-    return (xIntercepts.length == 2)  ? [Math.min.apply(null, xIntercepts), Math.max.apply(null, xIntercepts)] : [];
+    if (xIntercepts.length != 2)
+        return [];
+
+    return [subpixelRound(Math.min.apply(null, xIntercepts)), Math.floor(Math.max.apply(null, xIntercepts))];
 }
 
 function polygonLineIntercepts(polygon, y, lineHeight) {
@@ -109,7 +136,11 @@ function generatePolygonSVGElements(elementId, stylesheet, polygon, lineHeight)
     var svgPolygon = document.createElementNS(svgNS, "polygon");
     svgPolygon.setAttribute("points", polygon.vertices.map( function(p) { return p.x + "," + p.y; } ).join(" "));
     svgPolygon.setAttribute("fill", "#636363");
-    document.getElementById(elementId).appendChild(svgPolygon);
+
+    var svgElement = document.getElementById(elementId);
+    svgElement.style.width = polygon.maxX + "px";
+    svgElement.style.height = polygon.maxY + "px";
+    svgElement.appendChild(svgPolygon);
 }
 
 function simulatePolygonShape(elementId, stylesheet, polygon, lineHeight) {
@@ -131,8 +162,8 @@ function simulatePolygonShape(elementId, stylesheet, polygon, lineHeight) {
 
     for (var y = polygon.minY; y < polygon.maxY; y += lineHeight) {
         var xIntercepts = polygonLineIntercepts(polygon, y, lineHeight);
-        var left = Math.ceil(xIntercepts[0 ]);
-        var right = Math.floor(xIntercepts[1]);
+        var left = xIntercepts[0];
+        var right = xIntercepts[1];
 
         var paddingLeft = document.createElement("div");
         paddingLeft.setAttribute("class", "float left");
@@ -166,8 +197,8 @@ function generateSimulatedPolygonShapeInsideElement(elementId, stylesheet, polyg
 
     for (var y = polygon.minY; y < polygon.maxY; y += lineHeight) {
         var xIntercepts = polygonLineIntercepts(polygon, y, lineHeight);
-        var left = Math.ceil(xIntercepts[0 ]);
-        var right = Math.floor(xIntercepts[1]);
+        var left = xIntercepts[0];
+        var right = xIntercepts[1];
 
         var paddingLeft = document.createElement("div");
         paddingLeft.setAttribute("class", "float left");
@@ -188,15 +219,12 @@ function generateSimulatedPolygonShapeInsideElement(elementId, stylesheet, polyg
     element.appendChild(p);
 }
 
-
-
-
 function positionInformativeText(elementId, stylesheet, polygon, lineHeight)
 {
     stylesheet.insertRule("#" + elementId + " { position: absolute; top: " + (polygon.maxY + lineHeight) + "px;}");
 }
 
-function createPolygonShapeInsideTestCase(vertices) {
+function createPolygonShapeInsideTestCase() {
     var stylesheet = document.getElementById("stylesheet").sheet;
     var polygon = createPolygon(vertices);
     generatePolygonShapeInsideElement("polygon-shape-inside", stylesheet, polygon, lineHeight);
@@ -204,11 +232,10 @@ function createPolygonShapeInsideTestCase(vertices) {
     positionInformativeText("informative-text", stylesheet, polygon, lineHeight)
 }
 
-function createPolygonShapeInsideTestCaseExpected(vertices) {
+function createPolygonShapeInsideTestCaseExpected() {
     var stylesheet = document.getElementById("stylesheet").sheet;
     var polygon = createPolygon(vertices);
     generateSimulatedPolygonShapeInsideElement("polygon-shape-inside", stylesheet, polygon, lineHeight);
     generatePolygonSVGElements("polygon-svg-shape", stylesheet, polygon, lineHeight);
     positionInformativeText("informative-text", stylesheet, polygon, lineHeight)
 }
-
diff --git a/LayoutTests/fast/exclusions/shape-inside/shape-inside-regular-polygon16-expected.html b/LayoutTests/fast/exclusions/shape-inside/shape-inside-regular-polygon16-expected.html
new file mode 100644 (file)
index 0000000..a9f8dcf
--- /dev/null
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src="../resources/simple-polygon.js"></script>
+<script>
+    if (window.internals)
+        window.internals.settings.setCSSExclusionsEnabled(true);
+
+    var vertices = createRegularPolygonVertices(400, 16); // 400x400 16 sided regular polygon
+    var lineHeight = 40;
+    var hasSubpixelSupport;
+
+    function init() {
+        var rect = document.getElementById("subpixel-test").getBoundingClientRect();
+        hasSubpixelSupport = rect.width != Math.floor(rect.width);
+        createPolygonShapeInsideTestCaseExpected();
+    }
+</script>
+
+<style id="stylesheet">
+    #polygon-shape-inside, #polygon-svg-shape {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+    }
+</style>
+</head>
+
+<body onload="init()">
+  <svg id="polygon-svg-shape" xmlns="http://www.w3.org/2000/svg"></svg>
+  <div id="polygon-shape-inside"></div>
+  <p id="informative-text">
+      This test requires the Ahem font. It creates a polygonal shape-inside and a matching
+      filled SVG polygon. The content should just fill the shape with alternating black and
+      empty rectangles on each line.</p>
+  <div id="subpixel-test" style="width: 4.5px; height: 5px;"></div>
+</body>
+
+</html>
diff --git a/LayoutTests/fast/exclusions/shape-inside/shape-inside-regular-polygon16.html b/LayoutTests/fast/exclusions/shape-inside/shape-inside-regular-polygon16.html
new file mode 100644 (file)
index 0000000..452507e
--- /dev/null
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src="../resources/simple-polygon.js"></script>
+<script>
+    if (window.internals)
+        window.internals.settings.setCSSExclusionsEnabled(true);
+
+    var vertices = createRegularPolygonVertices(400, 16); // 400x400 16 sided regular polygon
+    var lineHeight = 40;
+    var hasSubpixelSupport;
+
+    function init() {
+        var rect = document.getElementById("subpixel-test").getBoundingClientRect();
+        hasSubpixelSupport = rect.width != Math.floor(rect.width);
+        createPolygonShapeInsideTestCase();
+    }
+</script>
+
+<style id="stylesheet">
+    #polygon-shape-inside, #polygon-svg-shape {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+    }
+</style>
+</head>
+
+<body onload="init()">
+  <svg id="polygon-svg-shape" xmlns="http://www.w3.org/2000/svg"></svg>
+  <div id="polygon-shape-inside"></div>
+  <p id="informative-text">
+      This test requires the Ahem font. It creates a polygonal shape-inside and a matching
+      filled SVG polygon. The content should just fill the shape with alternating black and
+      empty rectangles on each line.</p>
+  <div id="subpixel-test" style="width: 4.5px; height: 5px;"></div>
+</body>
+
+</html>
diff --git a/LayoutTests/fast/exclusions/shape-inside/shape-inside-regular-polygon8-expected.html b/LayoutTests/fast/exclusions/shape-inside/shape-inside-regular-polygon8-expected.html
new file mode 100644 (file)
index 0000000..2915e9c
--- /dev/null
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src="../resources/simple-polygon.js"></script>
+<script>
+    if (window.internals)
+        window.internals.settings.setCSSExclusionsEnabled(true);
+
+    var vertices = createRegularPolygonVertices(400, 8); // 400x400 8 sided regular polygon
+    var lineHeight = 40;
+    var hasSubpixelSupport;
+
+    function init() {
+        var rect = document.getElementById("subpixel-test").getBoundingClientRect();
+        hasSubpixelSupport = rect.width != Math.floor(rect.width);
+        createPolygonShapeInsideTestCaseExpected();
+    }
+</script>
+
+<style id="stylesheet">
+    #polygon-shape-inside, #polygon-svg-shape {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+    }
+</style>
+</head>
+
+<body onload="init()">
+  <svg id="polygon-svg-shape" xmlns="http://www.w3.org/2000/svg"></svg>
+  <div id="polygon-shape-inside"></div>
+  <p id="informative-text">
+      This test requires the Ahem font. It creates a polygonal shape-inside and a matching
+      filled SVG polygon. The content should just fill the shape with alternating black and
+      empty rectangles on each line.</p>
+  <div id="subpixel-test" style="width: 4.5px; height: 5px;"></div>
+</body>
+
+</html>
diff --git a/LayoutTests/fast/exclusions/shape-inside/shape-inside-regular-polygon8.html b/LayoutTests/fast/exclusions/shape-inside/shape-inside-regular-polygon8.html
new file mode 100644 (file)
index 0000000..917c6b6
--- /dev/null
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src="../resources/simple-polygon.js"></script>
+<script>
+    if (window.internals)
+        window.internals.settings.setCSSExclusionsEnabled(true);
+
+    var vertices = createRegularPolygonVertices(400, 8); // 400x400 regular octahedron
+    var lineHeight = 40;
+    var hasSubpixelSupport;
+
+    function init() {
+        var rect = document.getElementById("subpixel-test").getBoundingClientRect();
+        hasSubpixelSupport = rect.width != Math.floor(rect.width);
+        createPolygonShapeInsideTestCase();
+    }
+</script>
+
+<style id="stylesheet">
+    #polygon-shape-inside, #polygon-svg-shape {
+        position: absolute;
+        left: 0px;
+        top: 0px;
+    }
+</style>
+</head>
+
+<body onload="init()">
+  <svg id="polygon-svg-shape" xmlns="http://www.w3.org/2000/svg"></svg>
+  <div id="polygon-shape-inside"></div>
+  <p id="informative-text">
+      This test requires the Ahem font. It creates a polygonal shape-inside and a matching
+      filled SVG polygon. The content should just fill the shape with alternating black and
+      empty rectangles on each line.</p>
+  <div id="subpixel-test" style="width: 4.5px; height: 5px;"></div>
+</body>
+
+</html>
index bd858ae..f4f9b42 100644 (file)
@@ -9,6 +9,13 @@
     // Concave assymetric simple polygon with horizontal top and bottom edges.  Roughly an hourglass shape.
     var vertices = [{x:40, y:40}, {x:440, y:40}, {x:320, y:160}, {x:480, y:320}, {x:80, y:320}, {x:200, y:200}];
     var lineHeight = 40;
+    var hasSubpixelSupport;
+
+    function init() {
+        var rect = document.getElementById("subpixel-test").getBoundingClientRect();
+        hasSubpixelSupport = rect.width != Math.floor(rect.width);
+        createPolygonShapeInsideTestCaseExpected();
+    }
 </script>
 
 <style id="stylesheet">
 </style>
 </head>
 
-<body onload="createPolygonShapeInsideTestCaseExpected(vertices)">
-    <svg id="polygon-svg-shape" xmlns="http://www.w3.org/2000/svg"></svg>
-    <div id="polygon-shape-inside"></div>
-    <p id="informative-text">
-        This test requires the Ahem font. It creates a polygonal shape-inside and a matching
-        filled SVG polygon. The content should just fill the shape with alternating black and
-        empty rectangles on each line.</p>
+<body onload="init()">
+  <svg id="polygon-svg-shape" xmlns="http://www.w3.org/2000/svg"></svg>
+  <div id="polygon-shape-inside"></div>
+  <p id="informative-text">
+      This test requires the Ahem font. It creates a polygonal shape-inside and a matching
+      filled SVG polygon. The content should just fill the shape with alternating black and
+      empty rectangles on each line.</p>
+  <div id="subpixel-test" style="width: 4.5px; height: 5px;"></div>
 </body>
 
 </html>
index 8334d65..632c4ce 100644 (file)
@@ -9,6 +9,13 @@
     // Concave assymetric simple polygon with horizontal top and bottom edges.  Roughly an hourglass shape.
     var vertices = [{x:40, y:40}, {x:440, y:40}, {x:320, y:160}, {x:480, y:320}, {x:80, y:320}, {x:200, y:200}];
     var lineHeight = 40;
+    var hasSubpixelSupport;
+
+    function init() {
+        var rect = document.getElementById("subpixel-test").getBoundingClientRect();
+        hasSubpixelSupport = rect.width != Math.floor(rect.width);
+        createPolygonShapeInsideTestCase();
+    }
 </script>
 
 <style id="stylesheet">
 </style>
 </head>
 
-<body onload="createPolygonShapeInsideTestCase(vertices)">
-  <div id="root">
-    <svg id="polygon-svg-shape" xmlns="http://www.w3.org/2000/svg"></svg>
-    <div id="polygon-shape-inside"></div>
-    <p id="informative-text">
-        This test requires the Ahem font. It creates a polygonal shape-inside and a matching
-        filled SVG polygon. The content should just fill the shape with alternating black and
-        empty rectangles on each line.</p>
-  </div>
+<body onload="init()">
+  <svg id="polygon-svg-shape" xmlns="http://www.w3.org/2000/svg"></svg>
+  <div id="polygon-shape-inside"></div>
+  <p id="informative-text">
+      This test requires the Ahem font. It creates a polygonal shape-inside and a matching
+      filled SVG polygon. The content should just fill the shape with alternating black and
+      empty rectangles on each line.</p>
+  <div id="subpixel-test" style="width: 4.5px; height: 5px;"></div>
 </body>
 
 </html>
index e5c60b8..337052e 100644 (file)
     // but with a right right edge.
     var vertices = [{x:40, y:40}, {x:440, y:40}, {x:480, y:320}, {x:80, y:320}, {x:200, y:200}];
     var lineHeight = 40;
+    var hasSubpixelSupport;
+
+    function init() {
+        var rect = document.getElementById("subpixel-test").getBoundingClientRect();
+        hasSubpixelSupport = rect.width != Math.floor(rect.width);
+        createPolygonShapeInsideTestCaseExpected();
+    }
 </script>
 
 <style id="stylesheet">
 </style>
 </head>
 
-<body onload="createPolygonShapeInsideTestCaseExpected(vertices)">
-    <svg id="polygon-svg-shape" xmlns="http://www.w3.org/2000/svg"></svg>
-    <div id="polygon-shape-inside"></div>
-    <p id="informative-text">
-        This test requires the Ahem font. It creates a polygonal shape-inside and a matching
-        filled SVG polygon. The content should just fill the shape with alternating black and
-        empty rectangles on each line.</p>
+<body onload="init()">
+  <svg id="polygon-svg-shape" xmlns="http://www.w3.org/2000/svg"></svg>
+  <div id="polygon-shape-inside"></div>
+  <p id="informative-text">
+      This test requires the Ahem font. It creates a polygonal shape-inside and a matching
+      filled SVG polygon. The content should just fill the shape with alternating black and
+      empty rectangles on each line.</p>
+  <div id="subpixel-test" style="width: 4.5px; height: 5px;"></div>
 </body>
 
 </html>
index a8d4f12..d3df70d 100644 (file)
     // but with a single right edge.
     var vertices = [{x:40, y:40}, {x:440, y:40}, {x:480, y:320}, {x:80, y:320}, {x:200, y:200}];
     var lineHeight = 40;
+    var hasSubpixelSupport;
+
+    function init() {
+        var rect = document.getElementById("subpixel-test").getBoundingClientRect();
+        hasSubpixelSupport = rect.width != Math.floor(rect.width);
+        createPolygonShapeInsideTestCase();
+    }
 </script>
 
 <style id="stylesheet">
 </style>
 </head>
 
-<body onload="createPolygonShapeInsideTestCase(vertices)">
-  <div id="root">
-    <svg id="polygon-svg-shape" xmlns="http://www.w3.org/2000/svg"></svg>
-    <div id="polygon-shape-inside"></div>
-    <p id="informative-text">
-        This test requires the Ahem font. It creates a polygonal shape-inside and a matching
-        filled SVG polygon. The content should just fill the shape with alternating black and
-        empty rectangles on each line.</p>
-  </div>
+<body onload="init()">
+  <svg id="polygon-svg-shape" xmlns="http://www.w3.org/2000/svg"></svg>
+  <div id="polygon-shape-inside"></div>
+  <p id="informative-text">
+      This test requires the Ahem font. It creates a polygonal shape-inside and a matching
+      filled SVG polygon. The content should just fill the shape with alternating black and
+      empty rectangles on each line.</p>
+  <div id="subpixel-test" style="width: 4.5px; height: 5px;"></div>
 </body>
 
 </html>
index f4dadba..ca53157 100644 (file)
     // with a vertical left edge.
     var vertices = [{x:40, y:40}, {x:440, y:40}, {x:320, y:160}, {x:480, y:320}, {x:40, y:320}];
     var lineHeight = 40;
+    var hasSubpixelSupport;
+
+    function init() {
+        var rect = document.getElementById("subpixel-test").getBoundingClientRect();
+        hasSubpixelSupport = rect.width != Math.floor(rect.width);
+        createPolygonShapeInsideTestCaseExpected();
+    }
 </script>
 
 <style id="stylesheet">
 </style>
 </head>
 
-<body onload="createPolygonShapeInsideTestCaseExpected(vertices)">
+<body onload="init()">
     <svg id="polygon-svg-shape" xmlns="http://www.w3.org/2000/svg"></svg>
     <div id="polygon-shape-inside"></div>
     <p id="informative-text">
         This test requires the Ahem font. It creates a polygonal shape-inside and a matching
         filled SVG polygon. The content should just fill the shape with alternating black and
         empty rectangles on each line.</p>
+    <div id="subpixel-test" style="width: 4.5px; height: 5px;"></div>
 </body>
 
 </html>
index 698197f..0294997 100644 (file)
     // with a vertical left edge.
     var vertices = [{x:40, y:40}, {x:440, y:40}, {x:320, y:160}, {x:480, y:320}, {x:40, y:320}];
     var lineHeight = 40;
+    var hasSubpixelSupport;
+
+    function init() {
+        var rect = document.getElementById("subpixel-test").getBoundingClientRect();
+        hasSubpixelSupport = rect.width != Math.floor(rect.width);
+        createPolygonShapeInsideTestCase();
+    }
 </script>
 
 <style id="stylesheet">
 </style>
 </head>
 
-<body onload="createPolygonShapeInsideTestCase(vertices)">
-  <div id="root">
-    <svg id="polygon-svg-shape" xmlns="http://www.w3.org/2000/svg"></svg>
-    <div id="polygon-shape-inside"></div>
-    <p id="informative-text">
-        This test requires the Ahem font. It creates a polygonal shape-inside and a matching
-        filled SVG polygon. The content should just fill the shape with alternating black and
-        empty rectangles on each line.</p>
-  </div>
+<body onload="init()">
+  <svg id="polygon-svg-shape" xmlns="http://www.w3.org/2000/svg"></svg>
+  <div id="polygon-shape-inside"></div>
+  <p id="informative-text">
+      This test requires the Ahem font. It creates a polygonal shape-inside and a matching
+      filled SVG polygon. The content should just fill the shape with alternating black and
+      empty rectangles on each line.</p>
+  <div id="subpixel-test" style="width: 4.5px; height: 5px;"></div>
 </body>
 
 </html>
index fcd8a96..5638c7c 100644 (file)
     // hourglass shape with vertical edges in the center.
     var vertices = [{x:40, y:40}, {x:440, y:40}, {x:320, y:160}, {x:320, y:240}, {x:480, y:400}, {x:80, y:400}, {x:200, y:280}, {x:200, y:200}]};
     var lineHeight = 40;
+    var hasSubpixelSupport;
+
+    function init() {
+        var rect = document.getElementById("subpixel-test").getBoundingClientRect();
+        hasSubpixelSupport = rect.width != Math.floor(rect.width);
+        createPolygonShapeInsideTestCaseExpected();
+    }
 </script>
 
 <style id="stylesheet">
 </style>
 </head>
 
-<body onload="createPolygonShapeInsideTestCaseExpected(vertices)">
+<body onload="init()">
     <svg id="polygon-svg-shape" xmlns="http://www.w3.org/2000/svg"></svg>
     <div id="polygon-shape-inside"></div>
     <p id="informative-text">
         This test requires the Ahem font. It creates a polygonal shape-inside and a matching
         filled SVG polygon. The content should just fill the shape with alternating black and
         empty rectangles on each line.</p>
+  <div id="subpixel-test" style="width: 4.5px; height: 5px;"></div>
 </body>
 
 </html>
index 9e150ea..e594df0 100644 (file)
     // hourglass shape with vertical edges in the center.
     var vertices = [{x:40, y:40}, {x:440, y:40}, {x:320, y:160}, {x:320, y:240}, {x:480, y:400}, {x:80, y:400}, {x:200, y:280}, {x:200, y:200}]};
     var lineHeight = 40;
+    var hasSubpixelSupport;
+
+    function init() {
+        var rect = document.getElementById("subpixel-test").getBoundingClientRect();
+        hasSubpixelSupport = rect.width != Math.floor(rect.width);
+        createPolygonShapeInsideTestCase();
+    }
 </script>
 
 <style id="stylesheet">
 </style>
 </head>
 
-<body onload="createPolygonShapeInsideTestCase(vertices)">
-  <div id="root">
-    <svg id="polygon-svg-shape" xmlns="http://www.w3.org/2000/svg"></svg>
-    <div id="polygon-shape-inside"></div>
-    <p id="informative-text">
-        This test requires the Ahem font. It creates a polygonal shape-inside and a matching
-        filled SVG polygon. The content should just fill the shape with alternating black and
-        empty rectangles on each line.</p>
-  </div>
+<body onload="init()">
+  <svg id="polygon-svg-shape" xmlns="http://www.w3.org/2000/svg"></svg>
+  <div id="polygon-shape-inside"></div>
+  <p id="informative-text">
+      This test requires the Ahem font. It creates a polygonal shape-inside and a matching
+      filled SVG polygon. The content should just fill the shape with alternating black and
+      empty rectangles on each line.</p>
+  <div id="subpixel-test" style="width: 4.5px; height: 5px;"></div>
 </body>
 
 </html>