Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-06-27 10:33:39 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision ee82278e15570e573d87fb80179ff8231b6db61a

Browse source
This commit is contained in:
WPT Sync Bot 2018-06-03 21:07:04 -04:00
parent d23bc4f1a4
commit 83e2dc11b0
278 changed files with 13348 additions and 10515 deletions
Download patch file Download diff file Expand all files Collapse all files

7563
tests/wpt/metadata/MANIFEST.json
View file

File diff suppressed because it is too large Load diff

2
tests/wpt/metadata/css/css-animations/set-animation-play-state-to-paused-002.html.ini Normal file
View file

@ -0,0 +1,2 @@
[set-animation-play-state-to-paused-002.html]
expected: TIMEOUT

2
tests/wpt/metadata/css/css-values/vh_not_refreshing_on_chrome.html.ini Normal file
View file

@ -0,0 +1,2 @@
[vh_not_refreshing_on_chrome.html]
expected: FAIL

8
tests/wpt/metadata/encoding/single-byte-decoder.html.ini
View file

@ -1,3 +1,11 @@
[single-byte-decoder.html]
type: testharness
disabled: iframe thread issue 5247
[single-byte-decoder.html?document]
expected: CRASH
[single-byte-decoder.html?XMLHttpRequest]
expected: CRASH
[single-byte-decoder.html?TextDecoder]

4
tests/wpt/metadata/html/rendering/non-replaced-elements/tables/hidden-attr.html.ini Normal file
View file

@ -0,0 +1,4 @@
[hidden-attr.html]
[UA style for hidden attribute on table elements]
expected: FAIL

4
tests/wpt/metadata/html/semantics/embedded-content/the-embed-element/detach-frame-on-src-change.html.ini
View file

@ -1,4 +0,0 @@
[detach-frame-on-src-change.html]
[\n <embed>'s browsing context is discarded on 'src' attribute change.\n ]
expected: FAIL

3
tests/wpt/metadata/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_allow_top_navigation-1.html.ini
View file

@ -3,3 +3,6 @@
[Check that sandboxed iframe can perform navigation on the top frame\n when allow-top-navigation is set]
expected: FAIL
[Frames with `allow-top-navigation` should be able to navigate the top frame.]
expected: FAIL

3
tests/wpt/metadata/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_allow_top_navigation-2.html.ini
View file

@ -3,3 +3,6 @@
[Check that sandboxed iframe cannot perform navigation on the top\n frame when allow-top-navigation is not set]
expected: FAIL
[Frames without `allow-top-navigation` should not be able to navigate the top frame.]
expected: FAIL

3
tests/wpt/metadata/html/semantics/embedded-content/the-iframe-element/iframe_sandbox_allow_top_navigation-3.html.ini
View file

@ -3,3 +3,6 @@
[Check that sandboxed iframe can perform navigation on the top frame\n when allow-top-navigation is set (even when\n allow-top-navigation-by-user-activation is set)]
expected: FAIL
[Frames with `allow-top-navigation` should be able to navigate the top frame even when `allow-top-navigation-by-user-activation` is set.]
expected: FAIL

4
tests/wpt/metadata/html/semantics/embedded-content/the-object-element/detach-frame-on-data-change.html.ini
View file

@ -1,4 +0,0 @@
[detach-frame-on-data-change.html]
[\n <object>'s browsing context is discarded on 'data' attribute change.\n ]
expected: FAIL

8
tests/wpt/metadata/touch-events/create-touch-touchlist.html.ini
View file

@ -1,8 +0,0 @@
[create-touch-touchlist.html]
type: testharness
[document.createTouchList exists and correctly creates a TouchList from a single Touch]
expected: FAIL
[document.createTouchList exists and correctly creates a TouchList from two Touch objects]
expected: FAIL

6
tests/wpt/metadata/touch-events/historical.html.ini
View file

@ -14,3 +14,9 @@
[Document::createTouch]
expected: FAIL
[TouchList::identifiedTouch]
expected: FAIL
[Document::createTouchList]
expected: FAIL

4
tests/wpt/metadata/workers/modules/dedicated-worker-import-csp.html.ini Normal file
View file

@ -0,0 +1,4 @@
[dedicated-worker-import-csp.html]
[DedicatedWorker: CSP for ES Modules]
expected: FAIL

5
tests/wpt/mozilla/meta/webgl/conformance-1.0.3/conformance/canvas/rapid-resizing.html.ini Normal file
View file

@ -0,0 +1,5 @@
[rapid-resizing.html]
expected: TIMEOUT
[Overall test]
expected: NOTRUN

4
tests/wpt/web-platform-tests/cookie-store/idlharness.tentative.html
View file

@ -54,8 +54,8 @@ promise_test(async t => {
idl_array.add_idls(cookie_store);
idl_array.add_objects({
CookieStore: [self.cookieStore],
CookieChangeEvent: [new CookieChangeEvent('change')],
CookieStore: ["self.cookieStore"],
CookieChangeEvent: ["new CookieChangeEvent('change')"],
});
idl_array.test();
}, 'Interface test');

4
tests/wpt/web-platform-tests/cookie-store/idlharness_serviceworker.js
View file

@ -35,9 +35,9 @@ promise_test(async t => {
idl_array.add_idls(cookie_store);
idl_array.add_objects({
CookieStore: [self.cookieStore],
CookieStore: ["self.cookieStore"],
ExtendableCookieChangeEvent: [
new ExtendableCookieChangeEvent('cookiechange')],
"new ExtendableCookieChangeEvent('cookiechange')"],
});
idl_array.test();
}, 'Interface test');

36
tests/wpt/web-platform-tests/css/css-animations/set-animation-play-state-to-paused-002-ref.html Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dynamically set animation-play-state to paused (reference)</title>
<style>
#container {
position: absolute;
left: 0;
top: 3em;
}
#coveringRectLinear, #coveringRectSteps {
position: absolute;
background: lightgreen;
width: 40px;
height: 70px;
left: 80px;
transform-origin: 50% 10%;
transform: translate(36px, 0) rotate(144deg);
}
#coveringRectLinear {
top: 50px;
}
#coveringRectSteps {
top: 150px;
}
</style>
</head>
<body>
<p>This test passes if you see two rotated green rectangles and no red.</p>
<div id="container">
<div id="coveringRectLinear"></div>
<div id="coveringRectSteps"></div>
</div>
</body>
</html>

95
tests/wpt/web-platform-tests/css/css-animations/set-animation-play-state-to-paused-002.html Normal file
View file

@ -0,0 +1,95 @@
<!DOCTYPE html>
<html class="reftest-wait">
<head>
<meta charset="utf-8">
<title>Dynamically set animation-play-state to paused</title>
<link rel="author" title="Igalia S.L." href="https://www.igalia.com/">
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation-play-state">
<meta name="assert" content="Visually check that complex animations stop
when animation-play-state is set to paused">
<link rel="match" href="set-animation-play-state-to-paused-002-ref.html">
<style>
#container {
position: absolute;
left: 0;
top: 3em;
}
#lineLinear, #lineSteps {
position: absolute;
background: red;
width: 10px;
height: 50px;
left: 95px;
transform-origin: 50% 0%;
}
#coveringRectLinear, #coveringRectSteps {
position: absolute;
background: lightgreen;
width: 40px;
height: 70px;
left: 80px;
transform-origin: 50% 10%;
transform: translate(36px, 0) rotate(144deg);
}
#coveringRectLinear, #lineLinear {
top: 50px;
}
#coveringRectSteps, #lineSteps {
top: 150px;
}
#lineLinear {
animation: rotate 2s linear;
}
#lineSteps {
animation: rotate 2s steps(360, end);
}
.pause {
opacity: 0.6;
animation-play-state: paused !important;
}
@keyframes rotate
{
100% {
transform: translate(90px, 0) rotate(360deg);
}
}
</style>
<script>
var start = null;
var animationDuration = 2000;
var coveringRectAngle = 144;
var rectFinalAngle = 360;
function step(timestamp) {
if (!start) start = timestamp;
var progress = timestamp - start;
// Pause the animations when the squares pass under the covering rect.
var targetProgress = animationDuration * coveringRectAngle / rectFinalAngle;
if (progress >= targetProgress) {
document.getElementById("lineLinear").classList.add("pause");
document.getElementById("lineSteps").classList.add("pause");
}
// Wait a bit so that the squares pass the covering rect if the
// animation fails to be paused.
var delta = 200;
if (progress < targetProgress + delta)
window.requestAnimationFrame(step)
else
document.documentElement.classList.remove("reftest-wait");
}
function runTest() {
window.requestAnimationFrame(step);
}
</script>
</head>
<body onload="runTest()">
<p>This test passes if you see two rotated green rectangles and no red.</p>
<div id="container">
<div id="lineLinear"></div>
<div id="coveringRectLinear"></div>
<div id="lineSteps"></div>
<div id="coveringRectSteps"></div>
</div>
</body>
</html>

4
tests/wpt/web-platform-tests/css/css-backgrounds/background-332.html
View file

@ -22,8 +22,8 @@
test(function() {
assert_equals(cs.getPropertyValue("background-image"),
"url(support/60x60-green.png)", "background specified value for background-image");
}, "background_specified_image");
'url("' + new URL("support/60x60-green.png", window.location.href).href + '")');
}, "Computed value for background-image after setting background shorthand");
test(function() {
assert_equals(cs.getPropertyValue("background-position"),

17
tests/wpt/web-platform-tests/css/css-contain/contain-size-006.html Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Containment Test: Size containment on table-cell</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
<link rel="match" href="reference/contain-size-001-ref.html">
<meta name=assert content="Size containment doesn't apply to table-cell elements.">
<style>
div {
display: table-cell;
contain: size;
overflow: hidden;
}
</style>
<p>This test passes if you can see the word PASS below.</p>
<div>PASS</div>

17
tests/wpt/web-platform-tests/css/css-contain/contain-size-007.html Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Containment Test: Size containment on table-row-group</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
<link rel="match" href="reference/contain-size-001-ref.html">
<meta name=assert content="Size containment doesn't apply to table-row-group elements.">
<style>
div {
display: table-row-group;
contain: size;
overflow: hidden;
}
</style>
<p>This test passes if you can see the word PASS below.</p>
<div>PASS</div>

17
tests/wpt/web-platform-tests/css/css-contain/contain-size-008.html Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Containment Test: Size containment on table-header-group</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
<link rel="match" href="reference/contain-size-001-ref.html">
<meta name=assert content="Size containment doesn't apply to table-header-group elements.">
<style>
div {
display: table-header-group;
contain: size;
overflow: hidden;
}
</style>
<p>This test passes if you can see the word PASS below.</p>
<div>PASS</div>

17
tests/wpt/web-platform-tests/css/css-contain/contain-size-009.html Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Containment Test: Size containment on table-footer-group</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
<link rel="match" href="reference/contain-size-001-ref.html">
<meta name=assert content="Size containment doesn't apply to table-footer-group elements.">
<style>
div {
display: table-footer-group;
contain: size;
overflow: hidden;
}
</style>
<p>This test passes if you can see the word PASS below.</p>
<div>PASS</div>

17
tests/wpt/web-platform-tests/css/css-contain/contain-size-010.html Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Containment Test: Size containment on table-row</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
<link rel="match" href="reference/contain-size-001-ref.html">
<meta name=assert content="Size containment doesn't apply to table-row elements.">
<style>
div {
display: table-row;
contain: size;
overflow: hidden;
}
</style>
<p>This test passes if you can see the word PASS below.</p>
<div>PASS</div>

17
tests/wpt/web-platform-tests/css/css-contain/contain-size-011.html Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Containment Test: Size containment on table-caption</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
<link rel="match" href="reference/contain-paint-014-ref.html">
<meta name=assert content="Size containment does apply to table-caption elements.">
<style>
div {
display: table-caption;
contain: size;
overflow: hidden;
}
</style>
<p>This test passes if you can NOT see the word FAIL below.</p>
<div>FAIL</div>

17
tests/wpt/web-platform-tests/css/css-contain/contain-size-012.html Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Containment Test: Size containment on table</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-contain-1/#containment-size">
<link rel="match" href="reference/contain-paint-014-ref.html">
<meta name=assert content="Size containment does apply to table elements.">
<style>
div {
display: table;
contain: size;
overflow: hidden;
}
</style>
<p>This test passes if you can NOT see the word FAIL below.</p>
<div>FAIL</div>

67
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-001.html Normal file
View file

@ -0,0 +1,67 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Self-Baseline alignment along column-axis on fixed sized grids and synthesized baselines</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline">
<link rel="stylesheet" href="../../support/grid.css">
<link rel="stylesheet" href="../../support/alignment.css">
<meta name="assert" content="Grid items orthogonal to the Baseline Alignment Context should use their border-box 'under' edge as synthesized baseline.">
<style>
.container { position: relative; }
.grid {
position: relative;
text-orientation: sideways;
grid: 200px 100px / 100px 200px;
font-family: Ahem;
}
.bigFont { font-size: 50px; }
.height25 { height: 25px; }
.width25 { width: 25px; }
.width300 { width: 300px; }
.paddingLeft { padding-left: 25px; }
.paddingRight { padding-right: 25px; }
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.grid')">
<pre>Horizontal grid and verticalRL item</pre>
<div class="grid width300 alignItemsBaseline">
<div class="firstRowFirstColumn verticalRL" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200">ÉÉ É ÉÉÉ É ÉÉ É</div>
<div class="firstRowSecondColumn bigFont" data-offset-x="100" data-offset-y="160" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
<div class="autoRowAutoColumnSpanning2 height25"></div>
</div>
<pre>Horizontal grid and verticalLR item</pre>
<div class="grid width300 alignItemsBaseline">
<div class="firstRowFirstColumn verticalLR" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200">ÉÉ É ÉÉÉ É ÉÉ É</div>
<div class="firstRowSecondColumn bigFont" data-offset-x="100" data-offset-y="160" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
<div class="autoRowAutoColumnSpanning2 height25"></div>
</div>
<pre>VerticalLR grid and Horizontal item</pre>
<div class="grid alignItemsBaseline verticalLR">
<div class="firstRowFirstColumn horizontalTB" data-offset-x="35" data-offset-y="0" data-expected-width="200" data-expected-height="100">ÉÉ É ÉÉÉ É ÉÉ É</div>
<div class="firstRowSecondColumn bigFont paddingLeft" data-offset-x="0" data-offset-y="100" data-expected-width="125" data-expected-height="200">É É ÉÉ</div>
<div class="autoRowAutoColumnSpanning2 width25"></div>
</div>
<pre>VerticalRL grid and Horizontal item</pre>
<div class="grid alignItemsBaseline verticalRL">
<div class="firstRowFirstColumn horizontalTB" data-offset-x="100" data-offset-y="0" data-expected-width="200" data-expected-height="100">ÉÉ É ÉÉÉ É ÉÉ É</div>
<div class="firstRowSecondColumn bigFont paddingRight" data-offset-x="40" data-offset-y="100" data-expected-width="125" data-expected-height="200">É É ÉÉ</div>
<div class="autoRowAutoColumnSpanning2 width25"></div>
</div>
</body>

60
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-002.html Normal file
View file

@ -0,0 +1,60 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Self-Baseline alignment along column-axis on fixed sized grids and synthesized baselines</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline">
<link rel="stylesheet" href="../../support/grid.css">
<link rel="stylesheet" href="../../support/alignment.css">
<meta name="assert" content="Empty grid items with fixed size should use their border-box 'under' edge as synthesized baseline.">
<style>
.grid {
position: relative;
text-orientation: sideways;
grid: 200px 100px / 100px 200px;
font-family: Ahem;
}
.bigFont { font-size: 50px; }
.height25 { height: 25px; }
.width25 { width: 25px; }
.width300 { width: 300px; }
.paddingLeft { padding-left: 20px; }
.paddingRight { padding-right: 20px; }
.fixedHeight { height: 125px; }
.fixedWidth { width: 125px; }
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.grid')">
<pre>Horizontal grid and item with fixed height</pre>
<div class="grid width300 alignItemsBaseline">
<div class="firstRowFirstColumn fixedHeight" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="125"></div>
<div class="firstRowSecondColumn bigFont" data-offset-x="100" data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
<div class="autoRowAutoColumnSpanning2 height25"></div>
</div>
<pre>VerticalLR grid and item with fixed width</pre>
<div class="grid alignItemsBaseline verticalLR">
<div class="firstRowFirstColumn fixedWidth" data-offset-x="30" data-offset-y="0" data-expected-width="125" data-expected-height="100"></div>
<div class="firstRowSecondColumn bigFont paddingLeft" data-offset-x="0" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
<div class="autoRowAutoColumnSpanning2 width25"></div>
</div>
<pre>VerticalRL grid and item with fixed width</pre>
<div class="grid alignItemsBaseline verticalRL">
<div class="firstRowFirstColumn fixedWidth" data-offset-x="175" data-offset-y="0" data-expected-width="125" data-expected-height="100"></div>
<div class="firstRowSecondColumn bigFont paddingRight" data-offset-x="115" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
<div class="autoRowAutoColumnSpanning2 width25"></div>
</div>

64
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-003.html Normal file
View file

@ -0,0 +1,64 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Self-Baseline alignment along column-axis on fixed sized grids and synthesized baselines</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline">
<link rel="stylesheet" href="../../support/grid.css">
<link rel="stylesheet" href="../../support/alignment.css">
<meta name="assert" content="Empty grid items with relative size should use their border-box 'under' edge as synthesized baseline.">
<style>
.grid {
position: relative;
text-orientation: sideways;
grid: 200px 100px / 100px 200px;
font-family: Ahem;
}
.bigFont { font-size: 50px; }
.height25 { height: 25px; }
.height75 { height: 75px; }
.width25 { width: 25px; }
.width75 { width: 75px; }
.width300 { width: 300px; }
.paddingLeft { padding-left: 20px; }
.paddingRight { padding-right: 20px; }
.relativeHeight { height: 50%; }
.relativeWidth { width: 50%; }
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.grid')">
<pre>Horizontal grid and item with relative height</pre>
<div class="grid width300 alignItemsBaseline">
<div class="firstRowFirstColumn relativeHeight" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
<div class="firstRowSecondColumn bigFont" data-offset-x="100" data-offset-y="60" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
<div class="autoRowAutoColumnSpanning2 height25"></div>
</div>
<pre>VerticalLR grid and item with relative width</pre>
<div class="grid alignItemsBaseline verticalLR">
<div class="firstRowFirstColumn relativeWidth" data-offset-x="30" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
<div class="firstRowSecondColumn bigFont paddingLeft" data-offset-x="0" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
<div class="autoRowAutoColumnSpanning2 width25"></div>
</div>
<pre>VerticalRL grid and item with rlative width</pre>
<div class="grid alignItemsBaseline verticalRL">
<div class="firstRowFirstColumn relativeWidth" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
<div class="firstRowSecondColumn bigFont paddingRight" data-offset-x="140" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
<div class="autoRowAutoColumnSpanning2 width25"></div>
</div>
</body>

60
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-column-axis-self-baseline-synthesized-004.html Normal file
View file

@ -0,0 +1,60 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Self-Baseline alignment along column-axis on content-sized grids and synthesized baselines</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline">
<link rel="stylesheet" href="../../support/grid.css">
<link rel="stylesheet" href="../../support/alignment.css">
<meta name="assert" content="Grid items orthogonal to the Baseline Alignment Context should use their border-box 'under' edge as synthesized baseline.">
<meta name="assert" content="Empty grid items with fixed size should use their border-box 'under' edge as synthesized baseline.">
<style>
.grid {
position: relative;
text-orientation: sideways;
grid: auto auto / 100px 200px;
font-family: Ahem;
}
.bigFont { font-size: 50px; }
.height25 { height: 25px; }
.width25 { width: 25px; }
.width300 { width: 300px; }
.paddingLeft { padding-left: 20px; }
.paddingRight { padding-right: 20px; }
.fixedHeight { height: 125px; }
.fixedWidth { width: 125px; }
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.grid')">
<pre>Horizontal grid and item with fixed height</pre>
<div class="grid width300 alignItemsBaseline">
<div class="firstRowFirstColumn fixedHeight" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="125"></div>
<div class="firstRowSecondColumn bigFont" data-offset-x="100" data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
<div class="autoRowAutoColumnSpanning2 height25"></div>
</div>
<pre>VerticalLR grid and item with fixed width</pre>
<div class="grid alignItemsBaseline verticalLR">
<div class="firstRowFirstColumn fixedWidth" data-offset-x="30" data-offset-y="0" data-expected-width="125" data-expected-height="100"></div>
<div class="firstRowSecondColumn bigFont paddingLeft" data-offset-x="0" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
<div class="autoRowAutoColumnSpanning2 width25"></div>
</div>
<pre>VerticalRL grid and item with fixed width</pre>
<div class="grid alignItemsBaseline verticalRL">
<div class="firstRowFirstColumn fixedWidth" data-offset-x="85" data-offset-y="0" data-expected-width="125" data-expected-height="100"></div>
<div class="firstRowSecondColumn bigFont paddingRight" data-offset-x="25" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
<div class="autoRowAutoColumnSpanning2 width25"></div>
</div>

69
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-001.html Normal file
View file

@ -0,0 +1,69 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Self-Baseline alignment along row-axis on fixed sized grids and synthesized baselines</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline">
<link rel="stylesheet" href="../../support/grid.css">
<link rel="stylesheet" href="../../support/alignment.css">
<meta name="assert" content="Grid items orthogonal to the Baseline Alignment Context should use their border-box 'under' edge as synthesized baseline.">
<style>
.container { position: relative; }
.grid {
position: relative;
text-orientation: sideways;
grid: 100px 200px / 200px 100px;
font-family: Ahem;
}
.bigFont { font-size: 50px; }
.height25 { height: 25px; }
.width25 { width: 25px; }
.width200 { width: 200px; }
.width300 { width: 300px; }
.paddingLeft { padding-left: 25px; }
.paddingRight { padding-right: 25px; }
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.grid')">
<pre>Horizontal grid and verticalRL item</pre>
<div class="grid width300 justifyItemsBaseline">
<div class="firstRowFirstColumn" data-offset-x="60" data-offset-y="0" data-expected-width="200" data-expected-height="100">ÉÉ É ÉÉÉ É ÉÉ É</div>
<div class="secondRowFirstColumn bigFont paddingRight verticalRL" data-offset-x="0" data-offset-y="100" data-expected-width="125" data-expected-height="200">É É ÉÉ</div>
<div class="autoRowSpanning2AutoColumn width25"></div>
</div>
<pre>Horizontal grid and verticalLR item</pre>
<div class="grid width300 justifyItemsBaseline">
<div class="firstRowFirstColumn" data-offset-x="35" data-offset-y="0" data-expected-width="200" data-expected-height="100">ÉÉ É ÉÉÉ É ÉÉ É</div>
<div class="secondRowFirstColumn bigFont paddingLeft verticalLR" data-offset-x="0" data-offset-y="100" data-expected-width="125" data-expected-height="200">É É ÉÉ</div>
<div class="autoRowSpanning2AutoColumn width25"></div>
</div>
<pre>VerticalLR grid and Horizontal item</pre>
<div class="grid justifyItemsBaseline verticalLR">
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="200">ÉÉ É ÉÉÉ É ÉÉ É</div>
<div class="secondRowFirstColumn bigFont horizontalTB" data-offset-x="100" data-offset-y="160" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
<div class="autoRowSpanning2AutoColumn height25"></div>
</div>
<pre>VerticalLR grid and Horizontal item</pre>
<div class="grid justifyItemsBaseline verticalRL">
<div class="firstRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="200">ÉÉ É ÉÉÉ É ÉÉ É</div>
<div class="secondRowFirstColumn bigFont horizontalTB" data-offset-x="0" data-offset-y="160" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
<div class="autoRowSpanning2AutoColumn height25"></div>
</div>
</body>

72
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-002.html Normal file
View file

@ -0,0 +1,72 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Self-Baseline alignment along row-axis on fixed sized grids and synthesized baselines</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline">
<link rel="stylesheet" href="../../support/grid.css">
<link rel="stylesheet" href="../../support/alignment.css">
<meta name="assert" content="Empty grid items with fixed size should use their border-box 'under' edge as synthesized baseline.">
<style>
.container { position: relative; }
.grid {
position: relative;
text-orientation: sideways;
grid: 100px 200px / 200px 100px;
font-family: Ahem;
}
.bigFont { font-size: 50px; }
.height25 { height: 25px; }
.width25 { width: 25px; }
.width200 { width: 200px; }
.width300 { width: 300px; }
.paddingLeft { padding-left: 20px; }
.paddingRight { padding-right: 20px; }
.fixedHeight { height: 125px; }
.fixedWidth { width: 125px; }
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.grid')">
<pre>Horizontal grid and verticalLR item with fixed width</pre>
<div class="grid width300 justifyItemsBaseline">
<div class="firstRowFirstColumn fixedWidth" data-offset-x="30" data-offset-y="0" data-expected-width="125" data-expected-height="100"></div>
<div class="secondRowFirstColumn bigFont paddingLeft verticalLR" data-offset-x="0" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
<div class="autoRowSpanning2AutoColumn width25"></div>
</div>
<pre>Horizontal grid and verticalRL item with fixed width</pre>
<div class="grid width300 justifyItemsBaseline">
<div class="firstRowFirstColumn fixedWidth" data-offset-x="60" data-offset-y="0" data-expected-width="125" data-expected-height="100"></div>
<div class="secondRowFirstColumn bigFont paddingRight verticalRL" data-offset-x="0" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
<div class="autoRowSpanning2AutoColumn width25"></div>
</div>
<pre>VerticalLR grid and item with fixed height</pre>
<div class="grid justifyItemsBaseline verticalLR">
<div class="firstRowFirstColumn fixedHeight" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="125"></div>
<div class="secondRowFirstColumn bigFont horizontalTB" data-offset-x="100" data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
<div class="autoRowSpanning2AutoColumn height25"></div>
</div>
<pre>VerticalRL grid and item with fixed width</pre>
<div class="grid justifyItemsBaseline verticalRL">
<div class="firstRowFirstColumn fixedHeight" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="125"></div>
<div class="secondRowFirstColumn bigFont horizontalTB" data-offset-x="0" data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
<div class="autoRowSpanning2AutoColumn height25"></div>
</div>
</body>

72
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-003.html Normal file
View file

@ -0,0 +1,72 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Self-Baseline alignment along row-axis on fixed sized grids and synthesized baselines</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline">
<link rel="stylesheet" href="../../support/grid.css">
<link rel="stylesheet" href="../../support/alignment.css">
<meta name="assert" content="Empty grid items with relative size should use their border-box 'under' edge as synthesized baseline.">
<style>
.container { position: relative; }
.grid {
position: relative;
text-orientation: sideways;
grid: 100px 200px / 200px 100px;
font-family: Ahem;
}
.bigFont { font-size: 50px; }
.height25 { height: 25px; }
.width25 { width: 25px; }
.width200 { width: 200px; }
.width300 { width: 300px; }
.paddingLeft { padding-left: 20px; }
.paddingRight { padding-right: 20px; }
.relativeHeight { height: 50%; }
.relativeWidth { width: 50%; }
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.grid')">
<pre>Horizontal grid and verticalLR item with relative width</pre>
<div class="grid width300 justifyItemsBaseline">
<div class="firstRowFirstColumn relativeWidth" data-offset-x="30" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
<div class="secondRowFirstColumn bigFont paddingLeft verticalLR" data-offset-x="0" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
<div class="autoRowSpanning2AutoColumn width25"></div>
</div>
<pre>Horizontal grid and verticalRL item with relative width</pre>
<div class="grid width300 justifyItemsBaseline">
<div class="firstRowFirstColumn relativeWidth" data-offset-x="60" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
<div class="secondRowFirstColumn bigFont paddingRight verticalRL" data-offset-x="0" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
<div class="autoRowSpanning2AutoColumn width25"></div>
</div>
<pre>VerticalLR grid and item with relative height</pre>
<div class="grid justifyItemsBaseline verticalLR">
<div class="firstRowFirstColumn relativeHeight" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
<div class="secondRowFirstColumn bigFont horizontalTB" data-offset-x="100" data-offset-y="60" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
<div class="autoRowSpanning2AutoColumn height25"></div>
</div>
<pre>VerticalRL grid and item with relative height</pre>
<div class="grid justifyItemsBaseline verticalRL">
<div class="firstRowFirstColumn relativeHeight" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
<div class="secondRowFirstColumn bigFont horizontalTB" data-offset-x="0" data-offset-y="60" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
<div class="autoRowSpanning2AutoColumn height25"></div>
</div>
</body>

72
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-row-axis-self-baseline-synthesized-004.html Normal file
View file

@ -0,0 +1,72 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Self-Baseline alignment along row-axis on content-sized grids and synthesized baselines</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
<link rel="help" href="https://drafts.csswg.org/css-align/#synthesize-baseline">
<link rel="stylesheet" href="../../support/grid.css">
<link rel="stylesheet" href="../../support/alignment.css">
<meta name="assert" content="Empty grid items with fixed size should use their border-box 'under' edge as synthesized baseline.">
<style>
.container { position: relative; }
.inline-grid {
position: relative;
text-orientation: sideways;
grid: 100px 200px / auto auto;
font-family: Ahem;
}
.bigFont { font-size: 50px; }
.height25 { height: 25px; }
.width25 { width: 25px; }
.width200 { width: 200px; }
.width300 { width: 300px; }
.paddingLeft { padding-left: 20px; }
.paddingRight { padding-right: 20px; }
.fixedHeight { height: 125px; }
.fixedWidth { width: 125px; }
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.inline-grid')">
<pre>Horizontal grid and verticalLR item with relative width</pre>
<div class="inline-grid justifyItemsBaseline" data-expected-width="180" data-expected-height="300">
<div class="firstRowFirstColumn fixedWidth" data-offset-x="30" data-offset-y="0" data-expected-width="125" data-expected-height="100"></div>
<div class="secondRowFirstColumn bigFont paddingLeft verticalLR" data-offset-x="0" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
<div class="autoRowSpanning2AutoColumn width25"></div>
</div>
<pre>Horizontal grid and verticalRL item with fixed width</pre>
<div class="inline-grid justifyItemsBaseline" data-expected-width="210" data-expected-height="300">
<div class="firstRowFirstColumn fixedWidth" data-offset-x="60" data-offset-y="0" data-expected-width="125" data-expected-height="100"></div>
<div class="secondRowFirstColumn bigFont paddingRight verticalRL" data-offset-x="0" data-offset-y="100" data-expected-width="120" data-expected-height="200">É É ÉÉ</div>
<div class="autoRowSpanning2AutoColumn width25"></div>
</div>
<pre>VerticalLR grid and item with fixed height</pre>
<div class="inline-grid justifyItemsBaseline verticalLR">
<div class="firstRowFirstColumn fixedHeight" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="125"></div>
<div class="secondRowFirstColumn bigFont horizontalTB" data-offset-x="100" data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
<div class="autoRowSpanning2AutoColumn height25"></div>
</div>
<pre>VerticalRL grid and item with fixed height</pre>
<div class="inline-grid justifyItemsBaseline verticalRL">
<div class="firstRowFirstColumn fixedHeight" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="125"></div>
<div class="secondRowFirstColumn bigFont horizontalTB" data-offset-x="0" data-offset-y="85" data-expected-width="200" data-expected-height="100">É É ÉÉ</div>
<div class="autoRowSpanning2AutoColumn height25"></div>
</div>
</body>

128
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-001.html Normal file
View file

@ -0,0 +1,128 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Self-Baseline alignment and sizing cyclic dependency</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
<link rel="stylesheet" href="../../support/grid.css">
<link rel="stylesheet" href="../../support/alignment.css">
<meta name="assert" content="Grid items with relative size in the inline or block axis and an intrinsically-sized column or row respectively, don't participate in baseline alignment in the, row-like or column-like respectively, shared alignment context.">
<style>
.inline-grid {
position: relative;
border: solid;
text-orientation: sideways;
font-family: Ahem;
}
.columns { grid-template-columns: 100px 100px; }
.rows { grid-template-rows: 100px 100px; }
.min-content-columns { grid-auto-columns: min-content; }
.max-content-columns { grid-auto-columns: max-content; }
.fit-content-columns { grid-auto-columns: fit-content; }
.flex-columns { grid-auto-columns: 1fr; }
.min-content-rows { grid-auto-rows: min-content; }
.max-content-rows { grid-auto-rows: max-content; }
.fit-content-rows { grid-auto-rows: fit-content; }
.flex-rows { grid-auto-rows: 1fr; }
.height25 { height: 25px; }
.height50 { height: 50px; }
.height200 { height: 200px; }
.width25 { width: 25px; }
.width50 { width: 50px; }
.width200 { width: 200px; }
.height200Percent { height: 200%; }
.width200Percent { width: 200%; }
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.inline-grid')">
<pre>auto-sized rows - items with relative height</pre>
<div class="inline-grid alignItemsBaseline columns">
<div class="firstRowFirstColumn height50" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
<div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
<div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="50" data-expected-width="200" data-expected-height="25"></div>
</div>
<pre>min-content-sized rows - items with relative height</pre>
<div class="inline-grid alignItemsBaseline columns min-content-rows">
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="80">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="160"></div>
<div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="80" data-expected-width="200" data-expected-height="25"></div>
</div>
<pre>max-content-sized rows - items with relative height</pre>
<div class="inline-grid alignItemsBaseline columns max-content-rows">
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="80">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="160"></div>
<div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="80" data-expected-width="200" data-expected-height="25"></div>
</div>
<pre>fit-content-sized rows - items with relative height</pre>
<div class="inline-grid alignItemsBaseline columns fit-content-rows">
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="80">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="160"></div>
<div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="80" data-expected-width="200" data-expected-height="25"></div>
</div>
<pre>flexible-sized rows - items with relative height</pre>
<div class="inline-grid alignItemsBaseline columns flex-rows">
<div class="firstRowFirstColumn height50" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
<div class="firstRowSecondColumn height200Percent" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
<div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="50" data-expected-width="200" data-expected-height="25"></div>
</div>
<pre>auto-sized columns - items with relative width</pre>
<div class="inline-grid justifyItemsBaseline rows">
<div class="firstRowFirstColumn verticalRL width50" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
<div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
<div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="50" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
</div>
<pre>min-content-sized columns - items with relative width</pre>
<div class="inline-grid justifyItemsBaseline rows min-content-columns">
<div class="firstRowFirstColumn verticalRL" data-offset-x="0" data-offset-y="0" data-expected-width="80" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0" data-offset-y="100" data-expected-width="160" data-expected-height="100"></div>
<div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="80" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
</div>
<pre>max-content-sized columns - items with relative width</pre>
<div class="inline-grid justifyItemsBaseline rows max-content-columns">
<div class="firstRowFirstColumn verticalRL" data-offset-x="0" data-offset-y="0" data-expected-width="80" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0" data-offset-y="100" data-expected-width="160" data-expected-height="100"></div>
<div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="80" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
</div>
<pre>fit-content-sized columns - items with relative width</pre>
<div class="inline-grid justifyItemsBaseline rows fit-content-columns">
<div class="firstRowFirstColumn verticalRL" data-offset-x="0" data-offset-y="0" data-expected-width="80" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0" data-offset-y="100" data-expected-width="160" data-expected-height="100"></div>
<div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="80" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
</div>
<pre>flexible-sized columns - items with relative width</pre>
<div class="inline-grid justifyItemsBaseline rows flex-columns">
<div class="firstRowFirstColumn verticalRL width50" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
<div class="secondRowFirstColumn verticalRL width200Percent" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div>
<div class="firstRowSpanning2AutoColumn verticalRL width25" data-offset-x="50" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
</div>

178
tests/wpt/web-platform-tests/css/css-grid/alignment/grid-self-baseline-not-applied-if-sizing-cyclic-dependency-002.html Normal file
View file

@ -0,0 +1,178 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Self-Baseline alignment and sizing cyclic dependency</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#baseline-alignment">
<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-justify-self-baseline">
<link rel="stylesheet" href="../../support/grid.css">
<link rel="stylesheet" href="../../support/alignment.css">
<meta name="assert" content="Grid items orthogonal to the Baseline Context along the inline or block axis and an intrinsically-sized column or row respectively, don't participate in baseline alignment in the, row-like or column-like respectively, shared alignment context.">
<style>
.inline-grid {
position: relative;
border: solid;
text-orientation: sideways;
font-family: Ahem;
}
.columns { grid-template-columns: 100px 100px; }
.rows { grid-template-rows: 100px 100px; }
.min-content-columns { grid-auto-columns: min-content; }
.max-content-columns { grid-auto-columns: max-content; }
.fit-content-columns { grid-auto-columns: fit-content; }
.flex-columns { grid-auto-columns: 1fr; }
.min-content-rows { grid-auto-rows: min-content; }
.max-content-rows { grid-auto-rows: max-content; }
.fit-content-rows { grid-auto-rows: fit-content; }
.flex-rows { grid-auto-rows: 1fr; }
.height25 { height: 25px; }
.height50 { height: 50px; }
.height200 { height: 200px; }
.width25 { width: 25px; }
.width50 { width: 50px; }
.width200 { width: 200px; }
.bigFont { font-size: 50px; }
.paddingLeft { padding-left: 25px; }
.paddingBottom { padding-bottom: 25px; }
.paddingRight { padding-right: 25px; }
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.inline-grid')">
<pre>auto-sized rows - horizonal grid and verticalLR item - column-axis baseline</pre>
<div class="inline-grid alignItemsBaseline columns height200">
<div class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="75">É</div>
<div class="firstRowSecondColumn verticalLR" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="175">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="175" data-expected-width="200" data-expected-height="25"></div>
</div>
<pre>min-content-sized rows - horizonal grid and verticalLR item - column-axis baseline</pre>
<div class="inline-grid alignItemsBaseline columns min-content-rows">
<div class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="75">É</div>
<div class="firstRowSecondColumn verticalLR" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="75">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="75" data-expected-width="200" data-expected-height="25"></div>
</div>
<pre>max-content-sized rows - horizonal grid and verticalLR item - column-axis baseline</pre>
<div class="inline-grid alignItemsBaseline columns max-content-rows">
<div class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="75">É</div>
<div class="firstRowSecondColumn verticalLR" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="416">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="416" data-expected-width="200" data-expected-height="25"></div>
</div>
<pre>fit-content-sized rows - horizonal grid and verticalLR item - column-axis baseline</pre>
<div class="inline-grid alignItemsBaseline columns fit-content-rows">
<div class="firstRowFirstColumn bigFont paddingBottom" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="75">É</div>
<div class="firstRowSecondColumn verticalLR" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="416">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="autoRowAutoColumnSpanning2 height25" data-offset-x="0" data-offset-y="416" data-expected-width="200" data-expected-height="25"></div>
</div>
<pre>auto-sized columns - horizontal grid item - row-axis baseline</pre>
<div class="inline-grid justifyItemsBaseline rows width200">
<div class="firstRowFirstColumn bigFont verticalLR paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="175" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="firstRowSpanning2AutoColumn width25" data-offset-x="175" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
</div>
<pre>min-content-sized columns - horizontal grid item - row-axis baseline</pre>
<div class="inline-grid justifyItemsBaseline rows min-content-columns">
<div class="firstRowFirstColumn bigFont verticalLR paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="75" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="firstRowSpanning2AutoColumn width25" data-offset-x="75" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
</div>
<pre>max-content-sized columns - horizontal grid item - row-axis baseline</pre>
<div class="inline-grid justifyItemsBaseline rows max-content-columns">
<div class="firstRowFirstColumn bigFont verticalLR paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="firstRowSpanning2AutoColumn width25" data-offset-x="416" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
</div>
<pre>fit-content-sized columns - horizontal grid item - row-axis baseline</pre>
<div class="inline-grid justifyItemsBaseline rows fit-content-columns">
<div class="firstRowFirstColumn bigFont verticalLR paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="firstRowSpanning2AutoColumn width25" data-offset-x="416" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
</div>
<pre>auto-sized rows - verticalLR grid and horizontal item - column-axis baseline</pre>
<div class="inline-grid verticalLR alignItemsBaseline columns width200">
<div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
<div class="firstRowSecondColumn horizontalTB" data-offset-x="0" data-offset-y="100" data-expected-width="175" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="autoRowAutoColumnSpanning2 width25" data-offset-x="175" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
</div>
<pre>min-content-sized rows - verticalLR grid and horizontal item - column-axis baseline</pre>
<div class="inline-grid verticalLR alignItemsBaseline columns min-content-rows">
<div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
<div class="firstRowSecondColumn horizontalTB" data-offset-x="0" data-offset-y="100" data-expected-width="75" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="autoRowAutoColumnSpanning2 width25" data-offset-x="75" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
</div>
<pre>max-content-sized rows - verticalLR grid and horizontal item - column-axis baseline</pre>
<div class="inline-grid verticalLR alignItemsBaseline columns max-content-rows">
<div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
<div class="firstRowSecondColumn horizontalTB" data-offset-x="0" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="autoRowAutoColumnSpanning2 width25" data-offset-x="416" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
</div>
<pre>fit-content-sized rows - verticalLR grid and horizontal item - column-axis baseline</pre>
<div class="inline-grid verticalLR alignItemsBaseline columns fit-content-rows">
<div class="firstRowFirstColumn bigFont paddingLeft" data-offset-x="0" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
<div class="firstRowSecondColumn horizontalTB" data-offset-x="0" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="autoRowAutoColumnSpanning2 width25" data-offset-x="416" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
</div>
<pre>auto-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre>
<div class="inline-grid verticalRL alignItemsBaseline columns width200">
<div class="firstRowFirstColumn bigFont paddingRight" data-offset-x="125" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
<div class="firstRowSecondColumn horizontalTB" data-offset-x="25" data-offset-y="100" data-expected-width="175" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="autoRowAutoColumnSpanning2 width25" data-offset-x="0" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
</div>
<pre>min-content-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre>
<div class="inline-grid verticalRL alignItemsBaseline columns min-content-rows">
<div class="firstRowFirstColumn bigFont paddingRight" data-offset-x="25" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
<div class="firstRowSecondColumn horizontalTB" data-offset-x="25" data-offset-y="100" data-expected-width="75" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="autoRowAutoColumnSpanning2 width25" data-offset-x="0" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
</div>
<pre>max-content-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre>
<div class="inline-grid verticalRL alignItemsBaseline columns max-content-rows">
<div class="firstRowFirstColumn bigFont paddingRight" data-offset-x="366" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
<div class="firstRowSecondColumn horizontalTB" data-offset-x="25" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="autoRowAutoColumnSpanning2 width25" data-offset-x="0" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
</div>
<pre>fit-content-sized rows - verticalRL grid and horizontal item - column-axis baseline</pre>
<div class="inline-grid verticalRL alignItemsBaseline columns fit-content-rows">
<div class="firstRowFirstColumn bigFont paddingRight" data-offset-x="366" data-offset-y="0" data-expected-width="75" data-expected-height="100">É</div>
<div class="firstRowSecondColumn horizontalTB" data-offset-x="25" data-offset-y="100" data-expected-width="416" data-expected-height="100">ÉÉ É ÉÉ ÉÉÉÉ É ÉÉ ÉÉÉ ÉÉ É</div>
<div class="autoRowAutoColumnSpanning2 width25" data-offset-x="0" data-offset-y="0" data-expected-width="25" data-expected-height="200"></div>
</div>

63
tests/wpt/web-platform-tests/css/css-layout-api/constraints-data-function-failure.https.html Normal file
View file

@ -0,0 +1,63 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-data">
<link rel="match" href="green-square-ref.html">
<meta name="assert" content="This test checks that a function can't be passed to a child layout." />
<style>
.test {
background: red;
width: 100px;
}
@supports (display: layout(parent)) {
.test {
display: layout(parent);
background: green;
}
.child {
display: layout(child);
}
}
</style>
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<div class="test">
<div class="child"></div>
</div>
<script id="code" type="text/worklet">
registerLayout('parent', class {
*intrinsicSizes() {}
*layout() {}
*layout([child], edges, constraints, styleMap) {
let childFragment = null;
try {
childFragment = yield child.layoutNextFragment({
data: { fn: function() {} }
});
} catch(e) {
// Success! The structured cloning algorithm should have thrown an error.
childFragment = yield child.layoutNextFragment({});
return {autoBlockSize: 100, childFragments: [childFragment]};
}
return {autoBlockSize: 0, childFragments: [childFragment]};
}
});
registerLayout('child', class {
*intrinsicSizes() {}
*layout() {}
*layout() {
return {autoBlockSize: 0};
}
});
</script>
<script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent);
</script>
</html>

68
tests/wpt/web-platform-tests/css/css-layout-api/constraints-data-sab-failure.https.html Normal file
View file

@ -0,0 +1,68 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-data">
<link rel="match" href="green-square-ref.html">
<meta name="assert" content="This test checks that a SharedArrayBuffer can't be passed to a child layout." />
<style>
.test {
background: red;
width: 100px;
}
@supports (display: layout(parent)) {
.test {
display: layout(parent);
background: green;
}
.child {
display: layout(child);
}
}
</style>
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<div class="test">
<div class="child"></div>
</div>
<script id="code" type="text/worklet">
registerLayout('parent', class {
*intrinsicSizes() {}
*layout() {}
*layout([child], edges, constraints, styleMap) {
let childFragment = null;
try {
// We need SABs to be enabled to properly run this test.
if (typeof SharedArrayBuffer !== 'undefined') {
childFragment = yield child.layoutNextFragment({
data: { sab: new SharedArrayBuffer(4) }
});
} else {
throw Error();
}
} catch(e) {
// Success! The structured cloning algorithm should have thrown an error.
childFragment = yield child.layoutNextFragment({});
return {autoBlockSize: 100, childFragments: [childFragment]};
}
return {autoBlockSize: 0, childFragments: [childFragment]};
}
});
registerLayout('child', class {
*intrinsicSizes() {}
*layout() {}
*layout() {
return {autoBlockSize: 0};
}
});
</script>
<script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent);
</script>
</html>

71
tests/wpt/web-platform-tests/css/css-layout-api/constraints-data.https.html Normal file
View file

@ -0,0 +1,71 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-data">
<link rel="match" href="green-square-ref.html">
<meta name="assert" content="This test checks that passing data to a child layout works correctly." />
<style>
.test {
background: red;
width: 100px;
}
@supports (display: layout(parent)) {
.test {
display: layout(parent);
background: green;
}
.child {
display: layout(child);
}
}
</style>
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<div class="test">
<div class="child"></div>
</div>
<script id="code" type="text/worklet">
const DATA = {
str: 'hello',
num: 42,
obj: {str2: 'world'},
};
registerLayout('parent', class {
*intrinsicSizes() {}
*layout() {}
*layout([child], edges, constraints, styleMap) {
const childFragment = yield child.layoutNextFragment({data: DATA});
// If the child's block-size is 100 the structured cloning worked.
if (childFragment.blockSize === 100) {
return {autoBlockSize: 100, childFragments: [childFragment]};
}
return {autoBlockSize: 0, childFragments: [childFragment]};
}
});
registerLayout('child', class {
*intrinsicSizes() {}
*layout() {}
*layout(children, edges, constraints, styleMap) {
// Use JSON.stringify to make sure the structured cloning worked.
if (constraints.data !== DATA &&
JSON.stringify(constraints.data) === JSON.stringify(DATA)) {
return {autoBlockSize: 100};
}
return {autoBlockSize: 0};
}
});
</script>
<script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent);
</script>
</html>

