Diff
Modified: trunk/LayoutTests/ChangeLog (237902 => 237903)
--- trunk/LayoutTests/ChangeLog 2018-11-07 00:46:34 UTC (rev 237902)
+++ trunk/LayoutTests/ChangeLog 2018-11-07 01:22:41 UTC (rev 237903)
@@ -1,3 +1,39 @@
+2018-11-06 Myles C. Maxfield <mmaxfi...@apple.com>
+
+ Implement text-underline-offset and text-decoration-thickness
+ https://bugs.webkit.org/show_bug.cgi?id=190774
+
+ Reviewed by Dean Jackson.
+
+ * animations/text-decoration-thickness-expected.txt: Added.
+ * animations/text-decoration-thickness.html: Added.
+ * animations/text-underline-offset-expected.txt: Added.
+ * animations/text-underline-offset.html: Added.
+ * fast/css3-text/css3-text-decoration/text-decoration-offset-2-expected-mismatch.html: Added.
+ * fast/css3-text/css3-text-decoration/text-decoration-offset-2.html: Added.
+ * fast/css3-text/css3-text-decoration/text-decoration-offset-3-expected-mismatch.html: Added.
+ * fast/css3-text/css3-text-decoration/text-decoration-offset-3.html: Added.
+ * fast/css3-text/css3-text-decoration/text-decoration-offset-auto-length-expected.html: Added.
+ * fast/css3-text/css3-text-decoration/text-decoration-offset-auto-length.html: Added.
+ * fast/css3-text/css3-text-decoration/text-decoration-offset-baseline-expected.html: Added.
+ * fast/css3-text/css3-text-decoration/text-decoration-offset-baseline.html: Added.
+ * fast/css3-text/css3-text-decoration/text-decoration-offset-expected-mismatch.html: Added.
+ * fast/css3-text/css3-text-decoration/text-decoration-offset-from-font-auto-expected.html: Added.
+ * fast/css3-text/css3-text-decoration/text-decoration-offset-from-font-auto.html: Added.
+ * fast/css3-text/css3-text-decoration/text-decoration-offset-from-font-length-expected.html: Added.
+ * fast/css3-text/css3-text-decoration/text-decoration-offset-from-font-length.html: Added.
+ * fast/css3-text/css3-text-decoration/text-decoration-offset-repaint-expected.html: Added.
+ * fast/css3-text/css3-text-decoration/text-decoration-offset-repaint.html: Added.
+ * fast/css3-text/css3-text-decoration/text-decoration-offset-under-auto-expected.html: Added.
+ * fast/css3-text/css3-text-decoration/text-decoration-offset-under-auto.html: Added.
+ * fast/css3-text/css3-text-decoration/text-decoration-offset-under-length-expected.html: Added.
+ * fast/css3-text/css3-text-decoration/text-decoration-offset-under-length.html: Added.
+ * fast/css3-text/css3-text-decoration/text-decoration-offset.html: Added.
+ * fast/css3-text/css3-text-decoration/text-decoration-thickness-length-expected.html: Added.
+ * fast/css3-text/css3-text-decoration/text-decoration-thickness-length.html: Added.
+ * fast/css3-text/css3-text-decoration/text-decoration-thickness-repaint-expected.html: Added.
+ * fast/css3-text/css3-text-decoration/text-decoration-thickness-repaint.html: Added.
+
2018-11-06 Dean Jackson <d...@apple.com>
Add some basic pointer events tests
Added: trunk/LayoutTests/animations/text-decoration-thickness-expected.txt (0 => 237903)
--- trunk/LayoutTests/animations/text-decoration-thickness-expected.txt (rev 0)
+++ trunk/LayoutTests/animations/text-decoration-thickness-expected.txt 2018-11-07 01:22:41 UTC (rev 237903)
@@ -0,0 +1,5 @@
+Hello
+PASS - "text-decoration-thickness" property for "box" element at 0.5s saw something close to: 16.6666
+PASS - "text-decoration-thickness" property for "box" element at 1s saw something close to: 33.3333
+PASS - "text-decoration-thickness" property for "box" element at 2s saw something close to: 66.6666
+
Property changes on: trunk/LayoutTests/animations/text-decoration-thickness-expected.txt
___________________________________________________________________
Added: svn:eol-style
+native
\ No newline at end of property
Added: svn:keywords
+Author Date Id Rev URL
\ No newline at end of property
Added: trunk/LayoutTests/animations/text-decoration-thickness.html (0 => 237903)
--- trunk/LayoutTests/animations/text-decoration-thickness.html (rev 0)
+++ trunk/LayoutTests/animations/text-decoration-thickness.html 2018-11-07 01:22:41 UTC (rev 237903)
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src=""
+<style>
+@keyframes TheAnimation {
+ from {
+ text-decoration-thickness: 0px;
+ }
+ to {
+ text-decoration-thickness: 100px;
+ }
+}
+
+#box {
+ text-decoration: underline;
+ animation-duration: 3s;
+ animation-timing-function: linear;
+}
+</style>
+</head>
+<body>
+<div id="box">Hello</div>
+<div id="result"></div>
+<script>
+var expectedValues = [
+ // [animation-name, time, element-id, property, expected-value, tolerance]
+ ["TheAnimation", 0.5, "box", "text-decoration-thickness", "16.6666", 5],
+ ["TheAnimation", 1.0, "box", "text-decoration-thickness", "33.3333", 5],
+ ["TheAnimation", 2.0, "box", "text-decoration-thickness", "66.6666", 5],
+];
+
+document.getElementById("box").style.animationName = "TheAnimation";
+runAnimationTest(expectedValues, undefined, undefined, undefined, false, undefined);
+</script>
+</body>
+</html>
Added: trunk/LayoutTests/animations/text-underline-offset-expected.txt (0 => 237903)
--- trunk/LayoutTests/animations/text-underline-offset-expected.txt (rev 0)
+++ trunk/LayoutTests/animations/text-underline-offset-expected.txt 2018-11-07 01:22:41 UTC (rev 237903)
@@ -0,0 +1,5 @@
+Hello
+PASS - "text-underline-offset" property for "box" element at 0.5s saw something close to: 16.6666
+PASS - "text-underline-offset" property for "box" element at 1s saw something close to: 33.3333
+PASS - "text-underline-offset" property for "box" element at 2s saw something close to: 66.6666
+
Property changes on: trunk/LayoutTests/animations/text-underline-offset-expected.txt
___________________________________________________________________
Added: svn:eol-style
+native
\ No newline at end of property
Added: svn:keywords
+Author Date Id Rev URL
\ No newline at end of property
Added: trunk/LayoutTests/animations/text-underline-offset.html (0 => 237903)
--- trunk/LayoutTests/animations/text-underline-offset.html (rev 0)
+++ trunk/LayoutTests/animations/text-underline-offset.html 2018-11-07 01:22:41 UTC (rev 237903)
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src=""
+<style>
+@keyframes TheAnimation {
+ from {
+ text-underline-offset: 0px;
+ }
+ to {
+ text-underline-offset: 100px;
+ }
+}
+
+#box {
+ text-decoration: underline;
+ animation-duration: 3s;
+ animation-timing-function: linear;
+}
+</style>
+</head>
+<body>
+<div id="box">Hello</div>
+<div id="result"></div>
+<script>
+var expectedValues = [
+ // [animation-name, time, element-id, property, expected-value, tolerance]
+ ["TheAnimation", 0.5, "box", "text-underline-offset", "16.6666", 5],
+ ["TheAnimation", 1.0, "box", "text-underline-offset", "33.3333", 5],
+ ["TheAnimation", 2.0, "box", "text-underline-offset", "66.6666", 5],
+];
+
+document.getElementById("box").style.animationName = "TheAnimation";
+runAnimationTest(expectedValues, undefined, undefined, undefined, false, undefined);
+</script>
+</body>
+</html>
Added: trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-2-expected-mismatch.html (0 => 237903)
--- trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-2-expected-mismatch.html (rev 0)
+++ trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-2-expected-mismatch.html 2018-11-07 01:22:41 UTC (rev 237903)
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+<div style="font: 48px 'Times'; text-decoration: underline; -webkit-text-decoration-skip: none; text-underline-position: under;">Hello</div>
+</body>
+</html>
Added: trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-2.html (0 => 237903)
--- trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-2.html (rev 0)
+++ trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-2.html 2018-11-07 01:22:41 UTC (rev 237903)
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+<div style="font: 48px 'Times'; text-decoration: underline; -webkit-text-decoration-skip: none; text-underline-position: auto;">Hello</div>
+</body>
+</html>
Added: trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-3-expected-mismatch.html (0 => 237903)
--- trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-3-expected-mismatch.html (rev 0)
+++ trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-3-expected-mismatch.html 2018-11-07 01:22:41 UTC (rev 237903)
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+<div style="font: 48px 'Times'; text-decoration: underline; -webkit-text-decoration-skip: none; text-underline-position: from-font;">Hello</div>
+</body>
+</html>
Added: trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-3.html (0 => 237903)
--- trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-3.html (rev 0)
+++ trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-3.html 2018-11-07 01:22:41 UTC (rev 237903)
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+<div style="font: 48px 'Times'; text-decoration: underline; -webkit-text-decoration-skip: none; text-underline-position: under;">Hello</div>
+</body>
+</html>
Added: trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-auto-length-expected.html (0 => 237903)
--- trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-auto-length-expected.html (rev 0)
+++ trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-auto-length-expected.html 2018-11-07 01:22:41 UTC (rev 237903)
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+This test makes sure the underline is placed in the right vertical place.
+<div style="position: relative;">
+<div style="font: 48px 'Times'; text-decoration: underline; -webkit-text-decoration-skip: none; text-underline-position: auto; text-underline-offset: 0px; position: absolute; left: 0px; top: 10px; color: transparent; -webkit-text-decoration-color: black;">Hello</div>
+</div>
+</body>
+</html>
Added: trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-auto-length.html (0 => 237903)
--- trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-auto-length.html (rev 0)
+++ trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-auto-length.html 2018-11-07 01:22:41 UTC (rev 237903)
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+This test makes sure the underline is placed in the right vertical place.
+<div style="position: relative;">
+<div style="font: 48px 'Times'; text-decoration: underline; -webkit-text-decoration-skip: none; text-underline-position: auto; text-underline-offset: 10px; position: absolute; left: 0px; top: 0px; color: transparent; -webkit-text-decoration-color: black;">Hello</div>
+</div>
+</body>
+</html>
Added: trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-baseline-expected.html (0 => 237903)
--- trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-baseline-expected.html (rev 0)
+++ trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-baseline-expected.html 2018-11-07 01:22:41 UTC (rev 237903)
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+This test makes sure the underline is placed in the right vertical place.
+<div style="position: relative;">
+<div style="font: 48px 'Times';">Hello<div style="display: inline-block; width: 1px; height: 60px;"></div></div>
+<div style="position: absolute; left: 100px; top: 0px; width: 300px; height: 100px; background: black;"></div>
+<div style="position: absolute; left: 0px; top: 60px; width: 300px; height: 3px; background: black;"></div>
+</div>
+</body>
+</html>
Added: trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-baseline.html (0 => 237903)
--- trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-baseline.html (rev 0)
+++ trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-baseline.html 2018-11-07 01:22:41 UTC (rev 237903)
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+This test makes sure the underline is placed in the right vertical place.
+<div style="position: relative;">
+<div style="font: 48px 'Times'; text-decoration: underline; -webkit-text-decoration-skip: none; text-underline-position: auto; text-underline-offset: 0px;">Hello<div style="display: inline-block; width: 1px; height: 60px;"></div></div>
+<div style="position: absolute; left: 100px; top: 0px; width: 300px; height: 100px; background: black;"></div>
+</div>
+</body>
+</html>
Added: trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-expected-mismatch.html (0 => 237903)
--- trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-expected-mismatch.html (rev 0)
+++ trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-expected-mismatch.html 2018-11-07 01:22:41 UTC (rev 237903)
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+<div style="font: 48px 'Times'; text-decoration: underline; -webkit-text-decoration-skip: none; text-underline-position: from-font;">Hello</div>
+</body>
+</html>
Added: trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-from-font-auto-expected.html (0 => 237903)
--- trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-from-font-auto-expected.html (rev 0)
+++ trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-from-font-auto-expected.html 2018-11-07 01:22:41 UTC (rev 237903)
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+This test makes sure the underline is placed in the right vertical place.
+<div style="position: relative;">
+<div style="font: 48px 'Times'; text-decoration: underline; -webkit-text-decoration-skip: none; text-underline-position: from-font; text-underline-offset: 0px; position: absolute; left: 0px; top: 0px; color: transparent; -webkit-text-decoration-color: black;">Hello</div>
+</div>
+</body>
+</html>
Added: trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-from-font-auto.html (0 => 237903)
--- trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-from-font-auto.html (rev 0)
+++ trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-from-font-auto.html 2018-11-07 01:22:41 UTC (rev 237903)
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+This test makes sure the underline is placed in the right vertical place.
+<div style="position: relative;">
+<div style="font: 48px 'Times'; text-decoration: underline; -webkit-text-decoration-skip: none; text-underline-position: from-font; text-underline-offset: auto; position: absolute; left: 0px; top: 0px; color: transparent; -webkit-text-decoration-color: black;">Hello</div>
+</div>
+</body>
+</html>
Added: trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-from-font-length-expected.html (0 => 237903)
--- trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-from-font-length-expected.html (rev 0)
+++ trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-from-font-length-expected.html 2018-11-07 01:22:41 UTC (rev 237903)
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+This test makes sure the underline is placed in the right vertical place.
+<div style="position: relative;">
+<div style="font: 48px 'Times'; text-decoration: underline; -webkit-text-decoration-skip: none; text-underline-position: from-font; text-underline-offset: 0px; position: absolute; left: 0px; top: 10px; color: transparent; -webkit-text-decoration-color: black;">Hello</div>
+</div>
+</body>
+</html>
Added: trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-from-font-length.html (0 => 237903)
--- trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-from-font-length.html (rev 0)
+++ trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-from-font-length.html 2018-11-07 01:22:41 UTC (rev 237903)
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+This test makes sure the underline is placed in the right vertical place.
+<div style="position: relative;">
+<div style="font: 48px 'Times'; text-decoration: underline; -webkit-text-decoration-skip: none; text-underline-position: from-font; text-underline-offset: 10px; position: absolute; left: 0px; top: 0px; color: transparent; -webkit-text-decoration-color: black;">Hello</div>
+</div>
+</body>
+</html>
Added: trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-repaint-expected.html (0 => 237903)
--- trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-repaint-expected.html (rev 0)
+++ trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-repaint-expected.html 2018-11-07 01:22:41 UTC (rev 237903)
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+This test makes sure repaint rects are correct for positioned underlines. The test passes if you don't see anything below.
+</body>
+</html>
Added: trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-repaint.html (0 => 237903)
--- trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-repaint.html (rev 0)
+++ trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-repaint.html 2018-11-07 01:22:41 UTC (rev 237903)
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+This test makes sure repaint rects are correct for positioned underlines. The test passes if you don't see anything below.
+<div id="target" style="font: 48px 'Times'; text-decoration: underline; text-underline-offset: 100px;">Hello</div>
+<script>
+if (window.testRunner)
+ testRunner.waitUntilDone();
+window.setTimeout(function() {
+ let target = document.getElementById("target");
+ target.parentElement.removeChild(target);
+ if (window.testRunner)
+ testRunner.notifyDone();
+}, 20);
+</script>
+</body>
+</html>
Added: trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-under-auto-expected.html (0 => 237903)
--- trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-under-auto-expected.html (rev 0)
+++ trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-under-auto-expected.html 2018-11-07 01:22:41 UTC (rev 237903)
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+This test makes sure the underline is placed in the right vertical place.
+<div style="position: relative;">
+<div style="font: 48px 'Times'; text-decoration: underline; -webkit-text-decoration-skip: none; text-underline-position: under; text-underline-offset: 0px; position: absolute; left: 0px; top: 0px; color: transparent; -webkit-text-decoration-color: black;">Hello</div>
+</div>
+</body>
+</html>
Added: trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-under-auto.html (0 => 237903)
--- trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-under-auto.html (rev 0)
+++ trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-under-auto.html 2018-11-07 01:22:41 UTC (rev 237903)
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+This test makes sure the underline is placed in the right vertical place.
+<div style="position: relative;">
+<div style="font: 48px 'Times'; text-decoration: underline; -webkit-text-decoration-skip: none; text-underline-position: under; text-underline-offset: auto; position: absolute; left: 0px; top: 0px; color: transparent; -webkit-text-decoration-color: black;">Hello</div>
+</div>
+</body>
+</html>
Added: trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-under-length-expected.html (0 => 237903)
--- trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-under-length-expected.html (rev 0)
+++ trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-under-length-expected.html 2018-11-07 01:22:41 UTC (rev 237903)
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+This test makes sure the underline is placed in the right vertical place.
+<div style="position: relative;">
+<div style="font: 48px 'Times'; text-decoration: underline; -webkit-text-decoration-skip: none; text-underline-position: under; text-underline-offset: 0px; position: absolute; left: 0px; top: 10px; color: transparent; -webkit-text-decoration-color: black;">Hello</div>
+</div>
+</body>
+</html>
Added: trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-under-length.html (0 => 237903)
--- trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-under-length.html (rev 0)
+++ trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset-under-length.html 2018-11-07 01:22:41 UTC (rev 237903)
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+This test makes sure the underline is placed in the right vertical place.
+<div style="position: relative;">
+<div style="font: 48px 'Times'; text-decoration: underline; -webkit-text-decoration-skip: none; text-underline-position: under; text-underline-offset: 10px; position: absolute; left: 0px; top: 0px; color: transparent; -webkit-text-decoration-color: black;">Hello</div>
+</div>
+</body>
+</html>
Added: trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset.html (0 => 237903)
--- trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset.html (rev 0)
+++ trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-offset.html 2018-11-07 01:22:41 UTC (rev 237903)
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+<div style="font: 48px 'Times'; text-decoration: underline; -webkit-text-decoration-skip: none; text-underline-position: auto;">Hello</div>
+</body>
+</html>
Added: trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-thickness-length-expected.html (0 => 237903)
--- trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-thickness-length-expected.html (rev 0)
+++ trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-thickness-length-expected.html 2018-11-07 01:22:41 UTC (rev 237903)
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+<div style="position: relative;">
+<div style="font: 48px 'Times'; text-decoration: underline; text-decoration-thickness: 40px; -webkit-text-decoration-skip: none; text-underline-offset: 0px;">Hello<div style="display: inline-block; width: 1px; height: 60px;"></div></div>
+<div style="position: absolute; left: 0px; top: 60px; width: 100px; height: 40px; background: black;"></div>
+<div style="position: absolute; left: 100px; top: 0px; width: 100px; height: 100px; background: black;"></div>
+</div>
+</body>
+</html>
Added: trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-thickness-length.html (0 => 237903)
--- trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-thickness-length.html (rev 0)
+++ trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-thickness-length.html 2018-11-07 01:22:41 UTC (rev 237903)
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+<div style="position: relative;">
+<div style="font: 48px 'Times'; text-decoration: underline; text-decoration-thickness: 40px; -webkit-text-decoration-skip: none; text-underline-offset: 0px;">Hello<div style="display: inline-block; width: 1px; height: 60px;"></div></div>
+<div style="position: absolute; left: 100px; top: 0px; width: 100px; height: 100px; background: black;"></div>
+</div>
+</body>
+</html>
Added: trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-thickness-repaint-expected.html (0 => 237903)
--- trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-thickness-repaint-expected.html (rev 0)
+++ trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-thickness-repaint-expected.html 2018-11-07 01:22:41 UTC (rev 237903)
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+This test makes sure repaint rects are correct for thick underlines. The test passes if you don't see anything below.
+</body>
+</html>
Added: trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-thickness-repaint.html (0 => 237903)
--- trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-thickness-repaint.html (rev 0)
+++ trunk/LayoutTests/fast/css3-text/css3-text-decoration/text-decoration-thickness-repaint.html 2018-11-07 01:22:41 UTC (rev 237903)
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+This test makes sure repaint rects are correct for thick underlines. The test passes if you don't see anything below.
+<div id="target" style="font: 48px 'Times'; text-decoration: underline; text-decoration-thickness: 100px;">Hello</div>
+<script>
+if (window.testRunner)
+ testRunner.waitUntilDone();
+window.setTimeout(function() {
+ let target = document.getElementById("target");
+ target.parentElement.removeChild(target);
+ if (window.testRunner)
+ testRunner.notifyDone();
+}, 20);
+</script>
+</body>
+</html>
Modified: trunk/Source/WebCore/ChangeLog (237902 => 237903)
--- trunk/Source/WebCore/ChangeLog 2018-11-07 00:46:34 UTC (rev 237902)
+++ trunk/Source/WebCore/ChangeLog 2018-11-07 01:22:41 UTC (rev 237903)
@@ -1,3 +1,56 @@
+2018-11-06 Myles C. Maxfield <mmaxfi...@apple.com>
+
+ Implement text-underline-offset and text-decoration-thickness
+ https://bugs.webkit.org/show_bug.cgi?id=190774
+
+ Reviewed by Dean Jackson.
+
+ Because of our existing infrastructure for text decorations, adding support for these
+ is fairly simple. This patch updates our existing functions to handle thick & placed
+ underlines, as well as updating our repaint code to correcly handle repainting them.
+ It also handles animations.
+
+ Tests: animations/text-decoration-thickness.html
+ animations/text-underline-offset.html
+ fast/css3-text/css3-text-decoration/text-decoration-offset-2.html
+ fast/css3-text/css3-text-decoration/text-decoration-offset-3.html
+ fast/css3-text/css3-text-decoration/text-decoration-offset-auto-length.html
+ fast/css3-text/css3-text-decoration/text-decoration-offset-baseline.html
+ fast/css3-text/css3-text-decoration/text-decoration-offset-from-font-auto.html
+ fast/css3-text/css3-text-decoration/text-decoration-offset-from-font-length.html
+ fast/css3-text/css3-text-decoration/text-decoration-offset-repaint.html
+ fast/css3-text/css3-text-decoration/text-decoration-offset-under-auto.html
+ fast/css3-text/css3-text-decoration/text-decoration-offset-under-length.html
+ fast/css3-text/css3-text-decoration/text-decoration-offset.html
+ fast/css3-text/css3-text-decoration/text-decoration-thickness-length.html
+ fast/css3-text/css3-text-decoration/text-decoration-thickness-repaint.html
+
+ * page/animation/CSSPropertyAnimation.cpp:
+ (WebCore::blendFunc):
+ (WebCore::CSSPropertyAnimationWrapperMap::CSSPropertyAnimationWrapperMap):
+ * platform/graphics/FontMetrics.h:
+ (WebCore::FontMetrics::underlinePosition const):
+ (WebCore::FontMetrics::setUnderlinePosition):
+ (WebCore::FontMetrics::underlineThickness const):
+ (WebCore::FontMetrics::setUnderlineThickness):
+ * platform/graphics/cocoa/FontCocoa.mm:
+ (WebCore::Font::platformInit):
+ * rendering/InlineFlowBox.cpp:
+ (WebCore::InlineFlowBox::addToLine):
+ * rendering/SimpleLineLayout.cpp:
+ (WebCore::SimpleLineLayout::canUseForStyle):
+ * rendering/TextDecorationPainter.cpp:
+ (WebCore::TextDecorationPainter::paintTextDecoration):
+ * rendering/style/RenderStyle.cpp:
+ (WebCore::RenderStyle::changeAffectsVisualOverflow const):
+ * rendering/style/TextDecorationThickness.h:
+ (WebCore::TextDecorationThickness::resolve const):
+ * style/InlineTextBoxStyle.cpp:
+ (WebCore::computeUnderlineOffset):
+ (WebCore::visualOverflowForDecorations):
+ * style/InlineTextBoxStyle.h:
+ (WebCore::textDecorationStrokeThickness): Deleted.
+
2018-11-06 John Wilander <wilan...@apple.com>
Resource Load Statistics: Remove cap on partitioned cache max age if it matches a network reload (redirect-only)
Modified: trunk/Source/WebCore/page/animation/CSSPropertyAnimation.cpp (237902 => 237903)
--- trunk/Source/WebCore/page/animation/CSSPropertyAnimation.cpp 2018-11-07 00:46:34 UTC (rev 237902)
+++ trunk/Source/WebCore/page/animation/CSSPropertyAnimation.cpp 2018-11-07 01:22:41 UTC (rev 237903)
@@ -260,6 +260,20 @@
return result > 0. ? Visibility::Visible : (to != Visibility::Visible ? to : from);
}
+static inline TextUnderlineOffset blendFunc(const CSSPropertyBlendingClient* anim, const TextUnderlineOffset& from, const TextUnderlineOffset& to, double progress)
+{
+ if (from.isLength() && to.isLength())
+ return TextUnderlineOffset::createWithLength(blendFunc(anim, from.lengthValue(), to.lengthValue(), progress));
+ return TextUnderlineOffset::createWithAuto();
+}
+
+static inline TextDecorationThickness blendFunc(const CSSPropertyBlendingClient* anim, const TextDecorationThickness& from, const TextDecorationThickness& to, double progress)
+{
+ if (from.isLength() && to.isLength())
+ return TextDecorationThickness::createWithLength(blendFunc(anim, from.lengthValue(), to.lengthValue(), progress));
+ return TextDecorationThickness::createWithAuto();
+}
+
static inline LengthBox blendFunc(const CSSPropertyBlendingClient* anim, const LengthBox& from, const LengthBox& to, double progress)
{
LengthBox result(blendFunc(anim, from.top(), to.top(), progress),
@@ -1685,6 +1699,8 @@
new PropertyWrapper<FontSelectionValue>(CSSPropertyFontWeight, &RenderStyle::fontWeight, &RenderStyle::setFontWeight),
new PropertyWrapper<FontSelectionValue>(CSSPropertyFontStretch, &RenderStyle::fontStretch, &RenderStyle::setFontStretch),
new PropertyWrapperFontStyle(),
+ new PropertyWrapper<TextDecorationThickness>(CSSPropertyTextDecorationThickness, &RenderStyle::textDecorationThickness, &RenderStyle::setTextDecorationThickness),
+ new PropertyWrapper<TextUnderlineOffset>(CSSPropertyTextUnderlineOffset, &RenderStyle::textUnderlineOffset, &RenderStyle::setTextUnderlineOffset),
};
const unsigned animatableLonghandPropertiesCount = WTF_ARRAY_LENGTH(animatableLonghandPropertyWrappers);
Modified: trunk/Source/WebCore/platform/graphics/FontMetrics.h (237902 => 237903)
--- trunk/Source/WebCore/platform/graphics/FontMetrics.h 2018-11-07 00:46:34 UTC (rev 237902)
+++ trunk/Source/WebCore/platform/graphics/FontMetrics.h 2018-11-07 01:22:41 UTC (rev 237903)
@@ -102,6 +102,12 @@
float zeroWidth() const { return m_zeroWidth; }
void setZeroWidth(float zeroWidth) { m_zeroWidth = zeroWidth; }
+ float underlinePosition() const { return m_underlinePosition; }
+ void setUnderlinePosition(float underlinePosition) { m_underlinePosition = underlinePosition; }
+
+ float underlineThickness() const { return m_underlineThickness; }
+ void setUnderlineThickness(float underlineThickness) { m_underlineThickness = underlineThickness; }
+
private:
friend class Font;
@@ -125,6 +131,8 @@
float m_zeroWidth { 0 };
float m_xHeight { 0 };
float m_capHeight { 0 };
+ float m_underlinePosition { 0 };
+ float m_underlineThickness { 0 };
};
static inline float scaleEmToUnits(float x, unsigned unitsPerEm)
Modified: trunk/Source/WebCore/platform/graphics/cocoa/FontCocoa.mm (237902 => 237903)
--- trunk/Source/WebCore/platform/graphics/cocoa/FontCocoa.mm 2018-11-07 00:46:34 UTC (rev 237902)
+++ trunk/Source/WebCore/platform/graphics/cocoa/FontCocoa.mm 2018-11-07 01:22:41 UTC (rev 237903)
@@ -198,6 +198,8 @@
m_fontMetrics.setLineGap(lineGap);
m_fontMetrics.setXHeight(xHeight);
m_fontMetrics.setLineSpacing(lineSpacing);
+ m_fontMetrics.setUnderlinePosition(-CTFontGetUnderlinePosition(m_platformData.font()));
+ m_fontMetrics.setUnderlineThickness(CTFontGetUnderlineThickness(m_platformData.font()));
}
void Font::platformCharWidthInit()
Modified: trunk/Source/WebCore/rendering/InlineFlowBox.cpp (237902 => 237903)
--- trunk/Source/WebCore/rendering/InlineFlowBox.cpp 2018-11-07 00:46:34 UTC (rev 237902)
+++ trunk/Source/WebCore/rendering/InlineFlowBox.cpp 2018-11-07 01:22:41 UTC (rev 237903)
@@ -163,7 +163,7 @@
const auto* textBox = downcast<InlineTextBox>(child);
hasMarkers = textBox->hasMarkers();
}
- if (childStyle->letterSpacing() < 0 || childStyle->textShadow() || childStyle->textEmphasisMark() != TextEmphasisMark::None || childStyle->hasPositiveStrokeWidth() || hasMarkers)
+ if (childStyle->letterSpacing() < 0 || childStyle->textShadow() || childStyle->textEmphasisMark() != TextEmphasisMark::None || childStyle->hasPositiveStrokeWidth() || hasMarkers || !childStyle->textUnderlineOffset().isAuto() || !childStyle->textDecorationThickness().isAuto() || childStyle->textUnderlinePosition() != TextUnderlinePosition::Auto)
child->clearKnownToHaveNoOverflow();
} else if (child->renderer().isReplaced()) {
const RenderBox& box = downcast<RenderBox>(child->renderer());
Modified: trunk/Source/WebCore/rendering/SimpleLineLayout.cpp (237902 => 237903)
--- trunk/Source/WebCore/rendering/SimpleLineLayout.cpp 2018-11-07 00:46:34 UTC (rev 237902)
+++ trunk/Source/WebCore/rendering/SimpleLineLayout.cpp 2018-11-07 01:22:41 UTC (rev 237903)
@@ -201,7 +201,7 @@
AvoidanceReasonFlags reasons = { };
if (style.textOverflow() == TextOverflow::Ellipsis)
SET_REASON_AND_RETURN_IF_NEEDED(FlowHasTextOverflow, reasons, includeReasons);
- if ((style.textDecorationsInEffect() & TextDecoration::Underline) && style.textUnderlinePosition() == TextUnderlinePosition::Under)
+ if ((style.textDecorationsInEffect() & TextDecoration::Underline) && (style.textUnderlinePosition() != TextUnderlinePosition::Auto || !style.textUnderlineOffset().isAuto() || !style.textDecorationThickness().isAuto()))
SET_REASON_AND_RETURN_IF_NEEDED(FlowHasUnsupportedUnderlineDecoration, reasons, includeReasons);
// Non-visible overflow should be pretty easy to support.
if (style.overflowX() != Overflow::Visible || style.overflowY() != Overflow::Visible)
Modified: trunk/Source/WebCore/rendering/TextDecorationPainter.cpp (237902 => 237903)
--- trunk/Source/WebCore/rendering/TextDecorationPainter.cpp 2018-11-07 00:46:34 UTC (rev 237902)
+++ trunk/Source/WebCore/rendering/TextDecorationPainter.cpp 2018-11-07 01:22:41 UTC (rev 237903)
@@ -211,7 +211,7 @@
void TextDecorationPainter::paintTextDecoration(const TextRun& textRun, const FloatPoint& textOrigin, const FloatPoint& boxOrigin)
{
const auto& fontMetrics = m_lineStyle.fontMetrics();
- float textDecorationThickness = textDecorationStrokeThickness(m_lineStyle.computedFontPixelSize());
+ float textDecorationThickness = m_lineStyle.textDecorationThickness().resolve(m_lineStyle.computedFontSize(), fontMetrics);
FloatPoint localOrigin = boxOrigin;
auto paintDecoration = [&] (TextDecoration decoration, TextDecorationStyle style, const Color& color, const FloatRect& rect) {
@@ -285,7 +285,9 @@
// These decorations should match the visual overflows computed in visualOverflowForDecorations().
if (m_decorations.contains(TextDecoration::Underline)) {
- int offset = computeUnderlineOffset(m_lineStyle.textUnderlinePosition(), m_lineStyle.fontMetrics(), m_inlineTextBox, textDecorationThickness);
+ float textDecorationBaseFontSize = 16;
+ auto defaultGap = m_lineStyle.computedFontSize() / textDecorationBaseFontSize;
+ int offset = computeUnderlineOffset(m_lineStyle.textUnderlinePosition(), m_lineStyle.textUnderlineOffset(), m_lineStyle.fontMetrics(), m_inlineTextBox, defaultGap);
float wavyOffset = m_styles.underlineStyle == TextDecorationStyle::Wavy ? m_wavyOffset : 0;
FloatRect rect(localOrigin, FloatSize(m_width, textDecorationThickness));
rect.move(0, offset + wavyOffset);
Modified: trunk/Source/WebCore/rendering/style/RenderStyle.cpp (237902 => 237903)
--- trunk/Source/WebCore/rendering/style/RenderStyle.cpp 2018-11-07 00:46:34 UTC (rev 237902)
+++ trunk/Source/WebCore/rendering/style/RenderStyle.cpp 2018-11-07 01:22:41 UTC (rev 237903)
@@ -536,14 +536,11 @@
return true;
if (m_inheritedFlags.textDecorations != other.m_inheritedFlags.textDecorations
- || m_visualData->textDecoration != other.m_visualData->textDecoration
- || m_rareNonInheritedData->textDecorationStyle != other.m_rareNonInheritedData->textDecorationStyle) {
- // Underlines are always drawn outside of their textbox bounds when text-underline-position: under;
- // is specified. We can take an early out here.
- if (textUnderlinePosition() == TextUnderlinePosition::Under
- || other.textUnderlinePosition() == TextUnderlinePosition::Under)
- return true;
- return visualOverflowForDecorations(*this, nullptr) != visualOverflowForDecorations(other, nullptr);
+ || m_rareNonInheritedData->textDecorationStyle != other.m_rareNonInheritedData->textDecorationStyle
+ || m_rareInheritedData->textDecorationThickness != other.m_rareInheritedData->textDecorationThickness
+ || m_rareInheritedData->textUnderlineOffset != other.m_rareInheritedData->textUnderlineOffset
+ || m_rareInheritedData->textUnderlinePosition != other.m_rareInheritedData->textUnderlinePosition) {
+ return true;
}
if (hasOutlineInVisualOverflow() != other.hasOutlineInVisualOverflow())
Modified: trunk/Source/WebCore/rendering/style/TextDecorationThickness.h (237902 => 237903)
--- trunk/Source/WebCore/rendering/style/TextDecorationThickness.h 2018-11-07 00:46:34 UTC (rev 237902)
+++ trunk/Source/WebCore/rendering/style/TextDecorationThickness.h 2018-11-07 01:22:41 UTC (rev 237903)
@@ -75,6 +75,18 @@
return m_length;
}
+ float resolve(float fontSize, const FontMetrics& metrics) const
+ {
+ if (isAuto()) {
+ const float textDecorationBaseFontSize = 16;
+ return fontSize / textDecorationBaseFontSize;
+ }
+ if (isFromFont())
+ return metrics.underlineThickness();
+ ASSERT(isLength());
+ return m_length;
+ }
+
bool operator==(const TextDecorationThickness& other) const
{
switch (m_type) {
Modified: trunk/Source/WebCore/style/InlineTextBoxStyle.cpp (237902 => 237903)
--- trunk/Source/WebCore/style/InlineTextBoxStyle.cpp 2018-11-07 00:46:34 UTC (rev 237902)
+++ trunk/Source/WebCore/style/InlineTextBoxStyle.cpp 2018-11-07 01:22:41 UTC (rev 237903)
@@ -32,7 +32,7 @@
namespace WebCore {
-int computeUnderlineOffset(TextUnderlinePosition underlinePosition, const FontMetrics& fontMetrics, const InlineTextBox* inlineTextBox, int textDecorationThickness)
+int computeUnderlineOffset(TextUnderlinePosition underlinePosition, TextUnderlineOffset underlineOffset, const FontMetrics& fontMetrics, const InlineTextBox* inlineTextBox, int textDecorationThickness)
{
// This represents the gap between the baseline and the closest edge of the underline.
int gap = std::max<int>(1, ceilf(textDecorationThickness / 2.0));
@@ -48,7 +48,7 @@
// case.
auto resolvedUnderlinePosition = underlinePosition;
- if (resolvedUnderlinePosition == TextUnderlinePosition::Auto) {
+ if (resolvedUnderlinePosition == TextUnderlinePosition::Auto && underlineOffset.isAuto()) {
if (inlineTextBox)
resolvedUnderlinePosition = inlineTextBox->root().baselineType() == IdeographicBaseline ? TextUnderlinePosition::Under : TextUnderlinePosition::Auto;
else
@@ -57,8 +57,11 @@
switch (resolvedUnderlinePosition) {
case TextUnderlinePosition::Auto:
+ if (underlineOffset.isAuto())
+ return fontMetrics.ascent() + gap;
+ return fontMetrics.ascent() + underlineOffset.lengthValue();
case TextUnderlinePosition::FromFont:
- return fontMetrics.ascent() + gap;
+ return fontMetrics.ascent() + fontMetrics.underlinePosition() + underlineOffset.lengthOr(0);
case TextUnderlinePosition::Under: {
ASSERT(inlineTextBox);
// Position underline relative to the bottom edge of the lowest element's content box.
@@ -75,7 +78,7 @@
rootBox.maxLogicalBottomForTextDecorationLine(offset, decorationRenderer, TextDecoration::Underline);
offset -= inlineTextBox->logicalBottom();
}
- return inlineTextBox->logicalHeight() + gap + std::max<float>(offset, 0);
+ return inlineTextBox->logicalHeight() + gap + std::max<float>(offset, 0) + underlineOffset.lengthOr(0);
}
}
@@ -105,7 +108,7 @@
if (decoration.isEmpty())
return GlyphOverflow();
- float strokeThickness = textDecorationStrokeThickness(lineStyle.computedFontPixelSize());
+ float strokeThickness = lineStyle.textDecorationThickness().resolve(lineStyle.computedFontSize(), lineStyle.fontMetrics());
WavyStrokeParameters wavyStrokeParameters;
float wavyOffset = 0;
@@ -124,7 +127,9 @@
if (decoration & TextDecoration::Underline) {
// Compensate for the integral ceiling in GraphicsContext::computeLineBoundsAndAntialiasingModeForText()
int underlineOffset = 1;
- underlineOffset += computeUnderlineOffset(lineStyle.textUnderlinePosition(), lineStyle.fontMetrics(), inlineTextBox, strokeThickness);
+ float textDecorationBaseFontSize = 16;
+ auto defaultGap = lineStyle.computedFontSize() / textDecorationBaseFontSize;
+ underlineOffset += computeUnderlineOffset(lineStyle.textUnderlinePosition(), lineStyle.textUnderlineOffset(), lineStyle.fontMetrics(), inlineTextBox, defaultGap);
if (decorationStyle == TextDecorationStyle::Wavy) {
extendIntToFloat(overflowResult.bottom, underlineOffset + wavyOffset + wavyStrokeParameters.controlPointDistance + strokeThickness - height);
extendIntToFloat(overflowResult.top, -(underlineOffset + wavyOffset - wavyStrokeParameters.controlPointDistance - strokeThickness));
Modified: trunk/Source/WebCore/style/InlineTextBoxStyle.h (237902 => 237903)
--- trunk/Source/WebCore/style/InlineTextBoxStyle.h 2018-11-07 00:46:34 UTC (rev 237902)
+++ trunk/Source/WebCore/style/InlineTextBoxStyle.h 2018-11-07 01:22:41 UTC (rev 237903)
@@ -33,12 +33,6 @@
class InlineTextBox;
class RenderStyle;
-inline float textDecorationStrokeThickness(float fontSize)
-{
- const float textDecorationBaseFontSize = 16;
- return fontSize / textDecorationBaseFontSize;
-}
-
inline float wavyOffsetFromDecoration()
{
return 1;
@@ -57,6 +51,6 @@
};
WavyStrokeParameters getWavyStrokeParameters(float fontSize);
GlyphOverflow visualOverflowForDecorations(const RenderStyle& lineStyle, const InlineTextBox*);
-int computeUnderlineOffset(TextUnderlinePosition, const FontMetrics&, const InlineTextBox*, int textDecorationThickness);
+int computeUnderlineOffset(TextUnderlinePosition, TextUnderlineOffset, const FontMetrics&, const InlineTextBox*, int textDecorationThickness);
} // namespace WebCore
