mirror of
https://github.com/flutter/flutter.git
synced 2026-02-20 02:29:02 +08:00
Add a version of flights that's made of components.
Also add a test, this checks nested Shadow DOM and <content> with and without select. R=abarth@chromium.org Review URL: https://codereview.chromium.org/724613002
This commit is contained in:
Elliott Sprehn
parent
f5bed9da06
commit
b9a6e48dcb
18
examples/flights-app/app-header.sky
Normal file
18
examples/flights-app/app-header.sky
Normal file
@ -0,0 +1,18 @@
|
||||
<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
display: flex;
|
||||
background: linear-gradient(#3E77B7, #6C98C4);
|
||||
padding: 8px;
|
||||
color: white;
|
||||
border-bottom: 1px solid #3E77B7;
|
||||
}
|
||||
</style>
|
||||
<content></content>
|
||||
</template>
|
||||
<script>
|
||||
SkyElement({
|
||||
name: "app-header"
|
||||
});
|
||||
</script>
|
||||
19
examples/flights-app/app-menu-button.sky
Normal file
19
examples/flights-app/app-menu-button.sky
Normal file
@ -0,0 +1,19 @@
|
||||
<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
display: flex;
|
||||
border-radius: 4px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
</style>
|
||||
<content></content>
|
||||
</template>
|
||||
<script>
|
||||
SkyElement({
|
||||
name: "app-menu-button"
|
||||
});
|
||||
</script>
|
||||
14
examples/flights-app/app-panel-content.sky
Normal file
14
examples/flights-app/app-panel-content.sky
Normal file
@ -0,0 +1,14 @@
|
||||
<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
<content></content>
|
||||
</template>
|
||||
<script>
|
||||
SkyElement({
|
||||
name: "app-panel-content"
|
||||
});
|
||||
</script>
|
||||
17
examples/flights-app/app-panel-header.sky
Normal file
17
examples/flights-app/app-panel-header.sky
Normal file
@ -0,0 +1,17 @@
|
||||
<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
background-color: #DEDEDE;
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
<content></content>
|
||||
</template>
|
||||
<script>
|
||||
SkyElement({
|
||||
name: "app-panel-header"
|
||||
});
|
||||
</script>
|
||||
16
examples/flights-app/app-panel.sky
Normal file
16
examples/flights-app/app-panel.sky
Normal file
@ -0,0 +1,16 @@
|
||||
<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<content></content>
|
||||
</template>
|
||||
<script>
|
||||
SkyElement({
|
||||
name: "app-panel"
|
||||
});
|
||||
</script>
|
||||
16
examples/flights-app/app-scrollable.sky
Normal file
16
examples/flights-app/app-scrollable.sky
Normal file
@ -0,0 +1,16 @@
|
||||
<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
flex: 1;
|
||||
box-shadow: inset 0px 0px 22px 2px rgba(22, 22, 22, 0.63);
|
||||
overflow: scroll;
|
||||
}
|
||||
</style>
|
||||
<content></content>
|
||||
</template>
|
||||
<script>
|
||||
SkyElement({
|
||||
name: "app-scrollable"
|
||||
});
|
||||
</script>
|
||||
23
examples/flights-app/app-search-input.sky
Normal file
23
examples/flights-app/app-search-input.sky
Normal file
@ -0,0 +1,23 @@
|
||||
<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
background-color: #F6F6F6;
|
||||
padding: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.input-text {
|
||||
margin-left: 8px;
|
||||
}
|
||||
</style>
|
||||
<span class="input-icon"><t>🔎</t></span>
|
||||
<span class="input-text"><t>flights today to dc by price</t></span>
|
||||
</template>
|
||||
<script>
|
||||
SkyElement({
|
||||
name: "app-search-input"
|
||||
});
|
||||
</script>
|
||||
18
examples/flights-app/app-title.sky
Normal file
18
examples/flights-app/app-title.sky
Normal file
@ -0,0 +1,18 @@
|
||||
<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 22px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
</style>
|
||||
<content></content>
|
||||
</template>
|
||||
<script>
|
||||
SkyElement({
|
||||
name: "app-title"
|
||||
});
|
||||
</script>
|
||||
36
examples/flights-app/app-toast.sky
Normal file
36
examples/flights-app/app-toast.sky
Normal file
@ -0,0 +1,36 @@
|
||||
<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
position: absolute;
|
||||
bottom: 32px;
|
||||
right: 32px;
|
||||
max-width: 55%;
|
||||
box-shadow: 0px 0px 12px 2px rgba(22, 22, 22, 0.4);
|
||||
background-color: #b0281a;
|
||||
background-image: linear-gradient(#E5D658, #DFCF43);
|
||||
border: 1px solid #AEA477;
|
||||
padding: 6px;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.header {
|
||||
flex-shrink: 0;
|
||||
margin-right: 6px;
|
||||
}
|
||||
</style>
|
||||
<div class="header">
|
||||
<content select=".toast-icon" />
|
||||
</div>
|
||||
<div class="content">
|
||||
<content select=".toast-content" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
SkyElement({
|
||||
name: "app-toast"
|
||||
});
|
||||
</script>
|
||||
15
examples/flights-app/app-toolbar.sky
Normal file
15
examples/flights-app/app-toolbar.sky
Normal file
@ -0,0 +1,15 @@
|
||||
<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
background-color: #F6F6F6;
|
||||
padding: 0 8px;
|
||||
}
|
||||
</style>
|
||||
<content></content>
|
||||
</template>
|
||||
<script>
|
||||
SkyElement({
|
||||
name: "app-toolbar"
|
||||
});
|
||||
</script>
|
||||
206
examples/flights-app/flights-app.sky
Normal file
206
examples/flights-app/flights-app.sky
Normal file
@ -0,0 +1,206 @@
|
||||
<import src="../../framework/sky-element/sky-element.sky" as="SkyElement" />
|
||||
<import src="app-header.sky" />
|
||||
<import src="app-title.sky" />
|
||||
<import src="app-menu-button.sky" />
|
||||
<import src="app-panel.sky" />
|
||||
<import src="app-panel-header.sky" />
|
||||
<import src="app-panel-content.sky" />
|
||||
<import src="app-toolbar.sky" />
|
||||
<import src="app-search-input.sky" />
|
||||
<import src="app-scrollable.sky" />
|
||||
<import src="app-toast.sky" />
|
||||
|
||||
<template>
|
||||
<style>
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
t, span {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
:host {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background-color: #494949;
|
||||
font-family: "Helvetica Neue", sans-serif;
|
||||
font-size: 16px;
|
||||
color: #2B2B2B;
|
||||
}
|
||||
|
||||
.toast-icon {
|
||||
font-weight: bold;
|
||||
font-size: 24px;
|
||||
border-radius: 16px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 2px solid black;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tip-price {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.route-result {
|
||||
margin: 16px 16px 0 16px;
|
||||
}
|
||||
|
||||
.route-title {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.airline {
|
||||
border-radius: 2px;
|
||||
align-items: center;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.airline-name {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.airline-logo-image {
|
||||
width: 50px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.airline-best-price {
|
||||
color: #ABB4B6;
|
||||
}
|
||||
|
||||
.airline-name,
|
||||
.airline-best-price {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #1155CC;
|
||||
}
|
||||
</style>
|
||||
<app-header>
|
||||
<app-title>
|
||||
<t>Search</t>
|
||||
</app-title>
|
||||
<app-menu-button>
|
||||
<img src="../flights/images/menu-white.png" style="width: 18px" />
|
||||
</app-menu-button>
|
||||
</app-header>
|
||||
<app-toolbar>
|
||||
<app-search-input />
|
||||
</app-toolbar>
|
||||
<app-scrollable>
|
||||
<app-panel class="route-result">
|
||||
<app-panel-header>
|
||||
<div class="route-title">
|
||||
<t>SFO to DCA</t>
|
||||
</div>
|
||||
<app-menu-button>
|
||||
<img src="../flights/images/menu-enabled.png" style="width: 14px" />
|
||||
</app-menu-button>
|
||||
</app-panel-header>
|
||||
<app-panel-content class="airline">
|
||||
<div class="airline-logo">
|
||||
<img class="airline-logo-image" src="../flights/images/virgin-america.jpg" />
|
||||
</div>
|
||||
<div class="airline-name">
|
||||
<t>Virgin America</t>
|
||||
</div>
|
||||
<div class="airline-best-price">
|
||||
<t><a>$800</a></t>
|
||||
</div>
|
||||
</app-panel-content>
|
||||
<app-panel-content class="airline">
|
||||
<div class="airline-logo">
|
||||
<img class="airline-logo-image" src="../flights/images/ba.jpg" />
|
||||
</div>
|
||||
<div class="airline-name">
|
||||
<t>British Airways</t>
|
||||
</div>
|
||||
<div class="airline-best-price">
|
||||
<t><a>$700</a></t>
|
||||
</div>
|
||||
</app-panel-content>
|
||||
<app-panel-content class="airline">
|
||||
<div class="airline-logo">
|
||||
<img class="airline-logo-image" src="../flights/images/united.jpg" />
|
||||
</div>
|
||||
<div class="airline-name">
|
||||
<t>United</t>
|
||||
</div>
|
||||
<div class="airline-best-price">
|
||||
<t><a>$667</a></t>
|
||||
</div>
|
||||
</app-panel-content>
|
||||
<app-panel-content class="airline">
|
||||
<div class="airline-logo">
|
||||
<img class="airline-logo-image" src="../flights/images/delta.jpg" />
|
||||
</div>
|
||||
<div class="airline-name">
|
||||
<t>Delta</t>
|
||||
</div>
|
||||
<div class="airline-best-price">
|
||||
<t><a>$450</a></t>
|
||||
</div>
|
||||
</app-panel-content>
|
||||
</app-panel>
|
||||
<app-panel class="route-result">
|
||||
<app-panel-header>
|
||||
<div class="route-title">
|
||||
<t>SJC to DCA</t>
|
||||
</div>
|
||||
<app-menu-button>
|
||||
<img src="../flights/images/menu-enabled.png" style="width: 14px" />
|
||||
</app-menu-button>
|
||||
</app-panel-header>
|
||||
<app-panel-content class="airline">
|
||||
<div class="airline-logo">
|
||||
<img class="airline-logo-image" src="../flights/images/virgin-america.jpg" />
|
||||
</div>
|
||||
<div class="airline-name">
|
||||
<t>Virgin America</t>
|
||||
</div>
|
||||
<div class="airline-best-price">
|
||||
<t><a>$1500</a></t>
|
||||
</div>
|
||||
</app-panel-content>
|
||||
<app-panel-content class="airline">
|
||||
<div class="airline-logo">
|
||||
<img class="airline-logo-image" src="../flights/images/jetblue.jpg" />
|
||||
</div>
|
||||
<div class="airline-name">
|
||||
<t>jetBlue</t>
|
||||
</div>
|
||||
<div class="airline-best-price">
|
||||
<t><a>$650</a></t>
|
||||
</div>
|
||||
</app-panel-content>
|
||||
<app-panel-content class="airline">
|
||||
<div class="airline-logo">
|
||||
<img class="airline-logo-image" src="../flights/images/united.jpg" />
|
||||
</div>
|
||||
<div class="airline-name">
|
||||
<t>United</t>
|
||||
</div>
|
||||
<div class="airline-best-price">
|
||||
<t><a>$367</a></t>
|
||||
</div>
|
||||
</app-panel-content>
|
||||
</app-panel>
|
||||
</app-scrollable>
|
||||
<app-toast>
|
||||
<div class="toast-icon">
|
||||
<t>?</t>
|
||||
</div>
|
||||
<div class="toast-content">
|
||||
<t>Flights are <span class="tip-price">$200</span> cheaper tomorrow.</t>
|
||||
</div>
|
||||
</app-toast>
|
||||
</template>
|
||||
<script>
|
||||
SkyElement({
|
||||
name: "flights-app",
|
||||
});
|
||||
</script>
|
||||
15
examples/flights-app/index.sky
Normal file
15
examples/flights-app/index.sky
Normal file
@ -0,0 +1,15 @@
|
||||
<sky>
|
||||
<import src="flights-app.sky" />
|
||||
<style>
|
||||
sky {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
// TODO(esprehn): Work around a bug where having <flights-app /> in the
|
||||
// page doesn't render anything until the first input event.
|
||||
addEventListener("load", function() {
|
||||
document.querySelector("sky").appendChild(document.createElement("flights-app"));
|
||||
});
|
||||
</script>
|
||||
</sky>
|
||||
160
tests/framework/flights-app-expected.txt
Normal file
160
tests/framework/flights-app-expected.txt
Normal file
@ -0,0 +1,160 @@
|
||||
layer at (0,0) size 800x600
|
||||
RenderView {#document} at (0,0) size 800x600
|
||||
layer at (0,0) size 800x563
|
||||
RenderBlock {sky} at (0,0) size 800x563
|
||||
RenderFlexibleBox {flights-app} at (0,0) size 800x563 [color=#2B2B2B] [bgcolor=#494949]
|
||||
RenderFlexibleBox {app-header} at (0,0) size 800x47 [color=#FFFFFF] [border: none (1px solid #3E77B7) none]
|
||||
RenderFlexibleBox {app-title} at (16,8) size 746x30
|
||||
RenderBlock {t} at (0,2.50) size 76.08x25
|
||||
RenderText {#text} at (0,0) size 77x25
|
||||
text run at (0,0) width 77: "Search"
|
||||
RenderFlexibleBox {app-menu-button} at (762,8) size 30x30
|
||||
RenderImage {img} at (6,15) size 18x0
|
||||
RenderBlock {app-toolbar} at (0,47) size 800x35 [bgcolor=#F6F6F6]
|
||||
RenderFlexibleBox {app-search-input} at (8,0) size 784x35
|
||||
RenderBlock {span} at (4,4) size 24.36x27
|
||||
RenderBlock {t} at (0,0) size 24.36x27
|
||||
RenderText {#text} at (0,3) size 25x23
|
||||
text run at (0,3) width 25: "\x{D83D}\x{DD0E}"
|
||||
RenderBlock {span} at (36.36,6) size 257.61x23
|
||||
RenderBlock {t} at (0,0) size 257.61x23
|
||||
RenderText {#text} at (0,0) size 258x23
|
||||
text run at (0,0) width 258: "flights today to dc by price"
|
||||
layer at (0,82) size 800x481
|
||||
RenderBlock {app-scrollable} at (0,82) size 800x481
|
||||
RenderFlexibleBox {app-panel} at (16,16) size 768x250 [bgcolor=#FFFFFF]
|
||||
RenderFlexibleBox {app-panel-header} at (0,0) size 768x46 [bgcolor=#DEDEDE]
|
||||
RenderBlock {div} at (8,13.50) size 722x19
|
||||
RenderInline {t} at (0,0) size 93x19
|
||||
RenderText {#text} at (0,0) size 93x19
|
||||
text run at (0,0) width 93: "SFO to DCA"
|
||||
RenderText {#text} at (0,0) size 0x0
|
||||
RenderFlexibleBox {app-menu-button} at (730,8) size 30x30
|
||||
RenderImage {img} at (8,15) size 14x0
|
||||
RenderFlexibleBox {app-panel-content} at (0,46) size 768x51
|
||||
RenderBlock {div} at (8,25.50) size 50x0
|
||||
RenderImage {img} at (0,0) size 50x0
|
||||
RenderBlock {div} at (58,8) size 645.28x35
|
||||
RenderInline {t} at (0,0) size 118x19
|
||||
RenderText {#text} at (8,8) size 118x19
|
||||
text run at (8,8) width 118: "Virgin America"
|
||||
RenderText {#text} at (0,0) size 0x0
|
||||
RenderBlock {div} at (703.28,8) size 56.72x35 [color=#ABB4B6]
|
||||
RenderInline {t} at (0,0) size 41x19
|
||||
RenderInline {a} at (0,0) size 41x19 [color=#1155CC]
|
||||
RenderText {#text} at (8,8) size 41x19
|
||||
text run at (8,8) width 41: "$800"
|
||||
RenderText {#text} at (0,0) size 0x0
|
||||
RenderFlexibleBox {app-panel-content} at (0,97) size 768x51
|
||||
RenderBlock {div} at (8,25.50) size 50x0
|
||||
RenderImage {img} at (0,0) size 50x0
|
||||
RenderBlock {div} at (58,8) size 645.28x35
|
||||
RenderInline {t} at (0,0) size 119x19
|
||||
RenderText {#text} at (8,8) size 119x19
|
||||
text run at (8,8) width 119: "British Airways"
|
||||
RenderText {#text} at (0,0) size 0x0
|
||||
RenderBlock {div} at (703.28,8) size 56.72x35 [color=#ABB4B6]
|
||||
RenderInline {t} at (0,0) size 41x19
|
||||
RenderInline {a} at (0,0) size 41x19 [color=#1155CC]
|
||||
RenderText {#text} at (8,8) size 41x19
|
||||
text run at (8,8) width 41: "$700"
|
||||
RenderText {#text} at (0,0) size 0x0
|
||||
RenderFlexibleBox {app-panel-content} at (0,148) size 768x51
|
||||
RenderBlock {div} at (8,25.50) size 50x0
|
||||
RenderImage {img} at (0,0) size 50x0
|
||||
RenderBlock {div} at (58,8) size 645.28x35
|
||||
RenderInline {t} at (0,0) size 53x19
|
||||
RenderText {#text} at (8,8) size 53x19
|
||||
text run at (8,8) width 53: "United"
|
||||
RenderText {#text} at (0,0) size 0x0
|
||||
RenderBlock {div} at (703.28,8) size 56.72x35 [color=#ABB4B6]
|
||||
RenderInline {t} at (0,0) size 41x19
|
||||
RenderInline {a} at (0,0) size 41x19 [color=#1155CC]
|
||||
RenderText {#text} at (8,8) size 41x19
|
||||
text run at (8,8) width 41: "$667"
|
||||
RenderText {#text} at (0,0) size 0x0
|
||||
RenderFlexibleBox {app-panel-content} at (0,199) size 768x51
|
||||
RenderBlock {div} at (8,25.50) size 50x0
|
||||
RenderImage {img} at (0,0) size 50x0
|
||||
RenderBlock {div} at (58,8) size 645.28x35
|
||||
RenderInline {t} at (0,0) size 43x19
|
||||
RenderText {#text} at (8,8) size 43x19
|
||||
text run at (8,8) width 43: "Delta"
|
||||
RenderText {#text} at (0,0) size 0x0
|
||||
RenderBlock {div} at (703.28,8) size 56.72x35 [color=#ABB4B6]
|
||||
RenderInline {t} at (0,0) size 41x19
|
||||
RenderInline {a} at (0,0) size 41x19 [color=#1155CC]
|
||||
RenderText {#text} at (8,8) size 41x19
|
||||
text run at (8,8) width 41: "$450"
|
||||
RenderText {#text} at (0,0) size 0x0
|
||||
RenderFlexibleBox {app-panel} at (16,282) size 768x199 [bgcolor=#FFFFFF]
|
||||
RenderFlexibleBox {app-panel-header} at (0,0) size 768x46 [bgcolor=#DEDEDE]
|
||||
RenderBlock {div} at (8,13.50) size 722x19
|
||||
RenderInline {t} at (0,0) size 87x19
|
||||
RenderText {#text} at (0,0) size 87x19
|
||||
text run at (0,0) width 87: "SJC to DCA"
|
||||
RenderText {#text} at (0,0) size 0x0
|
||||
RenderFlexibleBox {app-menu-button} at (730,8) size 30x30
|
||||
RenderImage {img} at (8,15) size 14x0
|
||||
RenderFlexibleBox {app-panel-content} at (0,46) size 768x51
|
||||
RenderBlock {div} at (8,25.50) size 50x0
|
||||
RenderImage {img} at (0,0) size 50x0
|
||||
RenderBlock {div} at (58,8) size 635.09x35
|
||||
RenderInline {t} at (0,0) size 118x19
|
||||
RenderText {#text} at (8,8) size 118x19
|
||||
text run at (8,8) width 118: "Virgin America"
|
||||
RenderText {#text} at (0,0) size 0x0
|
||||
RenderBlock {div} at (693.09,8) size 66.91x35 [color=#ABB4B6]
|
||||
RenderInline {t} at (0,0) size 51x19
|
||||
RenderInline {a} at (0,0) size 51x19 [color=#1155CC]
|
||||
RenderText {#text} at (8,8) size 51x19
|
||||
text run at (8,8) width 51: "$1500"
|
||||
RenderText {#text} at (0,0) size 0x0
|
||||
RenderFlexibleBox {app-panel-content} at (0,97) size 768x51
|
||||
RenderBlock {div} at (8,25.50) size 50x0
|
||||
RenderImage {img} at (0,0) size 50x0
|
||||
RenderBlock {div} at (58,8) size 645.28x35
|
||||
RenderInline {t} at (0,0) size 56x19
|
||||
RenderText {#text} at (8,8) size 56x19
|
||||
text run at (8,8) width 56: "jetBlue"
|
||||
RenderText {#text} at (0,0) size 0x0
|
||||
RenderBlock {div} at (703.28,8) size 56.72x35 [color=#ABB4B6]
|
||||
RenderInline {t} at (0,0) size 41x19
|
||||
RenderInline {a} at (0,0) size 41x19 [color=#1155CC]
|
||||
RenderText {#text} at (8,8) size 41x19
|
||||
text run at (8,8) width 41: "$650"
|
||||
RenderText {#text} at (0,0) size 0x0
|
||||
RenderFlexibleBox {app-panel-content} at (0,148) size 768x51
|
||||
RenderBlock {div} at (8,25.50) size 50x0
|
||||
RenderImage {img} at (0,0) size 50x0
|
||||
RenderBlock {div} at (58,8) size 645.28x35
|
||||
RenderInline {t} at (0,0) size 53x19
|
||||
RenderText {#text} at (8,8) size 53x19
|
||||
text run at (8,8) width 53: "United"
|
||||
RenderText {#text} at (0,0) size 0x0
|
||||
RenderBlock {div} at (703.28,8) size 56.72x35 [color=#ABB4B6]
|
||||
RenderInline {t} at (0,0) size 41x19
|
||||
RenderInline {a} at (0,0) size 41x19 [color=#1155CC]
|
||||
RenderText {#text} at (8,8) size 41x19
|
||||
text run at (8,8) width 41: "$367"
|
||||
RenderText {#text} at (0,0) size 0x0
|
||||
layer at (483,522) size 285x46
|
||||
RenderFlexibleBox {app-toast} at (482.59,522) size 285.41x46 [bgcolor=#B0281A] [border: (1px solid #AEA477)]
|
||||
RenderBlock {div} at (7,7) size 32x32
|
||||
RenderBlock {div} at (0,0) size 32x32 [border: (2px solid #000000)]
|
||||
RenderInline {t} at (0,0) size 14x28
|
||||
RenderText {#text} at (9,3) size 14x28
|
||||
text run at (9,3) width 14: "?"
|
||||
RenderText {#text} at (0,0) size 0x0
|
||||
RenderBlock {div} at (45,15.50) size 233.41x15
|
||||
RenderBlock {div} at (0,0) size 233.41x15
|
||||
RenderInline {t} at (0,0) size 234x15
|
||||
RenderText {#text} at (0,0) size 72x15
|
||||
text run at (0,0) width 72: "Flights are "
|
||||
RenderInline {span} at (0,0) size 37x15
|
||||
RenderText {#text} at (71,0) size 37x15
|
||||
text run at (71,0) width 37: "$200"
|
||||
RenderText {#text} at (107,0) size 127x15
|
||||
text run at (107,0) width 127: " cheaper tomorrow."
|
||||
RenderText {#text} at (0,0) size 0x0
|
||||
|
||||
10
tests/framework/flights-app.sky
Normal file
10
tests/framework/flights-app.sky
Normal file
@ -0,0 +1,10 @@
|
||||
<sky>
|
||||
<import src="/sky/examples/flights-app/flights-app.sky" />
|
||||
<script>
|
||||
addEventListener("load", function() {
|
||||
var app = document.createElement("flights-app");
|
||||
document.querySelector("sky").appendChild(app);
|
||||
internals.notifyTestComplete(internals.renderTreeAsText());
|
||||
});
|
||||
</script>
|
||||
</sky>
|
||||
Loading…
x
Reference in New Issue
Block a user