mirror of
https://github.com/servo/servo.git
synced 2025-10-04 02:29:12 +01:00
Update web-platform-tests to revision 632a3f59238036b6e24b28d47218ba9986ff4c62
This commit is contained in:
WPT Sync Bot
parent
cd02ca6c19
commit
fb838278a5
430 changed files with 15017 additions and 508 deletions
|
|
@ -1,36 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS Containment Test: Layout containment ink overflow</title>
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-layout">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#ink-overflow">
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<meta name=assert content="Layout containment treats the element overflowing contents as ink overflow.">
|
||||
|
||||
<style>
|
||||
#wrapper {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
overflow: auto;
|
||||
background: red;
|
||||
}
|
||||
|
||||
#contain-layout {
|
||||
contain: layout;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
#overflow {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="wrapper">
|
||||
<div id="contain-layout">
|
||||
<div id="overflow"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -43,6 +43,7 @@
|
|||
background-color: red;
|
||||
color: yellow;
|
||||
font-family: monospace;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
div#abs-pos
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@
|
|||
background-color: red;
|
||||
color: yellow;
|
||||
font-family: monospace;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
div#abs-pos
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@
|
|||
padding: 50px;
|
||||
}
|
||||
|
||||
span.block-descendant
|
||||
span.block-descendant, img
|
||||
{
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -61,8 +61,8 @@
|
|||
|
||||
<div>
|
||||
<div id="blue-test" class="inline-block">
|
||||
<span class="block-descendant"><img src="support/blue50wBy23h.png" alt="Image download support must be enabled"></span>
|
||||
<span id="last-line-box" class="block-descendant"><img src="support/blue50wBy23h.png" alt="Image download support must be enabled"></span>
|
||||
<span class="block-descendant"><img src="support/blue50wBy25h.png" alt="Image download support must be enabled"></span>
|
||||
<span id="last-line-box" class="block-descendant"><img src="support/blue50wBy25h.png" alt="Image download support must be enabled"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@
|
|||
background-color: green;
|
||||
color: white;
|
||||
font-family: monospace;
|
||||
vertical-align: top;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 221 B |
Binary file not shown.
|
After Width: | Height: | Size: 203 B |
|
|
@ -0,0 +1,3 @@
|
|||
spec: https://drafts.csswg.org/css-device-adapt/
|
||||
suggested_reviewers:
|
||||
- ChumpChief
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<title>css-device-adapt IDL tests</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-device-adapt/">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/resources/WebIDLParser.js"></script>
|
||||
<script src="/resources/idlharness.js"></script>
|
||||
|
||||
<style>
|
||||
p { color: black; }
|
||||
</style>
|
||||
<style>
|
||||
@viewport { width: device-width; }
|
||||
</style>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
idl_test(
|
||||
['css-device-adapt'],
|
||||
['cssom'],
|
||||
idl_array => {
|
||||
idl_array.add_objects({
|
||||
CSSRule: ['cssRule'],
|
||||
CSSViewportRule: ['cssViewportRule'],
|
||||
});
|
||||
self.cssRule = document.styleSheets[0].cssRules[0];
|
||||
self.cssViewportRule = document.styleSheets[1].cssRules[0];
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Filled Percentage Column, Shrinkwrap Width (via float)</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#algo-overview">
|
||||
<link rel="match" href="references/grid-percent-cols-filled-shrinkwrap-001-ref.html">
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
|
||||
<style>
|
||||
.grid {
|
||||
display: grid;
|
||||
float: left;
|
||||
margin: 1em;
|
||||
grid-template-columns: auto 20% auto;
|
||||
border: solid silver;
|
||||
font: 20px/1 Ahem;
|
||||
color: transparent;
|
||||
}
|
||||
.grid > div {
|
||||
background: blue;
|
||||
}
|
||||
.b {
|
||||
grid-column: 3;
|
||||
}
|
||||
.c {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.ref {
|
||||
grid-template-columns: 40px 20px 40px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the two shapes below are identical
|
||||
|
||||
<div class="grid">
|
||||
<div class="a">X</div>
|
||||
<div class="b">X</div>
|
||||
<div class="c">XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid ref">
|
||||
<div class="a">X</div>
|
||||
<div class="b">X</div>
|
||||
<div class="c">XXX</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Spanned Percentage Column, Shrinkwrap Width (via float)</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#algo-overview">
|
||||
<link rel="match" href="references/grid-percent-cols-spanned-shrinkwrap-001-ref.html">
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
|
||||
<style>
|
||||
.grid {
|
||||
display: grid;
|
||||
float: left;
|
||||
margin: 1em;
|
||||
grid-template-columns: auto 20% auto;
|
||||
border: solid silver;
|
||||
font: 20px/1 Ahem;
|
||||
color: transparent;
|
||||
}
|
||||
.grid > div {
|
||||
background: blue;
|
||||
}
|
||||
.b {
|
||||
grid-column: 3;
|
||||
}
|
||||
.c {
|
||||
grid-column: span 3;
|
||||
}
|
||||
|
||||
.ref {
|
||||
grid-template-columns: 40px 20px 40px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the two shapes below are identical
|
||||
|
||||
<div class="grid">
|
||||
<div class="a">X</div>
|
||||
<div class="b">X</div>
|
||||
<div class="c">XXXXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid ref">
|
||||
<div class="a">X</div>
|
||||
<div class="b">X</div>
|
||||
<div class="c">XXXXX</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Filled Percentage Row, Shrinkwrap Height</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#algo-overview">
|
||||
<link rel="match" href="references/grid-percent-rows-filled-shrinkwrap-001-ref.html">
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
|
||||
<style>
|
||||
.grid {
|
||||
display: grid;
|
||||
float: left;
|
||||
margin: 1em;
|
||||
grid-template-rows: auto 20% auto;
|
||||
grid-auto-flow: column;
|
||||
border: solid silver;
|
||||
font: 20px/1 Ahem;
|
||||
color: transparent;
|
||||
}
|
||||
.grid > div {
|
||||
background: blue;
|
||||
}
|
||||
.b {
|
||||
grid-row: 3;
|
||||
}
|
||||
.c {
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.ref {
|
||||
grid-template-rows: 40px 20px 40px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the two shapes below are identical
|
||||
|
||||
<div class="grid">
|
||||
<div class="a">X</div>
|
||||
<div class="b">X</div>
|
||||
<div class="c">X<br>X<br>X</div>
|
||||
</div>
|
||||
|
||||
<div class="grid ref">
|
||||
<div class="a">X</div>
|
||||
<div class="b">X</div>
|
||||
<div class="c">X</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Grid Layout Test: Spanned Percentage Row, Shrinkwrap Height</title>
|
||||
<link rel="help" href="https://www.w3.org/TR/css-grid-1/#algo-overview">
|
||||
<link rel="match" href="references/grid-percent-rows-spanned-shrinkwrap-001-ref.html">
|
||||
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
|
||||
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
|
||||
<style>
|
||||
.grid {
|
||||
display: grid;
|
||||
float: left;
|
||||
margin: 1em;
|
||||
grid-template-rows: auto 20% auto;
|
||||
grid-auto-flow: column;
|
||||
justify-content: center;
|
||||
border: solid silver;
|
||||
font: 20px/1 Ahem;
|
||||
color: transparent;
|
||||
}
|
||||
.grid > div {
|
||||
background: blue;
|
||||
}
|
||||
.b {
|
||||
grid-row: 3;
|
||||
}
|
||||
.c {
|
||||
grid-row: span 3;
|
||||
}
|
||||
|
||||
.ref {
|
||||
grid-template-rows: 40px 20px 40px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the two shapes below are identical
|
||||
|
||||
<div class="grid">
|
||||
<div class="a">X</div>
|
||||
<div class="b">X</div>
|
||||
<div class="c">X<br>X<br>X<br>X<br>X</div>
|
||||
</div>
|
||||
|
||||
<div class="grid ref">
|
||||
<div class="a">X</div>
|
||||
<div class="b">X</div>
|
||||
<div class="c">X<br>X<br>X<br>X<br>X</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference</title>
|
||||
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
|
||||
<style>
|
||||
.grid {
|
||||
display: grid;
|
||||
float: left;
|
||||
margin: 1em;
|
||||
grid-template-columns: 40px 20px 40px;
|
||||
align-content: center;
|
||||
border: solid silver;
|
||||
font: 20px/1 Ahem;
|
||||
color: transparent;
|
||||
}
|
||||
.grid > div {
|
||||
background: blue;
|
||||
}
|
||||
.b {
|
||||
grid-column: 3;
|
||||
}
|
||||
.c {
|
||||
grid-column: 2;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the two shapes below are identical
|
||||
|
||||
<div class="grid">
|
||||
<div class="a">X</div>
|
||||
<div class="b">X</div>
|
||||
<div class="c">XXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid ref">
|
||||
<div class="a">X</div>
|
||||
<div class="b">X</div>
|
||||
<div class="c">XXX</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference</title>
|
||||
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
|
||||
<style>
|
||||
.grid {
|
||||
display: grid;
|
||||
float: left;
|
||||
margin: 1em;
|
||||
grid-template-columns: 40px 20px 40px;
|
||||
align-content: center;
|
||||
border: solid silver;
|
||||
font: 20px/1 Ahem;
|
||||
color: transparent;
|
||||
}
|
||||
.grid > div {
|
||||
background: blue;
|
||||
}
|
||||
.b {
|
||||
grid-column: 3;
|
||||
}
|
||||
.c {
|
||||
grid-column: span 3;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the two shapes below are identical
|
||||
|
||||
<div class="grid">
|
||||
<div class="a">X</div>
|
||||
<div class="b">X</div>
|
||||
<div class="c">XXXXX</div>
|
||||
</div>
|
||||
|
||||
<div class="grid ref">
|
||||
<div class="a">X</div>
|
||||
<div class="b">X</div>
|
||||
<div class="c">XXXXX</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference</title>
|
||||
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
|
||||
<style>
|
||||
.grid {
|
||||
display: grid;
|
||||
float: left;
|
||||
margin: 1em;
|
||||
grid-template-rows: 40px 20px 40px;
|
||||
grid-auto-flow: column;
|
||||
justify-content: center;
|
||||
border: solid silver;
|
||||
font: 20px/1 Ahem;
|
||||
color: transparent;
|
||||
}
|
||||
.grid > div {
|
||||
background: blue;
|
||||
}
|
||||
.b {
|
||||
grid-row: 3;
|
||||
}
|
||||
.c {
|
||||
grid-row: 2;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the two shapes below are identical
|
||||
|
||||
<div class="grid">
|
||||
<div class="a">X</div>
|
||||
<div class="b">X</div>
|
||||
<div class="c">X<br>X<br>X</div>
|
||||
</div>
|
||||
|
||||
<div class="grid ref">
|
||||
<div class="a">X</div>
|
||||
<div class="b">X</div>
|
||||
<div class="c">X</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference</title>
|
||||
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
|
||||
<style>
|
||||
.grid {
|
||||
display: grid;
|
||||
float: left;
|
||||
margin: 1em;
|
||||
grid-template-rows: 40px 20px 40px;
|
||||
grid-auto-flow: column;
|
||||
justify-content: center;
|
||||
border: solid silver;
|
||||
font: 20px/1 Ahem;
|
||||
color: transparent;
|
||||
}
|
||||
.grid > div {
|
||||
background: blue;
|
||||
}
|
||||
.b {
|
||||
grid-row: 3;
|
||||
}
|
||||
.c {
|
||||
grid-row: span 3;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the two shapes below are identical
|
||||
|
||||
<div class="grid">
|
||||
<div class="a">X</div>
|
||||
<div class="b">X</div>
|
||||
<div class="c">X<br>X<br>X<br>X<br>X</div>
|
||||
</div>
|
||||
|
||||
<div class="grid ref">
|
||||
<div class="a">X</div>
|
||||
<div class="b">X</div>
|
||||
<div class="c">X<br>X<br>X<br>X<br>X</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<head>
|
||||
<title>CSS Masking: Test clip-path nonzero path interpolation</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-path">
|
||||
<link rel="match" href="reference/clip-path-path-interpolation-001-ref.html">
|
||||
<meta name="assert" content="The clip-path property takes the basic shape
|
||||
'path()' for clipping. Test the interpolation of nonzero
|
||||
path function.">
|
||||
<style>
|
||||
@keyframes anim {
|
||||
from {
|
||||
clip-path: path(nonzero, 'M20,20h60 v60 h-60z M30,30 h40 v40 h-40z');
|
||||
}
|
||||
to {
|
||||
clip-path: path(nonzero, 'M50,50h50 v50 h-50z M20,20 h50 v50 h-50z');
|
||||
}
|
||||
}
|
||||
#rect {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
animation: anim 10s -5s paused linear;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="rect"></div>
|
||||
</body>
|
||||
<script>
|
||||
requestAnimationFrame(() => {
|
||||
document.documentElement.classList.remove('reftest-wait');
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<head>
|
||||
<title>CSS Masking: Test clip-path evenodd path interpolation</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-shapes-2/#funcdef-path">
|
||||
<link rel="match" href="reference/clip-path-path-interpolation-002-ref.html">
|
||||
<meta name="assert" content="The clip-path property takes the basic shape
|
||||
'path()' for clipping. Test the interpolation of evenodd
|
||||
path function.">
|
||||
<style>
|
||||
@keyframes anim {
|
||||
from {
|
||||
clip-path: path(evenodd, 'M20,20h60 v60 h-60z M30,30 h40 v40 h-40z');
|
||||
}
|
||||
to {
|
||||
clip-path: path(evenodd, 'M50,50h50 v50 h-50z M20,20 h50 v50 h-50z');
|
||||
}
|
||||
}
|
||||
#rect {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
animation: anim 10s -5s paused linear;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="rect" class="path-evenodd-animation"></div>
|
||||
</body>
|
||||
<script>
|
||||
requestAnimationFrame(() => {
|
||||
document.documentElement.classList.remove('reftest-wait');
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Masking: Reference for clip-path's path nonzero interpolation</title>
|
||||
<style type="text/css">
|
||||
#rect {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
clip-path: url("#clip");
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="rect"></div>
|
||||
<svg height="0" width="0">
|
||||
<defs>
|
||||
<clipPath id="clip">
|
||||
<path clip-rule="nonzero" d="M35,35 H90 V90 H35Z M25,25 H70 V70 H25Z"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Masking: Reference for clip-path's path evenodd interpolation</title>
|
||||
<style type="text/css">
|
||||
#rect {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
clip-path: url("#clip");
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="rect"></div>
|
||||
<svg height="0" width="0">
|
||||
<defs>
|
||||
<clipPath id="clip">
|
||||
<path clip-rule="evenodd" d="M35,35 H90 V90 H35Z M25,25 H70 V70 H25Z"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.underline { text-decoration: underline; }
|
||||
.overline { text-decoration: overline; }
|
||||
</style>
|
||||
</head>
|
||||
<body lang="en">
|
||||
<div class="overline">サンプル</div>
|
||||
<div class="overline">サンプル</div>
|
||||
<div class="underline">"text-underline-position: right" alone should be same as "auto right"</div>
|
||||
<div class="underline">"text-underline-position: left" alone should be same as "auto left"</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body { writing-mode: vertical-rl; }
|
||||
.underline { text-decoration: underline; }
|
||||
.overline { text-decoration: overline; }
|
||||
</style>
|
||||
</head>
|
||||
<body lang="en">
|
||||
<div>In vertical writing mode with lang=ja, default overline will be same as underline (lang=en). However, when we set text-underline-position to "under left" it should be shifted.</div>
|
||||
<div class="underline">サンプル</div>
|
||||
<div class="underline">サンプル</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
body { writing-mode: vertical-rl; }
|
||||
.underline { text-decoration: underline; }
|
||||
.overline { text-decoration: overline; }
|
||||
</style>
|
||||
</head>
|
||||
<body lang="en">
|
||||
<div class="underline">サンプル</div>
|
||||
<div class="underline">サンプル</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-text-decor-3/#text-underline-position-property">
|
||||
<link rel="match" href="reference/text-decoration-underline-position-horizontal-ref.html">
|
||||
<style>
|
||||
.underline { text-decoration: underline; }
|
||||
.overline { text-decoration: overline; }
|
||||
</style>
|
||||
</head>
|
||||
<body lang="en">
|
||||
<div class="overline" style="text-underline-position: under right">サンプル</div>
|
||||
<div class="overline" style="text-underline-position: under left">サンプル</div>
|
||||
<div class="underline" style="text-underline-position: right">"text-underline-position: right" alone should be same as "auto right"</div>
|
||||
<div class="underline" style="text-underline-position: left">"text-underline-position: left" alone should be same as "auto left"</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-text-decor-3/#text-underline-position-property">
|
||||
<link rel="match" href="reference/text-decoration-underline-position-vertical-ja-ref.html">
|
||||
<style>
|
||||
body { writing-mode: vertical-rl; }
|
||||
.underline { text-decoration: underline; }
|
||||
.overline { text-decoration: overline; }
|
||||
</style>
|
||||
</head>
|
||||
<body lang="ja">
|
||||
<div>In vertical writing mode with lang=ja, default overline will be same as underline (lang=en). However, when we set text-underline-position to "under left" it should be shifted.</div>
|
||||
<div class="underline" style="text-underline-position: under left">サンプル</div>
|
||||
<div class="overline">サンプル</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-text-decor-3/#text-underline-position-property">
|
||||
<link rel="match" href="reference/text-decoration-underline-position-vertical-ref.html">
|
||||
<style>
|
||||
body { writing-mode: vertical-rl; }
|
||||
.underline { text-decoration: underline; }
|
||||
.overline { text-decoration: overline; }
|
||||
</style>
|
||||
</head>
|
||||
<body lang="en">
|
||||
<div class="overline" style="text-underline-position: right">サンプル</div>
|
||||
<div class="underline" style="text-underline-position: left">サンプル</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<head>
|
||||
<title>offset-path path() interpolation</title>
|
||||
<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property">
|
||||
<link rel="match" href="offset-path-path-interpolation-ref.html">
|
||||
<meta name="assert" content="offset-path path supports animation.">
|
||||
<style>
|
||||
@keyframes anim {
|
||||
from { offset-path: path("m 100 100 l 100 100"); }
|
||||
to { offset-path: path("m 100 200 l 100 -100"); }
|
||||
}
|
||||
#target {
|
||||
position: absolute;
|
||||
left: 300px;
|
||||
top: 0px;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
background-color: lime;
|
||||
transform-origin: 0px 0px;
|
||||
animation: anim 10s -5s paused linear;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="target"></div>
|
||||
</body>
|
||||
<script>
|
||||
requestAnimationFrame(() => {
|
||||
document.documentElement.classList.remove('reftest-wait');
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>offset-path path interpolation reference</title>
|
||||
<style>
|
||||
#target {
|
||||
position: absolute;
|
||||
left: 300px;
|
||||
top: 0px;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
background-color: lime;
|
||||
transform-origin: 0px 0px;
|
||||
offset-path: path("M 100 150 L 200 150");
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="target"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,34 +1,86 @@
|
|||
<!doctype html>
|
||||
<link rel='help' href='https://drafts.csswg.org/selectors-4/#the-scope-pseudo'>
|
||||
<meta name='description' content=':scope should match when context object is a shadow root'>
|
||||
<meta name='description' content=':scope should match when context object is a ShadowRoot or a DocumentFragment'>
|
||||
<script src='/resources/testharness.js'></script>
|
||||
<script src='/resources/testharnessreport.js'></script>
|
||||
<div id='shadowHost'></div>
|
||||
<script>
|
||||
'use strict'
|
||||
const shadowRoot = shadowHost.attachShadow({mode:'open'})
|
||||
shadowRoot.innerHTML = '<div class="div" id="external_div">Shadow Element<div id="nesteddiv">nested</div></div>';
|
||||
const shadowRoot = shadowHost.attachShadow({mode:'open'})
|
||||
const externalDiv = document.createElement('div');
|
||||
externalDiv.setAttribute('id', 'external');
|
||||
const nestedDiv = document.createElement('div');
|
||||
nestedDiv.setAttribute('id', 'nested');
|
||||
shadowRoot.appendChild(externalDiv);
|
||||
externalDiv.appendChild(nestedDiv);
|
||||
|
||||
test(() => {
|
||||
assert_equals(shadowRoot.firstChild.querySelectorAll(':scope > div').length, 1, 'should get the number of direct children of external_div');
|
||||
assert_equals(shadowRoot.firstChild.querySelector(':scope > div'), shadowRoot.getElementById("nesteddiv"), 'should get the first direct child of external_div');
|
||||
assert_equals(shadowRoot.firstChild.querySelector(':scope > div').innerHTML, 'nested', 'should get the text in nesteddiv');
|
||||
const nestedShadowRoot = nestedDiv.attachShadow({mode:'open'})
|
||||
const shadowExternalDiv = document.createElement('div');
|
||||
shadowExternalDiv.setAttribute('id', 'shadow_external');
|
||||
const shadowNestedDiv = document.createElement('div');
|
||||
shadowNestedDiv.setAttribute('id', 'shadow_nested');
|
||||
nestedShadowRoot.appendChild(shadowExternalDiv);
|
||||
shadowExternalDiv.appendChild(shadowNestedDiv);
|
||||
|
||||
test (() => {
|
||||
assert_equals(shadowRoot.firstChild.querySelectorAll(':scope > div').length, 1, 'should get the number of direct children of externalDiv');
|
||||
assert_equals(shadowRoot.firstChild.querySelector(':scope > div'), shadowRoot.getElementById('nested'), 'should get the first direct child of externalDiv');
|
||||
assert_equals(shadowRoot.firstChild.querySelector(':scope > div'), shadowRoot.getElementById('nested'), 'should get nestedDiv');
|
||||
}, 'scope selector works in shadowRoot.firstChild')
|
||||
|
||||
test(() => {
|
||||
assert_equals(shadowRoot.querySelector(':scope > div'), shadowRoot.getElementById('external_div'), 'should get the direct child of shadowRoot');
|
||||
test (() => {
|
||||
assert_equals(shadowRoot.querySelector(':scope > div'), shadowRoot.getElementById('external'), 'should get the direct child of shadowRoot');
|
||||
assert_equals(shadowRoot.querySelectorAll(':scope > div').length, 1, 'should get the number of direct div children of shadowRoot');
|
||||
}, 'Selecting direct child of shadow root with :scope should work')
|
||||
|
||||
test(() => {
|
||||
assert_equals(shadowRoot.querySelector(':scope div'), shadowRoot.getElementById('external_div'), 'should get the first div descendant of shadowRoot');
|
||||
assert_equals(shadowRoot.querySelectorAll(':scope div').length, 2, 'should get the number of the div descendants of shadowRoot');
|
||||
test (() => {
|
||||
assert_equals(shadowRoot.querySelector(':scope div'), shadowRoot.getElementById('external'), 'should get the first div descendant of shadowRoot');
|
||||
assert_equals(shadowRoot.querySelectorAll(':scope div').length, 2, 'should get the number of the div descendants of shadowRoot, :scope div should not match for nestedShadow');
|
||||
}, 'Selecting descendants of shadow root with :scope should work')
|
||||
|
||||
test (() => {
|
||||
assert_equals(nestedShadowRoot.querySelector(':scope > div'), nestedShadowRoot.getElementById('shadow_external'), 'should get the direct child of nestedShadowRoot');
|
||||
assert_equals(nestedShadowRoot.querySelectorAll(':scope > div').length, 1, 'should get the number of direct div children of nestedShadowRoot');
|
||||
}, 'Selecting direct child of nested shadow root with :scope should work')
|
||||
|
||||
test (() => {
|
||||
assert_equals(nestedShadowRoot.querySelector(':scope div'), nestedShadowRoot.getElementById('shadow_external'), 'should get the first div descendant of nestedShadowRoot');
|
||||
assert_equals(nestedShadowRoot.querySelectorAll(':scope div').length, 2, 'should get the number of the div descendants of nestedShadowRoot');
|
||||
}, 'Selecting descendants of nested shadow root with :scope should work')
|
||||
|
||||
const documentFragment = document.createDocumentFragment();
|
||||
const external_div = document.createElement('div');
|
||||
external_div.setAttribute('id', 'external_div');
|
||||
const nested_div = document.createElement('div');
|
||||
nested_div.setAttribute('id', 'nested_div');
|
||||
documentFragment.appendChild(external_div);
|
||||
external_div.appendChild(nested_div);
|
||||
|
||||
test(() => {
|
||||
assert_equals(documentFragment.firstChild.querySelectorAll(':scope > div').length, 1, 'should get the number of direct children of external_div');
|
||||
assert_equals(documentFragment.firstChild.querySelector(':scope > div'), documentFragment.getElementById('nested_div'), 'should get the first direct child of external_div');
|
||||
assert_equals(documentFragment.firstChild.querySelector(':scope > div'), documentFragment.getElementById('nested_div'), 'should get the text in nesteddiv');
|
||||
}, 'scope selector works in documentFragment.firstChild')
|
||||
|
||||
test(() => {
|
||||
assert_equals(documentFragment.querySelector(':scope > div'), documentFragment.getElementById('external_div'), 'should get the direct child of DocumentFragment');
|
||||
assert_equals(documentFragment.querySelectorAll(':scope > div').length, 1, 'should get the number of direct div children of DocumentFragment');
|
||||
}, 'Selecting direct child of document fragment with :scope should work')
|
||||
|
||||
test(() => {
|
||||
assert_equals(documentFragment.querySelector(':scope div'), documentFragment.getElementById('external_div'), 'should get the first div descendant of DocumentFragment');
|
||||
assert_equals(documentFragment.querySelectorAll(':scope div').length, 2, 'should get the number of the div descendants of DocumentFragment');
|
||||
}, 'Selecting descendants of document fragment with :scope should work')
|
||||
|
||||
test(() => {
|
||||
assert_equals(shadowRoot.firstChild.querySelector(':scope'), null, 'should return null');
|
||||
assert_equals(shadowRoot.firstChild.querySelectorAll(':scope').length, 0, 'should return 0');
|
||||
|
||||
assert_equals(shadowRoot.querySelector(':scope'), null, 'should return null');
|
||||
assert_equals(shadowRoot.querySelectorAll(':scope').length, 0, 'should return 0');
|
||||
}, 'querySelector() with ":scope" should return null, whether the context object is an element or a shadow root')
|
||||
|
||||
assert_equals(documentFragment.querySelector(':scope'), null, 'should return null');
|
||||
assert_equals(documentFragment.querySelectorAll(':scope').length, 0, 'should return 0');
|
||||
|
||||
}, 'querySelector() with ":scope" should return null, whether the context object is an element, a shadow root or a document fragment')
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<link rel="author" title="Kyle Zentner" href="mailto:zentner.kyle@gmail.com">
|
||||
<link rel="author" title="Morgan Rae Reschenberg" href="mailto:mreschenberg@berkeley.edu">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-containment-1/#containment-layout">
|
||||
<link rel="match" href="contain-paint-formatting-context-margin-001-ref.html">
|
||||
<link rel="match" href="contain-layout-formatting-context-margin-001-ref.html">
|
||||
<style>
|
||||
#a {
|
||||
contain:layout;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Gerald Squelart" href="mailto:gsquelart@mozilla.com">
|
||||
<style>
|
||||
.basic {
|
||||
display: grid;
|
||||
border: 1em solid green;
|
||||
}
|
||||
.height-ref {
|
||||
height: 40px;
|
||||
background: lightblue;
|
||||
}
|
||||
.width-ref {
|
||||
width: 40px;
|
||||
}
|
||||
.floatLBasic-ref {
|
||||
float: left;
|
||||
}
|
||||
.floatLWidth-ref {
|
||||
float: left;
|
||||
width: 40px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="basic"></div>
|
||||
<br>
|
||||
|
||||
<div class="basic height-ref"></div>
|
||||
<br>
|
||||
|
||||
<div class="basic height-ref"></div>
|
||||
<br>
|
||||
|
||||
<div class="basic width-ref"></div>
|
||||
<br>
|
||||
|
||||
<div class="basic width-ref"></div>
|
||||
<br>
|
||||
|
||||
<div class="basic floatLBasic-ref"></div>
|
||||
<br>
|
||||
|
||||
<div class="basic floatLWidth-ref"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'contain: size' on grid elements should cause them to be sized and baseline-aligned as if they had no contents.</title>
|
||||
<link rel="author" title="Gerald Squelart" href="mailto:gsquelart@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-size">
|
||||
<link rel="match" href="contain-size-grid-001-ref.html">
|
||||
<style>
|
||||
.contain {
|
||||
display: grid;
|
||||
contain:size;
|
||||
border: 1em solid green;
|
||||
background: red;
|
||||
}
|
||||
.innerContents {
|
||||
color: transparent;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
.minHeight {
|
||||
min-height: 40px;
|
||||
background: lightblue;
|
||||
}
|
||||
.height {
|
||||
height: 40px;
|
||||
background: lightblue;
|
||||
}
|
||||
.maxWidth {
|
||||
max-width: 40px;
|
||||
}
|
||||
.width {
|
||||
width: 40px;
|
||||
}
|
||||
.floatLBasic {
|
||||
float: left;
|
||||
}
|
||||
.floatLWidth {
|
||||
float: left;
|
||||
width: 40px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!--CSS Test: A size-contained grid element with no specified size should render at 0 height regardless of content.-->
|
||||
<div class="contain"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained grid element with specified min-height should render at given min-height regardless of content.-->
|
||||
<div class="contain minHeight"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained grid element with specified height should render at given height regardless of content.-->
|
||||
<div class="contain height"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained grid element with specified max-width should render at given max-width and zero height regardless of content.-->
|
||||
<div class="contain maxWidth"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained grid element with specified width should render at given width and zero height regardless of content.-->
|
||||
<div class="contain width"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained floated grid element with no specified size should render at 0px by 0px regardless of content.-->
|
||||
<div class="contain floatLBasic"><div class="innerContents">inner</div></div>
|
||||
<br>
|
||||
|
||||
<!--CSS Test: A size-contained floated grid element with specified width and no specified height should render at given width and 0 height regardless of content.-->
|
||||
<div class="contain floatLWidth"><div class="innerContents">inner</div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -21,6 +21,7 @@
|
|||
== contain-size-inline-block-001.html contain-size-inline-block-001-ref.html
|
||||
== contain-size-flex-001.html contain-size-flex-001-ref.html
|
||||
== contain-size-inline-flex-001.html contain-size-inline-flex-001-ref.html
|
||||
== contain-size-grid-001.html contain-size-grid-001-ref.html
|
||||
== contain-size-multicol-001.html contain-size-multicol-001-ref.html
|
||||
== contain-size-fieldset-001.html contain-size-fieldset-001-ref.html
|
||||
== contain-size-fieldset-002.html contain-size-fieldset-002-ref.html
|
||||
|
|
|
|||
|
|
@ -0,0 +1,136 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
border: 2px solid purple;
|
||||
margin: 3px;
|
||||
/* This red should't be visible, because each container should shrinkwrap
|
||||
its sole child (and the child should cover up this background). */
|
||||
background: red;
|
||||
/* Float the containers, to test in "rows", with 1 row per writing-mode. */
|
||||
float: left;
|
||||
}
|
||||
br { clear: both; }
|
||||
|
||||
.container > * {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: teal;
|
||||
border: 1px solid yellow;
|
||||
}
|
||||
.container > * > * {
|
||||
background: pink;
|
||||
height: 4px;
|
||||
width: 4px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.pad_top { padding-top: 3px; }
|
||||
.pad_right { padding-right: 4px; }
|
||||
.pad_bottom { padding-bottom: 5px; }
|
||||
.pad_left { padding-left: 6px; }
|
||||
|
||||
.hl { writing-mode: horizontal-tb; direction: ltr; }
|
||||
.hr { writing-mode: horizontal-tb; direction: rtl; }
|
||||
.vl { writing-mode: vertical-lr; direction: ltr; }
|
||||
.vr { writing-mode: vertical-rl; direction: ltr; }
|
||||
.vl_rtl { writing-mode: vertical-lr; direction: rtl; }
|
||||
.vr_rtl { writing-mode: vertical-rl; direction: rtl; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Here, we test padding on each side of a flex item, across 6 different
|
||||
writing-mode combinations (writing-mode X direction). -->
|
||||
<div class="container hl">
|
||||
<div class="pad_top"><div></div></div>
|
||||
</div>
|
||||
<div class="container hl">
|
||||
<div class="pad_right"><div></div></div>
|
||||
</div>
|
||||
<div class="container hl">
|
||||
<div class="pad_bottom"><div></div></div>
|
||||
</div>
|
||||
<div class="container hl">
|
||||
<div class="pad_left"><div></div></div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<div class="container hr">
|
||||
<div class="pad_top"><div></div></div>
|
||||
</div>
|
||||
<div class="container hr">
|
||||
<div class="pad_right"><div></div></div>
|
||||
</div>
|
||||
<div class="container hr">
|
||||
<div class="pad_bottom"><div></div></div>
|
||||
</div>
|
||||
<div class="container hr">
|
||||
<div class="pad_left"><div></div></div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<div class="container vl">
|
||||
<div class="pad_top"><div></div></div>
|
||||
</div>
|
||||
<div class="container vl">
|
||||
<div class="pad_right"><div></div></div>
|
||||
</div>
|
||||
<div class="container vl">
|
||||
<div class="pad_bottom"><div></div></div>
|
||||
</div>
|
||||
<div class="container vl">
|
||||
<div class="pad_left"><div></div></div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<div class="container vr">
|
||||
<div class="pad_top"><div></div></div>
|
||||
</div>
|
||||
<div class="container vr">
|
||||
<div class="pad_right"><div></div></div>
|
||||
</div>
|
||||
<div class="container vr">
|
||||
<div class="pad_bottom"><div></div></div>
|
||||
</div>
|
||||
<div class="container vr">
|
||||
<div class="pad_left"><div></div></div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<div class="container vl_rtl">
|
||||
<div class="pad_top"><div></div></div>
|
||||
</div>
|
||||
<div class="container vl_rtl">
|
||||
<div class="pad_right"><div></div></div>
|
||||
</div>
|
||||
<div class="container vl_rtl">
|
||||
<div class="pad_bottom"><div></div></div>
|
||||
</div>
|
||||
<div class="container vl_rtl">
|
||||
<div class="pad_left"><div></div></div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<div class="container vr_rtl">
|
||||
<div class="pad_top"><div></div></div>
|
||||
</div>
|
||||
<div class="container vr_rtl">
|
||||
<div class="pad_right"><div></div></div>
|
||||
</div>
|
||||
<div class="container vr_rtl">
|
||||
<div class="pad_bottom"><div></div></div>
|
||||
</div>
|
||||
<div class="container vr_rtl">
|
||||
<div class="pad_left"><div></div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,144 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<title>
|
||||
CSS Test: Testing auto-sized flex containers
|
||||
with various 'writing-mode' values
|
||||
and various padding amounts on flex items.
|
||||
</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-direction-property">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode">
|
||||
<link rel="match" href="flexbox-writing-mode-016-ref.html">
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border: 2px solid purple;
|
||||
margin: 3px;
|
||||
/* This red should't be visible, because each container should shrinkwrap
|
||||
its sole child (and the child should cover up this background). */
|
||||
background: red;
|
||||
/* Float the containers, to test in "rows", with 1 row per writing-mode. */
|
||||
float: left;
|
||||
}
|
||||
br { clear: both; }
|
||||
|
||||
.container > * {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: teal;
|
||||
border: 1px solid yellow;
|
||||
}
|
||||
.container > * > * {
|
||||
background: pink;
|
||||
height: 4px;
|
||||
width: 4px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.pad_top { padding-top: 3px; }
|
||||
.pad_right { padding-right: 4px; }
|
||||
.pad_bottom { padding-bottom: 5px; }
|
||||
.pad_left { padding-left: 6px; }
|
||||
|
||||
.hl { writing-mode: horizontal-tb; direction: ltr; }
|
||||
.hr { writing-mode: horizontal-tb; direction: rtl; }
|
||||
.vl { writing-mode: vertical-lr; direction: ltr; }
|
||||
.vr { writing-mode: vertical-rl; direction: ltr; }
|
||||
.vl_rtl { writing-mode: vertical-lr; direction: rtl; }
|
||||
.vr_rtl { writing-mode: vertical-rl; direction: rtl; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Here, we test padding on each side of a flex item, across 6 different
|
||||
writing-mode combinations (writing-mode X direction). -->
|
||||
<div class="container hl">
|
||||
<div class="pad_top"><div></div></div>
|
||||
</div>
|
||||
<div class="container hl">
|
||||
<div class="pad_right"><div></div></div>
|
||||
</div>
|
||||
<div class="container hl">
|
||||
<div class="pad_bottom"><div></div></div>
|
||||
</div>
|
||||
<div class="container hl">
|
||||
<div class="pad_left"><div></div></div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<div class="container hr">
|
||||
<div class="pad_top"><div></div></div>
|
||||
</div>
|
||||
<div class="container hr">
|
||||
<div class="pad_right"><div></div></div>
|
||||
</div>
|
||||
<div class="container hr">
|
||||
<div class="pad_bottom"><div></div></div>
|
||||
</div>
|
||||
<div class="container hr">
|
||||
<div class="pad_left"><div></div></div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<div class="container vl">
|
||||
<div class="pad_top"><div></div></div>
|
||||
</div>
|
||||
<div class="container vl">
|
||||
<div class="pad_right"><div></div></div>
|
||||
</div>
|
||||
<div class="container vl">
|
||||
<div class="pad_bottom"><div></div></div>
|
||||
</div>
|
||||
<div class="container vl">
|
||||
<div class="pad_left"><div></div></div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<div class="container vr">
|
||||
<div class="pad_top"><div></div></div>
|
||||
</div>
|
||||
<div class="container vr">
|
||||
<div class="pad_right"><div></div></div>
|
||||
</div>
|
||||
<div class="container vr">
|
||||
<div class="pad_bottom"><div></div></div>
|
||||
</div>
|
||||
<div class="container vr">
|
||||
<div class="pad_left"><div></div></div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<div class="container vl_rtl">
|
||||
<div class="pad_top"><div></div></div>
|
||||
</div>
|
||||
<div class="container vl_rtl">
|
||||
<div class="pad_right"><div></div></div>
|
||||
</div>
|
||||
<div class="container vl_rtl">
|
||||
<div class="pad_bottom"><div></div></div>
|
||||
</div>
|
||||
<div class="container vl_rtl">
|
||||
<div class="pad_left"><div></div></div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<div class="container vr_rtl">
|
||||
<div class="pad_top"><div></div></div>
|
||||
</div>
|
||||
<div class="container vr_rtl">
|
||||
<div class="pad_right"><div></div></div>
|
||||
</div>
|
||||
<div class="container vr_rtl">
|
||||
<div class="pad_bottom"><div></div></div>
|
||||
</div>
|
||||
<div class="container vr_rtl">
|
||||
<div class="pad_left"><div></div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -261,6 +261,7 @@
|
|||
== flexbox-writing-mode-013.html flexbox-writing-mode-013-ref.html
|
||||
== flexbox-writing-mode-014.html flexbox-writing-mode-014-ref.html
|
||||
== flexbox-writing-mode-015.html flexbox-writing-mode-015-ref.html
|
||||
== flexbox-writing-mode-016.html flexbox-writing-mode-016-ref.html
|
||||
|
||||
# Single-line size clamping
|
||||
== flexbox-single-line-clamp-1.html flexbox-single-line-clamp-1-ref.html
|
||||
|
|
|
|||
|
|
@ -25,4 +25,4 @@ rsync -avz --delete --filter=". ./sync-tests-filter" "$MOZTREE"/layout/reftests/
|
|||
sed -i -e 's/^\(\(fails\|needs-focus\|random\|skip\|asserts\|slow\|require-or\|silentfail\|pref\|test-pref\|ref-pref\|fuzzy\)[^ ]* *\?\)\+//;/^default-preferences /d;s/ \?# \?\(TC: \)\?[bB]ug.*//;s/ # Initial mulet triage:.*//' $(find . -name reftest.list)
|
||||
sed -i -e 's/-moz-crisp-edges/pixelated/g;s/-moz-min-content/min-content/g;s/-moz-max-content/max-content/g' $(find . -regex ".*\.\(xht\|xhtml\|html\|css\)")
|
||||
git add -A .
|
||||
git commit -m"Sync Mozilla tests as of https://hg.mozilla.org/mozilla-central/rev/$MOZREV ." -e .
|
||||
git commit -m"Sync Mozilla CSS tests as of https://hg.mozilla.org/mozilla-central/rev/$MOZREV ." -e .
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue