Merge Blink test case
authorbfulgham@apple.com <bfulgham@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 15 Jul 2016 00:39:51 +0000 (00:39 +0000)
committerbfulgham@apple.com <bfulgham@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 15 Jul 2016 00:39:51 +0000 (00:39 +0000)
https://bugs.webkit.org/show_bug.cgi?id=117422

Patch is from a set of Blink changes (patches by <leviw@chromium.org>):
<https://chromium.googlesource.com/chromium/blink/+/507e1576555bd2ce6688206f28339c25761893b1>
<https://chromium.googlesource.com/chromium/blink/+/4c95872f52340cf0cf9a2a7078bb63a94f38d302>

* fast/list/list-style-position-inside-expected.txt: Added.
* fast/list/list-style-position-inside.html: Added.
* fast/sub-pixel/float-list-inside-expected.txt: Added.
* fast/sub-pixel/float-list-inside.html: Added.

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

LayoutTests/ChangeLog
LayoutTests/fast/lists/list-style-position-inside-expected.txt [new file with mode: 0644]
LayoutTests/fast/lists/list-style-position-inside.html [new file with mode: 0644]
LayoutTests/fast/sub-pixel/float-list-inside-expected.txt [new file with mode: 0644]
LayoutTests/fast/sub-pixel/float-list-inside.html [new file with mode: 0644]

index d37f46b..ed6f739 100644 (file)
@@ -1,3 +1,17 @@
+2016-07-14  Brent Fulgham  <bfulgham@apple.com>
+
+        Merge Blink test case
+        https://bugs.webkit.org/show_bug.cgi?id=117422
+
+        Patch is from a set of Blink changes (patches by <leviw@chromium.org>):
+        <https://chromium.googlesource.com/chromium/blink/+/507e1576555bd2ce6688206f28339c25761893b1>
+        <https://chromium.googlesource.com/chromium/blink/+/4c95872f52340cf0cf9a2a7078bb63a94f38d302>
+
+        * fast/list/list-style-position-inside-expected.txt: Added.
+        * fast/list/list-style-position-inside.html: Added.
+        * fast/sub-pixel/float-list-inside-expected.txt: Added.
+        * fast/sub-pixel/float-list-inside.html: Added.
+
 2016-07-14  John Wilander  <wilander@apple.com>
 
         Remove credentials in URL when accessed through location.href