40
tests/wpt/web-platform-tests/css/css-layout-api/constraints-fixed-block-size-absolute-left-right-vrl.https.html Normal file
View file

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
<link rel="match" href="green-square-ref.html">
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
<style>
body {
position: relative;
width: 120px;
}
.test {
writing-mode: vertical-rl;
background: red;
position: absolute;
left: 0px;
right: 20px;
--expected-block-size: 100;
}
.child {
background: green;
}
@supports (display: layout(test)) {
.test {
display: layout(test);
}
}
</style>
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<div class="test">
<div class="child"></div>
</div>
<script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
</script>

36
tests/wpt/web-platform-tests/css/css-layout-api/constraints-fixed-block-size-absolute-none.https.html Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
<link rel="match" href="green-square-ref.html">
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
<style>
body {
position: relative;
}
.test {
background: red;
position: absolute;
--expected-block-size: null;
}
.child {
background: green;
}
@supports (display: layout(test)) {
.test {
display: layout(test);
}
}
</style>
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<div class="test">
<div class="child"></div>
</div>
<script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
</script>

39
tests/wpt/web-platform-tests/css/css-layout-api/constraints-fixed-block-size-absolute-top-bottom.https.html Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
<link rel="match" href="green-square-ref.html">
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
<style>
body {
position: relative;
height: 120px;
}
.test {
background: red;
position: absolute;
top: 0px;
bottom: 20px;
--expected-block-size: 100;
}
.child {
background: green;
}
@supports (display: layout(test)) {
.test {
display: layout(test);
}
}
</style>
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<div class="test">
<div class="child"></div>
</div>
<script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
</script>

32
tests/wpt/web-platform-tests/css/css-layout-api/constraints-fixed-block-size-block-none-vrl.https.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
<link rel="match" href="green-square-ref.html">
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
<style>
.test {
writing-mode: vertical-lr;
background: red;
--expected-block-size: null;
}
.child {
background: green;
}
@supports (display: layout(test)) {
.test {
display: layout(test);
}
}
</style>
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<div class="test">
<div class="child"></div>
</div>
<script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
</script>

32
tests/wpt/web-platform-tests/css/css-layout-api/constraints-fixed-block-size-block-none.https.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
<link rel="match" href="green-square-ref.html">
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
<style>
.test {
background: red;
--expected-block-size: null;
width: 100px;
}
.child {
background: green;
}
@supports (display: layout(test)) {
.test {
display: layout(test);
}
}
</style>
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<div class="test">
<div class="child"></div>
</div>
<script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
</script>

34
tests/wpt/web-platform-tests/css/css-layout-api/constraints-fixed-block-size-fixed-max.https.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
<link rel="match" href="green-square-ref.html">
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
<style>
.test {
background: red;
--expected-block-size: 30;
width: 100px;
height: 60px;
max-height: 30px;
}
.child {
background: green;
}
@supports (display: layout(test)) {
.test {
display: layout(test);
}
}
</style>
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<div class="test">
<div class="child"></div>
</div>
<script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
</script>

