Index: third_party/WebKit/LayoutTests/svg/dom/SVGLength-px-with-context.html |
diff --git a/third_party/WebKit/LayoutTests/svg/dom/SVGLength-px-with-context.html b/third_party/WebKit/LayoutTests/svg/dom/SVGLength-px-with-context.html |
index aacdecdaea8e63306c9502e60e19856d610892dd..8ddec34a576127af503a66b6d97682007c133c9f 100644 |
--- a/third_party/WebKit/LayoutTests/svg/dom/SVGLength-px-with-context.html |
+++ b/third_party/WebKit/LayoutTests/svg/dom/SVGLength-px-with-context.html |
@@ -1,11 +1,147 @@ |
-<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> |
-<html> |
-<head> |
-<script src="../../resources/js-test.js"></script> |
-</head> |
-<body> |
-<p id="description"></p> |
-<div id="console"></div> |
-<script src="script-tests/SVGLength-px-with-context.js"></script> |
-</body> |
-</html> |
+<!DOCTYPE HTML> |
+<title>SVGLength, converting from 'px' to other units (attached)</title> |
+<script src="../../resources/testharness.js"></script> |
+<script src="../../resources/testharnessreport.js"></script> |
+<p></p> |
+<script> |
+// Setup a real SVG document, so SVGLength can resolve relative units. |
+var svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg"); |
+svgElement.setAttribute("width", "150"); |
+svgElement.setAttribute("height", "50"); |
+svgElement.setAttribute("viewBox", "0 0 150 50"); |
+ |
+var rectElement = document.createElementNS("http://www.w3.org/2000/svg", "rect"); |
+rectElement.setAttribute("style", "visibility: hidden; font-size: 12px; font-family: Ahem;"); |
+svgElement.appendChild(rectElement); |
+document.querySelector("p").appendChild(svgElement); |
+ |
+// Extract test information |
+var length = rectElement.x.baseVal; |
+var svgWidth = svgElement.width.baseVal.value; |
+var svgHeight = svgElement.height.baseVal.value; |
+var fontSize = parseInt(rectElement.style.fontSize); |
+// TODO(shanmuga.m) : Remove calculateDPI() hack and use hardcoded value 96. |
fs
2016/08/26 09:03:06
Instead of this, could you just add something that
Shanmuga Pandi
2016/09/01 11:59:56
Done.
|
+var cssPixelsPerInch = calculateDPI(); |
+ |
+function calculateDPI() |
+{ |
+ // Crude hack to determine the DPI, instead of hardcoding our 96 dpi here. |
+ var divElement = document.createElement("div"); |
+ divElement.setAttribute("style", "height: 1in"); |
+ var pElement = document.querySelector("p"); |
+ pElement.appendChild(divElement); |
+ var cssPixelsPerInch = divElement.offsetHeight; |
+ pElement.removeChild(divElement); |
+ |
+ return cssPixelsPerInch; |
+} |
+ |
+function calculateXHeight() { |
+ // Crude hack to calculate the x-height |
+ var divElement = document.createElement("div"); |
+ divElement.setAttribute("style", "height: 1ex; font-size: 12px; font-family: Ahem;"); |
+ var pElement = document.querySelector("p"); |
+ pElement.appendChild(divElement); |
+ var xHeight = divElement.offsetHeight; |
+ pElement.removeChild(divElement); |
+ return xHeight; |
+} |
fs
2016/08/26 09:03:06
Everything above here could go in a (testharness)
|
+ |
+test(function() { |
+ // Set value to be 2px. |
+ length.valueAsString = "2px"; |
+ assert_equals(length.unitType, SVGLength.SVG_LENGTHTYPE_PX); |
+ assert_equals(length.value, 2); |
+ assert_equals(length.valueInSpecifiedUnits, 2); |
+ assert_equals(length.valueAsString, "2px"); |
+}, "Check initial value to be 2px"); |
fs
2016/08/26 09:03:07
Same naming strategy here. Also, this particular t
|
+ |
+test(function() { |
+ length.valueAsString = "2px"; |
+ length.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_NUMBER); |
+ assert_equals(length.valueAsString, "2"); |
+ assert_equals(length.value, 2); |
+ assert_equals(length.valueInSpecifiedUnits, 2); |
+ assert_equals(length.unitType, SVGLength.SVG_LENGTHTYPE_NUMBER); |
+}, "Convert from px to unitless"); |
+ |
+test(function() { |
+ length.valueAsString = "2px"; |
+ length.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE); |
+ referenceValue = Number(2 / svgWidth * 100).toFixed(5); |
+ assert_equals(length.valueAsString, referenceValue + "%"); |
+ assert_equals(length.valueInSpecifiedUnits.toFixed(5), referenceValue); |
+ assert_equals(length.value.toFixed(1), "2.0"); |
+ assert_equals(length.unitType, SVGLength.SVG_LENGTHTYPE_PERCENTAGE); |
+}, "Convert from px to percentage"); |
+ |
+test(function() { |
+ length.valueAsString = "2px"; |
+ length.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_EMS); |
+ referenceValue = Number(2 / fontSize).toFixed(6); |
+ assert_equals(length.valueAsString, referenceValue + "em"); |
+ assert_equals(length.valueInSpecifiedUnits.toFixed(6), referenceValue); |
+ assert_equals(length.value.toFixed(1), "2.0"); |
+ assert_equals(length.unitType, SVGLength.SVG_LENGTHTYPE_EMS); |
+}, "Convert from px to ems"); |
+ |
+test(function() { |
+ length.valueAsString = "2px"; |
+ length.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_EXS); |
+ referenceValue = Number(2 / calculateXHeight()).toFixed(1); |
+ // Don't check valueAsString here, it's unreliable across browsers. |
+ assert_equals(length.valueInSpecifiedUnits.toFixed(1), referenceValue); |
+ assert_equals(length.value.toFixed(1), "2.0"); |
+ assert_equals(length.unitType, SVGLength.SVG_LENGTHTYPE_EXS); |
+}, "Convert from px to exs"); |
+ |
+test(function() { |
+ length.valueAsString = "2px"; |
+ length.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_CM); |
+ referenceValue = Number(2 * 2.54 / cssPixelsPerInch).toFixed(7); |
+ assert_equals(length.valueAsString, referenceValue + "cm"); |
+ assert_equals(length.valueInSpecifiedUnits.toFixed(7), referenceValue); |
+ assert_equals(length.value.toFixed(1), "2.0"); |
+ assert_equals(length.unitType, SVGLength.SVG_LENGTHTYPE_CM); |
+}, "Convert from px to cm"); |
+ |
+test(function() { |
+ length.valueAsString = "2px"; |
+ length.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_MM); |
+ referenceValue = Number(2 * 25.4 / cssPixelsPerInch).toFixed(6); |
+ assert_equals(length.valueAsString, referenceValue + "mm"); |
+ assert_equals(length.valueInSpecifiedUnits.toFixed(6), referenceValue); |
+ assert_equals(length.value.toFixed(1), "2.0"); |
+ assert_equals(length.unitType, SVGLength.SVG_LENGTHTYPE_MM); |
+}, "Convert from px to mm"); |
+ |
+test(function() { |
+ length.valueAsString = "2px"; |
+ length.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_IN); |
+ referenceValue = Number(2 / cssPixelsPerInch).toFixed(7); |
+ assert_equals(length.valueAsString, referenceValue + "in"); |
+ assert_equals(length.valueInSpecifiedUnits.toFixed(7), referenceValue); |
+ assert_equals(length.value.toFixed(1), "2.0"); |
+ assert_equals(length.unitType, SVGLength.SVG_LENGTHTYPE_IN); |
+}, "Convert from px to in"); |
+ |
+test(function() { |
+ length.valueAsString = "2px"; |
+ length.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PT); |
+ referenceValue = Number(2 / cssPixelsPerInch * 72); |
+ assert_equals(length.valueAsString, referenceValue + "pt"); |
+ assert_equals(length.valueInSpecifiedUnits, referenceValue); |
+ assert_equals(length.value.toFixed(1), "2.0"); |
+ assert_equals(length.unitType, SVGLength.SVG_LENGTHTYPE_PT); |
+}, "Convert from px to pt"); |
+ |
+test(function() { |
+ length.valueAsString = "2px"; |
+ length.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PC); |
+ referenceValue = Number(2 / cssPixelsPerInch * 6).toFixed(3); |
+ // Don't check valueAsString here, it's unreliable across browsers. |
+ assert_equals(length.valueInSpecifiedUnits.toFixed(3), referenceValue); |
+ assert_equals(length.value.toFixed(1), "2.0"); |
+ assert_equals(length.unitType, SVGLength.SVG_LENGTHTYPE_PC); |
+}, "Convert from px to pc"); |
+</script> |