diff --git a/LayoutTests/fast/lists/list-style-position-inside-expected.txt b/LayoutTests/fast/lists/list-style-position-inside-expected.txt
new file mode 100644 (file)
index 0000000..a01d799
--- /dev/null
@@ -0,0 +1,9 @@
+PASS All items in floating ul has the expected height.
+PASS Width of first item in floating ul is affected by list marker as expected.
+PASS All items in floating ol has the expected height.
+PASS Width of first item in floating ol is affected by list marker as expected.
+PASS All items in block ul has the expected height.
+PASS Width of first item in block ul is affected by list marker as expected.
+PASS All items in block ol has the expected height.
+PASS Width of first item in block ol is affected by list marker as expected.
+
diff --git a/LayoutTests/fast/lists/list-style-position-inside.html b/LayoutTests/fast/lists/list-style-position-inside.html
new file mode 100644 (file)
index 0000000..cca2e91
--- /dev/null
@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <style>
+            section {
+                display: inline-block;
+                width: 300px;
+                border: 1px solid blue;
+                margin: 5px 0;
+                padding: 5px;
+            }
+            section > h1 {
+                font-size: 1.1em;
+                margin: 0;
+            }
+            
+            li {
+                list-style-position: inside;
+                margin: 5px;
+                background: silver;
+            }
+            ul, ol {
+                margin: 0;
+                padding: 0;
+            }
+            
+            .floating > ul > li, .floating > ol > li {
+                float: left;
+            }
+            .floating > p {
+                clear: both;
+            }
+            
+            .block > ul, .block > ol {
+                display: inline-block;
+                margin: 0;
+                padding: 0;
+            }
+        </style>
+        <script src="../../resources/js-test-pre.js"></script>
+    </head>
+    <body>
+        <header>
+            <h1>list-style-position: inside</h1>
+            <p>
+                Tests that lists with header the list marker displayed
+                inside the item works as expected.
+            </p>
+        </header>
+        
+        <section class="floating">
+            <h1>Floating, Unordered</h1>
+            <ul>
+                <li>Item A</li>
+                <li>Item B</li>
+                <li>Item C</li>
+            </ul>
+            <p>
+                The list markers above should be inside the respective
+                list item boxes.
+            </p>
+        </section>
+        <section class="floating">
+            <h1>Floating, Ordered</h1>
+            <ol>
+                <li>Item A</li>
+                <li>Item B</li>
+                <li>Item C</li>
+            </ol>
+            <p>
+                The list markers above should be inside the respective
+                list item boxes.
+            </p>
+        </section>
+        <br>
+        <section class="block">
+            <h1>Block, Unordered</h1>
+            <ul>
+                <li>Item A</li>
+                <li>Item B</li>
+                <li>Item C</li>
+            </ul>
+            <p>
+                The list markers above should be inside the respective
+                list item boxes and the text should not wrap.
+            </p>
+        </section>
+        
+        <section class="block">
+            <h1>Block, Ordered</h1>
+            <ol>
+                <li>Item A</li>
+                <li>Item B</li>
+                <li>Item C</li>
+            </ol>
+            <p>
+                The list markers above should be inside the respective
+                list item boxes and the text should not wrap.
+            </p>
+        </section>
+        <br>
+        
+        <section class="reference">
+            <h1>Reference, Unordered</h1>
+            <ul>
+                <li>Item A</li>
+            </ul>
+        </section>
+        <section class="reference">
+            <h1>Reference, Ordered</h1>
+            <ol>
+                <li>Item A</li>
+            </ol>
+        </section>
+        
+        <script>
+            function getItems(className, tagName)
+            {
+                var selector = '.' + className + ' > ' + tagName;
+                var block = document.querySelector(selector);
+                return block.getElementsByTagName('li');
+            }
+            function test(className, tagName)
+            {
+                var referenceHeight = getItems('reference', tagName)[0].
+                    getBoundingClientRect().height;
+                var testItems = getItems(className, tagName);
+                
+                // Check that all items have the right height
+                var failed = 0;
+                for (var item, i = 0; item = testItems[i]; i++) {
+                    var rect = item.getBoundingClientRect();
+                    if (rect.height != referenceHeight) {
+                        failed++;
+                        testFailed('Item ' + i + ' in ' + className +
+                            ' ' + tagName + ' has height of ' +
+                            rect.height + 'px, expecting ' +
+                            referenceHeight + 'px.');
+                    }
+                }
+                if (!failed)
+                    testPassed('All items in ' + className + ' ' +
+                        tagName + ' has the expected height.');
+                // Change list-style-type to none and back to ensure
+                // that the width changes.
+                for (var item, i = 0; item = testItems[i]; i++) {
+                    item.style.listStyleType = 'none';
+                }
+                var width = testItems[0].getBoundingClientRect().width;
+                for (var item, i = 0; item = testItems[i]; i++) {
+                    item.style.listStyleType = '';
+                }
+                if (testItems[0].getBoundingClientRect().width != width)
+                    testPassed('Width of first item in ' + className +
+                        ' ' + tagName + ' is affected by list marker ' + 
+                        'as expected.');
+                else
+                    testFailed('Width of first item in ' + className +
+                        ' ' + tagName + ' is not affected by list ' + 
+                        'marker as expected.');
+            }
+            
+            test('floating', 'ul');
+            test('floating', 'ol');
+            test('block', 'ul');
+            test('block', 'ol');
+            // Only include test results in test output.
+            if (window.testRunner) {
+                while (document.body.lastChild != document.body.firstChild)
+                    document.body.removeChild(document.body.lastChild);
+            }
+        </script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/LayoutTests/fast/sub-pixel/float-list-inside-expected.txt b/LayoutTests/fast/sub-pixel/float-list-inside-expected.txt
new file mode 100644 (file)
index 0000000..cc8ccf6
--- /dev/null
@@ -0,0 +1,4 @@
+PASS Links are on the same line.
+PASS First link didn't move after layout.
+PASS Last link didn't move after layout.
+About UsContact Us
diff --git a/LayoutTests/fast/sub-pixel/float-list-inside.html b/LayoutTests/fast/sub-pixel/float-list-inside.html
new file mode 100644 (file)
index 0000000..f873426
--- /dev/null
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+    body {
+    }
+    nav {
+        position: absolute;
+        top: 100px;
+        width: 400px;
+        height: 40px;
+        border: 1px solid blue;
+    }
+    nav > ul {
+        float: right;
+        list-style: inside;
+    }
+    nav > ul > li {
+        float: left;
+    }
+    nav > ul > li > a {
+        text-decoration: none;
+    }
+</style>
+<script src="../../resources/js-test-pre.js"></script>
+</head>
+<body>
+    <nav>
+        <ul>
+            <li><a href="#">About Us</a></li>
+            <li><a href="#">Contact Us</a></li>
+        </ul>
+    </nav>
+    <script>
+        if (window.testRunner)
+            testRunner.waitUntilDone();
+
+        var list = document.getElementsByTagName('ul')[0];
+        var firstLinkTop = list.firstElementChild.getBoundingClientRect().top;
+        var lastLinkTop = list.lastElementChild.getBoundingClientRect().top;
+
+        if (firstLinkTop == lastLinkTop)
+            testPassed('Links are on the same line.');
+        else
+            shouldBe('firstLinkTop', 'lastLinkTop');
+
+        window.onload = function() {
+            list.style.marginRight = '-10px';
+            list.offsetTop;
+            list.style.marginRight = 'auto';
+
+            if (firstLinkTop == list.firstElementChild.getBoundingClientRect().top)
+                testPassed('First link didn\'t move after layout.');
+            else
+                shouldBe('list.firstElementChild.getBoundingClientRect().top', 'firstLinkTop');
+
+            if (lastLinkTop == list.lastElementChild.getBoundingClientRect().top)
+                testPassed('Last link didn\'t move after layout.');
+            else
+                shouldBe('list.lastElementChild.getBoundingClientRect().top', 'lastLinkTop');
+
+            if (window.testRunner)
+                testRunner.notifyDone();
+        };
+    </script>
+</body>
+</html>
\ No newline at end of file