34
tests/wpt/web-platform-tests/css/css-layout-api/constraints-fixed-block-size-fixed-min.https.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
<link rel="match" href="green-square-ref.html">
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
<style>
.test {
background: red;
--expected-block-size: 70;
width: 100px;
height: 60px;
min-height: 70px;
}
.child {
background: green;
}
@supports (display: layout(test)) {
.test {
display: layout(test);
}
}
</style>
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<div class="test">
<div class="child"></div>
</div>
<script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
</script>

33
tests/wpt/web-platform-tests/css/css-layout-api/constraints-fixed-block-size-fixed-vrl.https.html Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
<link rel="match" href="green-square-ref.html">
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
<style>
.test {
writing-mode: vertical-rl;
background: red;
--expected-block-size: 100;
width: 100px;
}
.child {
background: green;
}
@supports (display: layout(test)) {
.test {
display: layout(test);
}
}
</style>
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<div class="test">
<div class="child"></div>
</div>
<script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
</script>

33
tests/wpt/web-platform-tests/css/css-layout-api/constraints-fixed-block-size-fixed.https.html Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
<link rel="match" href="green-square-ref.html">
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
<style>
.test {
background: red;
--expected-block-size: 60;
width: 100px;
height: 60px;
}
.child {
background: green;
}
@supports (display: layout(test)) {
.test {
display: layout(test);
}
}
</style>
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<div class="test">
<div class="child"></div>
</div>
<script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
</script>

37
tests/wpt/web-platform-tests/css/css-layout-api/constraints-fixed-block-size-flex-basis-vrl.https.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
<link rel="match" href="green-square-ref.html">
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
<style>
body {
display: flex;
}
.test {
writing-mode: vertical-rl;
background: red;
--expected-block-size: 100;
flex-basis: 100px;
}
.child {
background: green;
}
@supports (display: layout(test)) {
.test {
display: layout(test);
}
}
</style>
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<div class="test">
<div class="child"></div>
</div>
<script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
</script>

38
tests/wpt/web-platform-tests/css/css-layout-api/constraints-fixed-block-size-flex-column-basis.https.html Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
<link rel="match" href="green-square-ref.html">
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
<style>
body {
display: flex;
flex-direction: column;
width: 100px;
}
.test {
background: red;
--expected-block-size: 60;
flex-basis: 60px;
}
.child {
background: green;
}
@supports (display: layout(test)) {
.test {
display: layout(test);
}
}
</style>
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<div class="test">
<div class="child"></div>
</div>
<script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
</script>

40
tests/wpt/web-platform-tests/css/css-layout-api/constraints-fixed-block-size-flex-column-grow.https.html Normal file
View file

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
<link rel="match" href="green-square-ref.html">
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
<style>
body {
display: flex;
flex-direction: column;
width: 100px;
height: 60px;
}
.test {
background: red;
--expected-block-size: 50;
margin-bottom: 10px;
flex-grow: 1;
}
.child {
background: green;
}
@supports (display: layout(test)) {
.test {
display: layout(test);
}
}
</style>
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<div class="test">
<div class="child"></div>
</div>
<script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
</script>

37
tests/wpt/web-platform-tests/css/css-layout-api/constraints-fixed-block-size-flex-column-none.https.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
<link rel="match" href="green-square-ref.html">
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
<style>
body {
display: flex;
flex-direction: column;
width: 100px;
}
.test {
background: red;
--expected-block-size: null;
}
.child {
background: green;
}
@supports (display: layout(test)) {
.test {
display: layout(test);
}
}
</style>
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<div class="test">
<div class="child"></div>
</div>
<script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
</script>

39
tests/wpt/web-platform-tests/css/css-layout-api/constraints-fixed-block-size-flex-column-stretch-vrl.https.html Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
<link rel="match" href="green-square-ref.html">
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
<style>
body {
display: flex;
flex-direction: column;
width: 100px;
}
.test {
writing-mode: vertical-rl;
background: red;
--expected-block-size: 90; /* flex-item should stretch to (100 - 10)px */
margin-left: 10px;
}
.child {
background: green;
}
@supports (display: layout(test)) {
.test {
display: layout(test);
}
}
</style>
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<div class="test">
<div class="child"></div>
</div>
<script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
</script>

38
tests/wpt/web-platform-tests/css/css-layout-api/constraints-fixed-block-size-flex-grow-vrl.https.html Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
<link rel="match" href="green-square-ref.html">
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
<style>
body {
display: flex;
width: 100px;
}
.test {
writing-mode: vertical-rl;
background: red;
--expected-block-size: 100;
flex-grow: 1;
}
.child {
background: green;
}
@supports (display: layout(test)) {
.test {
display: layout(test);
}
}
</style>
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<div class="test">
<div class="child"></div>
</div>
<script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
</script>

36
tests/wpt/web-platform-tests/css/css-layout-api/constraints-fixed-block-size-flex-none.https.html Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
<link rel="match" href="green-square-ref.html">
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
<style>
body {
display: flex;
}
.test {
background: red;
--expected-block-size: null;
width: 100px;
}
.child {
background: green;
}
@supports (display: layout(test)) {
.test {
display: layout(test);
}
}
</style>
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<div class="test">
<div class="child"></div>
</div>
<script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
</script>

37
tests/wpt/web-platform-tests/css/css-layout-api/constraints-fixed-block-size-flex-percentage-indefinite.https.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
<link rel="match" href="green-square-ref.html">
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
<style>
body {
display: flex;
}
.test {
background: red;
--expected-block-size: null; /* Percentage which we are resolving height against is indefinite. */
width: 100px;
height: 50%;
}
.child {
background: green;
}
@supports (display: layout(test)) {
.test {
display: layout(test);
}
}
</style>
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<div class="test">
<div class="child"></div>
</div>
<script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
</script>

39
tests/wpt/web-platform-tests/css/css-layout-api/constraints-fixed-block-size-flex-stretch-max.https.html Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
<link rel="match" href="green-square-ref.html">
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
<style>
body {
display: flex;
height: 50px;
}
.test {
background: red;
--expected-block-size: 30; /* flex-item should respect the max constraint */
max-height: 30px;
width: 100px;
margin-bottom: 10px;
}
.child {
background: green;
}
@supports (display: layout(test)) {
.test {
display: layout(test);
}
}
</style>
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<div class="test">
<div class="child"></div>
</div>
<script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
</script>

38
tests/wpt/web-platform-tests/css/css-layout-api/constraints-fixed-block-size-flex-stretch.https.html Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
<link rel="match" href="green-square-ref.html">
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
<style>
body {
display: flex;
height: 50px;
}
.test {
background: red;
--expected-block-size: 40; /* flex-item should stretch to (50 - 10)px */
width: 100px;
margin-bottom: 10px;
}
.child {
background: green;
}
@supports (display: layout(test)) {
.test {
display: layout(test);
}
}
</style>
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<div class="test">
<div class="child"></div>
</div>
<script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
</script>

