mirror of
https://github.com/servo/servo.git
synced 2025-08-20 04:45:33 +01:00
Update web-platform-tests to revision ac4274136e9a034628a3a469890c8e37babbc902
This commit is contained in:
WPT Sync Bot
parent
c9229f3f99
commit
b0862d9cc1
68 changed files with 2064 additions and 135 deletions
|
|
@ -25,9 +25,9 @@
|
|||
var first = document.getElementById('first');
|
||||
assert_equals(getComputedStyle(first).x, "0px");
|
||||
assert_equals(getComputedStyle(first).y, "0px");
|
||||
assert_equals(getComputedStyle(first).width, "auto");
|
||||
assert_equals(getComputedStyle(first).height, "auto");
|
||||
}, 'width and height default to auto');
|
||||
assert_equals(getComputedStyle(first).width, "0px");
|
||||
assert_equals(getComputedStyle(first).height, "0px");
|
||||
}, 'width and height default to auto (which computes to "0px")');
|
||||
|
||||
test(function() {
|
||||
var second = document.getElementById('second');
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
|
|
@ -0,0 +1,130 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml">
|
||||
<title>SVG Geometry Properties: getComputedStyle().height</title>
|
||||
<metadata>
|
||||
<h:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html#Sizing"/>
|
||||
<h:link rel="help" href="https://drafts.csswg.org/cssom/#resolved-values"/>
|
||||
</metadata>
|
||||
<h:script src="/resources/testharness.js"/>
|
||||
<h:script src="/resources/testharnessreport.js"/>
|
||||
<svg width="200" height="100" id="test-content">
|
||||
<rect/>
|
||||
<rect width="100" height="200"/>
|
||||
<rect width="42" style="height: auto"/>
|
||||
<rect width="42" style="height: 20px"/>
|
||||
<rect width="42" style="height: 40%"/>
|
||||
<rect width="42" style="height: 80%; display: none"/>
|
||||
|
||||
<g><rect width="100" height="100"/></g>
|
||||
<g width="100" height="42px"><rect width="100" height="100"/></g>
|
||||
<g style="width: 10%; height: auto"><rect width="100" height="100"/></g>
|
||||
<g style="width: auto; height: 20px"><rect width="100" height="100"/></g>
|
||||
<g style="width: 20px; height: 10%"><rect width="100" height="100"/></g>
|
||||
|
||||
<image/>
|
||||
<image width="42" height="200"/>
|
||||
<image width="42" style="height: auto"/>
|
||||
<image width="42" style="height: 230px"/>
|
||||
<image width="42" style="height: 25%"/>
|
||||
<image width="42" style="height: 25%; display: none"/>
|
||||
|
||||
<foreignObject>Some content</foreignObject>
|
||||
<foreignObject height="200">Some content</foreignObject>
|
||||
<foreignObject style="height: auto">Some content</foreignObject>
|
||||
<foreignObject style="height: 75px">Some content</foreignObject>
|
||||
<foreignObject style="height: 50%">Some content</foreignObject>
|
||||
<foreignObject style="height: auto; display: none">Some content</foreignObject>
|
||||
|
||||
<svg/>
|
||||
<svg height="200"/>
|
||||
<svg style="height: auto"/>
|
||||
<svg style="height: 200px"/>
|
||||
<svg style="height: 50%"/>
|
||||
<svg style="height: auto; display: none"/>
|
||||
|
||||
<text>Text1</text>
|
||||
<text width="100px" height="42">Text2</text>
|
||||
<text style="width: 30%; height: auto">Text3</text>
|
||||
<text style="width: auto; height: 20px">Text3</text>
|
||||
<text style="width: 20px; height: 30%">Text3</text>
|
||||
</svg>
|
||||
<script><![CDATA[
|
||||
[
|
||||
// Cases where computed 'height' return the used value.
|
||||
{
|
||||
element: 'rect',
|
||||
expected: [
|
||||
{ value: '0px', description: 'initial' },
|
||||
{ value: '200px', description: 'presentation attribute' },
|
||||
{ value: '0px', description: 'inline style (auto)' },
|
||||
{ value: '20px', description: 'inline style (pixels)' },
|
||||
{ value: '40px', description: 'inline style (percentage)' },
|
||||
{ value: '80%', description: 'inline style but "display: none"' },
|
||||
]
|
||||
},
|
||||
{
|
||||
element: 'image',
|
||||
expected: [
|
||||
{ value: '0px', description: 'initial' },
|
||||
{ value: '200px', description: 'presentation attribute' },
|
||||
{ value: '0px', description: 'inline style (auto)' },
|
||||
{ value: '230px', description: 'inline style (pixels)' },
|
||||
{ value: '25px', description: 'inline style (percentage)' },
|
||||
{ value: '25%', description: 'inline style but "display: none"' },
|
||||
]
|
||||
},
|
||||
{
|
||||
element: 'foreignObject',
|
||||
expected: [
|
||||
{ value: '0px', description: 'initial' },
|
||||
{ value: '200px', description: 'presentation attribute' },
|
||||
{ value: '0px', description: 'inline style (auto)' },
|
||||
{ value: '75px', description: 'inline style (pixels)' },
|
||||
{ value: '50px', description: 'inline style (percentage)' },
|
||||
{ value: 'auto', description: 'inline style but "display: none"' },
|
||||
]
|
||||
},
|
||||
{
|
||||
element: 'svg',
|
||||
expected: [
|
||||
{ value: '100px', description: 'initial' },
|
||||
{ value: '200px', description: 'presentation attribute' },
|
||||
{ value: '100px', description: 'inline style (auto)' },
|
||||
{ value: '200px', description: 'inline style (pixels)' },
|
||||
{ value: '50px', description: 'inline style (percentage)' },
|
||||
{ value: 'auto', description: 'inline style but "display: none"' },
|
||||
]
|
||||
},
|
||||
|
||||
// Cases where computed 'height' return the computed value.
|
||||
{
|
||||
element: 'g',
|
||||
expected: [
|
||||
{ value: 'auto', description: 'initial' },
|
||||
{ value: 'auto', description: 'initial (with dummy attribute)' },
|
||||
{ value: 'auto', description: 'inline style (auto)' },
|
||||
{ value: '20px', description: 'inline style (pixels)' },
|
||||
{ value: '10%', description: 'inline style (percentage)' },
|
||||
]
|
||||
},
|
||||
{
|
||||
element: 'text',
|
||||
expected: [
|
||||
{ value: 'auto', description: 'initial' },
|
||||
{ value: 'auto', description: 'initial (with dummy attribute)' },
|
||||
{ value: 'auto', description: 'inline style (auto)' },
|
||||
{ value: '20px', description: 'inline style (pixels)' },
|
||||
{ value: '30%', description: 'inline style (percentage)' },
|
||||
]
|
||||
},
|
||||
].forEach(function(entry) {
|
||||
let element_set = document.querySelectorAll('#test-content > ' + entry.element);
|
||||
entry.expected.forEach(function(expected, index) {
|
||||
test(function() {
|
||||
let style = getComputedStyle(element_set[index]);
|
||||
assert_equals(style.height, expected.value, expected.description);
|
||||
}, document.title + ', <' + entry.element + '> ' + expected.description);
|
||||
});
|
||||
});
|
||||
]]></script>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.1 KiB |
|
|
@ -0,0 +1,130 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml">
|
||||
<title>SVG Geometry Properties: getComputedStyle().width</title>
|
||||
<metadata>
|
||||
<h:link rel="help" href="https://svgwg.org/svg2-draft/geometry.html#Sizing"/>
|
||||
<h:link rel="help" href="https://drafts.csswg.org/cssom/#resolved-values"/>
|
||||
</metadata>
|
||||
<h:script src="/resources/testharness.js"/>
|
||||
<h:script src="/resources/testharnessreport.js"/>
|
||||
<svg width="200" height="100" id="test-content">
|
||||
<rect/>
|
||||
<rect width="100" height="200"/>
|
||||
<rect height="42" style="width: 40%"/>
|
||||
<rect height="42" style="width: auto"/>
|
||||
<rect height="42" style="width: 20px"/>
|
||||
<rect height="42" style="width: 42%; display: none"/>
|
||||
|
||||
<g><rect width="100" height="100"/></g>
|
||||
<g width="100" height="42px"><rect width="100" height="100"/></g>
|
||||
<g style="width: 10%; height: auto"><rect width="100" height="100"/></g>
|
||||
<g style="width: auto; height: 20px"><rect width="100" height="100"/></g>
|
||||
<g style="width: 20px; height: 10%"><rect width="100" height="100"/></g>
|
||||
|
||||
<image/>
|
||||
<image width="100"/>
|
||||
<image height="42" style="width: 25%"/>
|
||||
<image height="42" style="width: auto"/>
|
||||
<image height="42" style="width: 230px"/>
|
||||
<image height="42" style="width: 25%; display: none"/>
|
||||
|
||||
<foreignObject>Some content</foreignObject>
|
||||
<foreignObject width="100">Some content</foreignObject>
|
||||
<foreignObject style="width: 50%">Some content</foreignObject>
|
||||
<foreignObject style="width: auto">Some content</foreignObject>
|
||||
<foreignObject style="width: 75px">Some content</foreignObject>
|
||||
<foreignObject style="width: auto; display: none">Some content</foreignObject>
|
||||
|
||||
<svg/>
|
||||
<svg width="100"/>
|
||||
<svg style="width: auto"/>
|
||||
<svg style="width: 200px"/>
|
||||
<svg style="width: 50%"/>
|
||||
<svg style="width: auto; display: none"/>
|
||||
|
||||
<text>Text1</text>
|
||||
<text width="100px" height="42">Text2</text>
|
||||
<text style="width: 30%; height: auto">Text3</text>
|
||||
<text style="width: auto; height: 20px">Text3</text>
|
||||
<text style="width: 20px; height: 30%">Text3</text>
|
||||
</svg>
|
||||
<script><![CDATA[
|
||||
[
|
||||
// Cases where computed 'width' return the used value.
|
||||
{
|
||||
element: 'rect',
|
||||
expected: [
|
||||
{ value: '0px', description: 'initial' },
|
||||
{ value: '100px', description: 'presentation attribute' },
|
||||
{ value: '80px', description: 'inline style (percentage)' },
|
||||
{ value: '0px', description: 'inline style (auto)' },
|
||||
{ value: '20px', description: 'inline style (pixels)' },
|
||||
{ value: '42%', description: 'inline style but "display: none"' },
|
||||
]
|
||||
},
|
||||
{
|
||||
element: 'image',
|
||||
expected: [
|
||||
{ value: '0px', description: 'initial' },
|
||||
{ value: '100px', description: 'presentation attribute' },
|
||||
{ value: '50px', description: 'inline style (percentage)' },
|
||||
{ value: '0px', description: 'inline style (auto)' },
|
||||
{ value: '230px', description: 'inline style (pixels)' },
|
||||
{ value: '25%', description: 'inline style but "display: none"' },
|
||||
]
|
||||
},
|
||||
{
|
||||
element: 'foreignObject',
|
||||
expected: [
|
||||
{ value: '0px', description: 'initial' },
|
||||
{ value: '100px', description: 'presentation attribute' },
|
||||
{ value: '100px', description: 'inline style (percentage)' },
|
||||
{ value: '0px', description: 'inline style (auto)' },
|
||||
{ value: '75px', description: 'inline style (pixels)' },
|
||||
{ value: 'auto', description: 'inline style but "display: none"' },
|
||||
]
|
||||
},
|
||||
{
|
||||
element: 'svg',
|
||||
expected: [
|
||||
{ value: '200px', description: 'initial' },
|
||||
{ value: '100px', description: 'presentation attribute' },
|
||||
{ value: '200px', description: 'inline style (auto)' },
|
||||
{ value: '200px', description: 'inline style (pixels)' },
|
||||
{ value: '100px', description: 'inline style (percentage)' },
|
||||
{ value: 'auto', description: 'inline style but "display: none"' },
|
||||
]
|
||||
},
|
||||
|
||||
// Cases where computed 'width' return the computed value.
|
||||
{
|
||||
element: 'g',
|
||||
expected: [
|
||||
{ value: 'auto', description: 'initial' },
|
||||
{ value: 'auto', description: 'initial (with dummy attribute)' },
|
||||
{ value: '10%', description: 'inline style (percentage)' },
|
||||
{ value: 'auto', description: 'inline style (auto)' },
|
||||
{ value: '20px', description: 'inline style (pixels)' },
|
||||
]
|
||||
},
|
||||
{
|
||||
element: 'text',
|
||||
expected: [
|
||||
{ value: 'auto', description: 'initial' },
|
||||
{ value: 'auto', description: 'initial (with dummy attribute)' },
|
||||
{ value: '30%', description: 'inline style (percentage)' },
|
||||
{ value: 'auto', description: 'inline style (auto)' },
|
||||
{ value: '20px', description: 'inline style (pixels)' },
|
||||
]
|
||||
},
|
||||
].forEach(function(entry) {
|
||||
let element_set = document.querySelectorAll('#test-content > ' + entry.element);
|
||||
entry.expected.forEach(function(expected, index) {
|
||||
test(function() {
|
||||
let style = getComputedStyle(element_set[index]);
|
||||
assert_equals(style.width, expected.value, expected.description);
|
||||
}, document.title + ', <' + entry.element + '> ' + expected.description);
|
||||
});
|
||||
});
|
||||
]]></script>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.1 KiB |
|
|
@ -0,0 +1,27 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml">
|
||||
<title>SVG Paint Servers: getComputedStyle().stopColor</title>
|
||||
<metadata>
|
||||
<h:link rel="help" href="https://svgwg.org/svg2-draft/pservers.html#StopColorProperty"/>
|
||||
<h:link rel="help" href="https://drafts.csswg.org/css-color/#resolve-color-values"/>
|
||||
<h:link rel="help" href="https://drafts.csswg.org/cssom/#serializing-css-values"/>
|
||||
</metadata>
|
||||
<g id="target" style="color: blue"></g>
|
||||
<h:script src="/resources/testharness.js"/>
|
||||
<h:script src="/resources/testharnessreport.js"/>
|
||||
<h:script src="/css/support/computed-testcommon.js"/>
|
||||
<script><![CDATA[
|
||||
|
||||
test_computed_value("stop-color", "currentcolor", "rgb(0, 0, 255)");
|
||||
test_computed_value("stop-color", "white", "rgb(255, 255, 255)");
|
||||
test_computed_value("stop-color", "transparent", "rgba(0, 0, 0, 0)");
|
||||
test_computed_value("stop-color", "rgb(255, 255, 255)");
|
||||
test_computed_value("stop-color", "#ffffff", "rgb(255, 255, 255)");
|
||||
test_computed_value("stop-color", "rgba(255, 255, 255, 1.0)", "rgb(255, 255, 255)");
|
||||
test_computed_value("stop-color", "rgba(255, 255, 255, 0.4)");
|
||||
test_computed_value("stop-color", "hsl(0deg, 100%, 100%)", "rgb(255, 255, 255)");
|
||||
test_computed_value("stop-color", "hsla(0deg, 100%, 100%, 1.0)", "rgb(255, 255, 255)");
|
||||
test_computed_value("stop-color", "hsla(0deg, 100%, 100%, 0.4)", "rgba(255, 255, 255, 0.4)");
|
||||
|
||||
]]></script>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="100" height="100" fill="green"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 96 B |
|
|
@ -0,0 +1,18 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml"
|
||||
style="color: red">
|
||||
<title>stop-color: Dynamically changing 'color' for a gradient with a stop with 'currentcolor'</title>
|
||||
<h:link rel="help" href="https://svgwg.org/svg2-draft/pservers.html#StopColorProperty"/>
|
||||
<h:link rel="match" href="reference/green-100x100.svg"/>
|
||||
<linearGradient id="g">
|
||||
<stop stop-color="currentcolor"/>
|
||||
</linearGradient>
|
||||
<rect width="50" height="100" fill="url(#g)"/>
|
||||
<rect width="50" height="100" x="50" fill="currentcolor"/>
|
||||
<script>
|
||||
<![CDATA[
|
||||
let root = document.querySelector(':root');
|
||||
root.getBoundingClientRect(); // Force layout
|
||||
root.style.color = 'green';
|
||||
]]>
|
||||
</script>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 742 B |
|
|
@ -0,0 +1,22 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml"
|
||||
color="red">
|
||||
<title>SVG Paint Servers: 'stop-color' inheritance of 'currentcolor'</title>
|
||||
<metadata>
|
||||
<h:link rel="help" href="https://svgwg.org/svg2-draft/pservers.html#StopColorProperty"/>
|
||||
<h:link rel="help" href="https://drafts.csswg.org/css-color/#resolve-color-values"/>
|
||||
</metadata>
|
||||
<h:script src="/resources/testharness.js"/>
|
||||
<h:script src="/resources/testharnessreport.js"/>
|
||||
<linearGradient stop-color="currentcolor" id="g">
|
||||
<stop stop-color="inherit" color="green"/>
|
||||
</linearGradient>
|
||||
<script><![CDATA[
|
||||
|
||||
test(function() {
|
||||
let stop = document.querySelector('stop');
|
||||
assert_equals(getComputedStyle(stop).stopColor, 'rgb(0, 128, 0)');
|
||||
}, '"currentcolor" is inherited as a keyword');
|
||||
|
||||
]]></script>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 881 B |
Loading…
Add table
Add a link
Reference in a new issue