Expose baseline information in the Sky API.

R=eseidel@chromium.org

Review URL: https://codereview.chromium.org/1208483002.

engine/core/dom/Element.cpp

@@ -972,6 +972,20 @@ void Element::setMaxContentWidth(double width)
         return box->setMaxPreferredLogicalWidth(width);
 }
 
+double Element::alphabeticBaseline() const
+{
+    if (RenderBox* box = renderBox())
+        return box->baselinePosition(AlphabeticBaseline, true, HorizontalLine, PositionOfInteriorLineBoxes);
+    return 0;
+}
+
+double Element::ideographicBaseline() const
+{
+    if (RenderBox* box = renderBox())
+        return box->baselinePosition(IdeographicBaseline, true, HorizontalLine, PositionOfInteriorLineBoxes);
+    return 0;
+}
+
 void Element::setNeedsLayout()
 {
     if (RenderBox* box = renderBox())

engine/core/dom/Element.h

@@ -222,6 +222,9 @@ public:
     double maxContentWidth() const;
     void setMaxContentWidth(double);
 
+    double alphabeticBaseline() const;
+    double ideographicBaseline() const;
+
     void setNeedsLayout();
     void layout();
 

engine/core/dom/Element.idl

@@ -48,6 +48,8 @@
   attribute double height;
   attribute double minContentWidth; // Intrinsic width if all wrappable points wrap.
   attribute double maxContentWidth; // Intrinsic width if no wrappable points wrap.
+  readonly attribute double alphabeticBaseline; // Distance from top to alphabetic baseline of first line
+  readonly attribute double ideographicBaseline; // Distance from top to ideographic baseline of first line
 
   void paint(Canvas canvas);
 };

examples/raw/baseline.dart

@@ -0,0 +1,64 @@
+// Copyright 2015 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'dart:sky' as sky;
+
+void drawText(sky.Canvas canvas, String lh) {
+  sky.Paint paint = new sky.Paint();
+
+  // offset down
+  canvas.translate(0.0, 100.0);
+
+  // set up the text
+  sky.Document document = new sky.Document();
+  sky.Text arabic = document.createText("مرحبا");
+  sky.Text english = document.createText(" Hello");
+  sky.Element block = document.createElement('div');
+  block.style['display'] = 'paragraph';
+  block.style['font-family'] = 'monospace';
+  block.style['font-size'] = '50px';
+  block.style['line-height'] = lh;
+  block.style['color'] = '#0000A0';
+  block.appendChild(arabic);
+  block.appendChild(english);
+  sky.LayoutRoot layoutRoot = new sky.LayoutRoot();
+  layoutRoot.rootElement = block;
+  layoutRoot.maxWidth = sky.view.width - 20.0; // you need to set a width for this to paint
+  layoutRoot.layout();
+
+  // draw a line at the text's baseline
+  sky.Path path = new sky.Path();
+  path.moveTo(0.0, 0.0);
+  path.lineTo(block.maxContentWidth, 0.0);
+  path.moveTo(0.0, block.alphabeticBaseline);
+  path.lineTo(block.maxContentWidth, block.alphabeticBaseline);
+  path.moveTo(0.0, block.height);
+  path.lineTo(block.maxContentWidth, block.height);
+  paint.color = const sky.Color(0xFFFF9000);
+  paint.setStyle(sky.PaintingStyle.stroke);
+  paint.strokeWidth = 3.0;
+  canvas.drawPath(path, paint);  
+
+  // paint the text
+  layoutRoot.paint(canvas);
+}
+
+void main() {
+  // prepare the rendering
+  sky.PictureRecorder canvas = new sky.PictureRecorder(sky.view.width, sky.view.height);
+
+  // background
+  sky.Paint paint = new sky.Paint();
+  paint.color = const sky.Color(0xFFFFFFFF);
+  paint.setStyle(sky.PaintingStyle.fill);
+  canvas.drawRect(new sky.Rect.fromLTRB(0.0, 0.0, sky.view.width, sky.view.height), paint);
+
+  canvas.translate(10.0, 0.0);
+  drawText(canvas, '1.0');
+  drawText(canvas, 'lh');
+
+  // put it on the screen
+  sky.view.picture = canvas.endRecording();
+  sky.view.scheduleFrame();
+}