36
tests/wpt/web-platform-tests/css/css-layout-api/constraints-fixed-block-size-grid-none.https.html Normal file
View file

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
<link rel="match" href="green-square-ref.html">
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
<style>
body {
display: grid;
}
.test {
background: red;
--expected-block-size: null;
width: 100px;
}
.child {
background: green;
}
@supports (display: layout(test)) {
.test {
display: layout(test);
}
}
</style>
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<div class="test">
<div class="child"></div>
</div>
<script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
</script>

39
tests/wpt/web-platform-tests/css/css-layout-api/constraints-fixed-block-size-grid-stretch-max.https.html Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
<link rel="match" href="green-square-ref.html">
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
<style>
body {
display: grid;
grid: 50px / auto-flow;
}
.test {
background: red;
--expected-block-size: 30; /* grid-item should respect the max constraint */
max-height: 30px;
width: 100px;
margin-bottom: 10px;
}
.child {
background: green;
}
@supports (display: layout(test)) {
.test {
display: layout(test);
}
}
</style>
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<div class="test">
<div class="child"></div>
</div>
<script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
</script>

38
tests/wpt/web-platform-tests/css/css-layout-api/constraints-fixed-block-size-grid-stretch.https.html Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
<link rel="match" href="green-square-ref.html">
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
<style>
body {
display: grid;
grid: 50px / auto-flow;
}
.test {
background: red;
--expected-block-size: 40; /* grid-item should stretch to (50 - 10)px */
width: 100px;
margin-bottom: 10px;
}
.child {
background: green;
}
@supports (display: layout(test)) {
.test {
display: layout(test);
}
}
</style>
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<div class="test">
<div class="child"></div>
</div>
<script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
</script>

38
tests/wpt/web-platform-tests/css/css-layout-api/constraints-fixed-block-size-grid-vrl.https.html Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
<link rel="match" href="green-square-ref.html">
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
<style>
body {
display: grid;
grid: auto-flow / 100px;
}
.test {
writing-mode: vertical-rl;
background: red;
--expected-block-size: 100;
width: 100px;
}
.child {
background: green;
}
@supports (display: layout(test)) {
.test {
display: layout(test);
}
}
</style>
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<div class="test">
<div class="child"></div>
</div>
<script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
</script>

33
tests/wpt/web-platform-tests/css/css-layout-api/constraints-fixed-block-size-percentage-indefinite.https.html Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
<link rel="match" href="green-square-ref.html">
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
<style>
.test {
background: red;
--expected-block-size: null; /* Percentage which we are resolving height against is indefinite. */
width: 100px;
height: 50%;
}
.child {
background: green;
}
@supports (display: layout(test)) {
.test {
display: layout(test);
}
}
</style>
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<div class="test">
<div class="child"></div>
</div>
<script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
</script>

37
tests/wpt/web-platform-tests/css/css-layout-api/constraints-fixed-block-size-percentage-vrl.https.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
<link rel="match" href="green-square-ref.html">
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
<style>
body {
width: 200px;
}
.test {
writing-mode: vertical-rl;
background: red;
--expected-block-size: 100;
width: 50%;
}
.child {
background: green;
}
@supports (display: layout(test)) {
.test {
display: layout(test);
}
}
</style>
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<div class="test">
<div class="child"></div>
</div>
<script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
</script>

37
tests/wpt/web-platform-tests/css/css-layout-api/constraints-fixed-block-size-percentage.https.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
<link rel="match" href="green-square-ref.html">
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
<style>
body {
height: 200px;
}
.test {
background: red;
--expected-block-size: 100;
width: 100px;
height: 50%;
}
.child {
background: green;
}
@supports (display: layout(test)) {
.test {
display: layout(test);
}
}
</style>
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<div class="test">
<div class="child"></div>
</div>
<script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/constraints-fixed-block-size.js'});
</script>

22
tests/wpt/web-platform-tests/css/css-layout-api/constraints-fixed-block-size-quirky-body.https.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraints-fixedblocksize">
<link rel="match" href="green-square-ref.html">
<meta name="assert" content="This test checks that LayoutConstraints#fixedBlockSize is passed into the layout function correctly." />
<style>
iframe { border: none; width: 200px; height: 200px; }
</style>
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<body>
<script>
// For this test we load a quirky iframe with the test file.
// We can control the auto size of the iframe body element by setting the iframe height.
const iframe = document.createElement('iframe');
document.body.appendChild(iframe);
iframe.addEventListener('load', () => {
importWorkletAndTerminateTestAfterAsyncPaint(
iframe.contentWindow.CSS.layoutWorklet, {url: 'constraints-fixed-block-size.js'});
});
iframe.src = 'support/constraints-fixed-block-size-quirky-body-iframe.html';
</script>

44
tests/wpt/web-platform-tests/css/css-layout-api/fragment-data-function-failure.https.html Normal file
View file

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutfragment-data">
<link rel="match" href="green-square-ref.html">
<meta name="assert" content="This test checks that passing something that can't be serialized to the parent triggers a fallback to block layout." />
<style>
.test {
background: red;
width: 100px;
}
.child {
height: 100px;
}
@supports (display: layout(fallback-fn)) {
.test {
display: layout(fallback-fn);
background: green;
}
}
</style>
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<div class="test">
<div class="child"></div>
</div>
<script id="code" type="text/worklet">
registerLayout('fallback-fn', class {
*intrinsicSizes() {}
*layout() {}
*layout(children, edges, constraints, styleMap) {
const childFragments = yield children.map(child => child.layoutNextFragment());
return {autoBlockSize: 0, childFragments, data: {fn: function() {}}};
}
});
</script>
<script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent);
</script>
</html>

71
tests/wpt/web-platform-tests/css/css-layout-api/fragment-data-immutable.https.html Normal file
View file

@ -0,0 +1,71 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutfragment-data">
<link rel="match" href="green-square-ref.html">
<meta name="assert" content="This test checks that LayoutFragment#data is immutable between child layout passes." />
<style>
.test {
background: red;
width: 100px;
}
@supports (display: layout(parent)) {
.test {
display: layout(parent);
background: green;
}
.child {
display: layout(child);
}
}
</style>
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<div class="test">
<div class="child"></div>
</div>
<script id="code" type="text/worklet">
registerLayout('parent', class {
*intrinsicSizes() {}
*layout() {}
*layout([child], edges, constraints, styleMap) {
const childFragment10 = yield child.layoutNextFragment({fixedInlineSize: 10});
// First layout data should be "10".
if (childFragment10.data.size !== 10) {
return {autoBlockSize: 0, childFragments: [childFragment10]};
}
const childFragment20 = yield child.layoutNextFragment({fixedInlineSize: 20});
// Second layout data should be "20".
if (childFragment20.data.size !== 20) {
return {autoBlockSize: 0, childFragments: [childFragment10]};
}
// First layout data should still be "10".
if (childFragment10.data.size !== 10) {
return {autoBlockSize: 0, childFragments: [childFragment10]};
}
return {autoBlockSize: 100, childFragments: [childFragment20]};
}
});
registerLayout('child', class {
*intrinsicSizes() {}
*layout() {}
*layout(children, edges, constraints, styleMap) {
return {autoBlockSize: 10, data: {size: constraints.fixedInlineSize}};
}
});
</script>
<script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent);
</script>
</html>

49
tests/wpt/web-platform-tests/css/css-layout-api/fragment-data-sab-failure.https.html Normal file
View file

@ -0,0 +1,49 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutfragment-data">
<link rel="match" href="green-square-ref.html">
<meta name="assert" content="This test checks that a SharedArrayBuffer can't be passed to the parent layout." />
<style>
.test {
background: red;
width: 100px;
}
.child {
height: 100px;
}
@supports (display: layout(fallback-sab)) {
.test {
display: layout(fallback-sab);
background: green;
}
}
</style>
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<div class="test">
<div class="child"></div>
</div>
<script id="code" type="text/worklet">
registerLayout('fallback-sab', class {
*intrinsicSizes() {}
*layout() {}
*layout(children, edges, constraints, styleMap) {
const childFragments = yield children.map(child => child.layoutNextFragment());
if (typeof SharedArrayBuffer !== 'undefined') {
return {autoBlockSize: 0, childFragments, data: {sab: new SharedArrayBuffer(4) }};
} else {
throw Error();
}
}
});
</script>
<script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent);
</script>
</html>

66
tests/wpt/web-platform-tests/css/css-layout-api/fragment-data.https.html Normal file
View file

@ -0,0 +1,66 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutfragment-data">
<link rel="match" href="green-square-ref.html">
<meta name="assert" content="This test checks that passing data to a parent layout works correctly." />
<style>
.test {
background: red;
width: 100px;
}
@supports (display: layout(parent)) {
.test {
display: layout(parent);
background: green;
}
.child {
display: layout(child);
}
}
</style>
<script src="/common/reftest-wait.js"></script>
<script src="/common/worklet-reftest.js"></script>
<div class="test">
<div class="child"></div>
</div>
<script id="code" type="text/worklet">
const DATA = {
str: 'hello',
num: 42,
obj: {str2: 'world'},
};
registerLayout('parent', class {
*intrinsicSizes() {}
*layout() {}
*layout([child], edges, constraints, styleMap) {
const childFragment = yield child.layoutNextFragment();
// Use JSON.stringify to make sure the structured cloning worked.
if (childFragment.data !== DATA &&
JSON.stringify(childFragment.data) === JSON.stringify(DATA)) {
return {autoBlockSize: 100, childFragments: [childFragment]};
}
return {autoBlockSize: 0, childFragments: [childFragment]};
}
});
registerLayout('child', class {
*intrinsicSizes() {}
*layout() {}
*layout(children, edges, constraints, styleMap) {
return {autoBlockSize: 10, data: DATA};
}
});
</script>
<script>
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent);
</script>
</html>

1
tests/wpt/web-platform-tests/css/css-layout-api/layout-child-ref.html → tests/wpt/web-platform-tests/css/css-layout-api/green-square-ref.html
View file

@ -2,7 +2,6 @@
<style>
.result {
background: green;
margin: 10px;
height: 100px;
width: 100px;
}

3
tests/wpt/web-platform-tests/css/css-layout-api/layout-child-absolute.https.html
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layout-children">
<link rel="match" href="layout-child-ref.html">
<link rel="match" href="green-square-ref.html">
<meta name="assert" content="This test checks that absolute children don't appear in the children array." />
<style>
@ -9,7 +9,6 @@
--child-expected: ["2"];
background: red;
margin: 10px;
width: 100px;
}

3
tests/wpt/web-platform-tests/css/css-layout-api/layout-child-before-after.https.html
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layout-children">
<link rel="match" href="layout-child-ref.html">
<link rel="match" href="green-square-ref.html">
<meta name="assert" content="This test checks that boxes created by ::before/::after appear as children." />
<style>
@ -9,7 +9,6 @@
--child-expected: ["1", "2", "3"];
background: red;
margin: 10px;
width: 100px;
}

3
tests/wpt/web-platform-tests/css/css-layout-api/layout-child-fixed.https.html
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layout-children">
<link rel="match" href="layout-child-ref.html">
<link rel="match" href="green-square-ref.html">
<meta name="assert" content="This test checks that fixed children don't appear in the children array." />
<style>
@ -9,7 +9,6 @@
--child-expected: ["2"];
background: red;
margin: 10px;
width: 100px;
}

