mirror of
https://github.com/servo/servo.git
synced 2025-08-16 10:55:34 +01:00
Update web-platform-tests to revision e426a6933a05bf144eba06a1d4c47ba876a4e2d1
This commit is contained in:
WPT Sync Bot
parent
415b26e4f1
commit
5e5eccabf8
495 changed files with 14920 additions and 784 deletions
|
|
@ -38,6 +38,11 @@ var imageBitmapVideoPromise = new Promise(function(resolve, reject) {
|
|||
resolve(video);
|
||||
};
|
||||
video.onerror = reject;
|
||||
|
||||
// preload=auto is required to ensure a frame is available once
|
||||
// canplaythrough is fired. The default of preload=metadata does not
|
||||
// gaurantee this.
|
||||
video.preload = "auto";
|
||||
video.src = getVideoURI("/images/pattern");
|
||||
|
||||
// Prevent WebKit from garbage collecting event handlers.
|
||||
|
|
@ -60,6 +65,11 @@ var imageBitmapDataUrlVideoPromise = fetch(getVideoURI("/images/pattern"))
|
|||
|
||||
var encoded = btoa(String.fromCodePoint(...new Uint8Array(data)));
|
||||
var dataUrl = `data:${type};base64,${encoded}`;
|
||||
|
||||
// preload=auto is required to ensure a frame is available once
|
||||
// canplaythrough is fired. The default of preload=metadata does not
|
||||
// gaurantee this.
|
||||
video.preload = "auto";
|
||||
video.src = dataUrl;
|
||||
|
||||
// Prevent WebKit from garbage collecting event handlers.
|
||||
|
|
|
|||
|
|
@ -341,6 +341,7 @@ promise_test(function() {
|
|||
video.oncanplaythrough = function() {
|
||||
resolve(video);
|
||||
}
|
||||
video.preload = "auto";
|
||||
video.src = 'resources/pattern-srgb-fullcolor.ogv'
|
||||
}).then(testImageBitmapVideoSource);
|
||||
}, 'createImageBitmap in e-sRGB from a sRGB HTMLVideoElement with resize.');
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Reference for Animation Worklet should have access to effect timing from within the worklet thread</title>
|
||||
<style>
|
||||
#box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
transform: translateY(100px);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box"></div>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<html class="reftest-wait">
|
||||
<title>Animation Worklet should have access to effect timing from within the worklet thread</title>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-animationworklet/">
|
||||
<meta name="assert" content="Animation Worklet should have access to effect timing from within the worklet thread">
|
||||
<link rel="match" href="worklet-animation-get-timing-on-worklet-thread-ref.html">
|
||||
|
||||
<script src="/web-animations/testcommon.js"></script>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="common.js"></script>
|
||||
|
||||
<style>
|
||||
#box{
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box"></div>
|
||||
|
||||
<script id="get_timing_animator" type="text/worklet">
|
||||
registerAnimator('get_timing', class {
|
||||
animate(currentTime, effect){
|
||||
effect.localTime = effect.getTiming().delay + (effect.getTiming().duration / 2);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
runInAnimationWorklet(
|
||||
document.getElementById('get_timing_animator').textContent
|
||||
).then(() => {
|
||||
const box = document.getElementById("box");
|
||||
const effect = new KeyframeEffect(
|
||||
box,
|
||||
[
|
||||
{transform: 'translateY(0)'},
|
||||
{transform: 'translateY(200px)'}
|
||||
],
|
||||
{
|
||||
delay: 2000,
|
||||
duration: 1000
|
||||
}
|
||||
);
|
||||
|
||||
const animation = new WorkletAnimation('get_timing', effect);
|
||||
animation.play();
|
||||
|
||||
waitForAsyncAnimationFrames(1).then(_ => {
|
||||
takeScreenshot();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -9,9 +9,6 @@
|
|||
"html-aria/name-computation-general/597-haswarn.html": "Possible misuse of \u201caria-label\u201d. (If you disagree with this warning, file an issue report or send e-mail to www-validator@w3.org.)",
|
||||
"html-aria/name-computation-general/598-haswarn.html": "Possible misuse of \u201caria-label\u201d. (If you disagree with this warning, file an issue report or send e-mail to www-validator@w3.org.)",
|
||||
"html-aria/name-computation-general/599-haswarn.html": "Possible misuse of \u201caria-label\u201d. (If you disagree with this warning, file an issue report or send e-mail to www-validator@w3.org.)",
|
||||
"html-aria/name-computation-img/557-haswarn.html": "Possible misuse of \u201caria-label\u201d. (If you disagree with this warning, file an issue report or send e-mail to www-validator@w3.org.)",
|
||||
"html-aria/name-computation-img/565-haswarn.html": "Possible misuse of \u201caria-label\u201d. (If you disagree with this warning, file an issue report or send e-mail to www-validator@w3.org.)",
|
||||
"html-aria/name-computation-img/566-haswarn.html": "Possible misuse of \u201caria-label\u201d. (If you disagree with this warning, file an issue report or send e-mail to www-validator@w3.org.)",
|
||||
"html-aria/properties-global-norole/properties-global-norole-aria-label-Test-string-value-haswarn.html": "Possible misuse of \u201caria-label\u201d. (If you disagree with this warning, file an issue report or send e-mail to www-validator@w3.org.)",
|
||||
"html-rdfa/0019-novalid.html": "Attribute \u201chref\u201d not allowed on element \u201cdiv\u201d at this point.",
|
||||
"html-rdfa/0035-novalid.html": "Attribute \u201chref\u201d not allowed on element \u201cimg\u201d at this point.",
|
||||
|
|
|
|||
|
|
@ -128,7 +128,7 @@ function assert_iframe_with_csp(t, url, csp, shouldBlock, urlId, blockedURI) {
|
|||
// Delay the check until after the postMessage has a chance to execute.
|
||||
setTimeout(t.step_func_done(function () {
|
||||
assert_equals(loaded[urlId], undefined);
|
||||
}), 1);
|
||||
}), 500);
|
||||
assert_throws("SecurityError", () => {
|
||||
var x = i.contentWindow.location.href;
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
Cookie: foo=bar
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#flow-control" title="9.5.2 Controlling flow next to floats: the 'clear' property">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
|
||||
<style>
|
||||
#container {
|
||||
width: 100px;
|
||||
background: green;
|
||||
}
|
||||
#left {
|
||||
float: left;
|
||||
width: 25px;
|
||||
height: 10px;
|
||||
}
|
||||
#right {
|
||||
float: right;
|
||||
width: 25px;
|
||||
height: 20px;
|
||||
}
|
||||
#clears-left {
|
||||
clear: left;
|
||||
}
|
||||
#zero {
|
||||
margin-bottom: 40px;
|
||||
margin-top: -20px;
|
||||
}
|
||||
#nested-float {
|
||||
float: left;
|
||||
width: 25px;
|
||||
height: 20px;
|
||||
}
|
||||
#new-formatting-context {
|
||||
overflow: hidden;
|
||||
width: 60px;
|
||||
height: 80px;
|
||||
margin-top: -30px;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a filled green square.</p>
|
||||
<div id=container>
|
||||
<div id=left></div>
|
||||
<div id=right></div>
|
||||
<div>
|
||||
<div id=clears-left>
|
||||
<div>
|
||||
<div id=zero></div>
|
||||
<div id=nested-float></div>
|
||||
<!--
|
||||
The margins up to this new formatting context are chosen to hit an
|
||||
edge condition. At this point there are two possible margins:
|
||||
- (adjoining) {-30px, 40px} => 10px
|
||||
- (non-adjoining) {-20px, 40px} => 20px
|
||||
|
||||
The logic for placing this new formatting context however shouldn't
|
||||
check these margins, as there is an ancestor ("clears-left") which
|
||||
has clearance past adjoining floats ("left", and "right").
|
||||
|
||||
And "nested-float" should get placed at "10px".
|
||||
|
||||
However if we didn't have this logic the following would occur.
|
||||
1. We'd try and place the formatting context using the "adjoining"
|
||||
margins.
|
||||
2. The new formatting context doesn't "fit" on the same edge as the
|
||||
floats, so it would trigger a retry using with a new position
|
||||
calculated using the "non-adjoining" margins.
|
||||
3. During the next pass, it still doesn't think the margins have
|
||||
been separated yet as the parent is still using the position
|
||||
calculated by the forced clearance from above.
|
||||
4. It will trigger a retry again (and if an implementation does this
|
||||
in a loop, will timeout).
|
||||
-->
|
||||
<div id=new-formatting-context></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#flow-control" title="9.5.2 Controlling flow next to floats: the 'clear' property">
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div style="overflow: hidden; width: 100px; background: red; position: relative;">
|
||||
<div style="float: left; height: 50px; width: 50px; background: green"></div>
|
||||
<div style="height: 40px; background: green;"></div>
|
||||
<div style="margin-top: 15px; clear: both;">
|
||||
<div style="width: 50px; height: 50px; background: green; float: left;"></div>
|
||||
<div style="margin-top: -10px;">
|
||||
<span style="display: inline-block; width: 50px; height: 40px; background: green;"></span>
|
||||
</div>
|
||||
<div style="position: absolute; width: 50px; height: 10px; right: 0; top: 40px; background: green;"></div>
|
||||
<div style="position: absolute; width: 50px; height: 10px; right: 0; bottom: 0; background: green;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org">
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS22/box.html#collapsing-margins" title="8.3.1 Collapsing margins">
|
||||
<link rel="help" href="http://crbug.com/962175">
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
|
||||
<meta name="assert" content="A percentage height is unresolvable (i.e. gets treated as auto) if the containing block is auto.">
|
||||
<p>Test passes if there is a filled green square.</p>
|
||||
<div style="height:200px;">
|
||||
<div style="overflow:hidden; width:100px; background:green;">
|
||||
<div style="margin-bottom:100px;"></div>
|
||||
<div style="height:30%;"></div>
|
||||
<div style="margin-top:100px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS22/box.html#collapsing-margins">
|
||||
<p>Test passes if there is a filled green square.</p>
|
||||
<div style="width:100px; max-height:50px; background: green;">
|
||||
<div style="width:100px; height:51px; background:green; margin-bottom:10px;"></div>
|
||||
</div>
|
||||
<div style="width: 100px; height: 50px; background: green;"></div>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html">
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS22/box.html#collapsing-margins">
|
||||
<p>Test passes if there is a filled green square.</p>
|
||||
<div style="width:100px; min-height:50px; background: green;">
|
||||
<div style="width:100px; height:49px; background:green; margin-bottom:10px;"></div>
|
||||
</div>
|
||||
<div style="width: 100px; height: 50px; background: green;"></div>
|
||||
|
|
@ -4,6 +4,7 @@
|
|||
<meta charset="utf-8">
|
||||
<title>Inheritance of CSS Backgrounds and Borders properties</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#property-index">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-4/#property-index">
|
||||
<meta name="assert" content="Properties inherit or not according to the spec.">
|
||||
<meta name="assert" content="Properties have initial values according to the spec.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
|
|
@ -42,6 +43,8 @@ assert_not_inherited('background-color', transparentColor, 'rgb(42, 53, 64)');
|
|||
assert_not_inherited('background-image', 'none', 'url("https://example.com/")');
|
||||
assert_not_inherited('background-origin', 'padding-box', 'content-box');
|
||||
assert_not_inherited('background-position', '0% 0%', '10px 20px');
|
||||
assert_not_inherited('background-position-x', '0%', '10px');
|
||||
assert_not_inherited('background-position-y', '0%', '20px');
|
||||
assert_not_inherited('background-repeat', 'repeat', 'space round');
|
||||
assert_not_inherited('background-size', 'auto', 'contain');
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Backgrounds and Borders Module Level 4: getComputedValue().backgroundPositionX</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-4/#propdef-background-position-x">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/computed-testcommon.js"></script>
|
||||
<style>
|
||||
#target {
|
||||
font-size: 40px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
test_computed_value("background-position-x", "center", "50%");
|
||||
test_computed_value("background-position-x", "left", "0%");
|
||||
test_computed_value("background-position-x", "right", "100%");
|
||||
test_computed_value("background-position-x", "x-start");
|
||||
test_computed_value("background-position-x", "x-end");
|
||||
test_computed_value("background-position-x", "-20%");
|
||||
test_computed_value("background-position-x", "10px");
|
||||
test_computed_value("background-position-x", "0.5em", "20px");
|
||||
test_computed_value("background-position-x", "calc(10px - 0.5em)", "-10px");
|
||||
test_computed_value("background-position-x", "left -20%", "-20%");
|
||||
test_computed_value("background-position-x", "right 10px", "calc(100% + 10px)");
|
||||
test_computed_value("background-position-x", "-20%, 10px");
|
||||
test_computed_value("background-position-x", "center, left, right", "50%, 0%, 100px");
|
||||
test_computed_value("background-position-x", "0.5em, x-start, x-end", "20px, x-start, x-end");
|
||||
test_computed_value("background-position-x", "calc(10px - 0.5em), left -20%, right 10px", "-10px, -20%, calc(100% + 10px)");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Backgrounds and Borders Module Level 4: parsing background-position-x with invalid values</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-4/#propdef-background-position-x">
|
||||
<meta name="assert" content="background-position-x supports only the grammar '[ center | [ left | right | x-start | x-end ]? <length-percentage>? ]#'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
test_invalid_value("background-position-x", "top");
|
||||
test_invalid_value("background-position-x", "bottom");
|
||||
test_invalid_value("background-position-x", "y-start");
|
||||
test_invalid_value("background-position-x", "y-end");
|
||||
test_invalid_value("background-position-x", "center 10px");
|
||||
test_invalid_value("background-position-x", "20% left");
|
||||
test_invalid_value("background-position-x", "right left");
|
||||
test_invalid_value("background-position-x", "x-start center");
|
||||
test_invalid_value("background-position-x", "left, center right");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Backgrounds and Borders Module Level 4: parsing background-position-x with valid values</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-4/#propdef-background-position-x">
|
||||
<meta name="assert" content="background-position-x supports the full grammar '[ center | [ left | right | x-start | x-end ]? <length-percentage>? ]#'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
test_valid_value("background-position-x", "center");
|
||||
test_valid_value("background-position-x", "left");
|
||||
test_valid_value("background-position-x", "right");
|
||||
test_valid_value("background-position-x", "x-start");
|
||||
test_valid_value("background-position-x", "x-end");
|
||||
test_valid_value("background-position-x", "-20%");
|
||||
test_valid_value("background-position-x", "10px");
|
||||
test_valid_value("background-position-x", "0.5em");
|
||||
test_valid_value("background-position-x", "calc(10px - 0.5em)");
|
||||
test_valid_value("background-position-x", "left -20%");
|
||||
test_valid_value("background-position-x", "right 10px");
|
||||
test_valid_value("background-position-x", "-20%, 10px");
|
||||
test_valid_value("background-position-x", "center, left, right");
|
||||
test_valid_value("background-position-x", "0.5em, x-start, x-end");
|
||||
test_valid_value("background-position-x", "calc(10px - 0.5em), left -20%, right 10px");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Backgrounds and Borders Module Level 4: getComputedValue().backgroundPositionY</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-4/#propdef-background-position-y">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/computed-testcommon.js"></script>
|
||||
<style>
|
||||
#target {
|
||||
font-size: 40px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
test_computed_value("background-position-y", "center", "50%");
|
||||
test_computed_value("background-position-y", "top", "0%");
|
||||
test_computed_value("background-position-y", "bottom", "100%");
|
||||
test_computed_value("background-position-y", "y-start");
|
||||
test_computed_value("background-position-y", "y-end");
|
||||
test_computed_value("background-position-y", "-20%");
|
||||
test_computed_value("background-position-y", "10px");
|
||||
test_computed_value("background-position-y", "0.5em", "20px");
|
||||
test_computed_value("background-position-y", "calc(10px - 0.5em)", "-10px");
|
||||
test_computed_value("background-position-y", "top -20%", "-20%");
|
||||
test_computed_value("background-position-y", "bottom 10px", "calc(100% + 10px)");
|
||||
test_computed_value("background-position-y", "-20%, 10px");
|
||||
test_computed_value("background-position-y", "center, top, bottom", "50%, 0%, 100px");
|
||||
test_computed_value("background-position-y", "0.5em, y-start, y-end", "20px, y-start, y-end");
|
||||
test_computed_value("background-position-y", "calc(10px - 0.5em), top -20%, bottom 10px", "-10px, -20%, calc(100% + 10px)");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Backgrounds and Borders Module Level 4: parsing background-position-y with invalid values</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-4/#propdef-background-position-y">
|
||||
<meta name="assert" content="background-position-y supports only the grammar '[ center | [ top | bottom | y-start | y-end ]? <length-percentage>? ]#'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
test_invalid_value("background-position-y", "left");
|
||||
test_invalid_value("background-position-y", "right");
|
||||
test_invalid_value("background-position-y", "x-start");
|
||||
test_invalid_value("background-position-y", "x-end");
|
||||
test_invalid_value("background-position-y", "center 10px");
|
||||
test_invalid_value("background-position-y", "20% top");
|
||||
test_invalid_value("background-position-y", "bottom top");
|
||||
test_invalid_value("background-position-y", "y-start center");
|
||||
test_invalid_value("background-position-y", "top, center bottom");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Backgrounds and Borders Module Level 4: parsing background-position-y with valid values</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-4/#propdef-background-position-y">
|
||||
<meta name="assert" content="background-position-y supports the full grammar '[ center | [ top | bottom | y-start | y-end ]? <length-percentage>? ]#'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
test_valid_value("background-position-y", "center");
|
||||
test_valid_value("background-position-y", "top");
|
||||
test_valid_value("background-position-y", "bottom");
|
||||
test_valid_value("background-position-y", "y-start");
|
||||
test_valid_value("background-position-y", "y-end");
|
||||
test_valid_value("background-position-y", "-20%");
|
||||
test_valid_value("background-position-y", "10px");
|
||||
test_valid_value("background-position-y", "0.5em");
|
||||
test_valid_value("background-position-y", "calc(10px - 0.5em)");
|
||||
test_valid_value("background-position-y", "top -20%");
|
||||
test_valid_value("background-position-y", "bottom 10px");
|
||||
test_valid_value("background-position-y", "-20%, 10px");
|
||||
test_valid_value("background-position-y", "center, top, bottom");
|
||||
test_valid_value("background-position-y", "0.5em, y-start, y-end");
|
||||
test_valid_value("background-position-y", "calc(10px - 0.5em), top -20%, bottom 10px");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Overflow and Transforms: css-overflow-3</title>
|
||||
<link rel="author" href="mailto:atotic@google.com">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<link rel="help" href="https://crbug.com/964924">
|
||||
<meta name="assert" content="chrome does not crash with css contain edge case">
|
||||
<style>
|
||||
* {
|
||||
contain: size layout;
|
||||
}
|
||||
html {
|
||||
outline-style: auto;
|
||||
margin-bottom: 39%;
|
||||
}
|
||||
#target {
|
||||
-webkit-appearance: push-button;
|
||||
}
|
||||
</style>
|
||||
<output id="target">text</output>
|
||||
<script>
|
||||
test(() => {
|
||||
document.body.offsetTop;
|
||||
document.querySelector("#target").value = "";
|
||||
document.body.offsetTop;
|
||||
assert_equals(document.querySelector("#target").value, "");
|
||||
}, 'chrome does not crash with contain');
|
||||
</script>
|
||||
|
|
@ -5,6 +5,7 @@
|
|||
<link rel="help" href="https://drafts.csswg.org/css-display/#unbox-html">
|
||||
<link rel="match" href="display-contents-pass-ref.html">
|
||||
<style>
|
||||
html { font-kerning: none; font-feature-settings: "kern" off; }
|
||||
details, summary {
|
||||
all: initial;
|
||||
border: 10px solid red;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="author" title="Google LLC" href="http://www.google.com" />
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#line-sizing" />
|
||||
<title>css-flexbox: Tests that we use the aspect ratio to compute the main size</title>
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
|
||||
|
||||
<style>
|
||||
.flex {
|
||||
display: flex;
|
||||
width: 100px;
|
||||
min-height: 500px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
|
||||
<div class="flex">
|
||||
<img src="support/300x150-green.png">
|
||||
<div style="width: 100px; height: 50px; background: green;"></div>
|
||||
</div>
|
||||
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
.row-wrapper, .column-wrapper {
|
||||
margin: 4px 0;
|
||||
overflow: auto;
|
||||
direction: rtl;
|
||||
border: 2px solid black;
|
||||
}
|
||||
|
||||
.column-wrapper {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.row-wrapper {
|
||||
height: 300px;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
.column-wrapper > div {
|
||||
margin: 4px;
|
||||
height: 30px;
|
||||
background: #CCC;
|
||||
}
|
||||
|
||||
.column-wrapper > .h-overflow {
|
||||
margin-top: 8px; // Compensate for margin collapsing.
|
||||
}
|
||||
|
||||
.h-overflow {
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.row-wrapper > div {
|
||||
margin: 4px;
|
||||
width: 30px;
|
||||
background: #CCC;
|
||||
}
|
||||
|
||||
.v-overflow {
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
.row-wrapper > .v-overflow {
|
||||
margin-right: 8px; // Compensate for margin collapsing.
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class=column-wrapper>
|
||||
<div>one</div>
|
||||
<div class=h-overflow>two</div>
|
||||
</div>
|
||||
|
||||
<div class=row-wrapper>
|
||||
<div>one</div>
|
||||
<div class=v-overflow>two</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<title>cross-axis top and left overflow</title>
|
||||
<link rel="author" title="Google, Inc." href="http://www.google.com/">
|
||||
<link rel="match" href="overflow-top-left-ref.html">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#cross-sizing">
|
||||
</head>
|
||||
|
||||
<style>
|
||||
.row-wrapper, .column-wrapper {
|
||||
margin: 4px 0;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
direction: rtl;
|
||||
border: 2px solid black;
|
||||
}
|
||||
|
||||
.column-wrapper {
|
||||
width: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.row-wrapper {
|
||||
height: 300px;
|
||||
flex-direction: column;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
|
||||
.column-wrapper > div {
|
||||
margin: 4px;
|
||||
height: 30px;
|
||||
background: #CCC;
|
||||
}
|
||||
|
||||
.h-overflow {
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.row-wrapper > div {
|
||||
margin: 4px;
|
||||
width: 30px;
|
||||
background: #CCC;
|
||||
}
|
||||
|
||||
.v-overflow {
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class=column-wrapper>
|
||||
<div>one</div>
|
||||
<div class=h-overflow>two</div>
|
||||
</div>
|
||||
|
||||
<div class=row-wrapper>
|
||||
<div>one</div>
|
||||
<div class=v-overflow>two</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexible Box Layout: getComputedValue().flexBasis</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-basis">
|
||||
<meta name="assert" content="flex-basis computed value is as specified, with length made absolute.">
|
||||
<meta name="assert" content="flex-basis computed value is non-negative.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/computed-testcommon.js"></script>
|
||||
<style>
|
||||
#target {
|
||||
font-size: 40px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
test_computed_value("flex-basis", "1px");
|
||||
test_computed_value("flex-basis", "calc(10px + 0.5em)", "30px");
|
||||
test_computed_value("flex-basis", "calc(10px - 0.5em)", "0px");
|
||||
test_computed_value("flex-basis", "400%");
|
||||
test_computed_value("flex-basis", "auto");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexible Box Layout: getComputedValue().flexDirection</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-direction">
|
||||
<meta name="assert" content="flex-direction computed value is as specified.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/computed-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
test_computed_value("flex-direction", "row");
|
||||
test_computed_value("flex-direction", "row-reverse");
|
||||
test_computed_value("flex-direction", "column");
|
||||
test_computed_value("flex-direction", "column-reverse");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Animations: getComputedValue().flexFlow</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-flow">
|
||||
<meta name="assert" content="flex-flow computed value is as specified.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/computed-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
test_computed_value("flex-flow", "column wrap-reverse");
|
||||
test_computed_value("flex-flow", "row-reverse wrap");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexible Box Layout: getComputedValue().flexGrow</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-grow">
|
||||
<meta name="assert" content="flex-grow computed value is as specified.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/computed-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
test_computed_value("flex-grow", "1");
|
||||
test_computed_value("flex-grow", "2.34e+06");
|
||||
test_computed_value("flex-grow", "6.78e+08");
|
||||
test_computed_value("flex-grow", "0");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexible Box Layout: getComputedValue().flexShrink</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-shrink">
|
||||
<meta name="assert" content="flex-shrink computed value is as specified.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/computed-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
test_computed_value("flex-shrink", "1");
|
||||
test_computed_value("flex-shrink", "2.34e+06");
|
||||
test_computed_value("flex-shrink", "6.78e+08");
|
||||
test_computed_value("flex-shrink", "0");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Flexible Box Layout: getComputedValue().flexWrap</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-flex-wrap">
|
||||
<meta name="assert" content="flex-wrap computed value is as specified.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/computed-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
test_computed_value("flex-wrap", "nowrap");
|
||||
test_computed_value("flex-wrap", "wrap");
|
||||
test_computed_value("flex-wrap", "wrap-reverse");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,182 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
|
||||
<script src="support/scrollbars.js"></script>
|
||||
|
||||
<style>
|
||||
.horizontal-header {
|
||||
width: 120px;
|
||||
}
|
||||
.vertical-header {
|
||||
width: 60px;
|
||||
}
|
||||
.container-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.container {
|
||||
flex: none;
|
||||
margin: 5px;
|
||||
}
|
||||
.ltr {
|
||||
direction: ltr;
|
||||
}
|
||||
.rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
.horizontal {
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
.flipped-blocks {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
.flipped-lines {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
.flex {
|
||||
border: 2px solid red;
|
||||
overflow: auto;
|
||||
max-width: 100px;
|
||||
max-height: 100px;
|
||||
white-space: nowrap;
|
||||
font-size: 0;
|
||||
}
|
||||
.row > div, .row-reverse > div {
|
||||
display: inline-flex;
|
||||
margin: 3px;
|
||||
}
|
||||
.column > div, .column-reverse > div {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* Adjust margins to account for collapsing. */
|
||||
.ltr.horizontal > .row > .leaf3 {
|
||||
margin-right: 0;
|
||||
}
|
||||
.ltr.flipped-blocks > .row > .leaf3, .ltr.flipped-lines > .row > .leaf3 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.rtl.horizontal > .row > .leaf3 {
|
||||
margin-left: 0;
|
||||
}
|
||||
.rtl.flipped-blocks > .row > .leaf3, .rtl.flipped-lines > .row > .leaf3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.ltr.horizontal > .row-reverse > .leaf3 {
|
||||
margin-left: 0;
|
||||
}
|
||||
.ltr.flipped-blocks > .row-reverse > .leaf3, .ltr.flipped-lines > .row-reverse > .leaf3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
.rtl.horizontal > .row-reverse > .leaf3 {
|
||||
margin-right: 0;
|
||||
}
|
||||
.rtl.flipped-blocks > .row-reverse > .leaf3, .rtl.flipped-lines > .row-reverse > .leaf3 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.horizontal > .column > .leaf1, .horizontal > .column > .leaf2 {
|
||||
margin: 3px 3px 6px 3px;
|
||||
}
|
||||
.horizontal > .column > .leaf3 {
|
||||
margin: 3px;
|
||||
}
|
||||
.flipped-blocks > .column > .leaf1, .flipped-blocks > .column > .leaf2 {
|
||||
margin: 3px 3px 3px 6px;
|
||||
}
|
||||
.flipped-blocks > .column > .leaf3 {
|
||||
margin: 3px;
|
||||
}
|
||||
.flipped-lines > .column > .leaf1, .flipped-lines > .column > .leaf2 {
|
||||
margin: 3px 6px 3px 3px;
|
||||
}
|
||||
.flipped-lines > .column > .leaf3 {
|
||||
margin: 3px;
|
||||
}
|
||||
|
||||
.horizontal > .column-reverse > .leaf1, .horizontal > .column-reverse > .leaf2 {
|
||||
margin: 6px 3px 3px 3px;
|
||||
}
|
||||
.horizontal > .column-reverse > .leaf3 {
|
||||
margin: 0 3px 3px 3px;
|
||||
}
|
||||
.flipped-blocks > .column-reverse > .leaf1, .flipped-blocks > .column-reverse > .leaf2 {
|
||||
margin: 3px 6px 3px 3px;
|
||||
}
|
||||
.flipped-blocks > .column-reverse > .leaf3 {
|
||||
margin: 3px 0 3px 3px;
|
||||
}
|
||||
.flipped-lines > .column-reverse > .leaf1, .flipped-lines > .column-reverse > .leaf2 {
|
||||
margin: 3px 3px 3px 6px;
|
||||
}
|
||||
.flipped-lines > .column-reverse > .leaf3 {
|
||||
margin: 3px 3px 3px 0;
|
||||
}
|
||||
|
||||
.flex > div {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: 2px solid blue;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.flex > div > div {
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
flex: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<div class="container-row">
|
||||
<div class="vertical-header ltr horizontal"></div>
|
||||
<div class="horizontal-header ltr horizontal">ltr<br>horizontal-tb</div>
|
||||
<div class="vertical-header ltr flipped-blocks">ltr<br>vertical-rl</div>
|
||||
<div class="vertical-header ltr flipped-blocks">ltr<br>vertical-lr</div>
|
||||
<div class="horizontal-header rtl horizontal">rtl<br>horizontal-tb</div>
|
||||
<div class="vertical-header rtl flipped-blocks">rtl<br>vertical-rl</div>
|
||||
<div class="vertical-header rtl flipped-blocks">rtl<br>vertical-lr</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Override createContentNode to emulate reverse flow direction.
|
||||
createContentNode = (flexDirection, textDirection, writingMode) => {
|
||||
var flexNode = document.createElement("div");
|
||||
flexNode.className = "flex " + flexDirection;
|
||||
flexNode.title = "flex-direction: " + flexDirection + "; direction: " + textDirection + "; writing-mode: " + writingMode;
|
||||
for (var i = 1; i < 4; i++)
|
||||
flexNode.appendChild(createLeafNode(flexDirection.endsWith("reverse") ? 4 - i : i));
|
||||
return flexNode;
|
||||
}
|
||||
|
||||
flexDirections.forEach((flexDirection) => {
|
||||
var containerRow = createContainerRow(flexDirection);
|
||||
document.body.appendChild(containerRow);
|
||||
});
|
||||
|
||||
// Scroll all flex containers to the emulated beginning of flow.
|
||||
var nodes = document.querySelectorAll(".ltr > .row-reverse");
|
||||
for (var i = 0; i < nodes.length; i++) {
|
||||
nodes[i].scrollLeft = 10000;
|
||||
nodes[i].scrollTop = 10000;
|
||||
}
|
||||
nodes = document.querySelectorAll(".rtl > .row-reverse");
|
||||
for (var i = 0; i < nodes.length; i++) {
|
||||
nodes[i].scrollLeft = 0;
|
||||
nodes[i].scrollTop = 0;
|
||||
}
|
||||
nodes = document.querySelectorAll(".column-reverse");
|
||||
for (var i = 0; i < nodes.length; i++) {
|
||||
nodes[i].scrollLeft = 10000;
|
||||
nodes[i].scrollTop = 10000;
|
||||
}
|
||||
nodes = document.querySelectorAll(".flipped-blocks > .column-reverse");
|
||||
for (var i = 0; i < nodes.length; i++) {
|
||||
nodes[i].scrollLeft = 0;
|
||||
nodes[i].scrollTop = 0;
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<title>Auto scrollbars inside flexbox with direction and writing-mode</title>
|
||||
<link rel="author" title="Google, Inc." href="http://www.google.com/">
|
||||
<link rel="match" href="scrollbars-auto-ref.html">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/">
|
||||
|
||||
<script src="support/scrollbars.js"></script>
|
||||
|
||||
<style>
|
||||
.horizontal-header {
|
||||
width: 120px;
|
||||
}
|
||||
.vertical-header {
|
||||
width: 60px;
|
||||
}
|
||||
.container-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.container {
|
||||
flex: none;
|
||||
margin: 5px;
|
||||
}
|
||||
.ltr {
|
||||
direction: ltr;
|
||||
}
|
||||
.rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
.horizontal {
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
.flipped-blocks {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
.flipped-lines {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
.flex {
|
||||
border: 2px solid red;
|
||||
display: flex;
|
||||
overflow: auto;
|
||||
max-width: 100px;
|
||||
max-height: 100px;
|
||||
}
|
||||
.column {
|
||||
flex-direction: column;
|
||||
}
|
||||
.column-reverse {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
.row {
|
||||
flex-direction: row;
|
||||
}
|
||||
.row-reverse {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.flex > .leaf1, .flex > .leaf2, .flex > .leaf3 {
|
||||
flex: none;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: 2px solid blue;
|
||||
margin: 3px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.flex > div > div {
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
flex: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<div class="container-row">
|
||||
<div class="vertical-header ltr horizontal"></div>
|
||||
<div class="horizontal-header ltr horizontal">ltr<br>horizontal-tb</div>
|
||||
<div class="vertical-header ltr flipped-blocks">ltr<br>vertical-rl</div>
|
||||
<div class="vertical-header ltr flipped-blocks">ltr<br>vertical-lr</div>
|
||||
<div class="horizontal-header rtl horizontal">rtl<br>horizontal-tb</div>
|
||||
<div class="vertical-header rtl flipped-blocks">rtl<br>vertical-rl</div>
|
||||
<div class="vertical-header rtl flipped-blocks">rtl<br>vertical-lr</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
flexDirections.forEach((flexDirection) => {
|
||||
var containerRow = createContainerRow(flexDirection);
|
||||
document.body.appendChild(containerRow);
|
||||
});
|
||||
</script>
|
||||
182
tests/wpt/web-platform-tests/css/css-flexbox/scrollbars-ref.html
Normal file
182
tests/wpt/web-platform-tests/css/css-flexbox/scrollbars-ref.html
Normal file
|
|
@ -0,0 +1,182 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
|
||||
<script src="support/scrollbars.js"></script>
|
||||
|
||||
<style>
|
||||
.horizontal-header {
|
||||
width: 120px;
|
||||
}
|
||||
.vertical-header {
|
||||
width: 60px;
|
||||
}
|
||||
.container-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.container {
|
||||
flex: none;
|
||||
margin: 5px;
|
||||
}
|
||||
.ltr {
|
||||
direction: ltr;
|
||||
}
|
||||
.rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
.horizontal {
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
.flipped-blocks {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
.flipped-lines {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
.flex {
|
||||
border: 2px solid red;
|
||||
overflow: scroll;
|
||||
max-width: 100px;
|
||||
max-height: 100px;
|
||||
white-space: nowrap;
|
||||
font-size: 0;
|
||||
}
|
||||
.row > div, .row-reverse > div {
|
||||
display: inline-flex;
|
||||
margin: 3px;
|
||||
}
|
||||
.column > div, .column-reverse > div {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* Adjust margins to account for collapsing. */
|
||||
.ltr.horizontal > .row > .leaf3 {
|
||||
margin-right: 0;
|
||||
}
|
||||
.ltr.flipped-blocks > .row > .leaf3, .ltr.flipped-lines > .row > .leaf3 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.rtl.horizontal > .row > .leaf3 {
|
||||
margin-left: 0;
|
||||
}
|
||||
.rtl.flipped-blocks > .row > .leaf3, .rtl.flipped-lines > .row > .leaf3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.ltr.horizontal > .row-reverse > .leaf3 {
|
||||
margin-left: 0;
|
||||
}
|
||||
.ltr.flipped-blocks > .row-reverse > .leaf3, .ltr.flipped-lines > .row-reverse > .leaf3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
.rtl.horizontal > .row-reverse > .leaf3 {
|
||||
margin-right: 0;
|
||||
}
|
||||
.rtl.flipped-blocks > .row-reverse > .leaf3, .rtl.flipped-lines > .row-reverse > .leaf3 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.horizontal > .column > .leaf1, .horizontal > .column > .leaf2 {
|
||||
margin: 3px 3px 6px 3px;
|
||||
}
|
||||
.horizontal > .column > .leaf3 {
|
||||
margin: 3px;
|
||||
}
|
||||
.flipped-blocks > .column > .leaf1, .flipped-blocks > .column > .leaf2 {
|
||||
margin: 3px 3px 3px 6px;
|
||||
}
|
||||
.flipped-blocks > .column > .leaf3 {
|
||||
margin: 3px;
|
||||
}
|
||||
.flipped-lines > .column > .leaf1, .flipped-lines > .column > .leaf2 {
|
||||
margin: 3px 6px 3px 3px;
|
||||
}
|
||||
.flipped-lines > .column > .leaf3 {
|
||||
margin: 3px;
|
||||
}
|
||||
|
||||
.horizontal > .column-reverse > .leaf1, .horizontal > .column-reverse > .leaf2 {
|
||||
margin: 6px 3px 3px 3px;
|
||||
}
|
||||
.horizontal > .column-reverse > .leaf3 {
|
||||
margin: 0 3px 3px 3px;
|
||||
}
|
||||
.flipped-blocks > .column-reverse > .leaf1, .flipped-blocks > .column-reverse > .leaf2 {
|
||||
margin: 3px 6px 3px 3px;
|
||||
}
|
||||
.flipped-blocks > .column-reverse > .leaf3 {
|
||||
margin: 3px 0 3px 3px;
|
||||
}
|
||||
.flipped-lines > .column-reverse > .leaf1, .flipped-lines > .column-reverse > .leaf2 {
|
||||
margin: 3px 3px 3px 6px;
|
||||
}
|
||||
.flipped-lines > .column-reverse > .leaf3 {
|
||||
margin: 3px 3px 3px 0;
|
||||
}
|
||||
|
||||
.flex > div {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: 2px solid blue;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.flex > div > div {
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
flex: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<div class="container-row">
|
||||
<div class="vertical-header ltr horizontal"></div>
|
||||
<div class="horizontal-header ltr horizontal">ltr<br>horizontal-tb</div>
|
||||
<div class="vertical-header ltr flipped-blocks">ltr<br>vertical-rl</div>
|
||||
<div class="vertical-header ltr flipped-blocks">ltr<br>vertical-lr</div>
|
||||
<div class="horizontal-header rtl horizontal">rtl<br>horizontal-tb</div>
|
||||
<div class="vertical-header rtl flipped-blocks">rtl<br>vertical-rl</div>
|
||||
<div class="vertical-header rtl flipped-blocks">rtl<br>vertical-lr</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Override createContentNode to emulate reverse flow direction.
|
||||
createContentNode = (flexDirection, textDirection, writingMode) => {
|
||||
var flexNode = document.createElement("div");
|
||||
flexNode.className = "flex " + flexDirection;
|
||||
flexNode.title = "flex-direction: " + flexDirection + "; direction: " + textDirection + "; writing-mode: " + writingMode;
|
||||
for (var i = 1; i < 4; i++)
|
||||
flexNode.appendChild(createLeafNode(flexDirection.endsWith("reverse") ? 4 - i : i));
|
||||
return flexNode;
|
||||
}
|
||||
|
||||
flexDirections.forEach((flexDirection) => {
|
||||
var containerRow = createContainerRow(flexDirection);
|
||||
document.body.appendChild(containerRow);
|
||||
});
|
||||
|
||||
// Scroll all flex containers to the emulated beginning of flow.
|
||||
var nodes = document.querySelectorAll(".ltr > .row-reverse");
|
||||
for (var i = 0; i < nodes.length; i++) {
|
||||
nodes[i].scrollLeft = 10000;
|
||||
nodes[i].scrollTop = 10000;
|
||||
}
|
||||
nodes = document.querySelectorAll(".rtl > .row-reverse");
|
||||
for (var i = 0; i < nodes.length; i++) {
|
||||
nodes[i].scrollLeft = 0;
|
||||
nodes[i].scrollTop = 0;
|
||||
}
|
||||
nodes = document.querySelectorAll(".column-reverse");
|
||||
for (var i = 0; i < nodes.length; i++) {
|
||||
nodes[i].scrollLeft = 10000;
|
||||
nodes[i].scrollTop = 10000;
|
||||
}
|
||||
nodes = document.querySelectorAll(".flipped-blocks > .column-reverse");
|
||||
for (var i = 0; i < nodes.length; i++) {
|
||||
nodes[i].scrollLeft = 0;
|
||||
nodes[i].scrollTop = 0;
|
||||
}
|
||||
</script>
|
||||
95
tests/wpt/web-platform-tests/css/css-flexbox/scrollbars.html
Normal file
95
tests/wpt/web-platform-tests/css/css-flexbox/scrollbars.html
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
<!DOCTYPE html>
|
||||
<head>
|
||||
<title>Scrollbars inside flexbox with direction and writing-mode</title>
|
||||
<link rel="author" title="Google, Inc." href="http://www.google.com/">
|
||||
<link rel="match" href="scrollbars-ref.html">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-flexbox/">
|
||||
|
||||
<script src="support/scrollbars.js"></script>
|
||||
|
||||
<style>
|
||||
.horizontal-header {
|
||||
width: 120px;
|
||||
}
|
||||
.vertical-header {
|
||||
width: 60px;
|
||||
}
|
||||
.container-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.container {
|
||||
flex: none;
|
||||
margin: 5px;
|
||||
}
|
||||
.ltr {
|
||||
direction: ltr;
|
||||
}
|
||||
.rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
.horizontal {
|
||||
writing-mode: horizontal-tb;
|
||||
}
|
||||
.flipped-blocks {
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
.flipped-lines {
|
||||
writing-mode: vertical-lr;
|
||||
}
|
||||
.flex {
|
||||
border: 2px solid red;
|
||||
display: flex;
|
||||
overflow: scroll;
|
||||
max-width: 100px;
|
||||
max-height: 100px;
|
||||
}
|
||||
.column {
|
||||
flex-direction: column;
|
||||
}
|
||||
.column-reverse {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
.row {
|
||||
flex-direction: row;
|
||||
}
|
||||
.row-reverse {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.flex > .leaf1, .flex > .leaf2, .flex > .leaf3 {
|
||||
flex: none;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border: 2px solid blue;
|
||||
margin: 3px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.flex > div > div {
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
flex: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<div class="container-row">
|
||||
<div class="vertical-header ltr horizontal"></div>
|
||||
<div class="horizontal-header ltr horizontal">ltr<br>horizontal-tb</div>
|
||||
<div class="vertical-header ltr flipped-blocks">ltr<br>vertical-rl</div>
|
||||
<div class="vertical-header ltr flipped-blocks">ltr<br>vertical-lr</div>
|
||||
<div class="horizontal-header rtl horizontal">rtl<br>horizontal-tb</div>
|
||||
<div class="vertical-header rtl flipped-blocks">rtl<br>vertical-rl</div>
|
||||
<div class="vertical-header rtl flipped-blocks">rtl<br>vertical-lr</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
flexDirections.forEach((flexDirection) => {
|
||||
var containerRow = createContainerRow(flexDirection);
|
||||
document.body.appendChild(containerRow);
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
var flexDirections = ["row", "row-reverse", "column", "column-reverse"];
|
||||
var textDirections = ["ltr", "rtl"];
|
||||
var writingModes = ["horizontal", "flipped-blocks", "flipped-lines"];
|
||||
|
||||
var createLeafNode = (i) => {
|
||||
var flexItem = document.createElement("div");
|
||||
flexItem.className = "leaf" + i;
|
||||
var contentItem = document.createElement("div");
|
||||
contentItem.innerHTML = i;
|
||||
flexItem.appendChild(contentItem);
|
||||
return flexItem;
|
||||
}
|
||||
|
||||
var createContentNode = (flexDirection, textDirection, writingMode) => {
|
||||
var flexNode = document.createElement("div");
|
||||
flexNode.className = "flex " + flexDirection;
|
||||
flexNode.title = "flex-direction: " + flexDirection + "; direction: " + textDirection + "; writing-mode: " + writingMode;
|
||||
for (var i = 1; i < 4; i++)
|
||||
flexNode.appendChild(createLeafNode(i));
|
||||
var marginShim = document.createElement("div");
|
||||
return flexNode;
|
||||
}
|
||||
|
||||
var createContainerNode = (flexDirection, textDirection, writingMode) => {
|
||||
var containerNode = document.createElement("div");
|
||||
containerNode.className = "container " + textDirection + " " + writingMode;
|
||||
containerNode.appendChild(createContentNode(flexDirection, textDirection, writingMode));
|
||||
return containerNode;
|
||||
}
|
||||
|
||||
var createContainerRow = (flexDirection) => {
|
||||
var containerRow = document.createElement("div");
|
||||
containerRow.className = "container-row";
|
||||
var rowLabel = document.createElement("div");
|
||||
rowLabel.className = "vertical-header horizontal " + flexDirection;
|
||||
rowLabel.innerHTML = flexDirection;
|
||||
containerRow.appendChild(rowLabel);
|
||||
textDirections.forEach((textDirection) => {
|
||||
writingModes.forEach((writingMode) => {
|
||||
var containerNode = createContainerNode(flexDirection, textDirection, writingMode);
|
||||
containerRow.appendChild(containerNode);
|
||||
});
|
||||
});
|
||||
return containerRow;
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS Font Loading reference: modification of descriptors</title>
|
||||
<style>
|
||||
@font-face { font-family: test; src: url(resources/GenR102.woff2); }
|
||||
@font-face { font-family: test; font-style:italic; src: url(resources/GenI102.woff2); }
|
||||
body { font-family: sans-serif; }
|
||||
.test { font-family: test, sans-serif; }
|
||||
</style>
|
||||
<body>
|
||||
<div>
|
||||
All lines below should use the same serif font, with the word "weight" in italics:
|
||||
<p class=test>Using original family name of a FontFace</p>
|
||||
<p class=test>Using updated family name of a FontFace</p>
|
||||
<p class=test>Using updated <i>weight</i> descriptors</p>
|
||||
<p class=test>Using updated unicode-range descriptors</p>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<meta charset=utf-8>
|
||||
<title>CSS Font Loading test: modification of descriptors</title>
|
||||
<link rel="author" title="Jonathan Kew" href="jkew@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-font-loading/#fontface-interface">
|
||||
<meta name="assert" content="If descriptors of a FontFace are modified, the new values should take effect">
|
||||
<link rel="match" href="fontface-descriptor-updates-ref.html">
|
||||
<style>
|
||||
body { font-family: sans-serif; }
|
||||
#test1 { font-family: test1, sans-serif; }
|
||||
#test2 { font-family: test2, monospace; }
|
||||
#test3 { font-family: test3, sans-serif; }
|
||||
#test4 { font-family: test4, monospace; }
|
||||
</style>
|
||||
<script>
|
||||
function run() {
|
||||
let f1 = new FontFace("test1", "url(resources/GenR102.woff2)");
|
||||
document.fonts.add(f1);
|
||||
let f2 = new FontFace("to_be_updated", "url(resources/GenR102.woff2)");
|
||||
document.fonts.add(f2);
|
||||
let f3 = new FontFace("test3", "url(resources/GenR102.woff2)", { weight: 700 });
|
||||
document.fonts.add(f3);
|
||||
let f4 = new FontFace("test3", "url(resources/GenI102.woff2)");
|
||||
document.fonts.add(f4);
|
||||
let f5 = new FontFace("test4", "url(resources/GenR102.woff2)", { unicodeRange: "U+002?" });
|
||||
document.fonts.add(f5);
|
||||
let f6 = new FontFace("test4", "url(resources/GenI102.woff2)", { unicodeRange: "U+00??" });
|
||||
document.fonts.add(f6);
|
||||
|
||||
// Change family name to make f2 match #test2
|
||||
f2.family = "test2";
|
||||
|
||||
// Swap weight descriptors so that f3 is regular and f4 (italic face) is regarded as bold
|
||||
f3.weight = 400;
|
||||
f4.weight = 700;
|
||||
|
||||
// Update unicode-range so that f5 will be used for all characters in #test4
|
||||
f5.unicodeRange = "U+00??";
|
||||
f6.unicodeRange = "U+0000";
|
||||
|
||||
document.fonts.ready.then(function() {
|
||||
document.documentElement.classList.remove("reftest-wait");
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<body onload="run()">
|
||||
<div>
|
||||
All lines below should use the same serif font, with the word "weight" in italics:
|
||||
<p id=test1>Using original family name of a FontFace</p>
|
||||
<p id=test2>Using updated family name of a FontFace</p>
|
||||
<p id=test3>Using updated <b>weight</b> descriptors</p>
|
||||
<p id=test4>Using updated unicode-range descriptors</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Logical Properties and Values: getComputedValue().insetBlock / insetInline</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-inset-block">
|
||||
<meta name="assert" content="Computed value is as specified, with lengths made absolute.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/computed-testcommon.js"></script>
|
||||
<style>
|
||||
#target {
|
||||
font-size: 40px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
test_computed_value("inset-block-start", "auto");
|
||||
test_computed_value("inset-block-end", "-10px");
|
||||
test_computed_value("inset-inline-start", "-20%");
|
||||
test_computed_value("inset-inline-end", "calc(10px - 0.5em)", "-10px");
|
||||
|
||||
test_computed_value("inset-block", "auto");
|
||||
test_computed_value("inset-block", "-10px");
|
||||
test_computed_value("inset-block", "calc(10px - 0.5em) -20%", "-10px -20%");
|
||||
test_computed_value("inset-block", "auto auto", "auto");
|
||||
test_computed_value("inset-inline", "-20%");
|
||||
test_computed_value("inset-inline", "calc(10px - 0.5em)", "-10px");
|
||||
test_computed_value("inset-inline", "-10px auto");
|
||||
test_computed_value("inset-inline", "auto calc(10px + 0.5em)", "auto 30px");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Logical Properties and Values: parsing inset-block and inset-inline with invalid values</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-inset-block">
|
||||
<meta name="assert" content="inset-block, inset-inline support only the grammar '<'top'>{1,2}'.">
|
||||
<meta name="assert" content="inset-block, inset-inline longhands support only the grammar '<'top'>'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
test_invalid_value("inset-block-start", "none");
|
||||
test_invalid_value("inset-block-end", "10");
|
||||
test_invalid_value("inset-inline-start", "20% calc(10px - 0.5em)");
|
||||
test_invalid_value("inset-inline-end", "10px, auto");
|
||||
|
||||
test_invalid_value("inset-block", "none");
|
||||
test_invalid_value("inset-block", "20%, calc(10px - 0.5em)");
|
||||
test_invalid_value("inset-inline", "10px auto 20px");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Logical Properties and Values: parsing inset-block and inset-inline with valid values</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-inset-block">
|
||||
<meta name="assert" content="inset-block, inset-inline support the full grammar '<'top'>{1,2}'.">
|
||||
<meta name="assert" content="inset-block, inset-inline longhands support the full grammar '<'top'>'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
test_valid_value("inset-block-start", "auto");
|
||||
test_valid_value("inset-block-end", "-10px");
|
||||
test_valid_value("inset-inline-start", "-20%");
|
||||
test_valid_value("inset-inline-end", "calc(10px - 0.5em)");
|
||||
|
||||
test_valid_value("inset-block", "auto");
|
||||
test_valid_value("inset-block", "-10px");
|
||||
test_valid_value("inset-block", "calc(10px - 0.5em) -20%");
|
||||
test_valid_value("inset-block", "auto auto", "auto");
|
||||
test_valid_value("inset-inline", "-20%");
|
||||
test_valid_value("inset-inline", "calc(10px - 0.5em)");
|
||||
test_valid_value("inset-inline", "-10px auto");
|
||||
test_valid_value("inset-inline", "auto calc(10px + 0.5em)");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Multi-column Layout Test Reference: 'column-fill: auto' and height constrained of a multi-column container</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
|
||||
<style>
|
||||
article {
|
||||
column-fill: auto;
|
||||
column-count: 2;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
div {
|
||||
height: 400px;
|
||||
background-color: lightgreen;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if you see two green strips with equal height.</p>
|
||||
<article>
|
||||
<div></div>
|
||||
</article>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Multi-column Layout Test: 'column-fill: auto' and height constrained of a multi-column container</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-multicol/#cf">
|
||||
<link rel="match" href="multicol-fill-auto-block-children-003-ref.html">
|
||||
<meta name="assert" content="This test verifies that 'max-height' on multi-column container imposes constraint on column boxes' height.">
|
||||
|
||||
<style>
|
||||
article {
|
||||
column-fill: auto;
|
||||
column-count: 2;
|
||||
width: 200px;
|
||||
/* Test max-height imposes constraint on column boxes' height. */
|
||||
max-height: 200px;
|
||||
}
|
||||
div {
|
||||
height: 400px;
|
||||
background-color: lightgreen;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>This test passes if you see two green strips with equal height.</p>
|
||||
<article>
|
||||
<div></div>
|
||||
</article>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Multi-column Layout Test Ref: Test width:min-content for a multi-column container with column-span:all children</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
|
||||
<style>
|
||||
article {
|
||||
border: 1px solid black;
|
||||
}
|
||||
.block {
|
||||
width: 100px;
|
||||
background-color: yellow;
|
||||
}
|
||||
.spanner {
|
||||
column-span: all;
|
||||
background-color: lime;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Case 1 -->
|
||||
<article style="width: 80px;">
|
||||
<div class="block">block1</div>
|
||||
<div class="spanner" style="width: 50px;">spanner</div>
|
||||
<div class="block">block2</div>
|
||||
</article>
|
||||
<br>
|
||||
|
||||
<!-- Case 2 -->
|
||||
<article style="width: 150px;">
|
||||
<div class="block">block1</div>
|
||||
<div class="spanner" style="width: 150px;">spanner</div>
|
||||
<div class="block">block2</div>
|
||||
</article>
|
||||
<br>
|
||||
|
||||
<!-- Case 3 -->
|
||||
<article style="width: 210px;">
|
||||
<div class="block">block1</div>
|
||||
<div class="spanner">spanner</div>
|
||||
<div class="block">block2</div>
|
||||
</article>
|
||||
<br>
|
||||
|
||||
<!-- Case 4 -->
|
||||
<article style="width: 250px;">
|
||||
<div class="block">block1</div>
|
||||
<div class="spanner" style="width: 250px;">spanner</div>
|
||||
<div class="block">block2</div>
|
||||
</article>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Multi-column Layout Test: Test width:min-content for a multi-column container with column-span:all children</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#column-span">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#sizing-properties">
|
||||
<link rel="match" href="multicol-width-004-ref.html">
|
||||
<meta name="assert" content="This test checks the width:min-content for a multi-column container is calculated correctly.">
|
||||
|
||||
<style>
|
||||
article {
|
||||
width: min-content;
|
||||
border: 1px solid black;
|
||||
column-gap: 10px;
|
||||
}
|
||||
.block {
|
||||
width: 100px;
|
||||
background-color: yellow;
|
||||
}
|
||||
.spanner {
|
||||
column-span: all;
|
||||
background-color: lime;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Case 1: column-width is specified, and spanner's width is less than
|
||||
column-width, so <article>'s expected width is 80px. -->
|
||||
<article style="column-width: 80px;">
|
||||
<div class="block">block1</div>
|
||||
<div class="spanner" style="width: 50px;">spanner</div>
|
||||
<div class="block">block2</div>
|
||||
</article>
|
||||
<br>
|
||||
|
||||
<!-- Case 2: like case 1, but spanner's width is larger than column-width.
|
||||
Thus <article>'s expected width is 150px; -->
|
||||
<article style="column-width: 80px;">
|
||||
<div class="block">block1</div>
|
||||
<div class="spanner" style="width: 150px;">spanner</div>
|
||||
<div class="block">block2</div>
|
||||
</article>
|
||||
<br>
|
||||
|
||||
<!-- Case 3: column-count is specified. Thus <article>'s expected width is two
|
||||
column boxes wide plus the column-gap, i.e. 100px*2 + 10px = 210px. -->
|
||||
<article style="column-count: 2;">
|
||||
<div class="block">block1</div>
|
||||
<div class="spanner">spanner</div>
|
||||
<div class="block">block2</div>
|
||||
</article>
|
||||
<br>
|
||||
|
||||
<!-- Case 4: like case 3, but the spanner's width is larger. Thus <article>'s
|
||||
expected width is 250px. -->
|
||||
<article style="column-count: 2;">
|
||||
<div class="block">block1</div>
|
||||
<div class="spanner" style="width: 250px;">spanner</div>
|
||||
<div class="block">block2</div>
|
||||
</article>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Multi-column Layout Test Ref: Test width:max-content for a multi-column container with column-span:all children</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
|
||||
<style>
|
||||
article {
|
||||
border: 1px solid black;
|
||||
}
|
||||
.block {
|
||||
width: 100px;
|
||||
background-color: yellow;
|
||||
}
|
||||
.spanner {
|
||||
column-span: all;
|
||||
background-color: lime;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Case 1 -->
|
||||
<article style="width: 80px;">
|
||||
<div class="block">block1</div>
|
||||
<div class="spanner" style="width: 50px;">spanner</div>
|
||||
<div class="block">block2</div>
|
||||
</article>
|
||||
<br>
|
||||
|
||||
<!-- Case 2 -->
|
||||
<article style="width: 120px;">
|
||||
<div class="block">block1</div>
|
||||
<div class="spanner" style="width: 50px;">spanner</div>
|
||||
<div class="block">block2</div>
|
||||
</article>
|
||||
<br>
|
||||
|
||||
<!-- Case 3 -->
|
||||
<article style="width: 150px;">
|
||||
<div class="block">block1</div>
|
||||
<div class="spanner" style="width: 150px;">spanner</div>
|
||||
<div class="block">block2</div>
|
||||
</article>
|
||||
<br>
|
||||
|
||||
<!-- Case 4 -->
|
||||
<article style="width: 210px;">
|
||||
<div class="block">block1</div>
|
||||
<div class="spanner">spanner</div>
|
||||
<div class="block">block2</div>
|
||||
</article>
|
||||
<br>
|
||||
|
||||
<!-- Case 4 -->
|
||||
<article style="width: 230px;">
|
||||
<div class="block">block1</div>
|
||||
<div class="spanner">spanner</div>
|
||||
<div class="block">block2</div>
|
||||
</article>
|
||||
<br>
|
||||
|
||||
<!-- Case 6 -->
|
||||
<article style="width: 250px;">
|
||||
<div class="block">block1</div>
|
||||
<div class="spanner" style="width: 250px;">spanner</div>
|
||||
<div class="block">block2</div>
|
||||
</article>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Multi-column Layout Test: Test width:max-content for a multi-column container with column-span:all children</title>
|
||||
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
|
||||
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-multicol-1/#column-span">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#sizing-properties">
|
||||
<link rel="match" href="multicol-width-005-ref.html">
|
||||
<meta name="assert" content="This test checks the width:max-content for a multi-column container is calculated correctly.">
|
||||
|
||||
<style>
|
||||
article {
|
||||
width: max-content;
|
||||
border: 1px solid black;
|
||||
column-gap: 10px;
|
||||
}
|
||||
.block {
|
||||
width: 100px;
|
||||
background-color: yellow;
|
||||
}
|
||||
.spanner {
|
||||
column-span: all;
|
||||
background-color: lime;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Case 1: column-width is specified, and "column-count:auto" is considered
|
||||
one column, so <article>'s expected width is 80px. -->
|
||||
<article style="column-width: 80px;">
|
||||
<div class="block">block1</div>
|
||||
<div class="spanner" style="width: 50px;">spanner</div>
|
||||
<div class="block">block2</div>
|
||||
</article>
|
||||
<br>
|
||||
|
||||
<!-- Case 2: column-width is specified, and no other children are wider than
|
||||
the column-width. Thus <article>'s expected width is 120px. -->
|
||||
<article style="column-width: 120px;">
|
||||
<div class="block">block1</div>
|
||||
<div class="spanner" style="width: 50px;">spanner</div>
|
||||
<div class="block">block2</div>
|
||||
</article>
|
||||
<br>
|
||||
|
||||
<!-- Case 3: like case 2, but the spanner's width is larger than column-width.
|
||||
Thus <article>'s expected width is 150px; -->
|
||||
<article style="column-width: 120px;">
|
||||
<div class="block">block1</div>
|
||||
<div class="spanner" style="width: 150px;">spanner</div>
|
||||
<div class="block">block2</div>
|
||||
</article>
|
||||
<br>
|
||||
|
||||
<!-- Case 4: column-count is specified. <article>'s expected width is two
|
||||
column boxes wide plus the column-gap, i.e. 100px*2 + 10px = 210px. -->
|
||||
<article style="column-count: 2;">
|
||||
<div class="block">block1</div>
|
||||
<div class="spanner">spanner</div>
|
||||
<div class="block">block2</div>
|
||||
</article>
|
||||
<br>
|
||||
|
||||
<!-- Case 5: column-count is specified, and column-width is larger than the
|
||||
column-box's width. Thus <article>'s expected width is column-width plus
|
||||
the column-gap, i.e. 110px*2 + 10px = 230px. -->
|
||||
<article style="column-count: 2; column-width: 110px;">
|
||||
<div class="block">block1</div>
|
||||
<div class="spanner">spanner</div>
|
||||
<div class="block">block2</div>
|
||||
</article>
|
||||
<br>
|
||||
|
||||
<!-- Case 6: like case 4, but the spanner's width is larger. Thus <article>'s
|
||||
expected width is 250px. -->
|
||||
<article style="column-count: 2;">
|
||||
<div class="block">block1</div>
|
||||
<div class="spanner" style="width: 250px;">spanner</div>
|
||||
<div class="block">block2</div>
|
||||
</article>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: parsing -webkit-line-clamp with invalid values</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow/#webkit-line-clamp">
|
||||
<meta name="assert" content="-webkit-line-clamp supports only the grammar 'none | <integer>'.">
|
||||
<meta name="assert" content="Zero or negative max-lines integers are invalid.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
test_invalid_value("-webkit-line-clamp", 'auto');
|
||||
|
||||
test_invalid_value("-webkit-line-clamp", '0');
|
||||
test_invalid_value("-webkit-line-clamp", '-5');
|
||||
|
||||
test_invalid_value("-webkit-line-clamp", 'none "~"');
|
||||
test_invalid_value("-webkit-line-clamp", '1 "~"');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: parsing -webkit-line-clamp with valid values</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow/#webkit-line-clamp">
|
||||
<meta name="assert" content="-webkit-line-clamp supports the full grammar 'none | <integer>'.">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="/css/support/parsing-testcommon.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
test_valid_value("-webkit-line-clamp", 'none');
|
||||
|
||||
test_valid_value("-webkit-line-clamp", '1');
|
||||
test_valid_value("-webkit-line-clamp", '6');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2
|
||||
Line 3
|
||||
Line 4
|
||||
Line 5</div>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2
|
||||
Line 3
|
||||
Line 4…</div>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2
|
||||
Line 3
|
||||
Line 4…</div>
|
||||
<p>Following content.</p>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp"><div>Line 1
|
||||
Line 2
|
||||
Line 3
|
||||
Line 4…</div></div>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp"><div>Line 1
|
||||
Line 2…</div><div>Line A
|
||||
Line B…</div>Line 一
|
||||
Line 二…</div>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
}
|
||||
.child {
|
||||
font: 24px / 48px serif;
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp"><div>Line 1
|
||||
Line 2<div class="child">Line 3…</div></div></div>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
}
|
||||
.child {
|
||||
font: 24px / 48px serif;
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp"><div>Line 1
|
||||
Line 2<div class="child">Line 3
|
||||
Line 4</div>Line 5…</div></div>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
}
|
||||
.child {
|
||||
font: 24px / 48px serif;
|
||||
color: blue;
|
||||
padding: 0 4px;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp"><div>Line 1
|
||||
Line 2<div class="child">Line 3
|
||||
Line 4</div>Line 5…</div></div>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
}
|
||||
.child {
|
||||
display: flex;
|
||||
font: 24px / 48px serif;
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp"><div>Line 1
|
||||
Line 2<div class="child">Line 3
|
||||
Line 4</div>Line 5…</div></div>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
}
|
||||
.child {
|
||||
font: 24px / 48px serif;
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp"><div>Line 1
|
||||
Line 2<table class="child" border="1"><tr><td>Line 3
|
||||
Line 4</td></tr></table>Line 5…</div></div>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
direction: rtl;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2…</div>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: horizontal;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 4px 0;
|
||||
background-color: yellow;
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2
|
||||
Line 3
|
||||
Line 4
|
||||
Line 5</div>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2…</div>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2
|
||||
Line 3…</div>
|
||||
<p>Following content.</p>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2
|
||||
Line 3
|
||||
Line 4
|
||||
Line 5</div>
|
||||
<p>Following content.</p>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2
|
||||
Line 3
|
||||
Line 4
|
||||
Line 5</div>
|
||||
<p>Following content.</p>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2
|
||||
Line 3…</div>
|
||||
<p>Following content.</p>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2
|
||||
Line 3…</div>
|
||||
<p>Following content.</p>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2</div>
|
||||
<p>Following content.</p>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2
|
||||
Line 3</div>
|
||||
<p>Following content.</p>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-inline-box;
|
||||
-webkit-box-orient: vertical;
|
||||
font: 16px / 32px monospace;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
Before <div class="clamp">Line 1
|
||||
Line 2
|
||||
Line …</div> After</div>
|
||||
<p>Following content.</p>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
font: 16px / 32px monospace;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
width: 11ch;
|
||||
}
|
||||
.float {
|
||||
float: right;
|
||||
color: orange;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp"><div><div class="float">[f]</div>A B C D…</div>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
font: 16px / 32px monospace;
|
||||
white-space: pre;
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2
|
||||
Line 3
|
||||
Line 4
|
||||
Line 5</div>
|
||||
<p>Following content.</p>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
font: 16px / 32px monospace;
|
||||
white-space: pre;
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp"><div>Line 1
|
||||
Line 2<fieldset>Line 3
|
||||
Line 4<legend>Line 5
|
||||
Line 6</legend></fieldset>Line 7…</div></div>
|
||||
<p>Following content.</p>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
font: 16px / 32px monospace;
|
||||
white-space: pre;
|
||||
background-color: yellow;
|
||||
}
|
||||
.child {
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp"><div class="child">Line 1
|
||||
Line 2
|
||||
Line 3…</div></div>
|
||||
<p>Following content.</p>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
font: 16px / 32px monospace;
|
||||
white-space: pre;
|
||||
background-color: yellow;
|
||||
border: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp"><div>Line 1
|
||||
Line 2
|
||||
Line 3…</div></div>
|
||||
<p>Following content.</p>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
}
|
||||
.big {
|
||||
font-weight: bold;
|
||||
border-top: 2px solid blue;
|
||||
padding: 20px 0;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp"><div class="item">Line 1
|
||||
Line 2
|
||||
Line 3 <span class="big">BIG</span>…</div></div>
|
||||
<p>Following content.</p>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2
|
||||
Line 3
|
||||
…</div>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: -webkit-line-clamp when not display:-webkit-box</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
|
||||
<link rel="match" href="reference/webkit-line-clamp-001-ref.html">
|
||||
<meta name="assert" content="-webkit-line-clamp should not apply to an element that is not a flex item for a legacy -webkit-box or -webkit-inline-box flex container.">
|
||||
<style>
|
||||
.clamp {
|
||||
-webkit-line-clamp: 3;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2
|
||||
Line 3
|
||||
Line 4
|
||||
Line 5</div>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: -webkit-line-clamp when not -webkit-box-orient:vertical</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
|
||||
<link rel="match" href="reference/webkit-line-clamp-001-ref.html">
|
||||
<meta name="assert" content="-webkit-line-clamp should not apply to an element whose parent is not -webkit-box-orient:vertical.">
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2
|
||||
Line 3
|
||||
Line 4
|
||||
Line 5</div>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: -webkit-line-clamp with fewer lines than specified</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
|
||||
<link rel="match" href="reference/webkit-line-clamp-001-ref.html">
|
||||
<meta name="assert" content="-webkit-line-clamp should not have an effect on an element with fewer lines than specified.">
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 6;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2
|
||||
Line 3
|
||||
Line 4
|
||||
Line 5</div>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: -webkit-line-clamp with exactly as many lines as specified</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
|
||||
<link rel="match" href="reference/webkit-line-clamp-001-ref.html">
|
||||
<meta name="assert" content="-webkit-line-clamp should not have an effect on an element with exactly as many lines as specified.">
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 5;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2
|
||||
Line 3
|
||||
Line 4
|
||||
Line 5</div>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: -webkit-line-clamp with more lines than specified</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
|
||||
<link rel="match" href="reference/webkit-line-clamp-005-ref.html">
|
||||
<meta name="assert" content="-webkit-line-clamp should clamp to the specified number of lines.">
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 4;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
background-color: yellow;
|
||||
padding: 0 4px;
|
||||
overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2
|
||||
Line 3
|
||||
Line 4
|
||||
Line 5</div>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: sizing of -webkit-line-clamp affected elements</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
|
||||
<link rel="match" href="reference/webkit-line-clamp-006-ref.html">
|
||||
<meta name="assert" content="-webkit-line-clamp should size the element to the clamped number of lines.">
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 4;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2
|
||||
Line 3
|
||||
Line 4
|
||||
Line 5</div>
|
||||
<p>Following content.</p>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: -webkit-line-clamp applied to a non-anonymous flex item</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
|
||||
<link rel="match" href="reference/webkit-line-clamp-007-ref.html">
|
||||
<meta name="assert" content="-webkit-line-clamp should apply to a flex item in a -webkit-box or -webkit-inline-box flex container.">
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 4;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */
|
||||
}
|
||||
</style>
|
||||
<div class="clamp"><div>Line 1
|
||||
Line 2
|
||||
Line 3
|
||||
Line 4
|
||||
Line 5</div></div>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: -webkit-line-clamp applied to all flex items</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
|
||||
<link rel="match" href="reference/webkit-line-clamp-008-ref.html">
|
||||
<meta name="assert" content="-webkit-line-clamp should apply to all flex items in a -webkit-box or -webkit-inline-box flex container independently.">
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
}
|
||||
div {
|
||||
overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */
|
||||
}
|
||||
</style>
|
||||
<div class="clamp"><div>Line 1
|
||||
Line 2
|
||||
Line 3</div><div>Line A
|
||||
Line B
|
||||
Line C</div>Line 一
|
||||
Line 二
|
||||
Line 三</div>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: -webkit-line-clamp with non-BFC block children in flex item</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
|
||||
<link rel="match" href="reference/webkit-line-clamp-009-ref.html">
|
||||
<meta name="assert" content="-webkit-line-clamp should count lines in non-BFC block children of the flex items.">
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */
|
||||
}
|
||||
.child {
|
||||
font: 24px / 48px serif;
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp"><div>Line 1
|
||||
Line 2<div class="child">Line 3
|
||||
Line 4</div></div></div>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: -webkit-line-clamp with non-BFC block children in flex item</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
|
||||
<link rel="match" href="reference/webkit-line-clamp-010-ref.html">
|
||||
<meta name="assert" content="-webkit-line-clamp should count lines in non-BFC block children of the flex items.">
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 5;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */
|
||||
}
|
||||
.child {
|
||||
font: 24px / 48px serif;
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp"><div>Line 1
|
||||
Line 2<div class="child">Line 3
|
||||
Line 4</div>Line 5
|
||||
Line 6</div></div>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: -webkit-line-clamp with BFC child in flex item</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
|
||||
<link rel="match" href="reference/webkit-line-clamp-011-ref.html">
|
||||
<meta name="assert" content="-webkit-line-clamp should skip lines in BFC children of the flex items.">
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */
|
||||
}
|
||||
.child {
|
||||
overflow: auto;
|
||||
font: 24px / 48px serif;
|
||||
color: blue;
|
||||
padding: 0 4px;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp"><div>Line 1
|
||||
Line 2<div class="child">Line 3
|
||||
Line 4</div>Line 5
|
||||
Line 6</div></div>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: -webkit-line-clamp with flex container child in flex item</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
|
||||
<link rel="match" href="reference/webkit-line-clamp-012-ref.html">
|
||||
<meta name="assert" content="-webkit-line-clamp should skip lines in independent formatting contexts in the flex items.">
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */
|
||||
}
|
||||
.child {
|
||||
display: flex;
|
||||
font: 24px / 48px serif;
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp"><div>Line 1
|
||||
Line 2<div class="child">Line 3
|
||||
Line 4</div>Line 5
|
||||
Line 6</div></div>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: -webkit-line-clamp with table child in flex item</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
|
||||
<link rel="match" href="reference/webkit-line-clamp-013-ref.html">
|
||||
<meta name="assert" content="-webkit-line-clamp should skip lines in independent formatting contexts in the flex items.">
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */
|
||||
}
|
||||
.child {
|
||||
font: 24px / 48px serif;
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp"><div>Line 1
|
||||
Line 2<table class="child" border="1"><tr><td>Line 3
|
||||
Line 4</td></tr></table>Line 5
|
||||
Line 6</div></div>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: -webkit-line-clamp on RTL flex item</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
|
||||
<link rel="match" href="reference/webkit-line-clamp-014-ref.html">
|
||||
<meta name="assert" content="-webkit-line-clamp should place the ellipsis appropriately in RTL content.">
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */
|
||||
direction: rtl;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2
|
||||
Line 3</div>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: -webkit-line-clamp on vertical writing mode flex item when -webkit-box-orient:horizontal</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
|
||||
<link rel="match" href="reference/webkit-line-clamp-015-ref.html">
|
||||
<meta name="assert" content="-webkit-line-clamp should not apply to a -webkit-box-orient:horizontal flex item even if using a vertical writing mode.">
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-line-clamp: 2;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 4px 0;
|
||||
background-color: yellow;
|
||||
overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */
|
||||
writing-mode: vertical-rl;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2
|
||||
Line 3
|
||||
Line 4
|
||||
Line 5</div>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: -webkit-line-clamp value on flex child</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
|
||||
<link rel="match" href="reference/webkit-line-clamp-016-ref.html">
|
||||
<meta name="assert" content="-webkit-line-clamp value on the flex child should be ignored.">
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */
|
||||
}
|
||||
.child {
|
||||
-webkit-line-clamp: 3;
|
||||
}
|
||||
</style>
|
||||
<div class="clamp"><div class="child">Line 1
|
||||
Line 2
|
||||
Line 3
|
||||
Line 4
|
||||
Line 5</div></div>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: Dynamically changing -webkit-line-clamp</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
|
||||
<link rel="match" href="reference/webkit-line-clamp-017-ref.html">
|
||||
<meta name="assert" content="Dynamically changing -webkit-line-clamp on an element from none to a number less than the number of lines should apply the clamping.">
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2
|
||||
Line 3
|
||||
Line 4
|
||||
Line 5</div>
|
||||
<p>Following content.</p>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
document.querySelector(".clamp").style.webkitLineClamp = 3;
|
||||
document.documentElement.className = "";
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: Dynamically changing -webkit-line-clamp</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
|
||||
<link rel="match" href="reference/webkit-line-clamp-018-ref.html">
|
||||
<meta name="assert" content="Dynamically changing -webkit-line-clamp on an element from a number to none remove the clamping.">
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2
|
||||
Line 3
|
||||
Line 4
|
||||
Line 5</div>
|
||||
<p>Following content.</p>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
document.querySelector(".clamp").style.webkitLineClamp = "none";
|
||||
document.documentElement.className = "";
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Overflow: Dynamically changing -webkit-line-clamp</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#webkit-line-clamp">
|
||||
<link rel="match" href="reference/webkit-line-clamp-019-ref.html">
|
||||
<meta name="assert" content="Dynamically changing -webkit-line-clamp on an element from a number less than to a number greater than the number of lines.">
|
||||
<style>
|
||||
.clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
font: 16px / 32px serif;
|
||||
white-space: pre;
|
||||
padding: 0 4px;
|
||||
background-color: yellow;
|
||||
overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */
|
||||
}
|
||||
</style>
|
||||
<div class="clamp">Line 1
|
||||
Line 2
|
||||
Line 3
|
||||
Line 4
|
||||
Line 5</div>
|
||||
<p>Following content.</p>
|
||||
<script>
|
||||
window.onload = function() {
|
||||
document.querySelector(".clamp").style.webkitLineClamp = 6;
|
||||
document.documentElement.className = "";
|
||||
};
|
||||
</script>
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue