mirror of
https://github.com/servo/servo.git
synced 2025-08-11 16:35:33 +01:00
Update web-platform-tests to revision 3d117ae1266e6bd039a3a1ab92b27e82c3ccc92d
This commit is contained in:
WPT Sync Bot
parent
647796ede6
commit
20a08918d9
132 changed files with 3012 additions and 689 deletions
|
|
@ -1,8 +1,8 @@
|
|||
<!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="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that setting the available inline size of children works as expected." />
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableblocksize">
|
||||
<link rel="match" href="../green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that setting the available block-size of children works as expected." />
|
||||
|
||||
<style>
|
||||
.test {
|
||||
|
|
@ -61,5 +61,5 @@
|
|||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'});
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: '../support/layout-child-sizes-worklet.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableblocksize">
|
||||
<link rel="match" href="../green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that setting an invalid available block-size works as expected." />
|
||||
|
||||
<style>
|
||||
.test {
|
||||
writing-mode: horizontal-tb;
|
||||
background: red;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.child {
|
||||
writing-mode: vertical-rl;
|
||||
visibility: hidden;
|
||||
line-height: 0;
|
||||
|
||||
--available-block-size: -20;
|
||||
}
|
||||
|
||||
.inline {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.inline-size-10 { height: 10px; }
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
background: green;
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<!-- The invalid available block-size should be clamped to zero. -->
|
||||
<div class="child" style="--block-size-expected: 10; --inline-size-expected: 16;">
|
||||
<span class="inline inline-size-10"></span>
|
||||
<span class="inline inline-size-10"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: '../support/layout-child-sizes-worklet.js'});
|
||||
</script>
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
<!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="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that setting the available inline size of children works as expected." />
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableblocksize">
|
||||
<link rel="match" href="../green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that setting the available block-size of children works as expected." />
|
||||
|
||||
<style>
|
||||
.test {
|
||||
|
|
@ -61,5 +61,5 @@
|
|||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'});
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: '../support/layout-child-sizes-worklet.js'});
|
||||
</script>
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
<!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="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that setting the available inline size of children works as expected." />
|
||||
<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 {
|
||||
|
|
@ -61,5 +61,5 @@
|
|||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'});
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: '../support/layout-child-sizes-worklet.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!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="../green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that setting an invalid available inline-size works as expected." />
|
||||
|
||||
<style>
|
||||
.test {
|
||||
writing-mode: horizontal-tb;
|
||||
background: red;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.child {
|
||||
writing-mode: horizontal-tb;
|
||||
visibility: hidden;
|
||||
line-height: 0;
|
||||
|
||||
--available-inline-size: -20;
|
||||
}
|
||||
|
||||
.inline {
|
||||
display: inline-block;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.inline-size-10 { width: 10px; }
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
background: green;
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<!-- The invalid available inline-size should be clamped to zero. -->
|
||||
<div class="child" style="--inline-size-expected: 10; --block-size-expected: 16;">
|
||||
<span class="inline inline-size-10"></span>
|
||||
<span class="inline inline-size-10"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: '../support/layout-child-sizes-worklet.js'});
|
||||
</script>
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
<!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="green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that setting the available inline size of children works as expected." />
|
||||
<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 {
|
||||
|
|
@ -61,5 +61,5 @@
|
|||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'});
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: '../support/layout-child-sizes-worklet.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableinlinesize">
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableblocksize">
|
||||
<link rel="match" href="../green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that resolving percentages against the available size works as expected." />
|
||||
|
||||
<style>
|
||||
.test {
|
||||
writing-mode: horizontal-tb;
|
||||
background: red;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.child {
|
||||
writing-mode: horizontal-tb;
|
||||
visibility: hidden;
|
||||
|
||||
--available-inline-size: 50;
|
||||
--available-block-size: 20;
|
||||
|
||||
--inline-size-expected: 10px;
|
||||
--block-size-expected: 10px;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
background: green;
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<!-- A fixed width/height shouldn't be affected by the available size. -->
|
||||
<div class="child" style="width: 10px; height: 10px;"></div>
|
||||
|
||||
<!-- A percentage width/height should resolve itself against the available size. -->
|
||||
<div class="child" style="width: 20%; height: 50%;"></div>
|
||||
|
||||
<!-- A percentage max-width/max-height should resolve itself against the available size. -->
|
||||
<div class="child" style="width: 15px; max-width: 20%; height: 15px; max-height: 50%;"></div>
|
||||
|
||||
<!-- A percentage min-width/min-height should resolve itself against the available size. -->
|
||||
<div class="child" style="width: 5px; min-width: 20%; height: 5px; min-height: 50%;"></div>
|
||||
|
||||
<!-- A replaced percentage width/height should resolve itself against the available size. -->
|
||||
<img class="child" style="width: 20%; height: 50%;" />
|
||||
|
||||
<!-- A replaced percentage max-width/max-height should resolve itself against the available size. -->
|
||||
<img class="child" style="width: 15px; max-width: 20%; height: 15px; max-height: 50%;" />
|
||||
|
||||
<!-- A replaced percentage min-width/min-height should resolve itself against the available size. -->
|
||||
<img class="child" style="width: 5px; min-width: 20%; height: 5px; min-height: 50%;" />
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: '../support/layout-child-sizes-worklet.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableinlinesize">
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableblocksize">
|
||||
<link rel="match" href="../green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that resolving percentages against the available size works as expected." />
|
||||
|
||||
<style>
|
||||
.test {
|
||||
writing-mode: horizontal-tb;
|
||||
background: red;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.child {
|
||||
writing-mode: vertical-rl;
|
||||
visibility: hidden;
|
||||
|
||||
--available-inline-size: 50;
|
||||
--available-block-size: 20;
|
||||
|
||||
--inline-size-expected: 10px;
|
||||
--block-size-expected: 10px;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
background: green;
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<!-- A fixed width/height shouldn't be affected by the available size. -->
|
||||
<div class="child" style="width: 10px; height: 10px;"></div>
|
||||
|
||||
<!-- A percentage width/height should resolve itself against the available size. -->
|
||||
<div class="child" style="width: 20%; height: 50%;"></div>
|
||||
|
||||
<!-- A percentage max-width/max-height should resolve itself against the available size. -->
|
||||
<div class="child" style="width: 15px; max-width: 20%; height: 15px; max-height: 50%;"></div>
|
||||
|
||||
<!-- A percentage min-width/min-height should resolve itself against the available size. -->
|
||||
<div class="child" style="width: 5px; min-width: 20%; height: 5px; min-height: 50%;"></div>
|
||||
|
||||
<!-- A replaced percentage width/height should resolve itself against the available size. -->
|
||||
<img class="child" style="width: 20%; height: 50%;" />
|
||||
|
||||
<!-- A replaced percentage max-width/max-height should resolve itself against the available size. -->
|
||||
<img class="child" style="width: 15px; max-width: 20%; height: 15px; max-height: 50%;" />
|
||||
|
||||
<!-- A replaced percentage min-width/min-height should resolve itself against the available size. -->
|
||||
<img class="child" style="width: 5px; min-width: 20%; height: 5px; min-height: 50%;" />
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: '../support/layout-child-sizes-worklet.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableinlinesize">
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableblocksize">
|
||||
<link rel="match" href="../green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that resolving percentages against an invalid available size works as expected." />
|
||||
|
||||
<style>
|
||||
.test {
|
||||
background: red;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.child {
|
||||
visibility: hidden;
|
||||
width: 10px;
|
||||
line-height: 0;
|
||||
|
||||
--available-inline-size: -20;
|
||||
--available-block-size: -10;
|
||||
}
|
||||
|
||||
.inline {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
background: green;
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<!-- The available inline-size gets clamped to zero, and the available block-size gets treated as indefinite. -->
|
||||
<div class="child" style="--inline-size-expected: 0px; --block-size-expected: 10px; width: 100%; height: 100%;">
|
||||
<div class="inline"></div>
|
||||
</div>
|
||||
|
||||
<!-- For replaced elements, both axis should be resolved to 0px. -->
|
||||
<img class="child" style="--inline-size-expected: 0px; --block-size-expected: 0px; width: 100%; height: 100%;" />
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: '../support/layout-child-sizes-worklet.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableinlinesize">
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableblocksize">
|
||||
<link rel="match" href="../green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that resolving percentages against the available size works as expected." />
|
||||
|
||||
<style>
|
||||
.test {
|
||||
writing-mode: vertical-rl;
|
||||
background: red;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.child {
|
||||
writing-mode: horizontal-tb;
|
||||
visibility: hidden;
|
||||
|
||||
--available-inline-size: 20;
|
||||
--available-block-size: 50;
|
||||
|
||||
--inline-size-expected: 10px;
|
||||
--block-size-expected: 10px;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
background: green;
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<!-- A fixed width/height shouldn't be affected by the available size. -->
|
||||
<div class="child" style="width: 10px; height: 10px;"></div>
|
||||
|
||||
<!-- A percentage width/height should resolve itself against the available size. -->
|
||||
<div class="child" style="width: 20%; height: 50%;"></div>
|
||||
|
||||
<!-- A percentage max-width/max-height should resolve itself against the available size. -->
|
||||
<div class="child" style="width: 15px; max-width: 20%; height: 15px; max-height: 50%;"></div>
|
||||
|
||||
<!-- A percentage min-width/min-height should resolve itself against the available size. -->
|
||||
<div class="child" style="width: 5px; min-width: 20%; height: 5px; min-height: 50%;"></div>
|
||||
|
||||
<!-- A replaced percentage width/height should resolve itself against the available size. -->
|
||||
<img class="child" style="width: 20%; height: 50%;" />
|
||||
|
||||
<!-- A replaced percentage max-width/max-height should resolve itself against the available size. -->
|
||||
<img class="child" style="width: 15px; max-width: 20%; height: 15px; max-height: 50%;" />
|
||||
|
||||
<!-- A replaced percentage min-width/min-height should resolve itself against the available size. -->
|
||||
<img class="child" style="width: 5px; min-width: 20%; height: 5px; min-height: 50%;" />
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: '../support/layout-child-sizes-worklet.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableinlinesize">
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-availableblocksize">
|
||||
<link rel="match" href="../green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that resolving percentages against the available size works as expected." />
|
||||
|
||||
<style>
|
||||
.test {
|
||||
writing-mode: vertical-rl;
|
||||
background: red;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.child {
|
||||
writing-mode: vertical-rl;
|
||||
visibility: hidden;
|
||||
|
||||
--available-inline-size: 20;
|
||||
--available-block-size: 50;
|
||||
|
||||
--inline-size-expected: 10px;
|
||||
--block-size-expected: 10px;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
background: green;
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<!-- A fixed width/height shouldn't be affected by the available size. -->
|
||||
<div class="child" style="width: 10px; height: 10px;"></div>
|
||||
|
||||
<!-- A percentage width/height should resolve itself against the available size. -->
|
||||
<div class="child" style="width: 20%; height: 50%;"></div>
|
||||
|
||||
<!-- A percentage max-width/max-height should resolve itself against the available size. -->
|
||||
<div class="child" style="width: 15px; max-width: 20%; height: 15px; max-height: 50%;"></div>
|
||||
|
||||
<!-- A percentage min-width/min-height should resolve itself against the available size. -->
|
||||
<div class="child" style="width: 5px; min-width: 20%; height: 5px; min-height: 50%;"></div>
|
||||
|
||||
<!-- A replaced percentage width/height should resolve itself against the available size. -->
|
||||
<img class="child" style="width: 20%; height: 50%;" />
|
||||
|
||||
<!-- A replaced percentage max-width/max-height should resolve itself against the available size. -->
|
||||
<img class="child" style="width: 15px; max-width: 20%; height: 15px; max-height: 50%;" />
|
||||
|
||||
<!-- A replaced percentage min-width/min-height should resolve itself against the available size. -->
|
||||
<img class="child" style="width: 5px; min-width: 20%; height: 5px; min-height: 50%;" />
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: '../support/layout-child-sizes-worklet.js'});
|
||||
</script>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<!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="green-square-ref.html">
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-fixedblocksize">
|
||||
<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>
|
||||
|
|
@ -56,5 +56,5 @@
|
|||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'});
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: '../support/layout-child-sizes-worklet.js'});
|
||||
</script>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<!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="green-square-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>
|
||||
|
|
@ -55,5 +55,5 @@
|
|||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'});
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: '../support/layout-child-sizes-worklet.js'});
|
||||
</script>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<!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="green-square-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>
|
||||
|
|
@ -56,5 +56,5 @@
|
|||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'});
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: '../support/layout-child-sizes-worklet.js'});
|
||||
</script>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<!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="green-square-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>
|
||||
|
|
@ -55,5 +55,5 @@
|
|||
</div>
|
||||
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: 'support/layout-child-sizes-worklet.js'});
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: '../support/layout-child-sizes-worklet.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-percentageblocksize">
|
||||
<link rel="match" href="../green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that setting the percentage block-size of children works as expected." />
|
||||
|
||||
<style>
|
||||
.test {
|
||||
writing-mode: horizontal-tb;
|
||||
background: red;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.child {
|
||||
writing-mode: horizontal-tb;
|
||||
visibility: hidden;
|
||||
width: 10px;
|
||||
|
||||
--percentage-block-size: 20;
|
||||
|
||||
--inline-size-expected: 10px;
|
||||
--block-size-expected: 10px;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
background: green;
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<!-- A fixed height shouldn't be affected by the percentage size. -->
|
||||
<div class="child" style="height: 10px;"></div>
|
||||
|
||||
<!-- A percentage height should resolve itself against the percentageBlockSize. -->
|
||||
<div class="child" style="height: 50%;"></div>
|
||||
|
||||
<!-- A percentage max-height should resolve itself against the percentageBlockSize. -->
|
||||
<div class="child" style="height: 15px; max-height: 50%;"></div>
|
||||
|
||||
<!-- A percentage min-height should resolve itself against the percentageBlockSize. -->
|
||||
<div class="child" style="height: 5px; min-height: 50%;"></div>
|
||||
|
||||
<!-- A replaced percentage height should resolve itself against the percentageBlockSize. -->
|
||||
<img class="child" style="height: 50%;" />
|
||||
|
||||
<!-- A replaced percentage max-height should resolve itself against the percentageBlockSize. -->
|
||||
<img class="child" style="height: 15px; max-height: 50%;" />
|
||||
|
||||
<!-- A replaced percentage min-height should resolve itself against the percentageBlockSize. -->
|
||||
<img class="child" style="height: 5px; min-height: 50%;" />
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: '../support/layout-child-sizes-worklet.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-percentageinlinesize">
|
||||
<link rel="match" href="../green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that setting the percentage inline-size of children works as expected." />
|
||||
|
||||
<style>
|
||||
.test {
|
||||
writing-mode: horizontal-tb;
|
||||
background: red;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.child {
|
||||
writing-mode: vertical-rl;
|
||||
visibility: hidden;
|
||||
height: 10px;
|
||||
|
||||
--percentage-inline-size: 20;
|
||||
|
||||
--inline-size-expected: 10px;
|
||||
--block-size-expected: 10px;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
background: green;
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<!-- A fixed width shouldn't be affected by the percentage size. -->
|
||||
<div class="child" style="width: 10px;"></div>
|
||||
|
||||
<!-- A percentage width should resolve itself against the percentageInlineSize. -->
|
||||
<div class="child" style="width: 50%;"></div>
|
||||
|
||||
<!-- A percentage max-width should resolve itself against the percentageInlineSize. -->
|
||||
<div class="child" style="width: 15px; max-width: 50%;"></div>
|
||||
|
||||
<!-- A percentage min-width should resolve itself against the percentageInlineSize. -->
|
||||
<div class="child" style="width: 5px; min-width: 50%;"></div>
|
||||
|
||||
<!-- A replaced percentage width should resolve itself against the percentageInlineSize. -->
|
||||
<img class="child" style="width: 50%;" />
|
||||
|
||||
<!-- A replaced percentage max-width should resolve itself against the percentageInlineSize. -->
|
||||
<img class="child" style="width: 15px; max-width: 50%;" />
|
||||
|
||||
<!-- A replaced percentage min-width should resolve itself against the percentageInlineSize. -->
|
||||
<img class="child" style="width: 5px; min-width: 50%;" />
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: '../support/layout-child-sizes-worklet.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-percentageblocksize">
|
||||
<link rel="match" href="../green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that setting an invalid percentage block-size of children works as expected." />
|
||||
|
||||
<style>
|
||||
.test {
|
||||
background: red;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.child {
|
||||
visibility: hidden;
|
||||
width: 10px;
|
||||
line-height: 0;
|
||||
|
||||
--percentage-block-size: -10;
|
||||
}
|
||||
|
||||
.inline {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
background: green;
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<!-- A percentage shouldn't be resolved against an invalid percentageBlockSize. -->
|
||||
<div class="child" style="--inline-size-expected: 10px; --block-size-expected: 10px; height: 100%;">
|
||||
<div class="inline"></div>
|
||||
</div>
|
||||
|
||||
<!-- A percentage shouldn't be resolved against an invalid percentageBlockSize. -->
|
||||
<img class="child" style="--inline-size-expected: 10px; --block-size-expected: 0px; height: 100%;" />
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: '../support/layout-child-sizes-worklet.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-percentageblocksize">
|
||||
<link rel="match" href="../green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that setting a percentage block-size works correctly in quirks mode." />
|
||||
|
||||
<style>
|
||||
.container {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.test {
|
||||
background: red;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.child {
|
||||
visibility: hidden;
|
||||
width: 10px;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.inline {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
background: green;
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="container">
|
||||
<div class="test">
|
||||
<!-- TODO explain. -->
|
||||
<div class="child" style="--percentage-block-size: 50px; --inline-size-expected: 10px; --block-size-expected: 10px;">
|
||||
<div style="height: 20%"></div>
|
||||
</div>
|
||||
|
||||
<!-- TODO explain. -->
|
||||
<div class="child" style="--inline-size-expected: 10px; --block-size-expected: 10px;">
|
||||
<div style="height: 100%">
|
||||
<div class="inline"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: '../support/layout-child-sizes-worklet.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-percentageinlinesize">
|
||||
<link rel="match" href="../green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that setting the percentage inline-size of children works as expected." />
|
||||
|
||||
<style>
|
||||
.test {
|
||||
writing-mode: vertical-rl;
|
||||
background: red;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.child {
|
||||
writing-mode: horizontal-tb;
|
||||
visibility: hidden;
|
||||
width: 10px;
|
||||
|
||||
--percentage-inline-size: 20;
|
||||
|
||||
--inline-size-expected: 10px;
|
||||
--block-size-expected: 10px;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
background: green;
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<!-- A fixed height shouldn't be affected by the percentage size. -->
|
||||
<div class="child" style="height: 10px;"></div>
|
||||
|
||||
<!-- A percentage height should resolve itself against the percentageInlineSize. -->
|
||||
<div class="child" style="height: 50%;"></div>
|
||||
|
||||
<!-- A percentage max-height should resolve itself against the percentageInlineSize. -->
|
||||
<div class="child" style="height: 15px; max-height: 50%;"></div>
|
||||
|
||||
<!-- A percentage min-height should resolve itself against the percentageInlineSize. -->
|
||||
<div class="child" style="height: 5px; min-height: 50%;"></div>
|
||||
|
||||
<!-- A replaced percentage height should resolve itself against the percentageInlineSize. -->
|
||||
<img class="child" style="height: 50%;" />
|
||||
|
||||
<!-- A replaced percentage max-height should resolve itself against the percentageInlineSize. -->
|
||||
<img class="child" style="height: 15px; max-height: 50%;" />
|
||||
|
||||
<!-- A replaced percentage min-height should resolve itself against the percentageInlineSize. -->
|
||||
<img class="child" style="height: 5px; min-height: 50%;" />
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: '../support/layout-child-sizes-worklet.js'});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<!DOCTYPE html>
|
||||
<html class=reftest-wait>
|
||||
<link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#dom-layoutconstraintsoptions-percentageblocksize">
|
||||
<link rel="match" href="../green-square-ref.html">
|
||||
<meta name="assert" content="This test checks that setting the percentage block-size of children works as expected." />
|
||||
|
||||
<style>
|
||||
.test {
|
||||
writing-mode: vertical-rl;
|
||||
background: red;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.child {
|
||||
writing-mode: vertical-rl;
|
||||
visibility: hidden;
|
||||
height: 10px;
|
||||
|
||||
--percentage-block-size: 20;
|
||||
|
||||
--inline-size-expected: 10px;
|
||||
--block-size-expected: 10px;
|
||||
}
|
||||
|
||||
@supports (display: layout(test)) {
|
||||
.test {
|
||||
background: green;
|
||||
display: layout(test);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="/common/reftest-wait.js"></script>
|
||||
<script src="/common/worklet-reftest.js"></script>
|
||||
|
||||
<div class="test">
|
||||
<!-- A fixed width shouldn't be affected by the percentage size. -->
|
||||
<div class="child" style="width: 10px;"></div>
|
||||
|
||||
<!-- A percentage width should resolve itself against the percentageBlockSize. -->
|
||||
<div class="child" style="width: 50%;"></div>
|
||||
|
||||
<!-- A percentage max-width should resolve itself against the percentageBlockSize. -->
|
||||
<div class="child" style="width: 15px; max-width: 50%;"></div>
|
||||
|
||||
<!-- A percentage min-width should resolve itself against the percentageBlockSize. -->
|
||||
<div class="child" style="width: 5px; min-width: 50%;"></div>
|
||||
|
||||
<!-- A replaced percentage width should resolve itself against the percentageBlockSize. -->
|
||||
<img class="child" style="width: 50%;" />
|
||||
|
||||
<!-- A replaced percentage max-width should resolve itself against the percentageBlockSize. -->
|
||||
<img class="child" style="width: 15px; max-width: 50%;" />
|
||||
|
||||
<!-- A replaced percentage min-width should resolve itself against the percentageBlockSize. -->
|
||||
<img class="child" style="width: 5px; min-width: 50%;" />
|
||||
<script>
|
||||
importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, {url: '../support/layout-child-sizes-worklet.js'});
|
||||
</script>
|
||||
|
|
@ -13,6 +13,8 @@ registerLayout('test', class {
|
|||
'--available-block-size',
|
||||
'--fixed-inline-size',
|
||||
'--fixed-block-size',
|
||||
'--percentage-inline-size',
|
||||
'--percentage-block-size',
|
||||
'--inline-size-expected',
|
||||
'--block-size-expected'
|
||||
];
|
||||
|
|
@ -26,11 +28,15 @@ registerLayout('test', class {
|
|||
const availableBlockSize = parseNumber(child.styleMap.get('--available-block-size'));
|
||||
const fixedInlineSize = parseNumber(child.styleMap.get('--fixed-inline-size'));
|
||||
const fixedBlockSize = parseNumber(child.styleMap.get('--fixed-block-size'));
|
||||
const percentageInlineSize = parseNumber(child.styleMap.get('--percentage-inline-size'));
|
||||
const percentageBlockSize = parseNumber(child.styleMap.get('--percentage-block-size'));
|
||||
return child.layoutNextFragment({
|
||||
availableInlineSize,
|
||||
availableBlockSize,
|
||||
fixedInlineSize,
|
||||
fixedBlockSize
|
||||
fixedBlockSize,
|
||||
percentageInlineSize,
|
||||
percentageBlockSize,
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -57,4 +57,19 @@ test(function(){
|
|||
inner.style = '--initial-length-2: inherit';
|
||||
assert_equals(getComputedStyle(inner).getPropertyValue('--initial-length-2'), '0px');
|
||||
}, "Explicitly inheriting from a parent with no value results in initial value.");
|
||||
|
||||
test(function(){
|
||||
CSS.registerProperty({name: '--inherited-length-4', syntax: '<length>', initialValue: '0px', inherits: true});
|
||||
outer.style = '--inherited-length-4: 42px';
|
||||
inner.style = '--inherited-length-4: var(--undefined)';
|
||||
assert_equals(getComputedStyle(inner).getPropertyValue('--inherited-length-4'), '42px');
|
||||
}, "Reference to undefined variable results in inherited value");
|
||||
|
||||
test(function(){
|
||||
CSS.registerProperty({name: '--inherited-length-5', syntax: '<length>', initialValue: '0px', inherits: true});
|
||||
outer.style = '--inherited-length-5: 42px';
|
||||
inner.style = '--incompatible: nolength; --inherited-length-5: var(--incompatible)';
|
||||
assert_equals(getComputedStyle(inner).getPropertyValue('--inherited-length-5'), '42px');
|
||||
}, "Reference to syntax-incompatible variable results in inherited value");
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<style type="text/css">
|
||||
@font-face {
|
||||
font-family: 'mplus-1p-regular';
|
||||
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff');
|
||||
src: url('/fonts/mplus-1p-regular.woff') format('woff');
|
||||
}
|
||||
#wrapper { position: relative; }
|
||||
.test { color: red; }
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<style type="text/css">
|
||||
@font-face {
|
||||
font-family: 'mplus-1p-regular';
|
||||
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff');
|
||||
src: url('/fonts/mplus-1p-regular.woff') format('woff');
|
||||
}
|
||||
#wrapper { position: relative; }
|
||||
.test { color: red; }
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<style type="text/css">
|
||||
@font-face {
|
||||
font-family: 'mplus-1p-regular';
|
||||
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff');
|
||||
src: url('/fonts/mplus-1p-regular.woff') format('woff');
|
||||
}
|
||||
#wrapper { position: relative; }
|
||||
.test { color: red; }
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<style type="text/css">
|
||||
@font-face {
|
||||
font-family: 'mplus-1p-regular';
|
||||
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff');
|
||||
src: url('/fonts/mplus-1p-regular.woff') format('woff');
|
||||
}
|
||||
#wrapper { position: relative; }
|
||||
.test { color: red; }
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<style type="text/css">
|
||||
@font-face {
|
||||
font-family: 'mplus-1p-regular';
|
||||
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff');
|
||||
src: url('/fonts/mplus-1p-regular.woff') format('woff');
|
||||
}
|
||||
#wrapper { position: relative; }
|
||||
.test { color: red; }
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<style type="text/css">
|
||||
@font-face {
|
||||
font-family: 'mplus-1p-regular';
|
||||
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff');
|
||||
src: url('/fonts/mplus-1p-regular.woff') format('woff');
|
||||
}
|
||||
#wrapper { position: relative; }
|
||||
.test { color: red; }
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<style type="text/css">
|
||||
@font-face {
|
||||
font-family: 'mplus-1p-regular';
|
||||
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff');
|
||||
src: url('/fonts/mplus-1p-regular.woff') format('woff');
|
||||
}
|
||||
#wrapper { position: relative; }
|
||||
.test { color: red; }
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<style type="text/css">
|
||||
@font-face {
|
||||
font-family: 'mplus-1p-regular';
|
||||
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff');
|
||||
src: url('/fonts/mplus-1p-regular.woff') format('woff');
|
||||
}
|
||||
#wrapper { position: relative; }
|
||||
.test { color: red; }
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<style type="text/css">
|
||||
@font-face {
|
||||
font-family: 'mplus-1p-regular';
|
||||
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff');
|
||||
src: url('/fonts/mplus-1p-regular.woff') format('woff');
|
||||
}
|
||||
#wrapper { position: relative; }
|
||||
.test { color: red; }
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<style type="text/css">
|
||||
@font-face {
|
||||
font-family: 'mplus-1p-regular';
|
||||
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff');
|
||||
src: url('/fonts/mplus-1p-regular.woff') format('woff');
|
||||
}
|
||||
#wrapper { position: relative; }
|
||||
.test { color: red; }
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<style type="text/css">
|
||||
@font-face {
|
||||
font-family: 'mplus-1p-regular';
|
||||
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff');
|
||||
src: url('/fonts/mplus-1p-regular.woff') format('woff');
|
||||
}
|
||||
#wrapper { position: relative; }
|
||||
.test { color: red; }
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<style type="text/css">
|
||||
@font-face {
|
||||
font-family: 'mplus-1p-regular';
|
||||
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff');
|
||||
src: url('/fonts/mplus-1p-regular.woff') format('woff');
|
||||
}
|
||||
#wrapper { position: relative; }
|
||||
.test { color: red; }
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<style type="text/css">
|
||||
@font-face {
|
||||
font-family: 'mplus-1p-regular';
|
||||
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff');
|
||||
src: url('/fonts/mplus-1p-regular.woff') format('woff');
|
||||
}
|
||||
#wrapper { position: relative; }
|
||||
.test { color: red; }
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<style type="text/css">
|
||||
@font-face {
|
||||
font-family: 'mplus-1p-regular';
|
||||
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff');
|
||||
src: url('/fonts/mplus-1p-regular.woff') format('woff');
|
||||
}
|
||||
#wrapper { position: relative; }
|
||||
.test { color: red; }
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<style type="text/css">
|
||||
@font-face {
|
||||
font-family: 'mplus-1p-regular';
|
||||
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff');
|
||||
src: url('/fonts/mplus-1p-regular.woff') format('woff');
|
||||
}
|
||||
#wrapper { position: relative; }
|
||||
.test { color: red; }
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<style type="text/css">
|
||||
@font-face {
|
||||
font-family: 'mplus-1p-regular';
|
||||
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff');
|
||||
src: url('/fonts/mplus-1p-regular.woff') format('woff');
|
||||
}
|
||||
#wrapper { position: relative; }
|
||||
.test { color: red; }
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<style type="text/css">
|
||||
@font-face {
|
||||
font-family: 'mplus-1p-regular';
|
||||
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff');
|
||||
src: url('/fonts/mplus-1p-regular.woff') format('woff');
|
||||
}
|
||||
#wrapper { position: relative; }
|
||||
.test { color: red; }
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<style type="text/css">
|
||||
@font-face {
|
||||
font-family: 'mplus-1p-regular';
|
||||
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff');
|
||||
src: url('/fonts/mplus-1p-regular.woff') format('woff');
|
||||
}
|
||||
#wrapper { position: relative; }
|
||||
.test { color: red; }
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<style type="text/css">
|
||||
@font-face {
|
||||
font-family: 'mplus-1p-regular';
|
||||
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff');
|
||||
src: url('/fonts/mplus-1p-regular.woff') format('woff');
|
||||
}
|
||||
#wrapper { position: relative; }
|
||||
.test { color: red; }
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<style type="text/css">
|
||||
@font-face {
|
||||
font-family: 'mplus-1p-regular';
|
||||
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff');
|
||||
src: url('/fonts/mplus-1p-regular.woff') format('woff');
|
||||
}
|
||||
#wrapper { position: relative; }
|
||||
.test { color: red; }
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<style type="text/css">
|
||||
@font-face {
|
||||
font-family: 'mplus-1p-regular';
|
||||
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff');
|
||||
src: url('/fonts/mplus-1p-regular.woff') format('woff');
|
||||
}
|
||||
#wrapper { position: relative; }
|
||||
.test { color: red; }
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<style type="text/css">
|
||||
@font-face {
|
||||
font-family: 'mplus-1p-regular';
|
||||
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff');
|
||||
src: url('/fonts/mplus-1p-regular.woff') format('woff');
|
||||
}
|
||||
#wrapper { position: relative; }
|
||||
.test { color: red; }
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<style type="text/css">
|
||||
@font-face {
|
||||
font-family: 'mplus-1p-regular';
|
||||
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff');
|
||||
src: url('/fonts/mplus-1p-regular.woff') format('woff');
|
||||
}
|
||||
#wrapper { position: relative; }
|
||||
.test { color: red; }
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<style type="text/css">
|
||||
@font-face {
|
||||
font-family: 'mplus-1p-regular';
|
||||
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff');
|
||||
src: url('/fonts/mplus-1p-regular.woff') format('woff');
|
||||
}
|
||||
#wrapper { position: relative; }
|
||||
.test { color: red; }
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<style type="text/css">
|
||||
@font-face {
|
||||
font-family: 'mplus-1p-regular';
|
||||
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff');
|
||||
src: url('/fonts/mplus-1p-regular.woff') format('woff');
|
||||
}
|
||||
#wrapper { position: relative; }
|
||||
.test { color: red; }
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<style type="text/css">
|
||||
@font-face {
|
||||
font-family: 'mplus-1p-regular';
|
||||
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff');
|
||||
src: url('/fonts/mplus-1p-regular.woff') format('woff');
|
||||
}
|
||||
#wrapper { position: relative; }
|
||||
.test { color: red; }
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<style type="text/css">
|
||||
@font-face {
|
||||
font-family: 'mplus-1p-regular';
|
||||
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff');
|
||||
src: url('/fonts/mplus-1p-regular.woff') format('woff');
|
||||
}
|
||||
#wrapper { position: relative; }
|
||||
.test { color: red; }
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<style type="text/css">
|
||||
@font-face {
|
||||
font-family: 'mplus-1p-regular';
|
||||
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff');
|
||||
src: url('/fonts/mplus-1p-regular.woff') format('woff');
|
||||
}
|
||||
#wrapper { position: relative; }
|
||||
.test { color: red; }
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<style type="text/css">
|
||||
@font-face {
|
||||
font-family: 'mplus-1p-regular';
|
||||
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff');
|
||||
src: url('/fonts/mplus-1p-regular.woff') format('woff');
|
||||
}
|
||||
#wrapper { position: relative; }
|
||||
.test { color: red; }
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<style type="text/css">
|
||||
@font-face {
|
||||
font-family: 'mplus-1p-regular';
|
||||
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff');
|
||||
src: url('/fonts/mplus-1p-regular.woff') format('woff');
|
||||
}
|
||||
#wrapper { position: relative; }
|
||||
.test { color: red; }
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<style type="text/css">
|
||||
@font-face {
|
||||
font-family: 'mplus-1p-regular';
|
||||
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff');
|
||||
src: url('/fonts/mplus-1p-regular.woff') format('woff');
|
||||
}
|
||||
#wrapper { position: relative; }
|
||||
.test { color: red; }
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<style type="text/css">
|
||||
@font-face {
|
||||
font-family: 'mplus-1p-regular';
|
||||
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff');
|
||||
src: url('/fonts/mplus-1p-regular.woff') format('woff');
|
||||
}
|
||||
#wrapper { position: relative; }
|
||||
.test { color: red; }
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<style type="text/css">
|
||||
@font-face {
|
||||
font-family: 'mplus-1p-regular';
|
||||
src: url('/fonts/CSSTest/mplus-1p-regular.woff') format('woff');
|
||||
src: url('/fonts/mplus-1p-regular.woff') format('woff');
|
||||
}
|
||||
#wrapper { position: relative; }
|
||||
.test { color: red; }
|
||||
|
|
|
|||
|
|
@ -0,0 +1,42 @@
|
|||
<!doctype html>
|
||||
<title>CSS Test Reference</title>
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
||||
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
||||
<style>
|
||||
.scene {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
perspective: 5000px;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform-style: preserve-3d;
|
||||
position: relative;
|
||||
background: none;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.face {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
backface-visibility: hidden;
|
||||
background: red;
|
||||
}
|
||||
|
||||
.backface {
|
||||
background: green;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
</style>
|
||||
<div class="scene">
|
||||
<div class="card">
|
||||
<div class="face"></div>
|
||||
<div class="face backface"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!doctype html>
|
||||
<title>CSS Test: preserve-3d on buttons</title>
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
||||
<link rel="author" title="Mozilla" href="https://mozilla.org">
|
||||
<link rel="match" href="preserve3d-button-ref.html">
|
||||
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1491864">
|
||||
<style>
|
||||
.scene {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
perspective: 5000px;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform-style: preserve-3d;
|
||||
position: relative;
|
||||
background: none;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.face {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
backface-visibility: hidden;
|
||||
background: red;
|
||||
}
|
||||
|
||||
.backface {
|
||||
background: green;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
</style>
|
||||
<div class="scene">
|
||||
<button class="card">
|
||||
<div class="face"></div>
|
||||
<div class="face backface"></div>
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE HTML>
|
||||
<title>scrollIntoView on an SVG shape element</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-scrollintoview">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<svg width="8000" height="8000">
|
||||
<rect width="100" height="100" fill="blue" y="1950" id="geometry"/>
|
||||
<rect width="100" height="100" fill="blue" transform="translate(0, 2950)"
|
||||
id="translated"/>
|
||||
<rect width="100" height="100" fill="blue" transform="rotate(45, 50, 3950)"
|
||||
id="rotated"/>
|
||||
</svg>
|
||||
<script>
|
||||
add_completion_callback(() => {
|
||||
document.querySelector("svg").remove();
|
||||
window.scrollTo(0, 0);
|
||||
});
|
||||
|
||||
for (let id of [ "geometry", "translated", "rotated" ]) {
|
||||
test(t => {
|
||||
let target = document.getElementById(id);
|
||||
window.scrollTo(0, 0);
|
||||
let bounds = target.getBoundingClientRect();
|
||||
let expected = { x: bounds.left, y: bounds.top };
|
||||
assert_not_equals(window.scrollX, expected.x, "x before scroll");
|
||||
assert_not_equals(window.scrollY, expected.y, "y before scroll");
|
||||
target.scrollIntoView({ block: "start", inline: "start" });
|
||||
assert_approx_equals(window.scrollX, expected.x, 1, "x after scroll");
|
||||
assert_approx_equals(window.scrollY, expected.y, 1, "y after scroll");
|
||||
}, document.title + ", " + id);
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Filter Effects: The in attribute</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://www.w3.org/TR/filter-effects-1/#CommonAttributes">
|
||||
<link rel="match" href="svg-unknown-input-ref.html">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="References to non-existent results on a first primitive must be treated like SourceGraphic.">
|
||||
<p>The test passes if you see a green square and no red.</p>
|
||||
<svg width="100" height="100">
|
||||
<defs>
|
||||
<filter id="f" x="0" y="0" width="100" height="100" filterUnits="userSpaceOnUse">
|
||||
<feComposite in="unknown" in2="SourceGraphic" result="a"/>
|
||||
<feFlood flood-color="green" result="b"/>
|
||||
<feComposite in="b" in2="a"/>
|
||||
</filter>
|
||||
</defs>
|
||||
<rect width="100" height="100" fill="red"/>
|
||||
<rect x="25" y="25" width="50" height="50" fill="green" filter="url(#f)"/>
|
||||
</svg>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Filter Effects: The in attribute</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<link rel="help" href="https://www.w3.org/TR/filter-effects-1/#CommonAttributes">
|
||||
<link rel="match" href="svg-unknown-input-ref.html">
|
||||
<meta name="flags" content="svg">
|
||||
<meta name="assert" content="References to non-existent results on a subsequent primitive must be treated like the previous primitive result.">
|
||||
<p>The test passes if you see a green square and no red.</p>
|
||||
<svg width="100" height="100">
|
||||
<defs>
|
||||
<filter id="f" x="0" y="0" width="100" height="100" filterUnits="userSpaceOnUse">
|
||||
<feFlood flood-color="green"/>
|
||||
<feComposite in="unknown" in2="SourceGraphic"/>
|
||||
</filter>
|
||||
</defs>
|
||||
<rect width="100" height="100" fill="red"/>
|
||||
<rect x="25" y="25" width="50" height="50" fill="blue" filter="url(#f)"/>
|
||||
</svg>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Filter Effects: Reference</title>
|
||||
<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au">
|
||||
<meta name="flags" content="svg">
|
||||
<p>The test passes if you see a green square and no red.</p>
|
||||
<svg width="100" height="100">
|
||||
<rect width="100" height="100" fill="green"/>
|
||||
</svg>
|
||||
Loading…
Add table
Add a link
Reference in a new issue