3
tests/wpt/web-platform-tests/css/css-layout-api/layout-child-float.https.html
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layout-children">
<link rel="match" href="layout-child-ref.html">
<link rel="match" href="green-square-ref.html">
<meta name="assert" content="This test checks that float children appear in the children array." />
<style>
@ -9,7 +9,6 @@
--child-expected: ["1", "2"];
background: red;
margin: 10px;
width: 100px;
}

3
tests/wpt/web-platform-tests/css/css-layout-api/layout-child-inflow.https.html
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layout-children">
<link rel="match" href="layout-child-ref.html">
<link rel="match" href="green-square-ref.html">
<meta name="assert" content="This test checks that regular inflow children appear as children." />
<style>
@ -9,7 +9,6 @@
--child-expected: ["1", "2"];
background: red;
margin: 10px;
width: 100px;
}

3
tests/wpt/web-platform-tests/css/css-layout-api/layout-child-inlines.https.html
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layout-children">
<link rel="match" href="layout-child-ref.html">
<link rel="match" href="green-square-ref.html">
<meta name="assert" content="This test checks that inline children are correctly blockified or wrapped in anonymous boxes." />
<style>
@ -11,7 +11,6 @@
.wrapper {
background: green;
padding: 0 10px;
margin: 10px;
width: 80px;
}

3
tests/wpt/web-platform-tests/css/css-layout-api/layout-child-text.https.html
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#layout-children">
<link rel="match" href="layout-child-ref.html">
<link rel="match" href="green-square-ref.html">
<meta name="assert" content="This test checks that text children are correctly blockified." />
<style>
@ -11,7 +11,6 @@
.wrapper {
background: green;
padding: 0 10px;
margin: 10px;
width: 80px;
}

3
tests/wpt/web-platform-tests/css/css-layout-api/perform-child-layout-available-inline-size-htb-htb.https.html
View file

@ -1,14 +1,13 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableinlinesize">
<link rel="match" href="layout-child-ref.html">
<link rel="match" href="green-square-ref.html">
<meta name="assert" content="This test checks that setting the available inline size of children works as expected." />
<style>
.test {
writing-mode: horizontal-tb;
background: red;
margin: 10px;
width: 100px;
}

3
tests/wpt/web-platform-tests/css/css-layout-api/perform-child-layout-available-inline-size-htb-vrl.https.html
View file

@ -1,14 +1,13 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableinlinesize">
<link rel="match" href="layout-child-ref.html">
<link rel="match" href="green-square-ref.html">
<meta name="assert" content="This test checks that setting the available inline size of children works as expected." />
<style>
.test {
writing-mode: horizontal-tb;
background: red;
margin: 10px;
width: 100px;
}

3
tests/wpt/web-platform-tests/css/css-layout-api/perform-child-layout-available-inline-size-vrl-htb.https.html
View file

@ -1,14 +1,13 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableinlinesize">
<link rel="match" href="layout-child-ref.html">
<link rel="match" href="green-square-ref.html">
<meta name="assert" content="This test checks that setting the available inline size of children works as expected." />
<style>
.test {
writing-mode: vertical-rl;
background: red;
margin: 10px;
height: 100px;
}

3
tests/wpt/web-platform-tests/css/css-layout-api/perform-child-layout-available-inline-size-vrl-vrl.https.html
View file

@ -1,14 +1,13 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableinlinesize">
<link rel="match" href="layout-child-ref.html">
<link rel="match" href="green-square-ref.html">
<meta name="assert" content="This test checks that setting the available inline size of children works as expected." />
<style>
.test {
writing-mode: vertical-rl;
background: red;
margin: 10px;
height: 100px;
}

3
tests/wpt/web-platform-tests/css/css-layout-api/perform-child-layout-fixed-block-size-vrl.https.html
View file

@ -1,14 +1,13 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-fixedinlinesize">
<link rel="match" href="layout-child-ref.html">
<link rel="match" href="green-square-ref.html">
<meta name="assert" content="This test checks that fixing the block size of children works as expected." />
<style>
.test {
writing-mode: vertical-rl;
background: red;
margin: 10px;
height: 100px;
}

3
tests/wpt/web-platform-tests/css/css-layout-api/perform-child-layout-fixed-block-size.https.html
View file

@ -1,13 +1,12 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-fixedblocksize">
<link rel="match" href="layout-child-ref.html">
<link rel="match" href="green-square-ref.html">
<meta name="assert" content="This test checks that fixing the block size of children works as expected." />
<style>
.test {
background: red;
margin: 10px;
width: 100px;
}

3
tests/wpt/web-platform-tests/css/css-layout-api/perform-child-layout-fixed-inline-size-vrl.https.html
View file

@ -1,14 +1,13 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-fixedinlinesize">
<link rel="match" href="layout-child-ref.html">
<link rel="match" href="green-square-ref.html">
<meta name="assert" content="This test checks that fixing the inline size of children works as expected." />
<style>
.test {
writing-mode: vertical-rl;
background: red;
margin: 10px;
height: 100px;
}

3
tests/wpt/web-platform-tests/css/css-layout-api/perform-child-layout-fixed-inline-size.https.html
View file

@ -1,13 +1,12 @@
<!DOCTYPE html>
<html class=reftest-wait>
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-fixedinlinesize">
<link rel="match" href="layout-child-ref.html">
<link rel="match" href="green-square-ref.html">
<meta name="assert" content="This test checks that fixing the inline size of children works as expected." />
<style>
.test {
background: red;
margin: 10px;
width: 100px;
}

21
tests/wpt/web-platform-tests/css/css-layout-api/support/constraints-fixed-block-size-quirky-body-iframe.html Normal file
View file

@ -0,0 +1,21 @@
<style>
body {
margin: 0;
--expected-block-size: 200;
}
.child {
background: green;
}
@supports (display: layout(test)) {
body {
display: layout(test);
}
}
</style>
<!-- In Quirks mode, we should stretch to 100% of the inital containing block. -->
<body>
<div class="child"></div>
</body>

22
tests/wpt/web-platform-tests/css/css-layout-api/support/constraints-fixed-block-size.js Normal file
View file

@ -0,0 +1,22 @@
registerLayout('test', class {
static get inputProperties() {
return ['--expected-block-size'];
}
*intrinsicSizes() {}
*layout([child], edges, constraints, styleMap) {
let childFixedInlineSize = 0;
let childFixedBlockSize = 0;
if (constraints.fixedBlockSize === JSON.parse(styleMap.get('--expected-block-size'))) {
childFixedInlineSize = 100;
childFixedBlockSize = 100;
}
const childFragments = [yield child.layoutNextFragment({
fixedInlineSize: childFixedInlineSize,
fixedBlockSize: childFixedBlockSize,
})];
return {childFragments};
}
});

6
tests/wpt/web-platform-tests/css/css-properties-values-api/registered-property-cssom.html
View file

@ -37,8 +37,10 @@ test(function() {
assert_equals(computedStyle.getPropertyValue('--color'), 'hello');
}, "CSSOM setters function as expected for unregistered properties");
CSS.registerProperty({name: '--length', syntax: '<length>', initialValue: '0px'});
CSS.registerProperty({name: '--color', syntax: '<color>', initialValue: 'white', inherits: true});
test(function() {
CSS.registerProperty({name: '--length', syntax: '<length>', initialValue: '0px'});
CSS.registerProperty({name: '--color', syntax: '<color>', initialValue: 'white', inherits: true});
}, "CSS.registerProperty");
test(function() {
assert_equals(inlineStyle.getPropertyValue('--length'), '5');

9
tests/wpt/web-platform-tests/css/css-pseudo/placeholder-input-number-notref.html Normal file
View file

@ -0,0 +1,9 @@
<!doctype html>
<title>CSS Test Reference</title>
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
<style>
#number::placeholder {
color: blue;
}
</style>
<input id="number" type="number" placeholder="Placeholder">

11
tests/wpt/web-platform-tests/css/css-pseudo/placeholder-input-number.html Normal file
View file

@ -0,0 +1,11 @@
<!doctype html>
<title>CSS Test: ::placeholder applies to input type="number"</title>
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
<link rel="mismatch" href="placeholder-input-number-notref.html">
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#placeholder-pseudo">
<style>
#number::placeholder {
color: green;
}
</style>
<input id="number" type="number" placeholder="Placeholder">

69
tests/wpt/web-platform-tests/css/css-shapes/shape-outside/shape-image/shape-image-027.html Normal file
View file

@ -0,0 +1,69 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: left float, url(png), real negative offset image + shape-margin (px)</title>
<link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/>
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shapes-from-image"/>
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-outside-property"/>
<link rel="help" href="http://www.w3.org/TR/css-shapes-1/#shape-margin-property"/>
<link rel="match" href="reference/shape-image-006-ref.html"/>
<meta name="flags" content="ahem"/>
<meta name="assert" content="This test verifies that content wraps around all the image pixels
+ the shape-margin when shape-outside is given a png file.
Additionally, the shape-outside: image element is given a negative
left offset relative to its containing block."/>
<style type="text/css">
body {
margin: 0;
}
.container {
left: 10px;
font: 50px/1 Ahem;
}
#test {
width: 200px;
color: rgb(0,100,0);
}
#image {
float: left;
shape-outside: url("support/left-half-rectangle.png");
shape-margin: 20px;
margin-left: -10px;
width: 100px;
height: 100px;
}
.blue {
width: 2px;
height: 100px;
background-color: blue;
}
.left-line { left: 65px; }
.right-line { left: 125px; }
.failure {
left: 70px;
width: 50px;
height: 100px;
background-color: red;
z-index: -1;
}
.container, .blue, .failure {
position: absolute;
top: 70px;
}
</style>
</head>
<body>
<p>
The test passes if the green rectangle on the right is completely between the two blue lines.
There should be no red.
</p>
<div id="test" class="container">
<div id="image"><img src="support/left-half-rectangle.png" style="margin-left: 10px"/></div>
X<br/>X
</div>
<div class="blue left-line"></div>
<div class="blue right-line"></div>
<div class="failure"></div>
</body>
</html>

2
tests/wpt/web-platform-tests/css/css-transitions/support/properties.js
View file

@ -221,8 +221,6 @@ var properties = {
'outline-width': ['length'],
'clip': ['rectangle'],
// Note: doesn't seem implemented anywhere
'crop': ['rectangle'],
'vertical-align': ['length', 'percentage'],
'opacity': ['number[0,1]'],

15
tests/wpt/web-platform-tests/css/css-ui/outline-017.html
View file

@ -9,18 +9,18 @@
<style>
@keyframes outline-anim {
from {
outline: solid 1px rgb(1,0,0);
outline: solid 1px rgba(1, 0, 0, 0.5);
outline-offset: 1px;
}
to {
outline: solid 3px rgb(3,0,0);
outline: solid 3px rgba(3, 0, 0, 0.5);
outline-offset: 3px;
}
}
#test {
animation: outline-anim 3s -1.5s paused linear;
outline: solid 1px rgb(1,0,0);
outline: solid 1px rgba(1, 0, 0, 0.5);
outline-offset: 1px;
}
</style>
@ -29,10 +29,15 @@
<div id=log></div>
<script>
// outline being a render-only property, its animation can be done off the main thread
// checking the values after the first paint is safer, hence requestAnimationFrame
setup({explicit_done:true});
requestAnimationFrame(function() {
// synchronous tests being run during the page's first paint
test(
function(){
var test = document.getElementById("test");
assert_equals(getComputedStyle(test).outlineColor, 'rgb(2, 0, 0)');
assert_equals(getComputedStyle(test).outlineColor, 'rgba(2, 0, 0, 0.5)');
}, "outline-color is animated as a color");
test(
function(){
@ -44,5 +49,7 @@
var test = document.getElementById("test");
assert_equals(getComputedStyle(test).outlineOffset, '2px');
}, "outline-offset is animated as a length");
done();
});
</script>
</body>

