Source/WebCore/ChangeLog

 12012-07-26 Shinya Kawanaka <shinyak@chromium.org>
 2
 3 AuthorShadowDOM for progress element
 4 https://bugs.webkit.org/show_bug.cgi?id=91969
 5
 6 Reviewed by NOBODY (OOPS!).
 7
 8 We add support for AuthorShadowDOM for progress element.
 9
 10 According to the Shadow DOM spec, a progress element should behave like having a UserAgentShadowRoot and
 11 an element in UserAgentShadowRoot draws a real 'progress' bar. In this patch, we change the inner structure
 12 of a progress element so that we can distribute an element having RenderProgress to AuthorShadowDOM.
 13
 14 Before this patch, a progress element has the following inner structure.
 15
 16 <progress>--UserAgentShadowRoot -- -- -- -- -- -- -- -- -- -- AuthorShadowRoot
 17 |
 18 +-- ProgressBarElement
 19 |
 20 +-- ProgressValueElement
 21
 22 After this patch, a progress element will have the following inner structure.
 23
 24 <progress>--UserAgentShadowRoot -- -- -- -- -- -- -- -- -- -- AuthorShadowRoot
 25 |
 26 +-- ProgressInnerElement
 27 |
 28 +-- ProgressBarElement
 29 |
 30 +-- ProgressValueElement
 31
 32
 33 Tests: fast/dom/shadow/shadowdom-for-progress-dynamic.html
 34 fast/dom/shadow/shadowdom-for-progress-multiple.html
 35 fast/dom/shadow/shadowdom-for-progress-with-style.html
 36 fast/dom/shadow/shadowdom-for-progress-without-appearance.html
 37 fast/dom/shadow/shadowdom-for-progress-without-shadow-element.html
 38 fast/dom/shadow/shadowdom-for-progress.html
 39
 40 * css/html.css:
 41 (progress::-webkit-progress-inner-element):
 42 * dom/ElementShadow.cpp:
 43 (WebCore::ElementShadow::addShadowRoot): We force reattach here, since the renderer of RenderInnerElement
 44 was not removed.
 45 * html/HTMLProgressElement.cpp:
 46 (WebCore::HTMLProgressElement::createRenderer):
 47 (WebCore::HTMLProgressElement::renderProgress): Returns RenderProgress gotten from UserAgentShadowDOM.
 48 (WebCore):
 49 (WebCore::HTMLProgressElement::didElementStateChange):
 50 (WebCore::HTMLProgressElement::createShadowSubtree): Creates a new Shadow DOM structure.
 51 * html/HTMLProgressElement.h:
 52 (WebCore):
 53 (HTMLProgressElement):
 54 (WebCore::isHTMLProgressElement):
 55 (WebCore::toHTMLProgressElement):
 56 * html/shadow/ProgressShadowElement.cpp:
 57 (WebCore::ProgressInnerElement::ProgressInnerElement): We introduce a new element having RenderProgress
 58 so that we can distribute an element having RenderProgress to AuthorShadowDOM.
 59 (WebCore):
 60 (WebCore::ProgressInnerElement::create):
 61 (WebCore::ProgressInnerElement::progressElement):
 62 (WebCore::ProgressInnerElement::shadowPseudoId):
 63 (WebCore::ProgressInnerElement::createRenderer):
 64 (WebCore::ProgressShadowElement::ProgressShadowElement):
 65 (WebCore::ProgressShadowElement::progressElement):
 66 * html/shadow/ProgressShadowElement.h:
 67 (ProgressInnerElement):
 68 (WebCore):
 69 * rendering/RenderProgress.cpp:
 70 (WebCore::RenderProgress::RenderProgress):
 71 (WebCore::RenderProgress::progressElement):
 72 * rendering/RenderProgress.h:
 73 (RenderProgress):
 74
1752012-08-01 Koji Ishii <kojiishi@gmail.com>
276
377 Cache support for OpenTypeVerticalData

Source/WebCore/css/html.css

@@progress {
926926 vertical-align: -0.2em;
927927}
928928
 929progress::-webkit-progress-inner-element {
 930 -webkit-appearance: inherit;
 931 -webkit-box-sizing: inherit;
 932 -webkit-user-modify: read-only;
 933 height: 100%;
 934 width: 100%;
 935}
 936
