WebKit export of https://bugs.webkit.org/show_bug.cgi?id=204276 (#31663)
diff --git a/css/css-values/ic-unit-001.html b/css/css-values/ic-unit-001.html
index b969278..5045e01 100644
--- a/css/css-values/ic-unit-001.html
+++ b/css/css-values/ic-unit-001.html
@@ -6,13 +6,20 @@
<link rel="match" href="reference/ic-unit-001-ref.html">
<meta name="assert" content="The ic unit is equal to the used advance measure of the 水 (CJK water ideograph, U+6C34) glyph found in the font used to render it.">
<style>
+@font-face {
+ font-family: IcTestFullWidth;
+ src: url(resources/IcTestFullWidth.woff2);
+}
+
span {
+ font: 20px IcTestFullWidth;
background: green;
color: green;
top: 0; bottom: 0;
position: absolute;
}
div {
+ font: 20px IcTestFullWidth;
background: red;
color: red;
position: relative;
diff --git a/css/css-values/ic-unit-002.html b/css/css-values/ic-unit-002.html
index 0e4c737..b514dba 100644
--- a/css/css-values/ic-unit-002.html
+++ b/css/css-values/ic-unit-002.html
@@ -8,13 +8,21 @@
<link rel="match" href="reference/ic-unit-002-ref.html">
<meta name="assert" content="In vertical upright, the ic unit is equal to the used vertical advance measure of the 水 (CJK water ideograph, U+6C34) glyph found in the font used to render it.">
<style>
+@font-face {
+ font-family: IcTestFullWidth;
+ src: url(resources/IcTestFullWidth.woff2);
+}
+
span {
+ font: 20px IcTestFullWidth;
background: green;
color: green;
left: 0; right: 0;
position: absolute;
}
+
div {
+ font: 20px IcTestFullWidth;
background: red;
color: red;
position: relative;
diff --git a/css/css-values/ic-unit-003.html b/css/css-values/ic-unit-003.html
index 8e94b15..3513d9c 100644
--- a/css/css-values/ic-unit-003.html
+++ b/css/css-values/ic-unit-003.html
@@ -8,13 +8,21 @@
<link rel="match" href="reference/ic-unit-002-ref.html">
<meta name="assert" content="In vertical mixed, the ic unit is equal to the used vertical advance measure of the 水 (CJK water ideograph, U+6C34) glyph found in the font used to render it.">
<style>
+@font-face {
+ font-family: IcTestFullWidth;
+ src: url(resources/IcTestFullWidth.woff2);
+}
+
span {
+ font: 20px IcTestFullWidth;
background: green;
color: green;
left: 0; right: 0;
position: absolute;
}
+
div {
+ font: 20px IcTestFullWidth;
background: red;
color: red;
position: relative;
diff --git a/css/css-values/ic-unit-004.html b/css/css-values/ic-unit-004.html
index 257a243..64755c3 100644
--- a/css/css-values/ic-unit-004.html
+++ b/css/css-values/ic-unit-004.html
@@ -8,13 +8,21 @@
<link rel="match" href="reference/ic-unit-001-ref.html">
<meta name="assert" content="In vertical sideways, the ic unit is equal to the used horizontal advance measure of the 水 (CJK water ideograph, U+6C34) glyph found in the font used to render it.">
<style>
+@font-face {
+ font-family: IcTestFullWidth;
+ src: url(resources/IcTestFullWidth.woff2);
+}
+
span {
+ font: 20px IcTestFullWidth;
background: green;
color: green;
left: 0; right: 0;
position: absolute;
}
+
div {
+ font: 20px IcTestFullWidth;
background: red;
color: red;
position: relative;
diff --git a/css/css-values/ic-unit-008.html b/css/css-values/ic-unit-008.html
index 05ab218..9003c5f 100644
--- a/css/css-values/ic-unit-008.html
+++ b/css/css-values/ic-unit-008.html
@@ -12,9 +12,16 @@
<meta name="assert" content="In this test, the ic unit is the advance width measure of the 水 (CJK water ideograph, U+6C34) glyph.">
<style>
+ @font-face
+ {
+ font-family: IcTestFullWidth;
+ src: url(resources/IcTestFullWidth.woff2);
+ }
+
div
{
float: left;
+ font-family: IcTestFullWidth;
font-size: 80px; /* arbitrary font size */
}
diff --git a/css/css-values/ic-unit-009.html b/css/css-values/ic-unit-009.html
index 11ec598..901f1c9 100644
--- a/css/css-values/ic-unit-009.html
+++ b/css/css-values/ic-unit-009.html
@@ -12,9 +12,16 @@
<meta name="assert" content="In this test, the ic unit is the advance height measure of the 水 (CJK water ideograph, U+6C34) glyph.">
<style>
+ @font-face
+ {
+ font-family: IcTestFullWidth;
+ src: url(resources/IcTestFullWidth.woff2);
+ }
+
div
{
float: left;
+ font-family: IcTestFullWidth;
font-size: 80px; /* arbitrary font size */
writing-mode: vertical-rl;
}
diff --git a/css/css-values/ic-unit-010.html b/css/css-values/ic-unit-010.html
index ca96304..e066465 100644
--- a/css/css-values/ic-unit-010.html
+++ b/css/css-values/ic-unit-010.html
@@ -12,9 +12,16 @@
<meta name="assert" content="In this test, the ic unit is the advance height measure of the 水 (CJK water ideograph, U+6C34) glyph.">
<style>
+ @font-face
+ {
+ font-family: IcTestFullWidth;
+ src: url(resources/IcTestFullWidth.woff2);
+ }
+
div
{
float: left;
+ font-family: IcTestFullWidth;
font-size: 80px; /* arbitrary font size */
text-orientation: mixed;
writing-mode: vertical-rl;
@@ -47,4 +54,4 @@
水 (CJK water ideograph, U+6C34) glyph == 水
- -->
\ No newline at end of file
+ -->
diff --git a/css/css-values/ic-unit-011.html b/css/css-values/ic-unit-011.html
index 5840022..edeaee6 100644
--- a/css/css-values/ic-unit-011.html
+++ b/css/css-values/ic-unit-011.html
@@ -12,9 +12,16 @@
<meta name="assert" content="In this test, the ic unit is the advance height measure of the 水 (CJK water ideograph, U+6C34) glyph.">
<style>
+ @font-face
+ {
+ font-family: IcTestFullWidth;
+ src: url(resources/IcTestFullWidth.woff2);
+ }
+
div
{
float: left;
+ font-family: IcTestFullWidth;
font-size: 80px; /* arbitrary font size */
text-orientation: upright;
writing-mode: vertical-rl;
@@ -47,4 +54,4 @@
水 (CJK water ideograph, U+6C34) glyph == 水
- -->
\ No newline at end of file
+ -->
diff --git a/css/css-values/ic-unit-012.html b/css/css-values/ic-unit-012.html
index ac281cc..badb199 100644
--- a/css/css-values/ic-unit-012.html
+++ b/css/css-values/ic-unit-012.html
@@ -12,9 +12,16 @@
<meta name="assert" content="In this test, the ic unit is the advance width measure of the 水 (CJK water ideograph, U+6C34) glyph.">
<style>
+ @font-face
+ {
+ font-family: IcTestFullWidth;
+ src: url(resources/IcTestFullWidth.woff2);
+ }
+
div
{
float: left;
+ font-family: IcTestFullWidth;
font-size: 80px; /* arbitrary font size */
text-orientation: sideways;
writing-mode: vertical-rl;
@@ -47,4 +54,4 @@
水 (CJK water ideograph, U+6C34) glyph == 水
- -->
\ No newline at end of file
+ -->
diff --git a/css/css-values/ic-unit-013.html b/css/css-values/ic-unit-013.html
new file mode 100644
index 0000000..ad55792
--- /dev/null
+++ b/css/css-values/ic-unit-013.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+
+<meta charset="utf-8">
+<title>CSS Values and Units Test: support for the ic unit</title>
+<link rel="author" title="Kiet Ho" href="mailto:tho22@apple.com">
+<link rel="help" href="https://www.w3.org/TR/css-values-4/#ic">
+<link rel="match" href="reference/ic-unit-013-ref.html">
+<meta name="assert" content="The ic unit is equal to 0em if the CJK water glyph's advance is 0.">
+<style>
+/* The following font contains the CJK water (U+6C34) glyph as a zero-width character. */
+@font-face {
+ font-family: IcTestZeroWidth;
+ src: url(resources/IcTestZeroWidth.woff2);
+}
+
+.test {
+ font: 20px IcTestZeroWidth;
+ width: calc(100px + 10ic);
+ height: 20px;
+ background: green;
+ margin-bottom: 10px;
+}
+
+.ref {
+ /* Each ic should be equal to 0px because the CJK water glyph in the font is zero-width. */
+ width: 100px;
+ height: 20px;
+ background: green;
+}
+</style>
+
+<p>The test passes if there are two green rectangles of equal length.</p>
+<div class="test"></div>
+<div class="ref"></div>
diff --git a/css/css-values/ic-unit-014.html b/css/css-values/ic-unit-014.html
new file mode 100644
index 0000000..70014d6
--- /dev/null
+++ b/css/css-values/ic-unit-014.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+
+<meta charset="utf-8">
+<title>CSS Values and Units Test: support for the ic unit</title>
+<link rel="author" title="Kiet Ho" href="mailto:tho22@apple.com">
+<link rel="help" href="https://www.w3.org/TR/css-values-4/#ic">
+<link rel="match" href="reference/ic-unit-014-ref.html">
+<meta name="assert" content="The ic unit is equal to 0.5em if the CJK water glyph's advance is 0.5em.">
+<style>
+/* The following font contains the CJK water (U+6C34) glyph as a rectangle box,
+ with the width being exactly half of its height. */
+@font-face {
+ font-family: IcTestHalfWidth;
+ src: url(resources/IcTestHalfWidth.woff2);
+}
+
+.test {
+ font-family: IcTestHalfWidth;
+ font-size: 20px;
+ width: calc(100px + 10ic);
+ height: 20px;
+ background: green;
+ margin-bottom: 10px;
+}
+
+.ref {
+ /*
+ Each ic is equal to 10px, the width of a CJK water glyph.
+ (its height is 20px, and its width is half the height).
+ The width of .test is then:
+ 100px + (10ic * 10px / ic) = 200px
+ */
+ width: 200px;
+ height: 20px;
+ background: green;
+}
+</style>
+
+<p>The test passes if there are two green rectangles of equal length.</p>
+<div class="test"></div>
+<div class="ref"></div>
diff --git a/css/css-values/reference/ic-unit-001-ref.html b/css/css-values/reference/ic-unit-001-ref.html
index 2151f3b..24711fe 100644
--- a/css/css-values/reference/ic-unit-001-ref.html
+++ b/css/css-values/reference/ic-unit-001-ref.html
@@ -3,9 +3,13 @@
<title>CSS Values and Units Test Reference File</title>
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
<style>
-svg { width: 10ic; }
+.ref {
+ width: 200px;
+ height: 200px;
+ background: green;
+}
</style>
<body>
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
- <svg viewBox="0 0 100 100"><rect x="0" y="0" width="100" height="100" fill="green"></svg>
+ <div class="ref"></div>
</body>
diff --git a/css/css-values/reference/ic-unit-002-ref.html b/css/css-values/reference/ic-unit-002-ref.html
index 962a748..24711fe 100644
--- a/css/css-values/reference/ic-unit-002-ref.html
+++ b/css/css-values/reference/ic-unit-002-ref.html
@@ -3,13 +3,13 @@
<title>CSS Values and Units Test Reference File</title>
<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
<style>
-svg {
- width: 10ic;
- writing-mode: vertical-rl;
- text-orientation: upright;
+.ref {
+ width: 200px;
+ height: 200px;
+ background: green;
}
</style>
<body>
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
- <svg viewBox="0 0 100 100"><rect x="0" y="0" width="100" height="100" fill="green"></svg>
+ <div class="ref"></div>
</body>
diff --git a/css/css-values/reference/ic-unit-008-ref.html b/css/css-values/reference/ic-unit-008-ref.html
index 6a27f6e..9db473c 100644
--- a/css/css-values/reference/ic-unit-008-ref.html
+++ b/css/css-values/reference/ic-unit-008-ref.html
@@ -7,9 +7,16 @@
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<style>
+ @font-face
+ {
+ font-family: IcTestFullWidth;
+ src: url(/css/css-values/resources/IcTestFullWidth.woff2);
+ }
+
div
{
float: left;
+ font-family: IcTestFullWidth;
font-size: 80px; /* arbitrary font size */
line-height: 1.8; /* arbitrary line-height */
}
diff --git a/css/css-values/reference/ic-unit-009-ref.html b/css/css-values/reference/ic-unit-009-ref.html
index 2ae37b8..4330052 100644
--- a/css/css-values/reference/ic-unit-009-ref.html
+++ b/css/css-values/reference/ic-unit-009-ref.html
@@ -7,9 +7,16 @@
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<style>
+ @font-face
+ {
+ font-family: IcTestFullWidth;
+ src: url(/css/css-values/resources/IcTestFullWidth.woff2);
+ }
+
div
{
float: left;
+ font-family: IcTestFullWidth;
font-size: 80px; /* arbitrary font size */
line-height: 1.8; /* arbitrary line-height */
writing-mode: vertical-rl;
diff --git a/css/css-values/reference/ic-unit-013-ref.html b/css/css-values/reference/ic-unit-013-ref.html
new file mode 100644
index 0000000..67e75b9
--- /dev/null
+++ b/css/css-values/reference/ic-unit-013-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+
+<meta charset="utf-8">
+<title>CSS Values and Units Test: support for the ic unit</title>
+<style>
+.test, .ref {
+ width: 100px;
+ height: 20px;
+ background: green;
+}
+
+.test {
+ margin-bottom: 10px;
+}
+</style>
+
+<p>The test passes if there are two green rectangles of equal length.</p>
+<div class="test"></div>
+<div class="ref"></div>
diff --git a/css/css-values/reference/ic-unit-014-ref.html b/css/css-values/reference/ic-unit-014-ref.html
new file mode 100644
index 0000000..2e5c9b4
--- /dev/null
+++ b/css/css-values/reference/ic-unit-014-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+
+<meta charset="utf-8">
+<title>CSS Values and Units Test: support for the ic unit</title>
+<style>
+.test, .ref {
+ width: 200px;
+ height: 20px;
+ background: green;
+}
+
+.test {
+ margin-bottom: 10px;
+}
+</style>
+
+<p>The test passes if there are two green rectangles of equal length.</p>
+<div class="test"></div>
+<div class="ref"></div>
diff --git a/css/css-values/resources/IcTestFullWidth.woff2 b/css/css-values/resources/IcTestFullWidth.woff2
new file mode 100644
index 0000000..a4ebf4f
--- /dev/null
+++ b/css/css-values/resources/IcTestFullWidth.woff2
Binary files differ
diff --git a/css/css-values/resources/IcTestHalfWidth.woff2 b/css/css-values/resources/IcTestHalfWidth.woff2
new file mode 100644
index 0000000..a545d2c
--- /dev/null
+++ b/css/css-values/resources/IcTestHalfWidth.woff2
Binary files differ
diff --git a/css/css-values/resources/IcTestZeroWidth.woff2 b/css/css-values/resources/IcTestZeroWidth.woff2
new file mode 100644
index 0000000..4c90173
--- /dev/null
+++ b/css/css-values/resources/IcTestZeroWidth.woff2
Binary files differ