46
tests/wpt/web-platform-tests/css/css-ui/outline-018.html
View file

@ -16,28 +16,46 @@
}
}
#test {
animation: outline-anim 3s -1.5s paused linear;
#test1 {
animation: outline-anim 3s 0s paused linear;
outline: solid 1px black;
}
#test2 {
animation: outline-anim 3s -1s paused linear;
outline: solid 1px black;
}
#test3 {
animation: outline-anim 3s -2s paused linear;
outline: solid 1px black;
}
#test4 {
animation: outline-anim 3s 0s paused reverse-linear;
outline: solid 1px black;
}
</style>
<body>
<div id="test"></div>
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<div id="test4"></div>
<div id=log></div>
<script>
// outline being a render-only property, its animation can be done off the main thread
// checking the values after the first paint is safer, hence requestAnimationFrame
setup({explicit_done:true});
requestAnimationFrame(function() {
// synchronous tests being run during the page's first paint
test(
function(){
var test = document.getElementById("test");
test.style.animation = "outline-anim 3s 0s paused linear"
assert_equals(getComputedStyle(test).outlineStyle, 'solid');
test.style.animation = "outline-anim 3s -1s paused linear"
assert_equals(getComputedStyle(test).outlineStyle, 'solid');
test.style.animation = "outline-anim 3s -2s paused linear"
assert_equals(getComputedStyle(test).outlineStyle, 'dotted');
test.style.animation = "outline-anim 3s 0s paused reverse-linear"
assert_equals(getComputedStyle(test).outlineStyle, 'dotted');
}, "outline-style is animated as a discrete type");
var tests = document.querySelectorAll("div[id^='test']");
assert_equals(getComputedStyle(tests[0]).outlineStyle, 'solid');
assert_equals(getComputedStyle(tests[1]).outlineStyle, 'solid');
assert_equals(getComputedStyle(tests[2]).outlineStyle, 'dotted');
assert_equals(getComputedStyle(tests[3]).outlineStyle, 'dotted');
}, "outline-style is animated as a discrete type"
);
done();
});
</script>
</body>

277
tests/wpt/web-platform-tests/css/support/grid.css Normal file
View file

@ -0,0 +1,277 @@
.grid {
display: grid;
background-color: grey;
}
.inline-grid {
display: inline-grid;
background-color: grey;
}
.firstRowFirstColumn {
background-color: blue;
grid-column: 1;
grid-row: 1;
}
.onlyFirstRowOnlyFirstColumn {
background-color: blue;
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.firstRowSecondColumn {
background-color: lime;
grid-column: 2;
grid-row: 1;
}
.onlyFirstRowOnlySecondColumn {
background-color: lime;
grid-column: 2 / 3;
grid-row: 1 / 2;
}
.secondRowFirstColumn {
background-color: purple;
grid-column: 1;
grid-row: 2;
}
.onlySecondRowOnlyFirstColumn {
background-color: purple;
grid-column: 1 / 2;
grid-row: 2 / 3;
}
.secondRowSecondColumn {
background-color: orange;
grid-column: 2;
grid-row: 2;
}
.onlySecondRowOnlySecondColumn {
background-color: orange;
grid-column: 2 / 3;
grid-row: 2 / 3;
}
.endSecondRowEndSecondColumn {
background-color: orange;
grid-column-end: 3;
grid-row-end: 3;
}
.thirdRowSecondColumn {
background-color: red;
grid-column: 2;
grid-row: 3;
}
.firstRowThirdColumn {
background-color: magenta;
grid-column: 3;
grid-row: 1;
}
.secondRowThirdColumn {
background-color: navy;
grid-column: 3;
grid-row: 2;
}
.firstRowFourthColumn {
background-color: green;
grid-column: 4;
grid-row: 1;
}
.secondRowFourthColumn {
background-color: pink;
grid-column: 4;
grid-row: 2;
}
.firstAutoRowSecondAutoColumn {
grid-row: 1 / auto;
grid-column: 2 / auto;
}
.autoLastRowAutoLastColumn {
grid-row: auto / -1;
grid-column: auto / -1;
}
.autoSecondRowAutoFirstColumn {
grid-row: auto / 2;
grid-column: auto / 1;
}
.firstRowBothColumn {
grid-row: 1;
grid-column: 1 / -1;
}
.secondRowBothColumn {
grid-row: 2;
grid-column: 1 / -1;
}
.bothRowFirstColumn {
grid-row: 1 / -1;
grid-column: 1;
}
.bothRowSecondColumn {
grid-row: 1 / -1;
grid-column: 2;
}
.bothRowBothColumn {
grid-row: 1 / -1;
grid-column: 1 / -1;
}
/* Auto column / row. */
.autoRowAutoColumn {
background-color: pink;
grid-column: auto;
grid-row: auto;
}
.firstRowAutoColumn {
background-color: blue;
grid-column: auto;
grid-row: 1;
}
.secondRowAutoColumn {
background-color: purple;
grid-column: auto;
grid-row: 2;
}
.thirdRowAutoColumn {
background-color: navy;
grid-column: auto;
grid-row: 3;
}
.autoRowFirstColumn {
background-color: lime;
grid-column: 1;
grid-row: auto;
}
.autoRowSecondColumn {
background-color: orange;
grid-column: 2;
grid-row: auto;
}
.autoRowThirdColumn {
background-color: magenta;
grid-column: 3;
grid-row: auto;
}
.autoRowAutoColumnSpanning2 {
background-color: maroon;
grid-column: span 2;
grid-row: auto;
}
.autoRowSpanning2AutoColumn {
background-color: aqua;
grid-column: auto;
grid-row: span 2;
}
.autoRowSpanning2AutoColumnSpanning3 {
background-color: olive;
grid-column: span 3;
grid-row: span 2;
}
.autoRowSpanning3AutoColumnSpanning2 {
background-color: indigo;
grid-column: span 2;
grid-row: span 3;
}
.autoRowFirstColumnSpanning2 {
background-color: maroon;
grid-column: 1 / span 2;
grid-row: auto;
}
.autoRowSecondColumnSpanning2 {
background-color: olive;
grid-column: 2 / span 2;
grid-row: auto;
}
.firstRowSpanning2AutoColumn {
background-color: maroon;
grid-column: auto;
grid-row: 1 / span 2;
height: 100%;
}
.secondRowSpanning2AutoColumn {
background-color: olive;
grid-column: auto;
grid-row: 2 / span 2;
height: 100%;
}
/* Grid element flow. */
.gridAutoFlowColumnSparse {
grid-auto-flow: column;
}
.gridAutoFlowColumnDense {
grid-auto-flow: column dense;
}
.gridAutoFlowRowSparse {
grid-auto-flow: row;
}
.gridAutoFlowRowDense {
grid-auto-flow: row dense;
}
/* This rule makes sure the container is smaller than any grid items to avoid distributing any extra logical space to them. */
.constrainedContainer {
width: 10px;
height: 10px;
}
.unconstrainedContainer {
width: 1000px;
height: 1000px;
}
.sizedToGridArea {
font: 10px/1 Ahem;
/* Make us fit our grid area. */
width: 100%;
height: 100%;
}
.verticalRL {
writing-mode: vertical-rl;
}
.verticalLR {
writing-mode: vertical-lr;
}
.horizontalTB {
writing-mode: horizontal-tb;
}
.directionRTL {
direction: rtl;
}
.directionLTR {
direction: ltr;
}

62
tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-paint-stacking-context-001-ref.html Normal file
View file

@ -0,0 +1,62 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>CSS Reftest Reference</title>
<link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
<style>
div {
position: relative;
width: 100px;
}
#div1,
#div3 {
background-color: #cfc;
}
#div1 {
z-index: 5;
}
#div2 {
z-index: 1;
background-color: #fdd;
height: 100px;
top: -20px;
}
#div2_1 {
background-color: #ffc;
z-index: 6;
top: -10px;
}
#div2_2 {
z-index: 3;
position: absolute;
top: -15px;
width: 40px;
height: 100px;
background-color: #ddf;
}
#div3 {
z-index: 2;
top: -50px;
}
</style>
</head>
<body>
<div id="div1">
<br/><br/>
</div>
<div id="div2">
<div id="div2_1">
<br/><br/>
</div>
<div id="div2_2">
</div>
</div>
<div id="div3">
<br/><br/>
</div>
</body>
</html>

66
tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-paint-stacking-context-001a.html Normal file
View file

@ -0,0 +1,66 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>CSS Test: 'contain: paint' with stacking contents. Z-index is defined only for siblings and children.</title>
<link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#x43">
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">
<link rel="match" href="contain-paint-stacking-context-001-ref.html">
<style>
div {
position: relative;
width: 100px;
}
#div1,
#div3 {
background-color: #cfc;
}
#div1 {
z-index: 5;
}
#div2 {
contain: paint;
background-color: #fdd;
height: 100px;
top: -20px;
}
#div2_1 {
background-color: #ffc;
z-index: 6;
top: -10px;
}
#div2_2 {
z-index: 3;
position: absolute;
top: -15px;
width: 40px;
height: 100px;
background-color: #ddf;
}
#div3 {
z-index: 2;
top: -50px;
}
</style>
</head>
<body>
<div id="div1">
<br/><br/>
</div>
<div id="div2">
<div id="div2_1">
<br/><br/>
</div>
<div id="div2_2">
</div>
</div>
<div id="div3">
<br/><br/>
</div>
</body>
</html>

66
tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/contain/contain-paint-stacking-context-001b.html Normal file
View file

@ -0,0 +1,66 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>CSS Test: 'will-change: contain' with stacking contents. Z-index is defined only for siblings and children.</title>
<link rel="author" title="Yusuf Sermet" href="mailto:ysermet@mozilla.com">
<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#x43">
<link rel="help" href="https://drafts.csswg.org/css-contain/#containment-paint">
<link rel="match" href="contain-paint-stacking-context-001-ref.html">
<style>
div {
position: relative;
width: 100px;
}
#div1,
#div3 {
background-color: #cfc;
}
#div1 {
z-index: 5;
}
#div2 {
will-change: contain;
background-color: #fdd;
height: 100px;
top: -20px;
}
#div2_1 {
background-color: #ffc;
z-index: 6;
top: -10px;
}
#div2_2 {
z-index: 3;
position: absolute;
top: -15px;
width: 40px;
height: 100px;
background-color: #ddf;
}
#div3 {
z-index: 2;
top: -50px;
}
</style>
</head>
<body>
<div id="div1">
<br/><br/>
</div>
<div id="div2">
<div id="div2_1">
<br/><br/>
</div>
<div id="div2_2">
</div>
</div>
<div id="div3">
<br/><br/>
</div>
</body>
</html>

2
tests/wpt/web-platform-tests/css/vendor-imports/mozilla/mozilla-central-reftests/contain/reftest.list
View file

@ -8,3 +8,5 @@
== contain-paint-containing-block-fixed-001.html contain-paint-containing-block-fixed-001-ref.html
== contain-paint-formatting-context-float-001.html contain-paint-formatting-context-float-001-ref.html
== contain-paint-formatting-context-margin-001.html contain-paint-formatting-context-margin-001-ref.html
== contain-paint-stacking-context-001a.html contain-paint-stacking-context-001-ref.html
== contain-paint-stacking-context-001b.html contain-paint-stacking-context-001-ref.html

Some files were not shown because too many files have changed in this diff Show more