929937progress::-webkit-progress-bar {
930938 background-color: gray;
931939 height: 100%;

Source/WebCore/html/HTMLProgressElement.cpp

@@const double HTMLProgressElement::InvalidPosition = -2;
4343
4444HTMLProgressElement::HTMLProgressElement(const QualifiedName& tagName, Document* document)
4545 : LabelableElement(tagName, document)
 46 , m_hasAuthorShadowRoot(false)
4647{
4748 ASSERT(hasTagName(progressTag));
4849}

@@PassRefPtr<HTMLProgressElement> HTMLProgressElement::create(const QualifiedName&
5859 return progress;
5960}
6061
61 RenderObject* HTMLProgressElement::createRenderer(RenderArena* arena, RenderStyle*)
 62RenderObject* HTMLProgressElement::createRenderer(RenderArena* arena, RenderStyle* style)
6263{
 64 if (!style->hasAppearance() || hasAuthorShadowRoot())
 65 return RenderObject::createObject(this, style);
 66
6367 return new (arena) RenderProgress(this);
6468}
6569

@@bool HTMLProgressElement::childShouldCreateRenderer(const NodeRenderingContext&
6872 return childContext.isOnUpperEncapsulationBoundary() && HTMLElement::childShouldCreateRenderer(childContext);
6973}
7074
 75RenderProgress* HTMLProgressElement::renderProgress() const
 76{
 77 if (renderer() && renderer()->isProgress())
 78 return static_cast<RenderProgress*>(renderer());
 79
 80 RenderObject* renderObject = userAgentShadowRoot()->firstChild()->renderer();
 81 ASSERT(!renderObject || renderObject->isProgress());
 82 return static_cast<RenderProgress*>(renderObject);
 83}
 84
 85void HTMLProgressElement::willAddAuthorShadowRoot()
 86{
 87 m_hasAuthorShadowRoot = true;
 88}
 89
7190bool HTMLProgressElement::supportsFocus() const
7291{
7392 return Node::supportsFocus() && !disabled();

@@bool HTMLProgressElement::isDeterminate() const
134153void HTMLProgressElement::didElementStateChange()
135154{
136155 m_value->setWidthPercentage(position() * 100);
137  if (renderer() && renderer()->isProgress()) {
138  RenderProgress* render = toRenderProgress(renderer());
 156 if (RenderProgress* render = renderProgress()) {
139157 bool wasDeterminate = render->isDeterminate();
140  renderer()->updateFromElement();
 158 render->updateFromElement();
141159 if (wasDeterminate != isDeterminate())
142160 setNeedsStyleRecalc();
143161 }

@@void HTMLProgressElement::didElementStateChange()
145163
146164void HTMLProgressElement::createShadowSubtree()
147165{
148  ASSERT(!shadow());
 166 ASSERT(!userAgentShadowRoot());
 167
 168 RefPtr<ShadowRoot> root = ShadowRoot::create(this, ShadowRoot::UserAgentShadowRoot, ASSERT_NO_EXCEPTION);
 169
 170 RefPtr<ProgressInnerElement> inner = ProgressInnerElement::create(document());
 171 root->appendChild(inner);
149172
150173 RefPtr<ProgressBarElement> bar = ProgressBarElement::create(document());
151174 m_value = ProgressValueElement::create(document());
152175 bar->appendChild(m_value, ASSERT_NO_EXCEPTION);
153176
154  RefPtr<ShadowRoot> root = ShadowRoot::create(this, ShadowRoot::UserAgentShadowRoot, ASSERT_NO_EXCEPTION);
155  root->appendChild(bar, ASSERT_NO_EXCEPTION);
 177 inner->appendChild(bar, ASSERT_NO_EXCEPTION);
156178}
157179
158180} // namespace

Source/WebCore/html/HTMLProgressElement.h

2727namespace WebCore {
2828
2929class ProgressValueElement;
 30class RenderProgress;
3031
3132class HTMLProgressElement : public LabelableElement {
3233public:

@@public:
3536
3637 static PassRefPtr<HTMLProgressElement> create(const QualifiedName&, Document*);
3738
 39 bool hasAuthorShadowRoot() const { return m_hasAuthorShadowRoot; }
 40
3841 double value() const;
3942 void setValue(double, ExceptionCode&);
4043

@@private:
5154 HTMLProgressElement(const QualifiedName&, Document*);
5255 virtual ~HTMLProgressElement();
5356
 57 virtual void willAddAuthorShadowRoot() OVERRIDE;
 58
5459 virtual bool supportLabels() const OVERRIDE { return true; }
5560
5661 virtual bool supportsFocus() const;
5762
5863 virtual RenderObject* createRenderer(RenderArena*, RenderStyle*);
5964 virtual bool childShouldCreateRenderer(const NodeRenderingContext&) const OVERRIDE;
 65 RenderProgress* renderProgress() const;
6066
6167 virtual void parseAttribute(const Attribute&) OVERRIDE;
6268

@@private:
6672 void createShadowSubtree();
6773
6874 RefPtr<ProgressValueElement> m_value;
 75 bool m_hasAuthorShadowRoot;
6976};
7077
 78inline bool isHTMLProgressElement(Node* node)
 79{
 80 ASSERT(node);
 81 return node->hasTagName(HTMLNames::progressTag);
 82}
 83
 84inline HTMLProgressElement* toHTMLProgressElement(Node* node)
 85{
 86 ASSERT(!node || isHTMLProgressElement(node));
 87 return static_cast<HTMLProgressElement*>(node);
 88}
 89
7190} // namespace
7291
7392#endif

Source/WebCore/html/shadow/ProgressShadowElement.cpp

3434#if ENABLE(PROGRESS_ELEMENT)
3535#include "HTMLNames.h"
3636#include "HTMLProgressElement.h"
37 #include "RenderObject.h"
 37#include "RenderProgress.h"
3838
3939namespace WebCore {
4040
4141using namespace HTMLNames;
4242
43 ProgressShadowElement::ProgressShadowElement(Document* document)
 43ProgressShadowElement::ProgressShadowElement(Document* document)
4444 : HTMLDivElement(HTMLNames::divTag, document)
4545{
4646}
4747
4848HTMLProgressElement* ProgressShadowElement::progressElement() const
4949{
50  Element* element = shadowHost();
51  ASSERT(!element || element->hasTagName(progressTag));
52  return static_cast<HTMLProgressElement*>(element);
 50 return toHTMLProgressElement(shadowHost());
5351}
5452
5553bool ProgressShadowElement::rendererIsNeeded(const NodeRenderingContext& context)

@@bool ProgressShadowElement::rendererIsNeeded(const NodeRenderingContext& context
5856 return progressRenderer && !progressRenderer->style()->hasAppearance() && HTMLDivElement::rendererIsNeeded(context);
5957}
6058
 59ProgressInnerElement::ProgressInnerElement(Document* document)
 60 : ProgressShadowElement(document)
 61{
 62}
 63
 64PassRefPtr<ProgressInnerElement> ProgressInnerElement::create(Document* document)
 65{
 66 return adoptRef(new ProgressInnerElement(document));
 67}
 68
 69const AtomicString& ProgressInnerElement::shadowPseudoId() const
 70{
 71 DEFINE_STATIC_LOCAL(AtomicString, pseudId, ("-webkit-progress-inner-element"));
 72 return pseudId;
 73}
 74
 75RenderObject* ProgressInnerElement::createRenderer(RenderArena* arena, RenderStyle* style)
 76{
 77 return new (arena) RenderProgress(this);
 78}
 79
 80bool ProgressInnerElement::rendererIsNeeded(const NodeRenderingContext& context)
 81{
 82 if (progressElement()->hasAuthorShadowRoot())
 83 return HTMLDivElement::rendererIsNeeded(context);
 84
 85 RenderObject* progressRenderer = progressElement()->renderer();
 86 return progressRenderer && !progressRenderer->style()->hasAppearance() && HTMLDivElement::rendererIsNeeded(context);
 87}
 88
6189const AtomicString& ProgressBarElement::shadowPseudoId() const
6290{
6391 DEFINE_STATIC_LOCAL(AtomicString, pseudId, ("-webkit-progress-bar"));

Source/WebCore/html/shadow/ProgressShadowElement.h

@@public:
4545 ProgressShadowElement(Document*);
4646 HTMLProgressElement* progressElement() const;
4747
 48protected:
 49 virtual bool rendererIsNeeded(const NodeRenderingContext&);
 50};
 51
 52class ProgressInnerElement : public ProgressShadowElement {
 53public:
 54 ProgressInnerElement(Document*);
 55
 56 static PassRefPtr<ProgressInnerElement> create(Document*);
4857private:
 58 virtual RenderObject* createRenderer(RenderArena*, RenderStyle*) OVERRIDE;
 59 virtual const AtomicString& shadowPseudoId() const;
4960 virtual bool rendererIsNeeded(const NodeRenderingContext&);
5061};
5162

@@inline PassRefPtr<ProgressBarElement> ProgressBarElement::create(Document* docum
6576 return adoptRef(new ProgressBarElement(document));
6677}
6778
68 
6979class ProgressValueElement : public ProgressShadowElement {
7080public:
7181 ProgressValueElement(Document* document)

Source/WebCore/rendering/RenderProgress.cpp

@@using namespace std;
3333
3434namespace WebCore {
3535
36 RenderProgress::RenderProgress(HTMLProgressElement* element)
 36RenderProgress::RenderProgress(HTMLElement* element)
3737 : RenderBlock(element)
3838 , m_position(HTMLProgressElement::InvalidPosition)
3939 , m_animationStartTime(0)

@@void RenderProgress::updateAnimationState()
9797
9898HTMLProgressElement* RenderProgress::progressElement() const
9999{
100  return static_cast<HTMLProgressElement*>(node());
 100 if (!node())
 101 return 0;
 102
 103 if (isHTMLProgressElement(node()))
 104 return toHTMLProgressElement(node());
 105
 106 ASSERT(node()->shadowHost());
 107 return toHTMLProgressElement(node()->shadowHost());
101108}
102109
103110} // namespace WebCore

Source/WebCore/rendering/RenderProgress.h

@@class HTMLProgressElement;
3030
3131class RenderProgress : public RenderBlock {
3232public:
33  RenderProgress(HTMLProgressElement*);
 33 RenderProgress(HTMLElement*);
3434 virtual ~RenderProgress();
3535
3636 double position() const { return m_position; }

@@public:
3838 double animationStartTime() const { return m_animationStartTime; }
3939
4040 bool isDeterminate() const;
 41 virtual void updateFromElement();
4142
4243 HTMLProgressElement* progressElement() const;
4344

@@private:
4546 virtual const char* renderName() const { return "RenderProgress"; }
4647 virtual bool isProgress() const { return true; }
4748 virtual bool requiresForcedStyleRecalcPropagation() const { return true; }
48  virtual void updateFromElement();
4949
5050 void animationTimerFired(Timer<RenderProgress>*);
5151 void updateAnimationState();

Source/WebCore/rendering/RenderThemeChromiumSkia.cpp

@@static const double progressAnimationInterval = 0.125;
604604IntRect RenderThemeChromiumSkia::determinateProgressValueRectFor(RenderProgress* renderProgress, const IntRect& rect) const
605605{
606606 int dx = rect.width() * renderProgress->position();
 607
607608 return IntRect(rect.x(), rect.y(), dx, rect.height());
608609}
609610
610611IntRect RenderThemeChromiumSkia::indeterminateProgressValueRectFor(RenderProgress* renderProgress, const IntRect& rect) const
611612{
612 
613613 int valueWidth = rect.width() / progressActivityBlocks;
614614 int movableWidth = rect.width() - valueWidth;
615615 if (movableWidth <= 0)

LayoutTests/ChangeLog

 12012-07-26 Shinya Kawanaka <shinyak@chromium.org>
 2
 3 AuthorShadowDOM for progress element
 4 https://bugs.webkit.org/show_bug.cgi?id=91969
 5
 6 Reviewed by NOBODY (OOPS!).
 7
 8 Contains the following tests:
 9 (1) progress element with AuthorShadowDOM
 10 (2) progress element with multiple AuthorShadowDOM with a shadow element
 11 (3) progress element with multiple AuthorShadowDOM without a shadow element
 12 (4) progress element with AuthorShadowDOM with dynamic value update
 13 (5) progress element with AuthorShadowDOM with style
 14 (6) progress element with AuthorShadowDOM with -webkit-appearance: none
 15
 16 * fast/dom/shadow/resources/replaced-element-styles.css: Added.
 17 (.progress-like):
 18 (.progress-inner-element-like):
 19 * fast/dom/shadow/shadowdom-for-progress-dynamic-expected.html: Added.
 20 * fast/dom/shadow/shadowdom-for-progress-dynamic.html: Added.
 21 * fast/dom/shadow/shadowdom-for-progress-expected.html: Added.
 22 * fast/dom/shadow/shadowdom-for-progress-multiple-expected.html: Added.
 23 * fast/dom/shadow/shadowdom-for-progress-multiple.html: Added.
 24 * fast/dom/shadow/shadowdom-for-progress-with-style-expected.html: Added.
 25 * fast/dom/shadow/shadowdom-for-progress-with-style.html: Added.
 26 * fast/dom/shadow/shadowdom-for-progress-without-appearance-expected.html: Added.
 27 * fast/dom/shadow/shadowdom-for-progress-without-appearance.html: Added.
 28 * fast/dom/shadow/shadowdom-for-progress-without-shadow-element-expected.html: Added.
 29 * fast/dom/shadow/shadowdom-for-progress-without-shadow-element.html: Added.
 30 * fast/dom/shadow/shadowdom-for-progress.html: Added.
 31
1322012-08-01 Raymond Toy <rtoy@google.com>
233
334 Enable codec tests in TestExpectations and update expected mp3 files

LayoutTests/fast/dom/HTMLProgressElement/progress-clone-expected.txt

11PASS cloned.value is target.value
2 PASS internals.shadowPseudoId(clonedShadowRoot.firstChild) is internals.shadowPseudoId(targetShadowRoot.firstChild)
32PASS internals.shadowPseudoId(clonedShadowRoot.firstChild.firstChild) is internals.shadowPseudoId(targetShadowRoot.firstChild.firstChild)
4 PASS clonedShadowRoot.firstChild.firstChild.style.width is "70%"
5 PASS targetShadowRoot.firstChild.firstChild.style.width is "50%"
 3PASS internals.shadowPseudoId(clonedShadowRoot.firstChild.firstChild.firstChild) is internals.shadowPseudoId(targetShadowRoot.firstChild.firstChild.firstChild)
 4PASS clonedShadowRoot.firstChild.firstChild.firstChild.style.width is "70%"
 5PASS targetShadowRoot.firstChild.firstChild.firstChild.style.width is "50%"
66PASS successfullyParsed is true
77
88TEST COMPLETE

LayoutTests/fast/dom/HTMLProgressElement/progress-clone.html

1919 clonedShadowRoot = internals.shadowRoot(cloned);
2020
2121 shouldBe("cloned.value", "target.value");
22  shouldBe("internals.shadowPseudoId(clonedShadowRoot.firstChild)", "internals.shadowPseudoId(targetShadowRoot.firstChild)");
2322 shouldBe("internals.shadowPseudoId(clonedShadowRoot.firstChild.firstChild)", "internals.shadowPseudoId(targetShadowRoot.firstChild.firstChild)");
 23 shouldBe("internals.shadowPseudoId(clonedShadowRoot.firstChild.firstChild.firstChild)", "internals.shadowPseudoId(targetShadowRoot.firstChild.firstChild.firstChild)");
2424
2525 cloned.value = 70;
26  shouldBe("clonedShadowRoot.firstChild.firstChild.style.width", '"70%"');
27  shouldBe("targetShadowRoot.firstChild.firstChild.style.width", '"50%"');
 26 shouldBe("clonedShadowRoot.firstChild.firstChild.firstChild.style.width", '"70%"');
 27 shouldBe("targetShadowRoot.firstChild.firstChild.firstChild.style.width", '"50%"');
2828
2929})();
3030</script>

LayoutTests/fast/dom/HTMLProgressElement/progress-element-markup-expected.txt

@@A progress element should have a nested shadow box with a width specified:
66| value="70"
77| <shadow:root>
88| <div>
9 | shadow:pseudoId="-webkit-progress-bar"
 9| shadow:pseudoId="-webkit-progress-inner-element"
1010| <div>
11 | style="width: 70%; "
12 | shadow:pseudoId="-webkit-progress-value"
 11| shadow:pseudoId="-webkit-progress-bar"
 12| <div>
 13| style="width: 70%; "
 14| shadow:pseudoId="-webkit-progress-value"

LayoutTests/fast/dom/shadow/resources/replaced-element-styles.css

 1.progress-like {
 2 -webkit-appearance: progress-bar;
 3 -webkit-box-sizing: border-box;
 4 display: inline-block;
 5 height: 1em;
 6 width: 10em;
 7 vertical-align: -0.2em;
 8 margin: 0;
 9 padding: 0;
 10}
 11
 12.progress-inner-element-like {
 13 -webkit-appearance: progress-bar;
 14 -webkit-box-sizing: border-box;
 15 -webkit-user-modify: read-only;
 16 display: block;
 17 height: 100%;
 18 width: 100%;
 19 vertical-align: 0em;
 20}

LayoutTests/fast/dom/shadow/shadowdom-for-progress-dynamic-expected.html

 1<!DOCTYPE html>
 2<html>
 3<head>
 4 <link rel="stylesheet" href="resources/replaced-element-styles.css">
 5 <script src="resources/polyfill.js"></script>
 6</head>
 7<body>
 8<script src="resources/polyfill.js"></script>
 9<div id="container">
 10 <div class="progress-like"><progress class="progress-inner-element-like" min="0" max="100" value="30"></progress><span>(after)</span></div>
 11</div>
 12
 13</body>
 14</html>

LayoutTests/fast/dom/shadow/shadowdom-for-progress-dynamic.html

 1<!DOCTYPE html>
 2<html>
 3<head>
 4 <link rel="stylesheet" href="resources/replaced-element-styles.css">
 5 <script src="resources/polyfill.js"></script>
 6</head>
 7<body>
 8<div id="container">
 9 <progress id="host" min="0" max="100" value="50"></progress>
 10</div>
 11
 12<script>
 13if (window.testRunner)
 14 testRunner.waitUntilDone();
 15
 16var shadowRoot = new WebKitShadowRoot(host);
 17shadowRoot.innerHTML = "<shadow></shadow><span>(after)</span>";
 18
 19setTimeout(function() {
 20 host.setAttribute('value', 30);
 21 if (window.testRunner)
 22 testRunner.notifyDone();
 23}, 0);
 24</script>
 25
 26</body>
 27</html>

LayoutTests/fast/dom/shadow/shadowdom-for-progress-expected.html

 1<!DOCTYPE html>
 2<html>
 3<head>
 4 <link rel="stylesheet" href="resources/replaced-element-styles.css">
 5 <script src="resources/polyfill.js"></script>
 6</head>
 7<body>
 8
 9<div id="container">
 10 <div class="progress-like"><progress class="progress-inner-element-like" min="0" max="100" value="50"></progress><span>(after)</span></div>
 11</div>
 12
 13</body>
 14</html>

LayoutTests/fast/dom/shadow/shadowdom-for-progress-multiple-expected.html

 1<!DOCTYPE html>
 2<html>
 3<head>
 4 <link rel="stylesheet" href="resources/replaced-element-styles.css">
 5 <script src="resources/polyfill.js"></script>
 6</head>
 7<body>
 8
 9<div id="container">
 10 <div class="progress-like">
 11 <div style="margin: 0 10px 0 10px; height: 1em; width: 10em;">
 12 <progress class="progress-inner-element-like" min="0" max="100" value="50"></progress><span>(after)</span>
 13 </div>
 14 </div>
 15</div>
 16
 17</body>
 18</html>

LayoutTests/fast/dom/shadow/shadowdom-for-progress-multiple.html

 1<!DOCTYPE html>
 2<html>
 3<body>
 4<script src="resources/polyfill.js"></script>
 5<style>
 6/* We have to write this for now. Please see Bug 92455. */
 7progress::-webkit-progress-inner-element {
 8 -webkit-appearance: progress-bar;
 9}
 10</style>
 11<div id="container">
 12 <progress id="host" min="0" max="100" value="50"></progress>
 13</div>
 14
 15<script>
 16var shadowRoot = new WebKitShadowRoot(host);
 17shadowRoot.innerHTML = "<shadow></shadow><span>(after)</span>";
 18
 19var younger = new WebKitShadowRoot(host);
 20younger.innerHTML = "<div style='margin: 0 10px 0 10px; height: 1em; width: 10em;'><shadow></shadow></div>";
 21</script>
 22
 23</body>
 24</html>

LayoutTests/fast/dom/shadow/shadowdom-for-progress-with-style-expected.html

 1<!DOCTYPE html>
 2<html>
 3<head>
 4 <link rel="stylesheet" href="resources/replaced-element-styles.css">
 5 <script src="resources/polyfill.js"></script>
 6</head>
 7<body>
 8<style>
 9div#wrapper {
 10 display: block;
 11 margin: 0;
 12 padding: 0;
 13 width: auto;
 14 height: 3em;
 15 vertical-align: 0;
 16}
 17
 18progress#with-style {
 19 display: block;
 20 width: 15em;
 21 height: 3em;
 22}
 23</style>
 24
 25<div id="container">
 26 <div id="wrapper" class="progress-like">
 27 <div style="margin-left: 100px;">
 28 <progress id="with-style" class="progress-inner-element-like" min="0" max="100" value="50"></progress><span>(after)</span>
 29 </div>
 30 </div>
 31</div>
 32
 33</body>
 34</html>

LayoutTests/fast/dom/shadow/shadowdom-for-progress-with-style.html

 1<!DOCTYPE html>
 2<html>
 3<body>
 4<script src="resources/polyfill.js"></script>
 5<style>
 6progress {
 7 display: block;
 8 margin: 0;
 9 padding: 0;
 10 width: auto;
 11 height: 3em;
 12 vertical-align: 0;
 13}
 14
 15progress::-webkit-progress-inner-element {
 16 -webkit-appearance: progress-bar; /* We have to write this for now. Please see Bug 92455. */
 17 display: block;
 18 width: 15em;
 19 height: 3em;
 20}
 21</style>
 22
 23<div id="container">
 24 <progress id="host" min="0" max="100" value="50"></progress>
 25</div>
 26
 27<script>
 28var shadowRoot = new WebKitShadowRoot(host);
 29shadowRoot.innerHTML = "<div style='margin-left: 100px'><shadow></shadow><span>(after)</span></div>";
 30</script>
 31
 32</body>
 33</html>

LayoutTests/fast/dom/shadow/shadowdom-for-progress-without-appearance-expected.html

 1<!DOCTYPE html>
 2<html>
 3<head>
 4 <link rel="stylesheet" href="resources/replaced-element-styles.css">
 5 <script src="resources/polyfill.js"></script>
 6</head>
 7<body>
 8<script src="resources/polyfill.js"></script>
 9
 10<style>
 11progress#progress {
 12 -webkit-appearance: none;
 13}
 14</style>
 15
 16<div id="container">
 17 <div class="progress-like"><progress id="progress" class="progress-inner-element-like" min="0" max="100" value="50"></progress><span>(after)</span></div>
 18</div>
 19
 20</body>
 21</html>

LayoutTests/fast/dom/shadow/shadowdom-for-progress-without-appearance.html

 1<!DOCTYPE html>
 2<html>
 3<head>
 4 <link rel="stylesheet" href="resources/replaced-element-styles.css">
 5 <script src="resources/polyfill.js"></script>
 6</head>
 7<body>
 8
 9<style>
 10progress {
 11 -webkit-appearance: none;
 12}
 13</style>
 14
 15<div id="container">
 16 <progress id="host" min="0" max="100" value="50"></progress>
 17</div>
 18
 19<script>
 20var shadowRoot = new WebKitShadowRoot(host);
 21shadowRoot.innerHTML = "<shadow></shadow><span>(after)</span>";
 22</script>
 23
 24</body>
 25</html>

LayoutTests/fast/dom/shadow/shadowdom-for-progress-without-shadow-element-expected.html

 1<!DOCTYPE html>
 2<html>
 3<head>
 4 <link rel="stylesheet" href="resources/replaced-element-styles.css">
 5 <script src="resources/polyfill.js"></script>
 6</head>
 7<body>
 8
 9<div id="container">
 10 <div class="progress-like"><span>no progress</span></div>
 11</div>
 12
 13</body>
 14</html>

LayoutTests/fast/dom/shadow/shadowdom-for-progress-without-shadow-element.html

 1<!DOCTYPE html>
 2<html>
 3<head>
 4 <link rel="stylesheet" href="resources/replaced-element-styles.css">
 5 <script src="resources/polyfill.js"></script>
 6</head>
 7<body>
 8
 9<div id="container">
 10 <progress id="host" min="0" max="100" value="50"></progress>
 11</div>
 12
 13<script>
 14var shadowRoot = new WebKitShadowRoot(host);
 15shadowRoot.innerHTML = "<span>no progress</span>"
 16</script>
 17
 18</body>
 19</html>

LayoutTests/fast/dom/shadow/shadowdom-for-progress.html

 1<!DOCTYPE html>
 2<html>
 3<head>
 4 <link rel="stylesheet" href="resources/replaced-element-styles.css">
 5 <script src="resources/polyfill.js"></script>
 6</head>
 7<body>
 8
 9<div id="container">
 10 <progress id="host" min="0" max="100" value="50"></progress>
 11</div>
 12
 13<script>
 14var shadowRoot = new WebKitShadowRoot(host);
 15shadowRoot.innerHTML = "<shadow></shadow><span>(after)</span>";
 16</script>
 17
 18</body>
 19</html>

LayoutTests/platform/chromium-win/fast/dom/HTMLProgressElement/indeterminate-progress-001-expected.txt

@@layer at (0,0) size 800x600
33layer at (0,0) size 800x76
44 RenderBlock {HTML} at (0,0) size 800x76
55 RenderBody {BODY} at (8,8) size 784x60
6  RenderProgress {PROGRESS} at (0,2) size 160x17 [border: (2px solid #0000FF)]
7  RenderBlock {DIV} at (2,2) size 156x12 [bgcolor=#808080]
8  RenderBlock {DIV} at (0,0) size 0x12 [bgcolor=#008000]
 6 RenderBlock {PROGRESS} at (0,2) size 160x17 [border: (2px solid #0000FF)]
 7 RenderProgress {DIV} at (2,2) size 156x12
 8 RenderBlock {DIV} at (0,0) size 156x12 [bgcolor=#808080]
 9 RenderBlock {DIV} at (0,0) size 0x12 [bgcolor=#008000]
910 RenderText {#text} at (160,0) size 4x19
1011 text run at (160,0) width 4: " "
1112 RenderBR {BR} at (164,0) size 0x19
12  RenderProgress {PROGRESS} at (0,22) size 160x17 [border: (2px solid #0000FF)]
13  RenderBlock {DIV} at (2,2) size 156x12 [bgcolor=#808080]
14  RenderBlock {DIV} at (0,0) size 0x12 [bgcolor=#008000]
 13 RenderBlock {PROGRESS} at (0,22) size 160x17 [border: (2px solid #0000FF)]
 14 RenderProgress {DIV} at (2,2) size 156x12
 15 RenderBlock {DIV} at (0,0) size 156x12 [bgcolor=#808080]
 16 RenderBlock {DIV} at (0,0) size 0x12 [bgcolor=#008000]
1517 RenderText {#text} at (160,20) size 4x19
1618 text run at (160,20) width 4: " "
1719 RenderBR {BR} at (164,20) size 0x19
18  RenderProgress {PROGRESS} at (0,42) size 160x17 [border: (2px solid #FF0000)]
19  RenderBlock {DIV} at (2,2) size 156x12 [bgcolor=#808080]
20  RenderBlock {DIV} at (0,0) size 78x12 [bgcolor=#008000]
 20 RenderBlock {PROGRESS} at (0,42) size 160x17 [border: (2px solid #FF0000)]
 21 RenderProgress {DIV} at (2,2) size 156x12
 22 RenderBlock {DIV} at (0,0) size 156x12 [bgcolor=#808080]
 23 RenderBlock {DIV} at (0,0) size 78x12 [bgcolor=#008000]
2124 RenderText {#text} at (0,0) size 0x0

LayoutTests/platform/chromium-win/fast/dom/HTMLProgressElement/progress-bar-value-pseudo-element-expected.txt

@@layer at (0,0) size 800x600
88 RenderListMarker at (-18,0) size 7x19: bullet
99 RenderText {#text} at (0,0) size 81x19
1010 text run at (0,0) width 81: "Default style: "
11  RenderProgress {PROGRESS} at (81,2) size 160x17
12  RenderBlock {DIV} at (0,0) size 160x16 [bgcolor=#808080]
13  RenderBlock {DIV} at (0,0) size 16x16 [bgcolor=#008000]
 11 RenderBlock {PROGRESS} at (81,2) size 160x17
 12 RenderProgress {DIV} at (0,0) size 160x16
 13 RenderBlock {DIV} at (0,0) size 160x16 [bgcolor=#808080]
 14 RenderBlock {DIV} at (0,0) size 16x16 [bgcolor=#008000]
1415 RenderListItem {LI} at (40,20) size 744x20
1516 RenderListMarker at (-18,0) size 7x19: bullet
1617 RenderText {#text} at (0,0) size 91x19
1718 text run at (0,0) width 91: "Progress style: "
18  RenderProgress {PROGRESS} at (91,2) size 160x17 [bgcolor=#0000FF] [border: (3px solid #000066)]
19  RenderBlock {DIV} at (3,3) size 154x10
20  RenderBlock {DIV} at (0,0) size 31x10 [bgcolor=#008000]
 19 RenderBlock {PROGRESS} at (91,2) size 160x17 [bgcolor=#0000FF] [border: (3px solid #000066)]
 20 RenderProgress {DIV} at (3,3) size 154x10
 21 RenderBlock {DIV} at (0,0) size 154x10
 22 RenderBlock {DIV} at (0,0) size 31x10 [bgcolor=#008000]
2123 RenderListItem {LI} at (40,40) size 744x31
2224 RenderListMarker at (-18,11) size 7x19: bullet
2325 RenderText {#text} at (0,11) size 127x19
2426 text run at (0,11) width 127: "Progress style (size): "
25  RenderProgress {PROGRESS} at (127,-1) size 300x31
26  RenderBlock {DIV} at (0,0) size 300x30 [bgcolor=#808080]
27  RenderBlock {DIV} at (0,0) size 90x30 [bgcolor=#008000]
 27 RenderBlock {PROGRESS} at (127,-1) size 300x31
 28 RenderProgress {DIV} at (0,0) size 300x30
 29 RenderBlock {DIV} at (0,0) size 300x30 [bgcolor=#808080]
 30 RenderBlock {DIV} at (0,0) size 90x30 [bgcolor=#008000]
2831 RenderListItem {LI} at (40,71) size 744x20
2932 RenderListMarker at (-18,0) size 7x19: bullet
3033 RenderText {#text} at (0,0) size 60x19
3134 text run at (0,0) width 60: "Bar style: "
32  RenderProgress {PROGRESS} at (60,2) size 160x17
33  RenderBlock {DIV} at (0,0) size 160x16 [bgcolor=#FF0000] [border: (3px solid #990000)]
34  RenderBlock {DIV} at (3,3) size 62x10 [bgcolor=#008000]
 35 RenderBlock {PROGRESS} at (60,2) size 160x17
 36 RenderProgress {DIV} at (0,0) size 160x16
 37 RenderBlock {DIV} at (0,0) size 160x16 [bgcolor=#FF0000] [border: (3px solid #990000)]
 38 RenderBlock {DIV} at (3,3) size 62x10 [bgcolor=#008000]
3539 RenderListItem {LI} at (40,91) size 744x20
3640 RenderListMarker at (-18,0) size 7x19: bullet
3741 RenderText {#text} at (0,0) size 73x19
3842 text run at (0,0) width 73: "Value style: "
39  RenderProgress {PROGRESS} at (73,2) size 160x17
40  RenderBlock {DIV} at (0,0) size 160x16 [bgcolor=#808080]
41  RenderBlock {DIV} at (0,0) size 80x16 [bgcolor=#FFFF00] [border: (3px solid #999900)]
 43 RenderBlock {PROGRESS} at (73,2) size 160x17
 44 RenderProgress {DIV} at (0,0) size 160x16
 45 RenderBlock {DIV} at (0,0) size 160x16 [bgcolor=#808080]
 46 RenderBlock {DIV} at (0,0) size 80x16 [bgcolor=#FFFF00] [border: (3px solid #999900)]
4247 RenderListItem {LI} at (40,111) size 744x31
4348 RenderListMarker at (-18,11) size 7x19: bullet
4449 RenderText {#text} at (0,11) size 175x19
4550 text run at (0,11) width 175: "Styling for all three elements: "
46  RenderProgress {PROGRESS} at (175,-1) size 160x31 [bgcolor=#0000FF] [border: (3px solid #000066)]
47  RenderBlock {DIV} at (3,3) size 154x24 [bgcolor=#FF0000] [border: (3px solid #990000)]
48  RenderBlock {DIV} at (3,3) size 89x18 [bgcolor=#FFFF00] [border: (3px solid #999900)]
 51 RenderBlock {PROGRESS} at (175,-1) size 160x31 [bgcolor=#0000FF] [border: (3px solid #000066)]
 52 RenderProgress {DIV} at (3,3) size 154x24
 53 RenderBlock {DIV} at (0,0) size 154x24 [bgcolor=#FF0000] [border: (3px solid #990000)]
 54 RenderBlock {DIV} at (3,3) size 89x18 [bgcolor=#FFFF00] [border: (3px solid #999900)]
4955 RenderListItem {LI} at (40,142) size 744x20
5056 RenderListMarker at (-18,0) size 7x19: bullet
5157 RenderText {#text} at (0,0) size 215x19
5258 text run at (0,0) width 215: "Removing appearance dynamically: "
5359 RenderProgress {PROGRESS} at (215,2) size 160x17
54  RenderBlock {DIV} at (0,0) size 160x16 [bgcolor=#808080]
55  RenderBlock {DIV} at (0,0) size 112x16 [bgcolor=#008000]
 60 RenderProgress {DIV} at (0,0) size 160x16
 61 RenderBlock {DIV} at (0,0) size 160x16 [bgcolor=#808080]
 62 RenderBlock {DIV} at (0,0) size 112x16 [bgcolor=#008000]
5663 RenderListItem {LI} at (40,162) size 744x20
5764 RenderListMarker at (-18,0) size 7x19: bullet
5865 RenderText {#text} at (0,0) size 252x19
5966 text run at (0,0) width 252: "Giving progress style change dynamically: "
60  RenderProgress {PROGRESS} at (252,2) size 160x17 [bgcolor=#ADD8E6]
61  RenderBlock {DIV} at (0,0) size 160x16
62  RenderBlock {DIV} at (0,0) size 128x16 [bgcolor=#008000]
 67 RenderBlock {PROGRESS} at (252,2) size 160x17 [bgcolor=#ADD8E6]
 68 RenderProgress {DIV} at (0,0) size 160x16
 69 RenderBlock {DIV} at (0,0) size 160x16
 70 RenderBlock {DIV} at (0,0) size 128x16 [bgcolor=#008000]

LayoutTests/platform/chromium-win/fast/dom/HTMLProgressElement/progress-writing-mode-expected.txt

@@layer at (0,0) size 800x600
33layer at (0,0) size 800x600
44 RenderBlock {HTML} at (0,0) size 800x600
55 RenderBody {BODY} at (8,8) size 784x584
6  RenderProgress {PROGRESS} at (0,-1) size 50x51 [bgcolor=#FF0000]
7  RenderBlock {DIV} at (0,0) size 50x50 [bgcolor=#808080]
8  RenderBlock {DIV} at (0,0) size 15x50 [bgcolor=#008000]
 6 RenderBlock {PROGRESS} at (0,-1) size 50x51 [bgcolor=#FF0000]
 7 RenderProgress {DIV} at (0,0) size 50x50
 8 RenderBlock {DIV} at (0,0) size 50x50 [bgcolor=#808080]
 9 RenderBlock {DIV} at (0,0) size 15x50 [bgcolor=#008000]
910 RenderText {#text} at (50,31) size 4x19
1011 text run at (50,31) width 4: " "
11  RenderProgress {PROGRESS} at (54,-1) size 50x51 [bgcolor=#FF0000]
12  RenderBlock {DIV} at (0,0) size 50x50 [bgcolor=#808080]
13  RenderBlock {DIV} at (0,0) size 15x50 [bgcolor=#008000]
 12 RenderBlock {PROGRESS} at (54,-1) size 50x51 [bgcolor=#FF0000]
 13 RenderProgress {DIV} at (0,0) size 50x50
 14 RenderBlock {DIV} at (0,0) size 50x50 [bgcolor=#808080]
 15 RenderBlock {DIV} at (0,0) size 15x50 [bgcolor=#008000]
1416 RenderText {#text} at (104,31) size 4x19
1517 text run at (104,31) width 4: " "
16  RenderProgress {PROGRESS} at (108,-1) size 50x51 [bgcolor=#FF0000]
17  RenderBlock {DIV} at (0,0) size 50x50 [bgcolor=#808080]
18  RenderBlock {DIV} at (0,0) size 15x50 [bgcolor=#008000]
 18 RenderBlock {PROGRESS} at (108,-1) size 50x51 [bgcolor=#FF0000]
 19 RenderProgress {DIV} at (0,0) size 50x50
 20 RenderBlock {DIV} at (0,0) size 50x50 [bgcolor=#808080]
 21 RenderBlock {DIV} at (0,0) size 15x50 [bgcolor=#008000]
1922 RenderText {#text} at (158,31) size 4x19
2023 text run at (158,31) width 4: " "
21  RenderProgress {PROGRESS} at (162,-1) size 50x51 [bgcolor=#FF0000]
22  RenderBlock {DIV} at (0,0) size 50x50 [bgcolor=#808080]
23  RenderBlock {DIV} at (0,0) size 15x50 [bgcolor=#008000]
 24 RenderBlock {PROGRESS} at (162,-1) size 50x51 [bgcolor=#FF0000]
 25 RenderProgress {DIV} at (0,0) size 50x50
 26 RenderBlock {DIV} at (0,0) size 50x50 [bgcolor=#808080]
 27 RenderBlock {DIV} at (0,0) size 15x50 [bgcolor=#008000]
2428 RenderText {#text} at (0,0) size 0x0