Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(31)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: third_party/WebKit/LayoutTests/fast/dom/Range/getClientRects.html

Issue 2475393002: Convert fast/dom/Range/getClientRects.html to web-platform test (Closed)
Patch Set: Resore element results Created 4 years, 1 month ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/platform/linux/fast/dom/Range/getClientRects-expected.txt » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: third_party/WebKit/LayoutTests/fast/dom/Range/getClientRects.html
diff --git a/third_party/WebKit/LayoutTests/fast/dom/Range/getClientRects.html b/third_party/WebKit/LayoutTests/fast/dom/Range/getClientRects.html
index e5c2d3ff21cfb20459cadd19c6ee602fd3dfefae..dc6a814121a3bc28064e67b95c59bcb829893258 100644
--- a/third_party/WebKit/LayoutTests/fast/dom/Range/getClientRects.html
+++ b/third_party/WebKit/LayoutTests/fast/dom/Range/getClientRects.html
@@ -1,410 +1,481 @@
-<script src="../../../resources/js-test.js"></script>
-<style>
-.bbox {
- position:absolute;
- outline: 5px solid rgba(255, 0, 0, .75);
- z-index: -1;
-}
-
-.box {
- width: 400px;
- line-height: 40px;
-}
-
-.outer {
- outline: 2px solid green;
-}
-
-.inner {
- display: inline-block;
- width: 40px;
- height: 20px;
- outline: 2px solid blue;
-}
-
-#test8 {
- transform: translate(50px, 100px) rotate(50deg);
-}
-
-#test10 {
- height: 400px;
- -webkit-writing-mode: vertical-lr;
-}
-
-#console {
- position:absolute;
- left: 500px;
-}
-#testArea {
- width: 300px;
-}
-
-</style>
-<div id="console"></div>
-<div id="testArea">
-
-<div class="box" id="test1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
-
-<br><br>
-
-<div class="box" id="test2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
-
-<br><br>
-
-<div class="box" id="test3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
-
-<br><br>
-
-<div class="box" id="test4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et<img src="../resources/abe.png" width="76" height="103"> dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
-
-<br><br>
-
-<div class="box" id="test5">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et<img src="../resources/abe.png" width="76" height="103"> dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
-
-<br><br>
-
-<div class="box" id="test6">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do <div class="outer">eiusmod <span class="inner"></span>tempor</div> incididunt ut labore etdolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
-
-<br><br>
-
-<div class="box" id="test7">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do <div class="outer">eiusmod <span class="inner"></span>tempor</div> incididunt ut labore etdolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
-
-<br><br>
-
-<div class="box" id="test8">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
-
-<br><br>
-
-<div class="box" id="test9">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
-
-<br><br>
-
-<div class="box" id="test10">weee! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
-
-</div>
-
-<script>
- if (window.testRunner)
- testRunner.dumpAsText();
-
- function addBBoxOverClientRect(rect)
- {
- var bbox = document.createElement('div');
- bbox.className = "bbox";
- var style = "";
- style += "left: " + rect.left + "px;";
- style += "top: " + rect.top + "px;";
- style += "width: " + (rect.right - rect.left) + "px;";
- style += "height: " + (rect.bottom - rect.top) + "px;";
- bbox.setAttribute("style", style);
- document.documentElement.appendChild(bbox);
- }
-
- function addBBoxOverClientRects(rects)
- {
- for (var i = 0; i < rects.length; ++i)
- addBBoxOverClientRect(rects[i]);
- }
-
- function show(range)
- {
- if (window.testRunner)
- return;
- addBBoxOverClientRects(range.getClientRects());
- }
-
- // Test 1
- debug("Test 1")
- var range1 = document.createRange();
- range1.selectNode(document.getElementById('test1'));
- show(range1);
- rects = range1.getClientRects();
- shouldBe("rects.length", "5");
- shouldBe("rects[0].left", "8");
- shouldBe("rects[0].top", "8");
- shouldBe("rects[0].width", "400");
- shouldBe("rects[0].height", "160");
- shouldBe("rects[1].left", "8");
- shouldBe("rects[1].top", "19");
- shouldBe("rects[1].width", "396");
- shouldBe("rects[1].height", "18");
- shouldBe("rects[2].left", "8");
- shouldBe("rects[2].top", "59");
- shouldBe("rects[2].width", "398");
- shouldBe("rects[2].height", "18");
- shouldBe("rects[3].left", "8");
- shouldBe("rects[3].top", "99");
- shouldBe("rects[3].width", "360");
- shouldBe("rects[3].height", "18");
- shouldBe("rects[4].left", "8");
- shouldBe("rects[4].top", "139");
- shouldBe("rects[4].width", "306");
- shouldBe("rects[4].height", "18");
-
- // Test 2
- debug("Test 2")
- var range2 = document.createRange();
- range2.selectNodeContents(document.getElementById('test2'));
- show(range2);
- rects = range2.getClientRects();
- shouldBe("rects.length", "4");
- shouldBe("rects[0].left", "8");
- shouldBe("rects[0].top", "215");
- shouldBe("rects[0].width", "396");
- shouldBe("rects[0].height", "18");
- shouldBe("rects[1].left", "8");
- shouldBe("rects[1].top", "255");
- shouldBe("rects[1].width", "398");
- shouldBe("rects[1].height", "18");
- shouldBe("rects[2].left", "8");
- shouldBe("rects[2].top", "295");
- shouldBe("rects[2].width", "360");
- shouldBe("rects[2].height", "18");
- shouldBe("rects[3].left", "8");
- shouldBe("rects[3].top", "335");
- shouldBe("rects[3].width", "306");
- shouldBe("rects[3].height", "18");
-
- // Test 3
- debug("Test 3")
- var range3 = document.createRange();
- range3.setStart(document.getElementById('test3').firstChild, 10);
- range3.setEnd(document.getElementById('test3').lastChild, 200);
- show(range3);
- rects = range3.getClientRects();
- shouldBe("rects.length", "4");
- shouldBe("rects[0].left", "80");
- shouldBe("rects[0].top", "411");
- shouldBe("rects[0].width", "324");
- shouldBe("rects[0].height", "18");
- shouldBe("rects[1].left", "8");
- shouldBe("rects[1].top", "451");
- shouldBe("rects[1].width", "398");
- shouldBe("rects[1].height", "18");
- shouldBe("rects[2].left", "8");
- shouldBe("rects[2].top", "491");
- shouldBe("rects[2].width", "360");
- shouldBe("rects[2].height", "18");
- shouldBe("rects[3].left", "8");
- shouldBe("rects[3].top", "531");
- shouldBe("rects[3].width", "88");
- shouldBe("rects[3].height", "18");
-
- // Test 4 - Should not include rect of the img.
- debug("Test 4")
- var range4 = document.createRange();
- range4.selectNode(document.getElementById('test4'));
- show(range4);
- rects = range4.getClientRects();
- shouldBe("rects.length", "7");
- shouldBe("rects[0].left", "8");
- shouldBe("rects[0].top", "596");
- shouldBe("rects[0].width", "400");
- shouldBe("rects[0].height", "278");
- shouldBe("rects[1].left", "8");
- shouldBe("rects[1].top", "607");
- shouldBe("rects[1].width", "396");
- shouldBe("rects[1].height", "18");
- shouldBe("rects[2].left", "8");
- shouldBe("rects[2].top", "725");
- shouldBe("rects[2].width", "242");
- shouldBe("rects[2].height", "18");
- shouldBe("rects[3].left", "326");
- shouldBe("rects[3].top", "725");
- shouldBe("rects[3].width", "44");
- shouldBe("rects[3].height", "18");
- shouldBe("rects[4].left", "8");
- shouldBe("rects[4].top", "765");
- shouldBe("rects[4].width", "341");
- shouldBe("rects[4].height", "18");
- shouldBe("rects[5].left", "8");
- shouldBe("rects[5].top", "805");
- shouldBe("rects[5].width", "366");
- shouldBe("rects[5].height", "18");
- shouldBe("rects[6].left", "8");
- shouldBe("rects[6].top", "845");
- shouldBe("rects[6].width", "67");
- shouldBe("rects[6].height", "18");
-
- // Test 5 - Should include rect of the img.
- debug("Test 5");
- var range5 = document.createRange();
- range5.setStart(document.getElementById('test5').firstChild, 10);
- range5.setEnd(document.getElementById('test5').lastChild, 50);
- show(range5);
- rects = range5.getClientRects();
- shouldBe("rects.length", "5");
- shouldBe("rects[0].left", "80");
- shouldBe("rects[0].top", "921");
- shouldBe("rects[0].width", "324");
- shouldBe("rects[0].height", "18");
- shouldBe("rects[1].left", "8");
- shouldBe("rects[1].top", "1039");
- shouldBe("rects[1].width", "242");
- shouldBe("rects[1].height", "18");
- shouldBe("rects[2].left", "250");
- shouldBe("rects[2].top", "950");
- shouldBe("rects[2].width", "76");
- shouldBe("rects[2].height", "103");
- shouldBe("rects[3].left", "326");
- shouldBe("rects[3].top", "1039");
- shouldBe("rects[3].width", "44");
- shouldBe("rects[3].height", "18");
- shouldBe("rects[4].left", "8");
- shouldBe("rects[4].top", "1079");
- shouldBe("rects[4].width", "284");
- shouldBe("rects[4].height", "18");
-
- // Test 6 - Should not include green or blue boxes
- debug("Test 6");
- var range6 = document.createRange();
- range6.selectNode(document.getElementById('test6'));
- show(range6);
- rects = range6.getClientRects();
- shouldBe("rects.length", "7");
- shouldBe("rects[0].left", "8");
- shouldBe("rects[0].top", "1224");
- shouldBe("rects[0].width", "400");
- shouldBe("rects[0].height", "200");
- shouldBe("rects[1].left", "8");
- shouldBe("rects[1].top", "1235");
- shouldBe("rects[1].width", "396");
- shouldBe("rects[1].height", "18");
- shouldBe("rects[2].left", "8");
- shouldBe("rects[2].top", "1275");
- shouldBe("rects[2].width", "57");
- shouldBe("rects[2].height", "18");
- shouldBe("rects[3].left", "105");
- shouldBe("rects[3].top", "1275");
- shouldBe("rects[3].width", "44");
- shouldBe("rects[3].height", "18");
- shouldBe("rects[4].left", "8");
- shouldBe("rects[4].top", "1315");
- shouldBe("rects[4].width", "387");
- shouldBe("rects[4].height", "18");
- shouldBe("rects[5].left", "8");
- shouldBe("rects[5].top", "1355");
- shouldBe("rects[5].width", "397");
- shouldBe("rects[5].height", "18");
- shouldBe("rects[6].left", "8");
- shouldBe("rects[6].top", "1395");
- shouldBe("rects[6].width", "171");
- shouldBe("rects[6].height", "18");
-
- // Test 7 - Should include green but not blue box
- debug("Test 7");
- var range7 = document.createRange();
- range7.selectNodeContents(document.getElementById('test7'));
- show(range7);
- rects = range7.getClientRects();
- shouldBe("rects.length", "7");
- shouldBe("rects[0].left", "8");
- shouldBe("rects[0].top", "1471");
- shouldBe("rects[0].width", "396");
- shouldBe("rects[0].height", "18");
- shouldBe("rects[1].left", "8");
- shouldBe("rects[1].top", "1500");
- shouldBe("rects[1].width", "400");
- shouldBe("rects[1].height", "40");
- shouldBe("rects[2].left", "8");
- shouldBe("rects[2].top", "1511");
- shouldBe("rects[2].width", "57");
- shouldBe("rects[2].height", "18");
- shouldBe("rects[3].left", "105");
- shouldBe("rects[3].top", "1511");
- shouldBe("rects[3].width", "44");
- shouldBe("rects[3].height", "18");
- shouldBe("rects[4].left", "8");
- shouldBe("rects[4].top", "1551");
- shouldBe("rects[4].width", "387");
- shouldBe("rects[4].height", "18");
- shouldBe("rects[5].left", "8");
- shouldBe("rects[5].top", "1591");
- shouldBe("rects[5].width", "397");
- shouldBe("rects[5].height", "18");
- shouldBe("rects[6].left", "8");
- shouldBe("rects[6].top", "1631");
- shouldBe("rects[6].width", "171");
- shouldBe("rects[6].height", "18");
-
- // Test 8
- debug("Test 8");
- var range8 = document.createRange();
- range8.selectNodeContents(document.getElementById('test8'));
- show(range8);
- rects = range8.getClientRects();
- shouldBe("rects.length", "4");
- shouldBe("rects[0].left", "168");
- shouldBe("rects[0].top", "1678");
- shouldBe("rects[0].width", "269");
- shouldBe("rects[0].height", "316");
- shouldBe("rects[1].left", "137");
- shouldBe("rects[1].top", "1704");
- shouldBe("rects[1].width", "271");
- shouldBe("rects[1].height", "317");
- shouldBe("rects[2].left", "107");
- shouldBe("rects[2].top", "1729");
- shouldBe("rects[2].width", "246");
- shouldBe("rects[2].height", "289");
- shouldBe("rects[3].left", "76");
- shouldBe("rects[3].top", "1755");
- shouldBe("rects[3].width", "212");
- shouldBe("rects[3].height", "247");
-
- debug("Test 9");
- var range9 = document.createRange();
- // This case should match test 9b's results. Currently though getClientRects returns an empty list.
- range9.setStart(document.getElementById('test9'), 0);
- show(range9);
- rects = range9.getClientRects();
- shouldBe("rects.length", "1");
- shouldBe("rects[0].left", "8");
- shouldBe("rects[0].top", "1903");
- shouldBe("rects[0].width", "0");
- shouldBe("rects[0].height", "18");
-
- debug("Test 9b");
- var range9 = document.createRange();
- range9.setStart(document.getElementById('test9').firstChild, 0);
- show(range9);
- rects = range9.getClientRects();
- shouldBe("rects.length", "1");
- shouldBe("rects[0].left", "8");
- shouldBe("rects[0].top", "1903");
- shouldBe("rects[0].width", "0");
- shouldBe("rects[0].height", "18");
-
- // Test 10
- debug("Test 10");
- var range10 = document.createRange();
- range10.selectNodeContents(document.getElementById('test10'));
- show(range10);
- rects = range10.getClientRects();
- shouldBe("rects.length", "4");
- shouldBe("rects[0].left", "19");
- shouldBe("rects[0].top", "2088");
- shouldBe("rects[0].width", "18");
- shouldBe("rects[0].height", "393");
- shouldBe("rects[1].left", "59");
- shouldBe("rects[1].top", "2088");
- shouldBe("rects[1].width", "18");
- shouldBe("rects[1].height", "377");
- shouldBe("rects[2].left", "99");
- shouldBe("rects[2].top", "2088");
- shouldBe("rects[2].width", "18");
- shouldBe("rects[2].height", "372");
- shouldBe("rects[3].left", "139");
- shouldBe("rects[3].top", "2088");
- shouldBe("rects[3].width", "18");
- shouldBe("rects[3].height", "360");
-
- debug("Test 11");
- var range11 = document.createRange();
- rects = range11.getClientRects();
- shouldBe("rects.length", "0");
-
- if (window.testRunner) {
- var area = document.getElementById('testArea');
- area.parentNode.removeChild(area);
- }
-</script>
+<!DOCTYPE html>
+<html>
+ <head>
+ <script src="../../../resources/testharness.js"></script>
+ <script src="../../../resources/testharnessreport.js"></script>
+ <style>
+ div {
+ font-family: Arial;
+ font-size: 16px;
+ font-weight: normal;
+ font-style: normal;
+ text-rendering: optimizeLegibility;
+ font-kerning: none;
+ font-variant-ligatures: none;
+ }
+
+ .rect-outline {
+ position: absolute;
+ outline: 5px solid rgba(255, 0, 0, .75);
+ z-index: -1;
+ }
+
+ .box {
+ display: inline-block;
+ width: 400px;
+ line-height: 40px;
+ margin: 0 40px 40px 0;
+ }
+
+ .box.expected {
+ white-space: nowrap;
+ }
+
+ .caption {
+ border-bottom: 1px solid black;
+ font-weight: bold;
+ }
+
+ .outer {
+ display: block;
+ outline: 2px solid green;
+ }
+
+ .inner {
+ display: inline-block;
+ width: 40px;
+ height: 20px;
+ outline: 2px solid blue;
+ }
+
+ #test8, #test8-expected {
+ transform: translate(50px, 100px) rotate(50deg);
+ }
+
+ #test9, #test9-expected {
+ height: 400px;
+ -webkit-writing-mode: vertical-lr;
+ }
+
+ #testArea {
+ width: 900px;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="testArea">
+ <div class="box caption">Actual</div>
+ <div class="box caption">Expected</div>
+ <div class="box" id="test1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
+ <div class="box expected" id="test1-expected">
+ <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit,</span><br>
+ <span>sed do eiusmod tempor incididunt ut labore et dolore</span><br>
+ <span>magna aliqua. Ut enim ad minim veniam, quis nostrud</span><br>
+ <span>exercitation ullamco laboris nisi ut aliquip ex ea</span><br>
+ <span>commodo consequat.</span>
+ </div>
+
+ <div class="box" id="test2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
+ <div class="box expected" id="test2-expected">
+ <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit,</span><br>
+ <span>sed do eiusmod tempor incididunt ut labore et dolore</span><br>
+ <span>magna aliqua. Ut enim ad minim veniam, quis nostrud</span><br>
+ <span>exercitation ullamco laboris nisi ut aliquip ex ea</span><br>
+ <span>commodo consequat.</span>
+ </div>
+
+ <div class="box" id="test3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
+ <div class="box expected" id="test3-expected">
+ Lorem ipsu<span>m dolor sit amet, consectetur adipisicing elit,</span><br>
+ <span>sed do eiusmod tempor incididunt ut labore et dolore</span><br>
+ <span>magna aliqua. Ut enim ad minim veniam, quis nostrud</span><br>
+ <span>exercitation ullamco laboris nisi ut </span>aliquip ex ea<br>
+ commodo consequat.
+ </div>
+
+ <div class="box" id="test4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor<img src="../resources/abe.png" width="76" height="103"> incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
+ <div class="box expected" id="test4-expected">
+ <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit,</span><br>
+ <span>sed do eiusmod tempor</span><img src="../resources/abe.png" width="76" height="103"><span> incididunt ut labore et</span><br>
+ <span>dolore magna aliqua. Ut enim ad minim veniam, quis</span><br>
+ <span>nostrud exercitation ullamco laboris nisi ut aliquip ex ea</span><br>
+ <span>commodo consequat.</span>
+ </div>
+
+ <div class="box" id="test5">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor<img src="../resources/abe.png" width="76" height="103"> incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
+ <div class="box expected" id="test5-expected">
+ Lorem ipsu<span>m dolor sit amet, consectetur adipisicing elit,</span><br>
+ <span>sed do eiusmod tempor</span><img src="../resources/abe.png" width="76" height="103"><span> incididunt ut labore et</span><br>
+ <span>dolore magna aliqua. Ut e</span>nim ad minim veniam, quis<br>
+ nostrud exercitation ullamco laboris nisi ut aliquip ex ea<br>
+ commodo consequat.
+ </div>
+
+ <div class="box" id="test6">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do <div class="outer">eiusmod <div class="inner"></div>tempor</div> incididunt ut labore etdolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
+ <div class="box expected" id="test6-expected">
+ <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit,</span><br>
+ <span>sed do</span><br>
+ <div class="outer"><span>eiusmod </span><div class="inner"></div><span>tempor</span></div>
+ <span>incididunt ut labore etdolore magna aliqua. Ut enim ad</span><br>
+ <span>minim veniam, quis nostrud exercitation ullamco laboris</span><br>
+ <span>nisi ut aliquip ex ea commodo consequat.</span>
+ </div>
+
+ <div class="box" id="test7">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do <div class="outer">eiusmod <div class="inner"></div>tempor</div> incididunt ut labore etdolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
+ <div class="box expected" id="test7-expected">
+ <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit,</span><br>
+ <span>sed do</span><br>
+ <span class="outer"><span>eiusmod </span><div class="inner"></div><span>tempor</span></span>
+ <span>incididunt ut labore etdolore magna aliqua. Ut enim ad</span><br>
+ <span>minim veniam, quis nostrud exercitation ullamco laboris</span><br>
+ <span>nisi ut aliquip ex ea commodo consequat.</span>
+ </div>
+
+ <div class="box" id="test8">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
+ <div class="box expected" id="test8-expected">
+ <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit,</span><br>
+ <span>sed do eiusmod tempor incididunt ut labore et dolore</span><br>
+ <span>magna aliqua. Ut enim ad minim veniam, quis nostrud</span><br>
+ <span>exercitation ullamco laboris nisi ut aliquip ex ea</span><br>
+ <span>commodo consequat.</span>
+ </div>
+
+ <div class="box" id="test9">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
+ <div class="box expected" id="test9-expected">
+ <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit,</span><br>
+ <span>sed do eiusmod tempor incididunt ut labore et dolore</span><br>
+ <span>magna aliqua. Ut enim ad minim veniam, quis nostrud</span><br>
+ <span>exercitation ullamco laboris nisi ut aliquip ex ea</span><br>
+ <span>commodo consequat.</span>
+ </div>
+ </div>
+
+ <script>
+ function addRectOutline(rect)
+ {
+ var scrollTop = document.scrollingElement.scrollTop;
+ var element = document.createElement('div');;
+ element.className = 'rect-outline';
+ element.style.left = rect.left + 'px';
+ element.style.top = (rect.top + scrollTop) + 'px';
+ element.style.width = (rect.right - rect.left) + 'px';
+ element.style.height = (rect.bottom - rect.top) + 'px';
+ document.body.appendChild(element);
+ }
+
+ function showRects(rects)
+ {
+ for (var rect, i = 0; rect = rects[i]; i++)
+ addRectOutline(rect);
+ }
+
+ function rectsForRange(range) {
+ var clientRects = range.getClientRects();
+ var rects = [];
+ for (var i = 0; i < clientRects.length; i++)
+ rects.push(clientRects[i]);
+ return rects;
+ }
+
+ function rectsForChildren(element, opt_tagName) {
+ var elements = element.getElementsByTagName(opt_tagName || 'span');
+ var rects = [];
+ for (var el, i = 0; el = elements[i]; i++) {
+ if (el.tagName != 'BR')
+ rects.push(el.getBoundingClientRect());
+ }
+ return rects;
+ }
+
+ function adjustedRectPosition(container, rect) {
+ var containerRect = container.getBoundingClientRect();
+ return (rect.left - containerRect.left).toFixed(0) + ',' +
+ (rect.top - containerRect.top).toFixed(0);
+ }
+
+ function rectSize(rect) {
+ return rect.width.toFixed(0) + 'x' + rect.height.toFixed(0);
+ }
+
+
+ if (window.testRunner)
+ window.testRunner.setTextSubpixelPositioning(true);
+
+ test(function() {
+ var range = document.createRange();
+ var actualElement = document.getElementById('test1');
+ range.selectNode(actualElement);
+ var actualRects = rectsForRange(range);
+
+ var expectedElement = document.getElementById('test1-expected');
+ var expectedRects = [
+ expectedElement.getBoundingClientRect()
+ ].concat(rectsForChildren(expectedElement));
+
+ if (!window.testRunner) {
+ showRects(actualRects);
+ showRects(expectedRects);
+ }
+
+ assert_equals(actualRects.length, expectedRects.length,
+ 'Number of rects returned by getClientRects should match expected.');
+
+ for (var i = 0; i < actualRects.length; i++) {
+ var actual = actualRects[i];
+ var expected = expectedRects[i];
+ assert_equals(adjustedRectPosition(actualElement, actual),
+ adjustedRectPosition(expectedElement, expected),
+ 'Position of rect ' + i + ' should match expected.');
+ assert_equals(rectSize(actual),
+ rectSize(expected),
+ 'Size of rect ' + i + ' should match expected');
+ }
+ }, 'range.selectNode(container) has rects for container and each line.');
+
+
+ test(function() {
+ var range = document.createRange();
+ var actualElement = document.getElementById('test2');
+ range.selectNodeContents(actualElement);
+ var actualRects = rectsForRange(range);
+
+ var expectedElement = document.getElementById('test2-expected');
+ var expectedRects = rectsForChildren(expectedElement);
+
+ if (!window.testRunner) {
+ showRects(actualRects);
+ showRects(expectedRects);
+ }
+
+ assert_equals(actualRects.length, expectedRects.length,
+ 'Number of rects returned by getClientRects should match expected.');
+
+ for (var i = 0; i < actualRects.length; i++) {
+ var actual = actualRects[i];
+ var expected = expectedRects[i];
+ assert_equals(adjustedRectPosition(actualElement, actual),
+ adjustedRectPosition(expectedElement, expected),
+ 'Position of rect ' + i + ' should match expected.');
+ assert_equals(rectSize(actual),
+ rectSize(expected),
+ 'Size of rect ' + i + ' should match expected');
+ }
+ }, 'range.selectNodeContents(container) has rects for each line.');
+
+
+ test(function() {
+ var range = document.createRange();
+ var actualElement = document.getElementById('test3');
+ range.setStart(actualElement.firstChild, 10);
+ range.setEnd(actualElement.lastChild, 200);
+ var actualRects = rectsForRange(range);
+
+ var expectedElement = document.getElementById('test3-expected');
+ var expectedRects = rectsForChildren(expectedElement);
+
+ if (!window.testRunner) {
+ showRects(actualRects);
+ showRects(expectedRects);
+ }
+
+ assert_equals(actualRects.length, expectedRects.length,
+ 'Number of rects returned by getClientRects should match expected.');
+
+ for (var i = 0; i < actualRects.length; i++) {
+ var actual = actualRects[i];
+ var expected = expectedRects[i];
+ assert_equals(adjustedRectPosition(actualElement, actual),
+ adjustedRectPosition(expectedElement, expected),
+ 'Position of rect ' + i + ' should match expected.');
+ assert_equals(rectSize(actual),
+ rectSize(expected),
+ 'Size of rect ' + i + ' should match expected');
+ }
+ }, 'range.setStart/setEnd(node, offset) has rects for each line in range.');
+
+
+ test(function() {
+ var range = document.createRange();
+ var actualElement = document.getElementById('test4');
+ range.selectNode(actualElement);
+ var actualRects = rectsForRange(range);
+
+ var expectedElement = document.getElementById('test4-expected');
+ var expectedRects = [
+ expectedElement.getBoundingClientRect()
+ ].concat(rectsForChildren(expectedElement));
+
+ if (!window.testRunner) {
+ showRects(actualRects);
+ showRects(expectedRects);
+ }
+
+ assert_equals(actualRects.length, expectedRects.length,
+ 'Number of rects returned by getClientRects should match expected.');
+
+ for (var i = 0; i < actualRects.length; i++) {
+ var actual = actualRects[i];
+ var expected = expectedRects[i];
+ assert_equals(adjustedRectPosition(actualElement, actual),
+ adjustedRectPosition(expectedElement, expected),
+ 'Position of rect ' + i + ' should match expected.');
+ assert_equals(rectSize(actual),
+ rectSize(expected),
+ 'Size of rect ' + i + ' should match expected');
+ }
+ }, 'range.selectNode(container) should not include rect of image.');
+
+ test(function() {
+ var range = document.createRange();
+ var actualElement = document.getElementById('test5');
+ range.setStart(actualElement.firstChild, 10);
+ range.setEnd(actualElement.lastChild, 50);
+ var actualRects = rectsForRange(range);
+
+ var expectedElement = document.getElementById('test5-expected');
+ var expectedRects = rectsForChildren(expectedElement, '*');
+
+ if (!window.testRunner) {
+ showRects(actualRects);
+ showRects(expectedRects);
+ }
+
+ assert_equals(actualRects.length, expectedRects.length,
+ 'Number of rects returned by getClientRects should match expected.');
+
+ for (var i = 0; i < actualRects.length; i++) {
+ var actual = actualRects[i];
+ var expected = expectedRects[i];
+ assert_equals(adjustedRectPosition(actualElement, actual),
+ adjustedRectPosition(expectedElement, expected),
+ 'Position of rect ' + i + ' should match expected.');
+ assert_equals(rectSize(actual),
+ rectSize(expected),
+ 'Size of rect ' + i + ' should match expected');
+ }
+ }, 'range.setStart/setEnd(node, offset) should include rect of image.');
+
+
+ test(function() {
+ var range = document.createRange();
+ var actualElement = document.getElementById('test6');
+ range.selectNode(actualElement);
+ var actualRects = rectsForRange(range);
+
+ var expectedElement = document.getElementById('test6-expected');
+ var expectedRects = [
+ expectedElement.getBoundingClientRect()
+ ].concat(rectsForChildren(expectedElement));
+
+ if (!window.testRunner) {
+ showRects(actualRects);
+ showRects(expectedRects);
+ }
+
+ assert_equals(actualRects.length, expectedRects.length,
+ 'Number of rects returned by getClientRects should match expected.');
+
+ for (var i = 0; i < actualRects.length; i++) {
+ var actual = actualRects[i];
+ var expected = expectedRects[i];
+ assert_equals(adjustedRectPosition(actualElement, actual),
+ adjustedRectPosition(expectedElement, expected),
+ 'Position of rect ' + i + ' should match expected.');
+ assert_equals(rectSize(actual),
+ rectSize(expected),
+ 'Size of rect ' + i + ' should match expected');
+ }
+ }, 'range.selectNode(container) should not include green/blue boxes.');
+
+
+ test(function() {
+ var range = document.createRange();
+ var actualElement = document.getElementById('test7');
+ range.selectNodeContents(actualElement);
+ var actualRects = rectsForRange(range);
+
+ var expectedElement = document.getElementById('test7-expected');
+ var expectedRects = rectsForChildren(expectedElement);
+
+ if (!window.testRunner) {
+ showRects(actualRects);
+ showRects(expectedRects);
+ }
+
+ assert_equals(actualRects.length, expectedRects.length,
+ 'Number of rects returned by getClientRects should match expected.');
+
+ for (var i = 0; i < actualRects.length; i++) {
+ var actual = actualRects[i];
+ var expected = expectedRects[i];
+ assert_equals(adjustedRectPosition(actualElement, actual),
+ adjustedRectPosition(expectedElement, expected),
+ 'Position of rect ' + i + ' should match expected.');
+ assert_equals(rectSize(actual),
+ rectSize(expected),
+ 'Size of rect ' + i + ' should match expected');
+ }
+ }, 'range.selectNodeContents() should select green but not blue box.');
+
+
+ test(function() {
+ var range = document.createRange();
+ var actualElement = document.getElementById('test8');
+ range.selectNodeContents(actualElement);
+ var actualRects = rectsForRange(range);
+
+ var expectedElement = document.getElementById('test8-expected');
+ var expectedRects = rectsForChildren(expectedElement);
+
+ if (!window.testRunner) {
+ showRects(actualRects);
+ showRects(expectedRects);
+ }
+
+ assert_equals(actualRects.length, expectedRects.length,
+ 'Number of rects returned by getClientRects should match expected.');
+
+ for (var i = 0; i < actualRects.length; i++) {
+ var actual = actualRects[i];
+ var expected = expectedRects[i];
+ assert_equals(adjustedRectPosition(actualElement, actual),
+ adjustedRectPosition(expectedElement, expected),
+ 'Position of rect ' + i + ' should match expected.');
+ assert_equals(rectSize(actual),
+ rectSize(expected),
+ 'Size of rect ' + i + ' should match expected');
+ }
+ }, 'transform, range.selectNodeContents() has rects for each line.');
+
+
+ test(function() {
+ var range = document.createRange();
+ var actualElement = document.getElementById('test9');
+ range.selectNodeContents(actualElement);
+ var actualRects = rectsForRange(range);
+
+ var expectedElement = document.getElementById('test9-expected');
+ var expectedRects = rectsForChildren(expectedElement);
+
+ if (!window.testRunner) {
+ showRects(actualRects);
+ showRects(expectedRects);
+ }
+
+ assert_equals(actualRects.length, expectedRects.length,
+ 'Number of rects returned by getClientRects should match expected.');
+
+ for (var i = 0; i < actualRects.length; i++) {
+ var actual = actualRects[i];
+ var expected = expectedRects[i];
+ assert_equals(adjustedRectPosition(actualElement, actual),
+ adjustedRectPosition(expectedElement, expected),
+ 'Position of rect ' + i + ' should match expected.');
+ assert_equals(rectSize(actual),
+ rectSize(expected),
+ 'Size of rect ' + i + ' should match expected');
+ }
+ }, 'vertical, range.selectNodeContents() has rects for each line.');
+ </script>
+ </body>
+</html>
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/platform/linux/fast/dom/Range/getClientRects-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698