[prev in list] [next in list] [prev in thread] [next in thread] 

List:       kde-core-devel
Subject:    Re: Rekonq default
From:       Fredrik =?iso-8859-1?q?H=F6glund?= <fredrik () kde ! org>
Date:       2010-02-24 0:13:06
Message-ID: 201002240113.06421.fredrik () kde ! org
[Download RAW message or body]

On Saturday 20 February 2010, Frank Karlitschek wrote:
> 2. rendering engine
> rekonq is using webkit which renders modern websites better than khtml. webkit 
> is moving forward really fast at the moment. It is in fact the leading 
> rendering engine if you look at HTML5 compliance or speed. We should benefit 
> from that. 

Frank, here's a composite screenshot that shows how KHTML, three WebKit
browsers and Firefox render a test page that uses some of the new
HTML5/CSS3 features:

http://ktown.kde.org/~fredrik/browsercomposite.png

How would you say KHTML stacks up against these other browser engines when
it comes to standards compliance, feature completeness and overrall rendering
quality?

I've attached the page to this email in case you want to compare the results
yourself.

Regards,
Fredrik


["test.html" (text/html)]

<html>
<script type="application/javascript">
function paint() {
    var canvas1 = document.getElementById('canvas1');
    var canvas2 = document.getElementById('canvas2');

    var ctx = canvas1.getContext('2d');

    ctx.shadowOffsetX = 2;
    ctx.shadowOffsetY = 4;
    ctx.shadowColor = "rgba(0, 0, 0, .4)";
    ctx.shadowBlur = 4;

    var gradient = ctx.createRadialGradient(45, 38, 0, 50, 50, 30);
    gradient.addColorStop(0, "rgb(140, 200, 255)");
    gradient.addColorStop(1, "rgb(40, 120, 255)");

    ctx.fillStyle = gradient;

    ctx.beginPath();
    ctx.moveTo(50, 50);
    ctx.arc(50, 50, 25, Math.PI / 8, -Math.PI / 8, false);
    ctx.closePath();
    ctx.fill();

    ctx = canvas2.getContext('2d');

    ctx.shadowOffsetX = 2;
    ctx.shadowOffsetY = 2;
    ctx.shadowColor = "rgba(0, 0, 0, .4)";
    ctx.shadowBlur = 5;

    ctx.fillStyle = "rgb(40, 120, 255)";

    var x = 50;
    var y = 30;
    var angle = Math.PI / 6;
    var colors = ["rgb(0, 0, 255)",
                  "rgb(0, 255, 0)",
                  "rgb(255, 0, 0)",
                  "rgb(240, 240, 0)",
                  "rgb(0, 240, 240)"];
    for (var i = 0; i < 5; i++) {
        ctx.save();
        ctx.translate(x, y);
        ctx.rotate(angle);
        ctx.fillStyle = colors[i];
        ctx.beginPath();
        ctx.moveTo(-15, -20);
        ctx.arcTo(20, -20, 20, -15, 5);
        ctx.arcTo(20, 20, 15, 20, 5);
        ctx.arcTo(-20, 20, -20, 15, 5);
        ctx.arcTo(-20, -20, -15, -20, 5);
        ctx.fill();
        ctx.restore();
        y += 10;
        angle += Math.PI / 8;
    }
}
</script>
<style>
    body {
        font: 10pt sans-serif;
    }
    td {
        padding: 20px;
    }
    .shadowtest {
        font: 20pt sans-serif;
        color: white;
        text-shadow: black 2px 2px 5px;
    }
    .brtest1 {
        border-style: dotted;
        border-width: 8px 2px 4px 6px;
        border-radius: 25px;
        -webkit-border-radius: 25px;
        -moz-border-radius: 25px;
        border-color: red green blue purple;
        width: 120px;
        height: 120px;
    }
</style>
<body onload="paint();">
<table>
<tr><td align="center">
<div class="shadowtest">
Text shadow test
</div>
</td></tr><tr><td align="center">
<div class="brtest1"></div>
Rounded borders with varying widths and colors.
</td></tr><tr><td align="center">
<canvas id="canvas1" width="100" height="100" style="border: solid 1px;"></canvas>
<br>
You should see a light blue pacman figure with a fuzzy drop shadow and a radial gradient.
</td></tr><tr><td align="center">
<canvas id="canvas2" width="100" height="100" style="border: solid 1px;"></canvas>
<br>
You should see five rotated colored rectangles with rounded corners and shadows.
The shadow offset should be unaffected by the rotation.
</td></tr><tr><td align="center">
</table>
</body>
</html>



[prev in list] [next in list] [prev in thread] [next in thread]

Configure | About | News | Add a list | Sponsored by KoreLogic